From d84483c0dc6a572080b6a9c1d27021d436119cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 9 Jan 2023 16:36:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddetection=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=86=85=E5=AE=B9=E4=B8=ADdomain=E5=92=8Capp=E7=9A=84?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/tools.js                            | 24 ++++++++++++++
 .../DetectionPerformanceEventAppOverview.vue  |  9 ++++--
 ...etectionPerformanceEventDomainOverview.vue |  9 ++++--
 .../DetectionPerformanceEventIpOverview.vue   | 32 ++++---------------
 4 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/utils/tools.js b/src/utils/tools.js
index 8148205b..2c17f8ab 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1086,3 +1086,27 @@ export function colorGradientCalculation (startColor, endColor, values) {
 export function colorHexToRgbArr (hex) {
   return [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16))
 }
+
+/**
+ * 通过事件类型eventType转换对应名称
+ * @param type
+ * @returns {string}
+ */
+export function getNameByEventType (type) {
+  switch (type) {
+    case 'http error': {
+      return 'http error ratio'
+    }
+    case 'dns error': {
+      return 'dns error ratio'
+    }
+    case 'high dns response time': {
+      return 'dns response time'
+    }
+    // 目前ui并未找到此类型，添加以防不测
+    case 'high http resopnse time':
+    default: {
+      return 'http response time'
+    }
+  }
+}
diff --git a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
index 03f36f21..68288af6 100644
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -61,7 +61,7 @@
         <div class="metric__column">
           <div class="overview__title">{{$t('detections.metric')}}</div>
           <div class="overview__row">
-            <div class="row__content--metric ">{{detection.eventType  || '-'}}</div>
+            <div class="row__content--metric ">{{getNameByEventType(detection.eventType)  || '-'}}</div>
           </div>
         </div>
         <div class="metric__column">
@@ -95,7 +95,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, getNameByEventType } from '@/utils/tools'
 import _ from 'lodash'
 export default {
   name: 'DetectionPerformanceEventAppOverview',
@@ -134,6 +134,7 @@ export default {
     }
   },
   methods: {
+    getNameByEventType,
     query () {
       this.queryBasic().then(responses => {
         responses && (this.basicInfo = responses)
@@ -180,6 +181,10 @@ export default {
         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.series.forEach(item => {
+        item.name = this.getNameByEventType(this.detection.eventType)
+      })
+
       this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
     },
 
diff --git a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
index 73dcc36e..efd14a27 100644
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -63,7 +63,7 @@
         <div class="metric__column">
           <div class="overview__title">{{$t('detections.metric')}}</div>
           <div class="overview__row">
-            <div class="row__content--metric ">{{detection.eventType  || '-'}}</div>
+            <div class="row__content--metric ">{{getNameByEventType(detection.eventType)  || '-'}}</div>
           </div>
         </div>
         <div class="metric__column">
@@ -98,7 +98,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, getNameByEventType } from '@/utils/tools'
 import _ from 'lodash'
 export default {
   name: 'DetectionPerformanceEventDomainOverview',
@@ -165,6 +165,7 @@ export default {
     }
   },
   methods: {
+    getNameByEventType,
     query () {
       this.queryBasic().then(responses => {
         responses && (this.basicInfo = responses)
@@ -212,6 +213,10 @@ export default {
         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.series.forEach(item => {
+        item.name = this.getNameByEventType(this.detection.eventType)
+      })
+
       this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
     },
 
diff --git a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
index 586dfb2f..d5c9c426 100644
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -54,7 +54,7 @@
         <div class="metric__column">
           <div class="overview__title">{{$t('detections.metric')}}</div>
           <div class="overview__row">
-            <div class="row__content--metric ">{{getNameByType(detection.eventType)  || '-'}}</div>
+            <div class="row__content--metric ">{{getNameByEventType(detection.eventType)  || '-'}}</div>
           </div>
         </div>
         <div class="metric__column">
@@ -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, getNameByEventType } from '@/utils/tools'
 import _ from 'lodash'
 
 export default {
@@ -129,6 +129,7 @@ export default {
     }
   },
   methods: {
+    getNameByEventType,
     query () {
       this.queryBasic().then(responses => {
         responses && (this.basicInfo = responses)
@@ -173,9 +174,11 @@ export default {
         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.series.forEach(item => {
-        item.name = this.getNameByType(this.detection.eventType)
+        item.name = this.getNameByEventType(this.detection.eventType)
       })
+
       this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)
     },
     queryMetric () {
@@ -236,29 +239,6 @@ export default {
         }
       })
       window.open(href, '_blank')
-    },
-    /**
-     * 通过事件类型转换对应名称
-     * @param type
-     * @returns {string}
-     */
-    getNameByType (type) {
-      switch (type) {
-        case 'http error': {
-          return 'http error ratio'
-        }
-        case 'dns error': {
-          return 'dns error ratio'
-        }
-        case 'high dns response time': {
-          return 'dns response time'
-        }
-        // 目前ui并未找到此类型，添加以防不测
-        case 'high http resopnse time':
-        default: {
-          return 'http response time'
-        }
-      }
     }
   },
   mounted () {