From a9e84fd7145feae33fb2397af66741a552cdde41 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Fri, 24 Nov 2023 17:11:42 +0800
Subject: [PATCH] =?UTF-8?q?CN-1483=20network=20overview=E5=8D=95=E4=BD=8D?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/networkOverviewTabs.scss    |  6 +++++
 src/utils/constants.js                        | 13 ++++++++---
 src/views/charts2/Panel.vue                   |  2 +-
 .../charts/entityDetail/EntityDetailLine.vue  | 18 +++++++++------
 .../networkOverview/NetworkOverviewApps.vue   | 12 +++++++---
 .../networkOverview/NetworkOverviewLine.vue   | 16 +++++++++----
 .../networkOverview/NetworkOverviewTabs.vue   | 23 ++++++++++++-------
 7 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
index 34d9ea22..efc343e8 100644
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -52,6 +52,12 @@
         display:flex;
         flex-direction:column;
         align-items: flex-start;
+        color: #778391;
+        font-weight: 400;
+        .data-column__span {
+          font-weight: bold;
+          color:#353636;
+        }
         .unit__span {
           color: #778391;
           font-weight: 400;
diff --git a/src/utils/constants.js b/src/utils/constants.js
index f437eae9..51a23026 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -247,18 +247,25 @@ export const networkOverviewTabs = [
 export const metricOptions = [
   {
     value: 'Bits/s',
-    label: 'Bits/s'
+    label: 'metric.bps'
   },
   {
     value: 'Packets/s',
-    label: 'Packets/s'
+    label: 'metric.packets'
   },
   {
     value: 'Sessions/s',
-    label: 'Sessions/s'
+    label: 'metric.sessions'
   }
 ]
 
+export const metricType = {
+  Bits: 'Bits/s',
+  Packets: 'Packets/s',
+  Sessions: 'Sessions/s'
+
+}
+
 export const operationType = {
   mainMenu: 0, // 菜单
   secondMenu: 2, // 二级菜单
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index b3df377b..f8ff9532 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -33,7 +33,7 @@
           <template #prefix>
             <span class="select-prefix">{{$t('detections.metric')}}:</span>
           </template>
-          <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
         <div class="panel__time">
           <date-time-range
diff --git a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
index 8b898e4c..8f9be97c 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
@@ -55,7 +55,7 @@
                   :popper-append-to-body="false"
                   @change="metricChange"
               >
-                <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
               </el-select>
             </div>
           </div>
@@ -92,7 +92,7 @@ import chartMixin from '@/views/charts2/chart-mixin'
 import * as echarts from 'echarts'
 import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
-import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
+import { unitTypes, chartColor3, chartColor4, metricType, metricOptions } from '@/utils/constants.js'
 import { ref, shallowRef } from 'vue'
 import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import _ from 'lodash'
@@ -104,7 +104,6 @@ import { useRoute } from 'vue-router'
 import { getLineType, getMarkLineByLineRefer, overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import ChartError from '@/components/common/Error'
 import { dataForNetworkOverviewLine } from '@/utils/static-data'
-import { metricOptions } from '@/utils/constants'
 
 export default {
   name: 'EntityDetailLine',
@@ -542,7 +541,7 @@ export default {
         }
       }
 
-      if (val === 'Sessions/s') {
+      if (val === metricType.Sessions) {
         const tabs = _.cloneDeep(this.tabsTemplate)
         lineData.forEach((d, i) => {
           tabs[i].data = d.values
@@ -552,7 +551,8 @@ export default {
           if (i !== 0) {
             e.show = false
           }
-          e.unitType = 'sessions/s'
+          const metric = metricOptions.find(item => item.value === metricType.Sessions)
+          e.unitType = metric ? this.$t(metric.label) : ''
           e.invertTab = false
           this.lineTab = 'total'
           this.legendSelectChange(e, 0)
@@ -563,7 +563,11 @@ export default {
           this.echartsInit(this.tabs, true)
         })
       } else {
-        const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
+        let metric = metricOptions.find(item => item.value === val)
+        if (!metric) {
+          metric = metricOptions.find(item => item.value === metricType.Packets)
+        }
+        const unit = metric ? this.$t(metric.label) : ''
         this.legendInit(lineData, active, show, unit, n)
       }
     },
@@ -689,7 +693,7 @@ export default {
     this.chartOption = null
     const self = this
     self.timer = setTimeout(() => {
-      if (self.lineTab && self.metric !== 'Sessions/s') {
+      if (self.lineTab && self.metric !== metricType.Sessions) {
         const data = self.tabsTemplate.find(t => t.class === self.lineTab)
         self.activeChange(data, data.positioning)
       } else {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index ceec15b5..b56aae16 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -37,7 +37,7 @@
                 <div v-else-if="app.value === '-' || app.value === 0" class="app-card__body-content-percent">+0.00%</div>
               </div>
             </div>
-            <div class="app-card__body-unit">{{this.metric}}</div>
+            <div class="app-card__body-unit">{{$t(metricShow.label)}}</div>
             <div class="app-card__body-previous">
               <div>{{$t('network.total')}}</div>
               <div v-if="metric === 'Bits/s'" :test-id="`total${index}`">{{valueToRangeValue(app.total, unitTypes.byte).join(' ')}}</div>
@@ -122,7 +122,7 @@
 
 <script>
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
-import { storageKey, unitTypes, networkTable, operationType, curTabState } from '@/utils/constants'
+import { storageKey, unitTypes, networkTable, operationType, curTabState, metricType, metricOptions } from '@/utils/constants'
 import * as echarts from 'echarts'
 import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
 import { shallowRef } from 'vue'
@@ -174,7 +174,11 @@ export default {
       curTabState: curTabState,
       urlChangeParams: {},
       showError: false,
-      errorMsg: ''
+      errorMsg: '',
+      metricShow: {
+        value: 'Bits/s',
+        label: 'metric.bps'
+      }
     }
   },
   props: {
@@ -204,6 +208,7 @@ export default {
       this.init()
     },
     metric (n) {
+      this.metricShow = metricOptions.find(item => item.value === this.metric)
       this.init()
     }
   },
@@ -721,6 +726,7 @@ export default {
     }
   },
   mounted () {
+    this.metricShow = metricOptions.find(item => item.value === this.metric)
     if (this.chart && this.chart.params && this.chart.params.app) {
       const userId = parseInt(localStorage.getItem(storageKey.userId))
       const apps = _.cloneDeep(this.chart.params.app)
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index fce9d764..f806bd53 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -62,7 +62,7 @@
 import * as echarts from 'echarts'
 import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
 import { valueToRangeValue } from '@/utils/unit-convert'
-import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
+import { unitTypes, chartColor3, chartColor4, metricType, metricOptions } from '@/utils/constants.js'
 import { ref, shallowRef } from 'vue'
 import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import _ from 'lodash'
@@ -509,7 +509,7 @@ export default {
         }
       }
 
-      if (val === 'Sessions/s') {
+      if (val === metricType.Sessions) {
         const tabs = _.cloneDeep(this.tabsTemplate)
         lineData.forEach((d, i) => {
           tabs[i].data = d.values
@@ -519,7 +519,8 @@ export default {
           if (i !== 0) {
             e.show = false
           }
-          e.unitType = 'sessions/s'
+          const metric = metricOptions.find(item => item.value === metricType.Sessions)
+          e.unitType = metric ? this.$t(metric.label) : ''
           e.invertTab = false
           this.lineTab = 'total'
           this.legendSelectChange(e, 0)
@@ -530,7 +531,12 @@ export default {
           this.echartsInit(this.tabs, true)
         })
       } else {
-        const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
+        let metric = metricOptions.find(item => item.value === val)
+        if (!metric) {
+          metric = metricOptions.find(item => item.value === metricType.Packets)
+        }
+        const unit = metric ? this.$t(metric.label) : ''
+
         this.legendInit(lineData, active, show, unit, n)
       }
     },
@@ -623,7 +629,7 @@ export default {
     this.chartOption = null
     const self = this
     self.timer = setTimeout(() => {
-      if (self.lineTab && self.metric !== 'Sessions/s') {
+      if (self.lineTab && self.metric !== metricType.Sessions) {
         const data = self.tabsTemplate.find(t => t.class === self.lineTab)
         self.activeChange(data, data.positioning)
       } else {
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
index 7149c866..f89329d6 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -114,7 +114,7 @@
                   <div v-else>
                     <div class="title-unit"  v-if="tableType === 'networkOverview'">
                       <span class="data-column__span" >{{$t(item.label)}}</span>
-                      <span class="unit__span"  >{{metric}}</span>
+                      {{$t(metricShow.label)}}
                     </div>
                     <div v-else>
                       <span class="data-column__span" >{{$t(item.label)}}</span>
@@ -291,7 +291,9 @@ import {
   drillDownPanelTypeMapping,
   commonErrorTip,
   ZH,
-  EN
+  EN,
+  metricType,
+  metricOptions
 } from '@/utils/constants'
 import axios from 'axios'
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
@@ -319,7 +321,11 @@ export default {
       commonTabList: [],
       commonColumnList: [],
       tables: [],
-      list: [], // 当前状态列表
+      list: [], // 当前状态列表,
+      metricShow: {
+        value: 'Bits/s',
+        label: 'metric.bps'
+      },
       allList: [], // 包含2级标签的所有状态的列表
       networkTabList: [], // 原始状态列表
       showBackground: false,
@@ -374,7 +380,7 @@ export default {
     chart: Object,
     metric: {
       type: String,
-      default: 'Bits/s'
+      default: metricType.Bits
     }
   },
   watch: {
@@ -386,6 +392,7 @@ export default {
       }
     },
     metric (n) {
+      this.metricShow = metricOptions.find(item => item.value === n)
       this.changeMetric()
     },
     scoreBaseState (n) {
@@ -2225,17 +2232,17 @@ export default {
       return tabs
     },
     initMetric () {
-      if (this.metric === 'Bits/s') {
+      if (this.metric === metricType.Bits) {
         this.columnNameGroup = this.curTableInCode ? this.curTableInCode.bytesColumnNameGroup : []
         this.cycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.bytesCycleColumnNameGroup : []
         this.orderBy = 'totalBytes'
         this.metricUnit = 'bytes'
-      } else if (this.metric === 'Packets/s') {
+      } else if (this.metric === metricType.Packets) {
         this.columnNameGroup = this.curTableInCode ? this.curTableInCode.packetsColumnNameGroup : []
         this.cycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.packetsCycleColumnNameGroup : []
         this.orderBy = 'totalPackets'
         this.metricUnit = 'packets'
-      } else if (this.metric === 'Sessions/s') {
+      } else if (this.metric === metricType.Sessions) {
         this.columnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsColumnNameGroup : []
         this.cycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsCycleColumnNameGroup : []
         this.orderBy = 'sessions'
@@ -2257,6 +2264,7 @@ export default {
   },
   async mounted () {
     this.list = null
+    this.metricShow = metricOptions.find(item => item.value === this.metric)
     this.tabList = null
     this.allList = null
     this.drillDownTableConfigs = null
@@ -2332,7 +2340,6 @@ export default {
         }
         this.activeCustomize = ref('tabs')
         this.networkSearchUrl = this.curTable.url
-        // let metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
         this.initMetric()
         this.isOnlyRead = this.curTable.isOnlyRead ? this.curTable.isOnlyRead : false
         this.showUnit = this.curTable.showUnit ? this.curTable.showUnit : false