From 17851f57540f078396a6d248aef90a17bde9495d Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Mon, 21 Mar 2022 11:01:55 +0800
Subject: [PATCH] =?UTF-8?q?CN-399=20Detection--=E6=9C=8D=E5=8A=A1=E8=B4=A8?=
 =?UTF-8?q?=E9=87=8F=E4=BA=8B=E4=BB=B6=20=E6=8C=87=E6=A0=87=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E6=9B=B2=E7=BA=BF=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetectionPerformanceEventAppOverview.vue  | 82 ++++++++++++++++++-
 ...etectionPerformanceEventDomainOverview.vue |  8 +-
 .../DetectionPerformanceEventIpOverview.vue   |  9 +-
 3 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
index 808b9686..2d481770 100644
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -61,8 +61,14 @@
 </template>
 
 <script>
-import { api, getData } from '@/utils/api'
 import { eventSeverityColor } from '@/utils/constants'
+import { api, getData } from '@/utils/api'
+import { unitTypes } from '@/utils/constants'
+import { getSecond } from '@/utils/date-util'
+import { get } from '@/utils/http'
+import * as echarts from 'echarts'
+import { metricOption } from '@/views/detections/options/detectionOptions'
+import { sortBy,reverseSortBy } from '@/utils/tools'
 export default {
   name: 'DetectionPerformanceEventAppOverview',
   props: {
@@ -71,7 +77,8 @@ export default {
   data () {
     return {
       eventSeverityColor,
-      basicInfo: {}
+      basicInfo: {},
+      metricList:[[1435781430781, "1"], [1435781431781, "5"],[1435781432781, "5"], [1435781433781, "3"],[1435781434781, "4"], [1435781435781, "5"]],
     }
   },
   computed: {
@@ -102,7 +109,71 @@ export default {
       this.queryBasic().then(responses => {
         responses && (this.basicInfo = responses)
       })
+      this.queryMetric().then(responses => {
+        responses && (this.metricList = responses.values)
+        this.initChart()
+      }).catch(error => {
+        console.log(error)
+      }).finally(() => {
+        setTimeout(() => {
+          try {
+            this.$nextTick(() => {
+              console.log(this.metricChart)
+              this.metricChart && this.metricChart.resize()
+            })
+          } catch (e) {}
+        }, 250)
+      })
     },
+
+    initChart(){
+      this.metricChart = echarts.init(document.getElementById('detectionMetricChartDomain'))
+      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*1000 );
+      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*1000 );
+
+      if(startIndex >-1 && endIndex >-1){
+        this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+        this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
+      }
+
+      this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
+      console.log(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*1000,
+            endTime: this.searchEndTime*1000,
+          }).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 {
@@ -129,6 +200,11 @@ export default {
   },
   mounted () {
     this.query()
-  }
+  },
+  setup () {
+    return {
+      chartOption: metricOption,
+    }
+  },
 }
 </script>
diff --git a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
index 1e3506dd..469d0eaf 100644
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -190,13 +190,13 @@ export default {
       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]  <=  1435781434781 );
+      let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
       endIndex = this.metricList.length-endIndex
-      //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
 
       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*1000 );
+      //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime*1000 );
 
       if(startIndex >-1 && endIndex >-1){
         this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
diff --git a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
index a2d49981..adee696e 100644
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -153,13 +153,14 @@ export default {
       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]  <=  1435781434781 );
+      let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
       endIndex = this.metricList.length-endIndex
-      //let endIndex = (this.metricList). findIndex ((item) => item[0]  <=  this.detection.endTime*1000 );
+
 
       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*1000 );
+      //let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  1435781432781 );
+      let startIndex = (this.metricList). findIndex ((item) => item[0]  >=  this.detection.startTime*1000 );
 
       if(startIndex >-1 && endIndex >-1){
         this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])