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

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>

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>