CN-334 Detection--严重程度趋势图更改

1.x轴接口返回数据格式更改，安全事件和服务质量事件都需要更改
2.修复detection俩页面查询出数据后页面卡死问题
3.列表下拉内容假数据去掉，对接接口数据

src/utils/api.js

@@ -139,11 +139,11 @@ export async function getData (url, params = {}, isQueryList) {
           reject(response)
         }
       })
-    } catch (e) {
+    }catch(e) {
       reject(e)
     }
   }).catch(response => {
-    console.error(response)
+      console.error(response)
   })
   return await request
 }

src/utils/date-util.js

@@ -40,3 +40,8 @@ export function getNowTime (interval) {
     endTime
   }
 }
+//日期格式转换
+export function  rTime(date) {
+  let json_date = new Date(date).toJSON();
+  return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
+}

src/views/detections/Index.vue

@@ -14,9 +14,16 @@
     ></detection-search>
     <!-- 内容区 -->
     <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
-      <div class="detection__event-severity-bar" :id="`eventSeverityTrendBar${pageType}`">
+      <div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
-        <detection-no-data v-if="isEventSeverityNoData"></detection-no-data>
+        <i class="el-icon-loading"></i>
       </div>
+      <template v-if="isEventSeverityNoData">
+         <div class="no-data detection__event-severity-bar" >No data</div>
+      </template>
+      <template v-if="!isEventSeverityNoData">
+        <div class="detection__event-severity-bar"  :id="`eventSeverityTrendBar${pageType}`">
+        </div>
+      </template>
       <div style="display: flex; flex-grow: 1">
         <detection-filter
             :filter-data="filterData[pageType]"
@@ -31,25 +38,38 @@
               <div class="chart-header">
                 <div class="chart-header__title">{{$t('detection.severity')}}</div>
               </div>
-              <div class="chart-content" :id="`eventSeverityPie${pageType}`">
+              <template v-if="isStatisticsSeverityNoData">
-                <detection-no-data v-if="isStatisticsSeverityNoData"></detection-no-data>
+                <div class="no-data chart-content" >No data</div>
-              </div>
+              </template>
+              <template v-if="!isStatisticsSeverityNoData">
+                <div class="chart-content" :id="`eventSeverityPie${pageType}`">
+                </div>
+              </template>
+
             </div>
             <div class="statistics__category">
               <div class="chart-header">
                 <div class="chart-header__title">{{$t('detection.categoryProportion')}}</div>
               </div>
-              <div class="chart-content" :id="`detectionCategoryPer${pageType}`">
+              <template v-if="isStatisticsCategoryNoData">
-                <detection-no-data v-if="isStatisticsCategoryNoData"></detection-no-data>
+                <div class="no-data chart-content" >No data</div>
-              </div>
+              </template>
+              <template v-if="!isStatisticsCategoryNoData">
+                <div class="chart-content" :id="`detectionCategoryPer${pageType}`">
+                </div>
+              </template>
             </div>
             <div class="statistics__active-attack">
               <div class="chart-header">
                 <div class="chart-header__title">{{pageType === detectionPageType.securityEvent ? $t('detection.activeAttacker') : $t('detections.activeEntity')}}</div>
               </div>
-              <div class="chart-content" style="" :id="`detectionActiveAttacker${pageType}`">
+              <template v-if="isStatisticsActiveAttackNoData">
-                <detection-no-data v-if="isStatisticsActiveAttackNoData"></detection-no-data>
+                <div class="no-data chart-content" >No data</div>
-              </div>
+              </template>
+              <template v-if="!isStatisticsActiveAttackNoData">
+                <div class="chart-content" :id="`detectionActiveAttacker${pageType}`">
+                </div>
+              </template>
             </div>
           </div>
           <detection-list
@@ -87,7 +107,7 @@ import DetectionFilter from '@/views/detections/DetectionFilter'
 import DetectionList from '@/views/detections/DetectionList'
 import Pagination from '@/components/common/Pagination'
 import { defaultPageSize, detectionPageType } from '@/utils/constants'
-import { getNowTime, getSecond } from '@/utils/date-util'
+import { getNowTime, getSecond,rTime } from '@/utils/date-util'
 import { ref } from 'vue'
 import * as echarts from 'echarts'
 import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
@@ -193,24 +213,122 @@ export default {
       },
       listData: [],
       listLoading: false,
-      eventSeverityData: [],
       severityPerOption: null,
       severityPerData: [],
       categoryPerOption: null,
       categoryPerData: [],
       activeAttackOption: null,
       activeAttackData: [],
-      isEventSeverityNoData: true,
+      eventSeverityData:[],
-      isStatisticsSeverityNoData: true,
+      statisticsSeverityData:[],
-      isStatisticsCategoryNoData: true,
+      statisticsCategoryData:[],
-      isStatisticsActiveAttackNoData: true
+      statisticsActiveAttackData:[],
+      isEventSeverityNoData:false,
+      isStatisticsSeverityNoData:false,
+      isStatisticsCategoryNoData:false,
+      isStatisticsActiveAttackNoData:false,
+      loading: false,
     }
   },
   methods: {
     // 初始化顶部大柱状图
     initEventSeverityTrendData (params) {
+      this.loading = true
       getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
-        /* data = [
+        /*data = [
+          {
+            "stat_time": "2022-01-01T10:07:03.008Z",
+            "event_severity": "critical",
+            "count": 5
+          },
+          {
+            "stat_time": "2022-01-02T10:07:03.008Z",
+            "event_severity": "critical",
+            "count": 15
+          },{
+            "stat_time": "2022-01-03T10:07:03.008Z",
+            "event_severity": "critical",
+            "count": 25
+          },
+          {
+            "stat_time": "2022-01-04T10:07:03.008Z",
+            "event_severity": "critical",
+            "count": 7
+          },{
+            "stat_time": "2022-01-01T10:07:03.008Z",
+            "event_severity": "high",
+            "count": 8
+          },
+          {
+            "stat_time": "2022-01-02T10:07:03.008Z",
+            "event_severity": "high",
+            "count": 2
+          },{
+            "stat_time": "2022-01-03T10:07:03.008Z",
+            "event_severity": "high",
+            "count": 25
+          },
+          {
+            "stat_time": "2022-01-04T10:07:03.008Z",
+            "event_severity": "high",
+            "count": 7
+          },{
+            "stat_time": "2022-01-01T10:07:03.008Z",
+            "event_severity": "medium",
+            "count": 9
+          },
+          {
+            "stat_time": "2022-01-02T10:07:03.008Z",
+            "event_severity": "medium",
+            "count": 15
+          },{
+            "stat_time": "2022-01-03T10:07:03.008Z",
+            "event_severity": "medium",
+            "count": 35
+          },
+          {
+            "stat_time": "2022-01-04T10:07:03.008Z",
+            "event_severity": "medium",
+            "count": 7
+          },{
+            "stat_time": "2022-01-01T10:07:03.008Z",
+            "event_severity": "low",
+            "count": 5
+          },
+          {
+            "stat_time": "2022-01-02T10:07:03.008Z",
+            "event_severity": "low",
+            "count": 1
+          },{
+            "stat_time": "2022-01-03T10:07:03.008Z",
+            "event_severity": "low",
+            "count": 25
+          },
+          {
+            "stat_time": "2022-01-04T10:07:03.008Z",
+            "event_severity": "low",
+            "count": 17
+          },{
+            "stat_time": "2022-01-01T10:07:03.008Z",
+            "event_severity": "info",
+            "count": 5
+          },
+          {
+            "stat_time": "2022-01-02T10:07:03.008Z",
+            "event_severity": "info",
+            "count": 15
+          },{
+            "stat_time": "2022-01-03T10:07:03.008Z",
+            "event_severity": "info",
+            "count": 25
+          },
+          {
+            "stat_time": "2022-01-04T10:07:03.008Z",
+            "event_severity": "info",
+            "count": 27
+          },
+        ]*/
+        /*data2 = [
           {
             legend: 'critical',
             values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']]
@@ -228,28 +346,43 @@ export default {
             legend: 'info',
             values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']]
           }
-        ] */
+        ]*/
+        this.eventSeverityData = data
         if (!this.$_.isEmpty(data)) {
-          const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
+          let dataMap = new Map()
-          const detectionChart = echarts.init(chartDom)
-          const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
           data.forEach(item => {
-            eventSeverityTrendOption.series[Number(getSeriesIndex(item.legend))].data = item.values.map(v => Number(v[1]))
+            if(item.eventSeverity){
+              if(!dataMap.has(item.eventSeverity)){
+                let count = [[item.statTime,item.count]]
+                dataMap.set(item.eventSeverity,count)
+              }else {
+                dataMap.get(item.eventSeverity).push([item.statTime,item.count])
+              }
+            }
           })
-          eventSeverityTrendOption.xAxis.data = data[0].values.map(v => [window.$dayJs.tz(Number(v[0])).format('YYYY-MM-DD HH:mm:ss')])
+          const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
-          this.$nextTick(() => {
+          const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
-            detectionChart.setOption(eventSeverityTrendOption)
+          dataMap.forEach(function(value,key){
-          })
+            eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
-          this.isEventSeverityNoData = false
+          });
+          eventSeverityTrendOption.xAxis.data = dataMap.get('critical').map(v =>rTime(v[0]))
+          const detectionChart = echarts.init(chartDom)
+          detectionChart.setOption(eventSeverityTrendOption)
+          //this.isEventSeverityNoData = false
+
+          this.loading = false
+        }else {
+          //this.isEventSeverityNoData = true
         }
       }).catch(error => {
 
       })
     },
+
     // 初始化左侧事件严重等级和小饼图
     initEventSeverityData (params) {
       getData(api.detection[this.pageType].eventSeverity, params).then(data => {
-        /* data = [
+        /*data = [
           {
             eventSeverity: 'critical',
             count: 1048
@@ -266,7 +399,85 @@ export default {
             eventSeverity: 'info',
             count: 300
           }
-        ] */
+        ]*/
+        this.statisticsSeverityData = data
+        //this.isStatisticsSeverityNoData = true
+        this.filterData = {
+          securityEvent: [
+            {
+              title: this.$t('detections.eventSeverity'),
+              column: 'eventSeverity',
+              collapse: false,
+              value: [], // value之间是or的关系
+              data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
+            },
+            {
+              title: this.$t('detections.securityType'),
+              column: 'securityType',
+              collapse: false,
+              value: [],
+              data: [] // 从接口动态获取
+            },
+            {
+              title: this.$t('detections.victimIp'),
+              column: 'victimIp',
+              collapse: false,
+              value: [],
+              showMore: true,
+              showIndex: 9,
+              data: [] // 从接口动态获取
+            },
+            {
+              title: this.$t('detections.victimLocation'),
+              column: 'victimLocationCountry',
+              collapse: false,
+              value: [],
+              showMore: false,
+              showIndex: 9,
+              data: [
+                {
+                  label: 'China',
+                  value: 'china',
+                  count: 50
+                }
+              ] // 从接口动态获取
+            },
+            {
+              title: this.$t('detections.offenderIp'),
+              column: 'offenderIp',
+              collapse: false,
+              value: [],
+              showMore: false,
+              showIndex: 9,
+              data: [] // 从接口动态获取
+            },
+            {
+              title: this.$t('detections.offenderLocation'),
+              column: 'offenderLocationCountry',
+              collapse: false,
+              value: [],
+              showMore: false,
+              showIndex: 9,
+              data: [] // 从接口动态获取
+            }
+          ],
+          performanceEvent: [
+            {
+              title: this.$t('detections.eventSeverity'),
+              column: 'eventSeverity',
+              collapse: false,
+              value: [], // value之间是or的关系
+              data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
+            },
+            {
+              title: this.$t('detections.securityType'),
+              column: 'securityType',
+              collapse: false,
+              value: [],
+              data: [] // 从接口动态获取
+            }
+          ]
+        }
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][0].data = data.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
           const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
@@ -276,7 +487,7 @@ export default {
           const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
           detectionChart.setOption(eventSeverityOption)
-          this.isStatisticsSeverityNoData = false
+          //this.isStatisticsSeverityNoData = false
         }
       }).catch(error => {
 
@@ -284,7 +495,7 @@ export default {
     },
     initSecurityTypeData (params) {
       getData(api.detection[this.pageType].securityType, params).then(data => {
-        /* data = [
+        /*data = [
           {
             attackType: 'command and control',
             count: 1048
@@ -304,7 +515,9 @@ export default {
             attackType: 'ddos',
             count: 50
           }
-        ] */
+        ]*/
+        this.statisticsCategoryData = data
+        //this.isStatisticsCategoryNoData = true
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][1].data = data.map(r => ({
             label: r.attackType,
@@ -315,10 +528,10 @@ export default {
           const detectionChart = echarts.init(chartDom)
           const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
           securityTypeOption.series[0].data = data.map(d => {
-            return { value: d.count, name: d.attackType, itemStyle: { color: getAttackColor(d.attackType) } }
+            return {value: d.count, name: d.attackType, itemStyle: {color: getAttackColor(d.attackType)}}
           })
           detectionChart.setOption(securityTypeOption)
-          this.isStatisticsCategoryNoData = false
+          //this.isStatisticsCategoryNoData = false
         }
       }).catch(error => {
 
@@ -326,7 +539,7 @@ export default {
     },
     initOffenderIpData (params) {
       getData(api.detection[this.pageType].offenderIp, params).then(data => {
-        /* data = [
+        /*data = [
           {
             offenderIp: '192.168.12.21',
             count: 99999
@@ -375,40 +588,42 @@ export default {
             offenderIp: '193.168.52.21',
             count: 55355
           }
-        ] */
+        ]*/
+
+        this.statisticsActiveAttackData = data
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][4].data = data.map(r => ({
             label: r.offenderIp,
             value: r.offenderIp,
             count: r.count
           }))
-          const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][4].data)
+          const {showMore, showIndex} = this.computeFilterPage(this.filterData[this.pageType][4].data)
           this.filterData[this.pageType][4].showMore = showMore
           this.filterData[this.pageType][4].showIndex = showIndex
 
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
           const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
-          data.sort(this.sortBy('count'))
+          data.sort(this.sortBy('count'));
-          data = data.slice(0, 5)
+          data = data.slice(0,5)
           offenderIpOption.series[0].data = data.map(d => {
             return [d.count, d.offenderIp]
           }).reverse()
           detectionChart.setOption(offenderIpOption)
-          this.isStatisticsActiveAttackNoData = false
+          //this.isStatisticsActiveAttackNoData = false
         }
       }).catch(error => {
 
       })
     },
-    sortBy (i) {
+    sortBy(i) {
-      return function (a, b) {
+      return function(a,b) {
         return b[i] - a[i]
       }
     },
     initVictimIpData (params) {
       getData(api.detection[this.pageType].victimIp, params).then(data => {
-        /* data = [
+        /*data = [
           {
             victimIp: '1.2.6.8',
             count: 50
@@ -493,7 +708,7 @@ export default {
             victimIp: '1.2.6.88',
             count: 50
           }
-        ] */
+        ]*/
         this.filterData[this.pageType][2].data = data.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
         const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][2].data)
         this.filterData[this.pageType][2].showMore = showMore
@@ -504,12 +719,12 @@ export default {
     },
     initVictimLocationData (params) {
       getData(api.detection[this.pageType].victimLocation, params).then(data => {
-        /* data = [
+        /*data = [
           {
             victimLocationCountry: 'china',
             count: 50
           }
-        ] */
+        ]*/
         this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
         const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data)
         this.filterData[this.pageType][3].showMore = showMore
@@ -520,12 +735,12 @@ export default {
     },
     initOffenderLocationData (params) {
       getData(api.detection[this.pageType].offenderLocation, params).then(data => {
-        /* data = [
+        /*data = [
           {
             offenderLocationCountry: 'china',
             count: 50
           }
-        ] */
+        ]*/
         this.filterData[this.pageType][5].data = data.map(r => ({ label: r.offenderLocationCountry, value: r.offenderLocationCountry, count: r.count }))
         const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][5].data)
         this.filterData[this.pageType][5].showMore = showMore
@@ -536,7 +751,7 @@ export default {
     },
     initActiveEntity (params) {
       getData(api.detection[this.pageType].activeEntity, params).then(data => {
-        /* data = [
+        /*data = [
           {
             name: 'csdn.net',
             count: 250
@@ -549,16 +764,18 @@ export default {
             name: '2.3.2.2',
             count: 50
           }
-        ] */
+        ]*/
-        const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
+        this.statisticsActiveAttackData = data
-        const detectionChart = echarts.init(chartDom)
+        if (!this.$_.isEmpty(data)) {
-        const option = this.$_.cloneDeep(activeAttackBar)
+          const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
-        option.series[0].data = data.map(d => {
+          const detectionChart = echarts.init(chartDom)
-          return [d.count, d.name]
+          const option = this.$_.cloneDeep(activeAttackBar)
-        }).reverse()
+          option.series[0].data = data.map(d => {
-        detectionChart.setOption(option)
+            return [d.count, d.name]
+          }).reverse()
+          detectionChart.setOption(option)
+        }
       }).catch(error => {
-
       })
     },
     computeFilterPage (data) {
@@ -575,7 +792,7 @@ export default {
       }
       getData(api.detection[this.pageType].listBasic, params).then(data => {
         if (this.pageType === detectionPageType.securityEvent) {
-          /* data = [
+          /*data = [
             {
               eventId: 1212,
               securityType: 'ddos',
@@ -736,9 +953,9 @@ export default {
               durationMs: 60000,
               startTime: 1111111111
             }
-          ] */
+          ]*/
         } else if (this.pageType === detectionPageType.performanceEvent) {
-          /* data = [
+          /*data = [
             {
               entityType: 'ip',
               eventType: 'Dns error',
@@ -867,7 +1084,7 @@ export default {
               durationMs: 60000,
               startTime: 1111111111
             }
-          ] */
+          ]*/
         }
 
         this.listData = data
@@ -876,12 +1093,20 @@ export default {
       })
     },
     timeRefreshChange () {
+      this.initNoData()
       if (!this.$refs.dateTimeRange.isCustom) {
         const value = this.timeFilter.dateRangeValue
         this.$refs.dateTimeRange.quickChange(value)
       }
     },
+    initNoData(){
+      this.isEventSeverityNoData = false
+      this.isStatisticsSeverityNoData = false
+      this.isStatisticsCategoryNoData = false
+      this.isStatisticsActiveAttackNoData = false
+    },
     reload (s, e, v) {
+      this.initNoData()
       this.dateTimeRangeChange(s, e, v)
     },
     // methods
@@ -889,6 +1114,7 @@ export default {
       this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
     },
     search (metaList, formatSql) {
+      this.initNoData()
       if (formatSql) {
         this.q = formatSql
         this.metaList = metaList
@@ -961,6 +1187,68 @@ export default {
     this.queryList()
   },
   watch: {
+    eventSeverityData: {
+      deep: true,
+      handler (n) {
+        if (!n || n.length === 0) {
+          this.timeout = setTimeout(() => {
+            this.isEventSeverityNoData = true
+            //this.$set(this.isEventSeverityNoData ,true)
+            this.loading = false
+          }, 500)
+        } else {
+          clearTimeout(this.timeout)
+          //this.$set(this.isEventSeverityNoData ,false)
+          this.isEventSeverityNoData = false
+          this.loading = false
+        }
+      }
+    },
+    statisticsSeverityData: {
+      deep: true,
+      handler (n) {
+        if (!n || n.length === 0) {
+          this.timeout = setTimeout(() => {
+            //this.$set(this.isStatisticsSeverityNoData ,true)
+            this.isStatisticsSeverityNoData = true
+          }, 500)
+        } else {
+          clearTimeout(this.timeout)
+          //this.$set(this.isStatisticsSeverityNoData ,false)
+          this.isStatisticsSeverityNoData = false
+        }
+      }
+    },
+    statisticsCategoryData: {
+      deep: true,
+      handler (n) {
+        if (!n || n.length === 0) {
+          this.timeout = setTimeout(() => {
+            this.isStatisticsCategoryNoData = true
+            //this.$set(this.isStatisticsCategoryNoData ,true)
+          }, 500)
+        } else {
+          clearTimeout(this.timeout)
+          //this.$set(this.isStatisticsCategoryNoData ,false)
+          this.isStatisticsCategoryNoData = false
+        }
+      }
+    },
+    statisticsActiveAttackData: {
+      deep: true,
+      handler (n) {
+        if (!n || n.length === 0) {
+          this.timeout = setTimeout(() => {
+            this.isStatisticsActiveAttackNoData = true
+            //this.$set(this.isStatisticsActiveAttackNoData ,true)
+          }, 500)
+        } else {
+          clearTimeout(this.timeout)
+          //this.$set(this.isStatisticsActiveAttackNoData ,false)
+          this.isStatisticsActiveAttackNoData = false
+        }
+      }
+    },
     timeFilter (n) {
       this.search(this.metaList, this.q)
     },
@@ -1016,7 +1304,6 @@ export default {
   setup () {
     const { params } = useRoute()
     const pageType = params.typeName
-
     const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const timeFilter = ref({ startTime, endTime, dateRangeValue })

src/views/detections/overview/DetectionPerformanceEventAppOverview.vue

@@ -75,31 +75,17 @@ export default {
   methods: {
     query () {
       this.basicInfo = {
-        clientLocationCountry: 1212,
-        clientLocationProvince: '112.2.2.3',
-        clientLocationRegion: 'China',
-        clientAsn: 'Hebei',
-        serverLocationCountry: 'Xingtai',
-        serverLocationProvince: 'hehe',
-        serverLocationRegion: '2.2.2.2',
-        serverAsn: 'China',
-        domainCategoryName: 'Hebei',
-        domainCategoryGroup: 'Xingtai',
-        domainReputationScore: 'hehe',
-        domainReputationLevel: 'high',
-        appCategory: 'vpn',
-        appSubcategory: 'foreign vpn',
-        appRisk: 'critical'
       }
-      /* this.queryBasic().then(responses => {
+      this.queryBasic().then(responses => {
-      }) */
+      })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
           get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
             if (response.code === 200) {
-              resolve(response.data.list)
+              this.basicInfo = response.data.result[0]
+              resolve(response.data.result)
             } else {
               reject(response)
             }

src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue

@@ -79,31 +79,17 @@ export default {
   methods: {
     query () {
       this.basicInfo = {
-        clientLocationCountry: 1212,
-        clientLocationProvince: '112.2.2.3',
-        clientLocationRegion: 'China',
-        clientAsn: 'Hebei',
-        serverLocationCountry: 'Xingtai',
-        serverLocationProvince: 'hehe',
-        serverLocationRegion: '2.2.2.2',
-        serverAsn: 'China',
-        domainCategoryName: 'Hebei',
-        domainCategoryGroup: 'Xingtai',
-        domainReputationScore: 'hehe',
-        domainReputationLevel: 'high',
-        appCategory: 'vpn',
-        appSubcategory: 'foreign vpn',
-        appRisk: 'critical'
       }
-      /* this.queryBasic().then(responses => {
+      this.queryBasic().then(responses => {
-      }) */
+      })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
           get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
             if (response.code === 200) {
-              resolve(response.data.list)
+              this.basicInfo = response.data.result[0]
+              resolve(response.data.result)
             } else {
               reject(response)
             }

src/views/detections/overview/DetectionPerformanceEventIpOverview.vue

@@ -66,29 +66,15 @@ export default {
   methods: {
     query () {
       this.basicInfo = {
-        clientLocationCountry: 1212,
-        clientLocationProvince: '112.2.2.3',
-        clientLocationRegion: 'China',
-        clientAsn: 'Hebei',
-        serverLocationCountry: 'Xingtai',
-        serverLocationProvince: 'hehe',
-        serverLocationRegion: '2.2.2.2',
-        serverAsn: 'China',
-        domainCategoryName: 'Hebei',
-        domainCategoryGroup: 'Xingtai',
-        domainReputationScore: 'hehe',
-        domainReputationLevel: 'high',
-        appCategory: 'vpn',
-        appSubcategory: 'foreign vpn',
-        appRisk: 'critical'
       }
-      /* this.queryBasic().then(responses => {
+      this.queryBasic().then(responses => {
-      }) */
+      })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
           getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp }).then(data => {
+            this.basicInfo = data[0]
             resolve(data)
           }).catch(error => {
             reject(error)

src/views/detections/overview/DetectionSecurityEventOverview.vue

@@ -179,107 +179,8 @@ export default {
     getMillisecond,
     query () {
       this.basicInfo = {
-        eventId: 1212,
-        offenderIp: '112.2.2.3',
-        offenderLocationCountry: 'China',
-        offenderLocationProvince: 'Hebei',
-        offenderLocationRegion: 'Xingtai',
-        offenderAsn: 'hehe',
-        victimIp: '2.2.2.2',
-        victimLocationCountry: 'China',
-        victimLocationProvince: 'Hebei',
-        victimLocationRegion: 'Xingtai',
-        victimAsn: 'hehe',
-        domain: '5aibj.com',
-        domainCategoryName: 'bbs',
-        domainCategoryGroup: 'hehe',
-        domainReputationLevel: 'high',
-        appName: 'express vpn',
-        appCategory: 'vpn',
-        appSubcategory: 'foreign vpn',
-        appRisk: 'critical',
-        cryptominingPool: 'btcP',
-        cryptominingCoinType: 'btc',
-        cryptominingSoftware: 'a',
-        malwareName: 'gtw',
-        malwareAlias: 'gt',
-        malwareDescription: 'this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,this is description,',
-        malwarePlatforms: 'windows',
-        malwareTechniques: 'Audio captures',
-        malwareGroups: 'Silver terrier',
-        startTime: 1645417930
       }
       this.events = [
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645307930
-        },
-        {
-          eventSeverity: 'critical',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '112.2.2.3',
-          startTime: 1645317930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645327930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645337930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645347930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645357930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645367930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645397930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645407930
-        },
-        {
-          eventSeverity: 'high',
-          securityType: 'command and control',
-          offenderIp: '2.2.2.2',
-          victimIp: '2.2.2.3',
-          startTime: 1645417930
-        }
       ]
       Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
       })
@@ -287,9 +188,13 @@ export default {
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
-          get(api.detectionOverviewBasic, { eventId: this.detection.eventId }).then(response => {
+          get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId }).then(response => {
             if (response.code === 200) {
-              resolve(response.data.list)
+              let data = response.data.result[0]
+                    if (!this.$_.isEmpty(data)) {
+                this.basicInfo = data
+              }
+              resolve(response.data.result)
             } else {
               reject(response)
             }
@@ -302,9 +207,13 @@ export default {
     queryEvent () {
       return new Promise((resolve, reject) => {
         try {
-          get(api.detectionOverviewEvent, { eventId: this.detection.eventId }).then(response => {
+          get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId }).then(response => {
             if (response.code === 200) {
-              resolve(response.data.list)
+              let data = response.data.result
+              if (!this.$_.isEmpty(data)) {
+                this.events = response.data.result
+              }
+              resolve(response.data.result)
             } else {
               reject(response)
             }