CN-431 feat: detection图表点击执行搜索

2022-03-30 15:37:55 +08:00
parent 1ede2ba779
commit 20f4ae02d3
12 changed files with 598 additions and 1136 deletions
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -45,9 +45,6 @@ export default {
    }
  },
  methods: {
-    /* filterChange (value, filter) {
-      this.$emit('filter', filter.column)
-    }, */
    showMore (filter) {
      filter.showIndex && (filter.showIndex += 10)
      filter.showIndex >= (filter.data.length - 1) && (filter.showMore = false)
--- a/src/views/detections/DetectionSearch.vue
+++ b/src/views/detections/DetectionSearch.vue
@@ -141,6 +141,9 @@ export default {
        }
        this.$refs.search.changeParams([{ newParam, oldParam }])
      }
+      this.$nextTick(() => {
+        this.emitter.emit('advanced-search')
+      })
    }
  }
 }
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -29,7 +29,6 @@
            :filter-data="filterData[pageType]"
            :q="q"
            :time-filter="timeFilter"
-            @filter="filter"
        ></detection-filter>

        <div class="detection__list">
@@ -41,7 +40,7 @@
              <template v-if="isStatisticsSeverityNoData">
                <div class="no-data chart-content" >No data</div>
              </template>
-              <template v-if="!isStatisticsSeverityNoData">
+              <template v-else>
                <div class="chart-content" :id="`eventSeverityPie${pageType}`">
                </div>
              </template>
@@ -54,7 +53,7 @@
              <template v-if="isStatisticsCategoryNoData">
                <div class="no-data chart-content" >No data</div>
              </template>
-              <template v-if="!isStatisticsCategoryNoData">
+              <template v-else>
                <div class="chart-content" :id="`detectionCategoryPer${pageType}`">
                </div>
              </template>
@@ -66,7 +65,7 @@
              <template v-if="isStatisticsActiveAttackNoData">
                <div class="no-data chart-content" >No data</div>
              </template>
-              <template v-if="!isStatisticsActiveAttackNoData">
+              <template v-else>
                <div class="chart-content" style="padding-left: 5px;" :id="`detectionActiveAttacker${pageType}`">
                </div>
              </template>
@@ -237,99 +236,6 @@ export default {
    initEventSeverityTrendData (params) {
      this.loading = true
      getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
-        /* data = [
-          {
-            "statTime": "2022-01-01T10:07:03.008Z",
-            "eventSeverity": "critical",
-            "count": 5
-          },
-          {
-            "statTime": "2022-01-02T10:07:03.008Z",
-            "eventSeverity": "critical",
-            "count": 15
-          },{
-            "statTime": "2022-01-03T10:07:03.008Z",
-            "eventSeverity": "critical",
-            "count": 25
-          },
-          {
-            "statTime": "2022-01-04T10:07:03.008Z",
-            "eventSeverity": "critical",
-            "count": 7
-          },{
-            "statTime": "2022-01-01T10:07:03.008Z",
-            "eventSeverity": "high",
-            "count": 8
-          },
-          {
-            "statTime": "2022-01-02T10:07:03.008Z",
-            "eventSeverity": "high",
-            "count": 2
-          },{
-            "statTime": "2022-01-03T10:07:03.008Z",
-            "eventSeverity": "high",
-            "count": 25
-          },
-          {
-            "statTime": "2022-01-04T10:07:03.008Z",
-            "eventSeverity": "high",
-            "count": 7
-          },{
-            "statTime": "2022-01-01T10:07:03.008Z",
-            "eventSeverity": "medium",
-            "count": 9
-          },
-          {
-            "statTime": "2022-01-02T10:07:03.008Z",
-            "eventSeverity": "medium",
-            "count": 15
-          },{
-            "statTime": "2022-01-03T10:07:03.008Z",
-            "eventSeverity": "medium",
-            "count": 35
-          },
-          {
-            "statTime": "2022-01-04T10:07:03.008Z",
-            "eventSeverity": "medium",
-            "count": 7
-          },{
-            "statTime": "2022-01-01T10:07:03.008Z",
-            "eventSeverity": "low",
-            "count": 5
-          },
-          {
-            "statTime": "2022-01-02T10:07:03.008Z",
-            "eventSeverity": "low",
-            "count": 1
-          },{
-            "statTime": "2022-01-03T10:07:03.008Z",
-            "eventSeverity": "low",
-            "count": 25
-          },
-          {
-            "statTime": "2022-01-04T10:07:03.008Z",
-            "eventSeverity": "low",
-            "count": 17
-          },{
-            "statTime": "2022-01-01T10:07:03.008Z",
-            "eventSeverity": "info",
-            "count": 5
-          },
-          {
-            "statTime": "2022-01-02T10:07:03.008Z",
-            "eventSeverity": "info",
-            "count": 15
-          },{
-            "statTime": "2022-01-03T10:07:03.008Z",
-            "eventSeverity": "info",
-            "count": 25
-          },
-          {
-            "statTime": "2022-01-04T10:07:03.008Z",
-            "eventSeverity": "info",
-            "count": 27
-          },
-        ] */
        this.eventSeverityData = data
        if (!this.$_.isEmpty(data)) {
          const dataMap = new Map()
@@ -396,26 +302,7 @@ export default {
    // 初始化左侧事件严重等级和小饼图
    initEventSeverityData (params) {
      getData(api.detection[this.pageType].eventSeverity, params).then(data => {
-        /* data = [
-          {
-            eventSeverity: 'critical',
-            count: 1048
-          }, {
-            eventSeverity: 'high',
-            count: 735
-          }, {
-            eventSeverity: 'medium',
-            count: 580
-          }, {
-            eventSeverity: 'low',
-            count: 484
-          }, {
-            eventSeverity: 'info',
-            count: 300
-          }
-        ] */
        this.statisticsSeverityData = data
-        // this.isStatisticsSeverityNoData = true
        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)
@@ -425,7 +312,16 @@ export default {
          const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
          const detectionChart = echarts.init(chartDom)
          detectionChart.setOption(eventSeverityOption)
-          // this.isStatisticsSeverityNoData = false
+
+          const vm = this
+          detectionChart.off('click')
+          detectionChart.on('click', e => {
+            if (this.pageType === 'performanceEvent') {
+              vm.filterData.performanceEvent[0].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[0].value, e.data.name)
+            } else if (this.pageType === 'securityEvent') {
+              vm.filterData.securityEvent[0].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[0].value, e.data.name)
+            }
+          })
        }
      }).catch(error => {

@@ -447,6 +343,12 @@ export default {
            return { value: d.count, name: d.eventType }
          })
          detectionChart.setOption(securityTypeOption)
+
+          const vm = this
+          detectionChart.off('click')
+          detectionChart.on('click', e => {
+            vm.filterData.performanceEvent[1].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[1].value, e.data.name)
+          })
        }
      }).catch(error => {

@@ -468,6 +370,12 @@ export default {
            return { value: d.count, name: d.securityType, itemStyle: { color: getAttackColor(d.securityType) } }
          })
          detectionChart.setOption(securityTypeOption)
+
+          const vm = this
+          detectionChart.off('click')
+          detectionChart.on('click', e => {
+            vm.filterData.securityEvent[1].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[1].value, e.data.name)
+          })
        }
      }).catch(error => {

@@ -475,57 +383,6 @@ export default {
    },
    initOffenderIpData (params) {
      getData(api.detection[this.pageType].offenderIp, params).then(data => {
-        /* data = [
-          {
-            offenderIp: '192.168.12.21',
-            count: 99999
-          }, {
-            offenderIp: '193.168.22.21',
-            count: 88888
-          }, {
-            offenderIp: '194.168.32.21',
-            count: 77777
-          }, {
-            offenderIp: '195.168.42.21',
-            count: 66666
-          }, {
-            offenderIp: '196.168.52.21',
-            count: 55555
-          },
-          {
-            offenderIp: '192.168.12.21',
-            count: 44444
-          }, {
-            offenderIp: '192.168.22.21',
-            count: 98888
-          }, {
-            offenderIp: '192.168.32.21',
-            count: 97777
-          }, {
-            offenderIp: '192.168.42.21',
-            count: 96666
-          }, {
-            offenderIp: '192.168.52.21',
-            count: 55555
-          },
-          {
-            offenderIp: '193.168.12.21',
-            count: 91999
-          }, {
-            offenderIp: '193.168.22.21',
-            count: 88688
-          }, {
-            offenderIp: '193.168.32.21',
-            count: 77747
-          }, {
-            offenderIp: '193.168.42.21',
-            count: 66666
-          }, {
-            offenderIp: '193.168.52.21',
-            count: 55355
-          }
-        ] */
-
        this.statisticsActiveAttackData = data
        if (!this.$_.isEmpty(data)) {
          this.filterData[this.pageType][4].data = data.map(r => ({
@@ -546,7 +403,12 @@ export default {
            return [d.count, d.offenderIp]
          }).reverse()
          detectionChart.setOption(offenderIpOption)
-          // this.isStatisticsActiveAttackNoData = false
+
+          const vm = this
+          detectionChart.off('click')
+          detectionChart.on('click', e => {
+            vm.filterData.securityEvent[4].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[4].value, e.data[1])
+          })
        }
      }).catch(error => {

@@ -555,92 +417,6 @@ export default {

    initVictimIpData (params) {
      getData(api.detection[this.pageType].victimIp, params).then(data => {
-        /* data = [
-          {
-            victimIp: '1.2.6.8',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.9',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.0',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.1',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.2',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.3',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.4',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.5',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.6',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.7',
-            count: 50
-          },
-          {
-            victimIp: '1.2.7.8',
-            count: 50
-          },
-          {
-            victimIp: '1.2.8.8',
-            count: 50
-          },
-          {
-            victimIp: '1.2.9.8',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.18',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.28',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.38',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.48',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.58',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.68',
-            count: 50
-          },
-          {
-            victimIp: '1.2.6.78',
-            count: 50
-          },
-          {
-            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
@@ -651,12 +427,6 @@ export default {
    },
    initVictimLocationData (params) {
      getData(api.detection[this.pageType].victimLocation, params).then(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
@@ -667,12 +437,6 @@ export default {
    },
    initOffenderLocationData (params) {
      getData(api.detection[this.pageType].offenderLocation, params).then(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
@@ -683,20 +447,6 @@ export default {
    },
    initActiveEntity (params) {
      getData(api.detection[this.pageType].activeEntity, params).then(data => {
-        /* data = [
-          {
-            name: 'csdn.net',
-            count: 250
-          },
-          {
-            name: 'duokan',
-            count: 150
-          },
-          {
-            name: '2.3.2.2',
-            count: 50
-          }
-        ] */
        this.statisticsActiveAttackData = data
        if (!this.$_.isEmpty(data)) {
          const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
@@ -710,11 +460,26 @@ export default {
          }).reverse()
          detectionChart.setOption(option)
          extensionEchartY(detectionChart)// y轴标签过长时，鼠标悬浮，显示所有内容
+
+          const vm = this
+          detectionChart.off('click')
+          detectionChart.on('click', e => {
+            vm.filterData.performanceEvent[0].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[0].value, e.data[1])
+          })
        }
      }).catch(error => {
      })
    },
-
+    triggerFilterDataValue (array, value) {
+      const r = [...array]
+      const index = array.indexOf(value)
+      if (index > -1) {
+        r.splice(index, 1)
+      } else {
+        r.push(value)
+      }
+      return r
+    },
    computeFilterPage (data) {
      return {
        showMore: data.length > 10,
@@ -730,302 +495,6 @@ export default {
        pageNo: this.pageObj.pageNo
      }
      getData(api.detection[this.pageType].listBasic, params).then(data => {
-        if (this.pageType === detectionPageType.securityEvent) {
-          /* data = [
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'critical',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 978456923589
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'high',
-              cryptominingPool: 'a',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'low',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'medium',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              cryptominingPool: 'a',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              malwareName: 'the great wall',
-              durationMs: 600000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              cryptominingPool: 'a',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              cryptominingPool: 'a',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              cryptominingPool: 'a',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              malwareName: 'the great wall',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              cryptominingPool: 'a',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              eventId: 1212,
-              securityType: 'ddos',
-              offenderIp: '1.1.1.1',
-              victimIp: '2.2.2.2',
-              eventSecurity: 'info',
-              cryptominingPool: 'a',
-              durationMs: 60000,
-              startTime: 1111111111
-            }
-          ] */
-        } else if (this.pageType === detectionPageType.performanceEvent) {
-          /* data = [
-            {
-              entityType: 'ip',
-              eventType: 'Dns error',
-              serverIp: '2.2.2.2',
-              eventSecurity: 'critical',
-              durationMs: 60000,
-              startTime: 978456923589
-            },
-            {
-              entityType: 'ip',
-              eventType: 'ddos',
-              serverIp: '2.2.2.2',
-              eventSecurity: 'high',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'ip',
-              eventType: 'ddos',
-              serverIp: '2.2.2.2',
-              eventSecurity: 'low',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'domain',
-              eventType: 'ddos',
-              domain: 'csdn.net',
-              eventSecurity: 'medium',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'domain',
-              eventType: 'ddos',
-              domain: 'amazon.com',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'domain',
-              eventType: 'ddos',
-              domain: 'qiniu.com',
-              eventSecurity: 'info',
-              durationMs: 600000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            },
-            {
-              entityType: 'app',
-              eventType: 'ddos',
-              appName: 'Samsung',
-              eventSecurity: 'info',
-              durationMs: 60000,
-              startTime: 1111111111
-            }
-          ] */
-        }
-
        this.listData = data
      }).catch(error => {

@@ -1102,13 +571,6 @@ export default {
        this.initEventTypeData(params)
      }
    },
-    filter (filterColumn) {
-      const params = {}
-      params[filterColumn] = this.filterData[this.pageType].find(f => {
-        return f.column === filterColumn
-      }).value
-      this.$refs.search.changeParams(params)
-    },
    pageSize (val) {
      this.pageObj.pageSize = val || 20
      this.search(this.metaList, this.q)
@@ -1211,6 +673,7 @@ export default {
    'filterData.securityEvent.0.value': {
      deep: true,
      handler (n, o) {
+        console.info(n, o)
        this.$refs.search.changeParams({ column: this.filterData.securityEvent[0].column, oldValue: o, newValue: n })
      }
    },
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -289,11 +289,11 @@ export const activeAttackBar = {
 }
 export const metricOption = {
  tooltip: {
-    show:true,
+    show: true,
    trigger: 'axis',
-    formatter(params){
+    formatter (params) {
      let str = '<div>'
-      let item = params[0]
+      const item = params[0]
      const tData = item.data[0]
      str += '<div style="margin-bottom: 5px">'
      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
@@ -303,7 +303,7 @@ export const metricOption = {
      str += `<span class="cn-chart-tooltip-content"> 
      ${item.seriesName}
      </span>`
-          str += `<span class="cn-chart-tooltip-value">
+      str += `<span class="cn-chart-tooltip-value">
          ${unitConvert(item.data[1], item.data[2]).join(' ')}
      </span>`
      str += '</div>'
@@ -336,44 +336,44 @@ export const metricOption = {
    show: false
  },
  series: [
-      {
-        name:'metric',
-        type: 'line',
-        legendHoverLink: false,
-        lineStyle: {
-          width: 1,
-          type:'dashed'
-        },
-        color: '#ec836c',
-        data: [],
-        showSymbol: false
+    {
+      name: 'metric',
+      type: 'line',
+      legendHoverLink: false,
+      lineStyle: {
+        width: 1,
+        type: 'dashed'
      },
-      {
-        name:'metric',
-        type: 'line',
-        legendHoverLink: false,
-        lineStyle: {
-          width: 1,
-          type:'solid'
-        },
-        areaStyle: {
-          color: 'rgba(244, 187, 174, 0.59)'
-        },
-        color: '#ec836c',
-        data: [],
-        showSymbol: false
+      color: '#ec836c',
+      data: [],
+      showSymbol: false
+    },
+    {
+      name: 'metric',
+      type: 'line',
+      legendHoverLink: false,
+      lineStyle: {
+        width: 1,
+        type: 'solid'
      },
-      {
-        name:'metric',
-        type: 'line',
-        legendHoverLink: false,
-        lineStyle: {
-          width: 1,
-          type:'dashed'
-        },
-        color: '#ec836c',
-        data: [],
-        showSymbol: false
-      }
-   ]
+      areaStyle: {
+        color: 'rgba(244, 187, 174, 0.59)'
+      },
+      color: '#ec836c',
+      data: [],
+      showSymbol: false
+    },
+    {
+      name: 'metric',
+      type: 'line',
+      legendHoverLink: false,
+      lineStyle: {
+        width: 1,
+        type: 'dashed'
+      },
+      color: '#ec836c',
+      data: [],
+      showSymbol: false
+    }
+  ]
 }
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -91,185 +91,185 @@
 </template>

 <script>
-  import { api, getData } from '@/utils/api'
-  import { eventSeverityColor,unitTypes ,topDomain} from '@/utils/constants'
-  import { getSecond } from '@/utils/date-util'
-  import { get } from '@/utils/http'
-  import * as echarts from 'echarts'
-  import { markRaw } from 'vue'
-  import { metricOption } from '@/views/detections/options/detectionOptions'
-  import { sortBy,reverseSortBy } from '@/utils/tools'
-  export default {
-    name: 'DetectionPerformanceEventDomainOverview',
-    props: {
-      detection: Object
-    },
-    data () {
-      return {
-        eventSeverityColor,
-        basicInfo: {},
-        metricList:[],
-        metricChart: null,
-        searchStartTime:null,
-        searchEndTime:null
+import { api, getData } from '@/utils/api'
+import { eventSeverityColor, unitTypes, topDomain } from '@/utils/constants'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import * as echarts from 'echarts'
+import { markRaw } from 'vue'
+import { metricOption } from '@/views/detections/options/detectionOptions'
+import { sortBy, reverseSortBy } from '@/utils/tools'
+export default {
+  name: 'DetectionPerformanceEventDomainOverview',
+  props: {
+    detection: Object
+  },
+  data () {
+    return {
+      eventSeverityColor,
+      basicInfo: {},
+      metricList: [],
+      metricChart: null,
+      searchStartTime: null,
+      searchEndTime: null
+    }
+  },
+  computed: {
+    computeLocation () {
+      return function (basicInfo) {
+        let result = ''
+        if (basicInfo.serverLocationCountry) {
+          result += basicInfo.serverLocationCountry
+        }
+        if (basicInfo.serverLocationProvince) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationProvince
+        }
+        if (basicInfo.serverLocationRegion) {
+          if (result) {
+            result += ', '
+          }
+          result += basicInfo.serverLocationRegion
+        }
+        return result || '-'
      }
    },
-    computed: {
-      computeLocation () {
-        return function (basicInfo) {
-          let result = ''
-          if (basicInfo.serverLocationCountry) {
-            result += basicInfo.serverLocationCountry
+    computeSecondaryDomain () {
+      return function (name) {
+        // 命中的顶级域名
+        let hitTopDomain = ''
+        // 同顶级域名比对
+        const hits = []
+        topDomain.forEach(td => {
+          const hitIndex = name.lastIndexOf(td)
+          if (hitIndex > -1 && hitIndex + td.length === name.length) {
+            hits.push(td)
          }
-          if (basicInfo.serverLocationProvince) {
-            if (result) {
-              result += ', '
-            }
-            result += basicInfo.serverLocationProvince
-          }
-          if (basicInfo.serverLocationRegion) {
-            if (result) {
-              result += ', '
-            }
-            result += basicInfo.serverLocationRegion
-          }
-          return result || '-'
+        })
+        if (hits.length > 0) {
+          hits.sort((a, b) => {
+            return b.split('.').length - a.split('.').length
+          })
+          hitTopDomain = hits[0]
+        } else {
+          const arr = name.split('.')
+          hitTopDomain = arr[arr.length - 1]
        }
-      },
-      computeSecondaryDomain () {
-        return function (name) {
-          // 命中的顶级域名
-          let hitTopDomain = ''
-          // 同顶级域名比对
-          const hits = []
-          topDomain.forEach(td => {
-            const hitIndex = name.lastIndexOf(td)
-            if (hitIndex > -1 && hitIndex + td.length === name.length) {
-              hits.push(td)
+        const index = name.lastIndexOf(hitTopDomain)
+        const preArr = name.substring(0, index).split('.')
+        return [preArr[preArr.length - 2], hitTopDomain].join('.')
+      }
+    }
+  },
+  methods: {
+    query () {
+      this.queryBasic().then(responses => {
+        responses && (this.basicInfo = responses)
+      })
+
+      this.queryMetric().then(responses => {
+        responses && (this.metricList = responses.values)
+        if (this.metricList.length > 0) {
+          this.initChart()
+        } else {
+          const chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
+          chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
+        }
+      }).catch(error => {
+        console.log(error)
+        const chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
+        chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
+      }).finally(() => {
+        setTimeout(() => {
+          try {
+            this.$nextTick(() => {
+              this.metricChart && this.metricChart.resize()
+            })
+          } catch (e) {}
+        }, 250)
+      })
+    },
+
+    initChart () {
+      this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)))// 使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
+      this.chartOptionMetric = _.cloneDeep(this.chartOption)
+
+      this.metricList.sort(reverseSortBy(0))// 将返回的数据按时间降序排序，方便找到实线和虚线的交点
+      // let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
+      let endIndex = (this.metricList).findIndex((item) => item[0] <= this.detection.endTime)
+      endIndex = this.metricList.length - endIndex
+
+      this.metricList.sort(sortBy(0))// 将返回的数据按时间升序排序，方便找到实线和虚线的交点
+      // let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      const startIndex = (this.metricList).findIndex((item) => item[0] >= this.detection.startTime)
+
+      if (startIndex > -1 && endIndex > -1) {
+        this.chartOptionMetric.series[0].data = this.metricList.slice(0, startIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex - 1, endIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex - 1, this.metricList.length).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+      }
+
+      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
+    },
+
+    queryMetric () {
+      return new Promise((resolve, reject) => {
+        try {
+          const allTime = this.detection.endTime - this.detection.startTime
+          const nowTime = getSecond(new Date())
+          this.searchStartTime = this.detection.startTime - allTime / 2
+          this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
+
+          get(api.detection.performanceEvent.metric, {
+            domain: this.detection.domain,
+            startTime: this.searchStartTime,
+            endTime: this.searchEndTime,
+            eventType: this.detection.eventType
+          }).then((response) => {
+            if (response.code === 200) {
+              resolve(response.data.result[0])
+            } else {
+              reject(response)
            }
          })
-          if (hits.length > 0) {
-            hits.sort((a, b) => {
-              return b.split('.').length - a.split('.').length
-            })
-            hitTopDomain = hits[0]
-          } else {
-            const arr = name.split('.')
-            hitTopDomain = arr[arr.length - 1]
-          }
-          const index = name.lastIndexOf(hitTopDomain)
-          const preArr = name.substring(0, index).split('.')
-          return [preArr[preArr.length - 2], hitTopDomain].join('.')
+        } catch (e) {
+          reject(e)
        }
-      }
+      })
    },
-    methods: {
-      query () {
-        this.queryBasic().then(responses => {
-          responses && (this.basicInfo = responses)
-        })
-
-        this.queryMetric().then(responses => {
-          responses && (this.metricList = responses.values)
-          if(this.metricList.length>0){
-            this.initChart()
-          }else {
-            let chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
-            chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
-          }
-        }).catch(error => {
-          console.log(error)
-          let chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
-          chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
-        }).finally(() => {
-          setTimeout(() => {
-            try {
-              this.$nextTick(() => {
-                this.metricChart && this.metricChart.resize()
-              })
-            } catch (e) {}
-          }, 250)
-        })
-      },
-
-      initChart(){
-        this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
-        this.chartOptionMetric = _.cloneDeep(this.chartOption)
-
-        this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
-        //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
-        let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime );
-        endIndex = this.metricList.length-endIndex
-
-        this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
-        //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
-        let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime );
-
-        if(startIndex >-1 && endIndex >-1){
-          this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
-          this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
-          this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
+    queryBasic () {
+      return new Promise((resolve, reject) => {
+        try {
+          getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.domain, startTime: this.detection.startTime }).then(data => {
+            resolve(data[0])
+          }).catch(error => {
+            reject(error)
+          })
+        } catch (e) {
+          reject(e)
        }
-
-        this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
-      },
-
-      queryMetric() {
-        return new Promise((resolve, reject) => {
-          try {
-            let allTime = this.detection.endTime-this.detection.startTime
-            let nowTime = getSecond(new Date())
-            this.searchStartTime = this.detection.startTime-allTime/2
-            this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
-
-            get(api.detection.performanceEvent.metric, {
-              domain: this.detection.domain,
-              startTime: this.searchStartTime,
-              endTime: this.searchEndTime,
-              eventType: this.detection.eventType
-            }).then((response) => {
-              if (response.code === 200) {
-                resolve(response.data.result[0])
-              } else {
-                reject(response)
-              }
-            })
-          } catch (e) {
-            reject(e)
-          }
-        })
-      },
-      queryBasic () {
-        return new Promise((resolve, reject) => {
-          try {
-            getData(api.detection.performanceEvent.overviewBasic, { domain: this.detection.domain, startTime: this.detection.startTime }).then(data => {
-              resolve(data[0])
-            }).catch(error => {
-              reject(error)
-            })
-          } catch (e) {
-            reject(e)
-          }
-        })
-      },
-      goDetail (type, name) {
-        const { href } = this.$router.resolve({
-          path: '/entityDetail',
-          query: {
-            entityType: type,
-            name: name
-          }
-        })
-        window.open(href, '_blank')
-      }
-    },
-    mounted () {
-      this.query()
-    },
-    setup () {
-      return {
-        chartOption: metricOption,
-      }
+      })
    },
+    goDetail (type, name) {
+      const { href } = this.$router.resolve({
+        path: '/entityDetail',
+        query: {
+          entityType: type,
+          name: name
+        }
+      })
+      window.open(href, '_blank')
+    }
+  },
+  mounted () {
+    this.query()
+  },
+  setup () {
+    return {
+      chartOption: metricOption
+    }
  }
+}
 </script>
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -88,7 +88,7 @@ import { get } from '@/utils/http'
 import * as echarts from 'echarts'
 import { markRaw } from 'vue'
 import { metricOption } from '@/views/detections/options/detectionOptions'
-import { sortBy,reverseSortBy } from '@/utils/tools'
+import { sortBy, reverseSortBy } from '@/utils/tools'
 export default {
  name: 'DetectionPerformanceEventIpOverview',
  props: {
@@ -97,10 +97,10 @@ export default {
  data () {
    return {
      basicInfo: {},
-      metricList:[],
+      metricList: [],
      metricChart: null,
-      searchStartTime:null,
-      searchEndTime:null
+      searchStartTime: null,
+      searchEndTime: null
    }
  },
  computed: {
@@ -133,15 +133,15 @@ export default {
      })
      this.queryMetric().then(responses => {
        responses && (this.metricList = responses.values)
-        if(this.metricList.length>0){
+        if (this.metricList.length > 0) {
          this.initChart()
-        }else {
-          let chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
+        } else {
+          const chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
          chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
        }
      }).catch(error => {
        console.log(error)
-        let chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
+        const chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
        chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
      }).finally(() => {
        setTimeout(() => {
@@ -154,37 +154,36 @@ export default {
      })
    },

-    initChart(){
+    initChart () {
      this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)))
      this.chartOptionMetric = _.cloneDeep(this.chartOption)

-      this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
-      //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
+      this.metricList.sort(reverseSortBy(0))// 将返回的数据按时间降序排序，方便找到实线和虚线的交点
+      // let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  1435781434781 );
      console.log(this.detection)
-      let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime );
-      endIndex = this.metricList.length-endIndex
+      let endIndex = (this.metricList).findIndex((item) => item[0] <= this.detection.endTime)
+      endIndex = this.metricList.length - endIndex

+      this.metricList.sort(sortBy(0))// 将返回的数据按时间升序排序，方便找到实线和虚线的交点
+      // let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      const startIndex = (this.metricList).findIndex((item) => item[0] >= this.detection.startTime)

-      this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
-      //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
-      let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime );
-
-      if(startIndex >-1 && endIndex >-1){
-        this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
-        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
-        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
+      if (startIndex > -1 && endIndex > -1) {
+        this.chartOptionMetric.series[0].data = this.metricList.slice(0, startIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex - 1, endIndex).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex - 1, this.metricList.length).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.number])
      }

      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
    },

-    queryMetric() {
+    queryMetric () {
      return new Promise((resolve, reject) => {
        try {
-          let allTime = this.detection.endTime-this.detection.startTime
-          let nowTime = getSecond(new Date())
-          this.searchStartTime = this.detection.startTime-allTime/2
-          this.searchEndTime = _.min([nowTime,(this.detection.endTime+allTime/2)])
+          const allTime = this.detection.endTime - this.detection.startTime
+          const nowTime = getSecond(new Date())
+          this.searchStartTime = this.detection.startTime - allTime / 2
+          this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])

          get(api.detection.performanceEvent.metric, {
            domain: this.detection.domain,
@@ -230,11 +229,11 @@ export default {
  },
  mounted () {
    this.query()
-  } ,
+  },
  setup () {
    return {
-      chartOption: metricOption,
+      chartOption: metricOption
    }
-  },
+  }
 }
 </script>