From 8513bc4f20cee8a548aa8efca02dad64d859f58d Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Fri, 25 Mar 2022 14:45:20 +0800
Subject: [PATCH] =?UTF-8?q?detection=E6=A8=A1=E5=9D=97=EF=BC=8Cmetric?=
 =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E5=AF=B9=E4=BA=8E=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?id=E6=94=B9=E4=B8=BA=E5=8A=A8=E6=80=81=EF=BC=8C=E5=90=A6?=
 =?UTF-8?q?=E5=88=99=E7=BC=96=E8=AF=91=E5=90=8E=E4=BC=9A=E5=87=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=9A=E5=8F=AA=E4=BC=9A=E6=B8=B2=E6=9F=93=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1=E7=94=BB=E7=9A=84=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../overview/DetectionPerformanceEventAppOverview.vue     | 8 ++++----
 .../overview/DetectionPerformanceEventDomainOverview.vue  | 8 ++++----
 .../overview/DetectionPerformanceEventIpOverview.vue      | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
index f2e2f619..7f379a88 100644
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -67,7 +67,7 @@
         <div class="metric__column">
           <div class="overview__title">{{$t('detections.value')}}</div>
           <div class="overview__row">
-            <div class="row__charts" id="detectionMetricChartApp" ></div>
+            <div class="row__charts" :id="`detectionMetricChartApp${detection.appName}`" ></div>
           </div>
         </div>
         <div class="metric__column">
@@ -142,12 +142,12 @@ export default {
         if(this.metricList.length>0){
           this.initChart()
         }else {
-          let chartDom = document.getElementById('detectionMetricChartApp')
+          let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
           chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
         }
       }).catch(error => {
         console.log(error)
-        let chartDom = document.getElementById('detectionMetricChartApp')
+        let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
         chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
       }).finally(() => {
         setTimeout(() => {
@@ -161,7 +161,7 @@ export default {
     },
 
     initChart(){
-      this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartApp')))
+      this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartApp${this.detection.appName}`)))
       this.chartOptionMetric = _.cloneDeep(this.chartOption)
 
       this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
diff --git a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
index 5ebf67d4..76883237 100644
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -69,7 +69,7 @@
         <div class="metric__column">
           <div class="overview__title">{{$t('detections.value')}}</div>
           <div class="overview__row">
-            <div class="row__charts" id="detectionMetricChartDomain" ></div>
+            <div class="row__charts" :id="`detectionMetricChartDomain${detection.domain}`" ></div>
           </div>
         </div>
         <div class="metric__column">
@@ -174,12 +174,12 @@
           if(this.metricList.length>0){
             this.initChart()
           }else {
-            let chartDom = document.getElementById('detectionMetricChartDomain')
+            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')
+          let chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
           chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
         }).finally(() => {
           setTimeout(() => {
@@ -193,7 +193,7 @@
       },
 
       initChart(){
-        this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
+        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))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
diff --git a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
index 2f75bb96..46554cb1 100644
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -60,7 +60,7 @@
         <div class="metric__column">
           <div class="overview__title">{{$t('detections.value')}}</div>
           <div class="overview__row">
-            <div class="row__charts"  id="detectionMetricChartIp" ></div>
+            <div class="row__charts"  :id="`detectionMetricChartIp${detection.serverIp}`" ></div>
           </div>
         </div>
         <div class="metric__column">
@@ -136,12 +136,12 @@ export default {
         if(this.metricList.length>0){
           this.initChart()
         }else {
-          let chartDom = document.getElementById('detectionMetricChartIp')
+          let 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')
+        let chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
         chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
       }).finally(() => {
         setTimeout(() => {
@@ -155,7 +155,7 @@ export default {
     },
 
     initChart(){
-      this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartIp')))
+      this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)))
       this.chartOptionMetric = _.cloneDeep(this.chartOption)
 
       this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点