From 6e6d187d5d414ef73729a9d03a7b4b038b83ef19 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sun, 9 Oct 2022 15:46:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E4=B8=89=E7=BA=A7?=
 =?UTF-8?q?=E5=9B=9B=E7=BA=A7=E8=8F=9C=E5=8D=95=E5=88=86=E6=95=B0=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constants.js                        |  6 +-
 src/views/charts2/Panel.vue                   | 33 +++++--
 .../charts2/charts/npm/NpmNetworkQuantity.vue | 95 ++++++++++++-------
 3 files changed, 89 insertions(+), 45 deletions(-)

diff --git a/src/utils/constants.js b/src/utils/constants.js
index bd15bf2f..64110a23 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -913,11 +913,11 @@ export const dnsServerRole = {
 
 export const npmCategoryToAppCategoryMap = {
   'network.video': 'multimedia-streaming',
-  'network.fileSharing': 'social-networking',
-  'network.voip': 'file-sharing',
+  'network.fileSharing': 'file-sharing',
+  'network.voip': 'voip-video',
   'network.gaming': 'gaming',
   'network.email': 'email',
-  'network.socialNetwork': 'voip-video'
+  'network.socialNetwork': 'social-networking'
 }
 
 // npm页-应用评分-类别名称、icon、i18n映射
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index 76964fbc..39700d31 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -2,7 +2,7 @@
   <div class="panel-box2">
     <div class="panel__header">
       <div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}
-        <div  v-if="score" class="score">
+        <div v-if="showScore" class="score">
           <div class="circle-icon"  v-if="score <= 2" :class="{'data-score-red': score <= 2}" ></div>
           <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
           <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
@@ -40,7 +40,15 @@
 <script>
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
-import { panelTypeAndRouteMapping, bytesColumnNameGroupForNpm, scoreUrl, customTableTitlesForAppPerformance, operationType, curTabState } from '@/utils/constants'
+import {
+  panelTypeAndRouteMapping,
+  bytesColumnNameGroupForNpm,
+  scoreUrl,
+  customTableTitlesForAppPerformance,
+  operationType,
+  curTabState,
+  drillDownPanelTypeMapping
+} from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
@@ -75,12 +83,15 @@ export default {
   watch: {
     npmThirdLevelMenuScore: {
       deep: true,
+      immediate: true,
       handler (n) {
+        console.info(n)
+        this.score = n
         // const curOperationType = this.$store.getters.getTabOperationType
-        const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
-        if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-          this.score = n
-        }
+        // const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
+        // if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
+        // this.score = n
+        // }
       }
     }
   },
@@ -88,7 +99,7 @@ export default {
     // this.panelName = this.$store.getters.getPanelName
     this.panelName = this.$route.query.panelName ? this.$t(this.$route.query.panelName) : ''
     // const curOperationType = this.$store.getters.getTabOperationType
-    const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
+    /*const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
     if (this.panelName && this.$route.path === '/panel/networkAppPerformance' && curOperationType !== operationType.thirdMenu) {
       // const columnValue = this.$store.getters.getBreadcrumbColumnValue
       const columnValue = this.getUrlParam(this.curTabState.fourthMenu, '')
@@ -136,7 +147,7 @@ export default {
       })
     } else if (this.$route.path === '/panel/networkAppPerformance' && curOperationType === operationType.thirdMenu) {
       this.score = this.$store.getters.getNpmThirdLevelMenuScore
-    }
+    }*/
 
     await this.init()
     const vm = this
@@ -183,10 +194,14 @@ export default {
       timeFilter.value.endTime = parseInt(endTimeParam)
     }
 
+    // npm是否展示分数
+    const showScorePanel = [drillDownPanelTypeMapping.npmOverviewIp, drillDownPanelTypeMapping.npmOverviewDomain, drillDownPanelTypeMapping.npmOverviewApp, drillDownPanelTypeMapping.npmOverviewCommon, drillDownPanelTypeMapping.npmThirdMenu]
+    const showScore = showScorePanel.indexOf(panelType) > -1
     return {
       panelType,
       panel,
-      timeFilter
+      timeFilter,
+      showScore
     }
   },
   methods: {
diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
index a9116970..58ab57ba 100644
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -99,10 +99,43 @@ export default {
       if (type && condition) {
         this.toggleLoading(true)
         get(api.npm.overview.networkAnalysis, params).then(res => {
+          const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+          const scoreInfo = {}
+          let index = 0
           if (res.code === 200) {
+            if (res.data.result.establishLatencyMsAvg || res.data.result.establishLatencyMsAvg === 0) {
+              res.data.result.establishLatencyMs = res.data.result.establishLatencyMsAvg
+              index = 0
+              scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)
+            }
+            if (res.data.result.httpResponseLatencyAvg || res.data.result.httpResponseLatencyAvg === 0) {
+              res.data.result.httpResponseLatency = res.data.result.httpResponseLatencyAvg
+              index = 1
+              scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)
+            }
+            if (res.data.result.tcpLostlenPercentAvg || res.data.result.tcpLostlenPercentAvg === 0) {
+              res.data.result.tcpLostlenPercent = res.data.result.tcpLostlenPercentAvg
+              index = 3
+              scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)
+            }
+            if (res.data.result.pktRetransPercentAvg || res.data.result.pktRetransPercentAvg === 0) {
+              res.data.result.pktRetransPercent = res.data.result.pktRetransPercentAvg
+              index = 4
+              scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)
+            }
+            if (res.data.result.sslConLatencyAvg || res.data.result.sslConLatencyAvg === 0) {
+              res.data.result.sslConLatency = res.data.result.sslConLatencyAvg
+              index = 2
+              scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)
+            }
             this.npmNetworkCycleData = res.data.result
             this.npmNetworkLastCycleQuery()
           }
+          scoreInfo.score = Math.ceil((scoreInfo.tcpScore + scoreInfo.httpScore + scoreInfo.sslScore + scoreInfo.tcpLostScore + scoreInfo.packetRetransScore) * 6)
+          if (scoreInfo.score > 6) {
+            scoreInfo.score = 6
+          }
+          this.$store.commit('setNpmThirdLevelMenuScore', scoreInfo.score)
         }).catch(e => {
           this.toggleLoading(false)
         })
@@ -115,11 +148,40 @@ export default {
         this.toggleLoading(true)
         Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
           this.npmNetworkCycleData = []
+          const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
+          const scoreInfo = {}
+          let index = 0
           res.forEach(t => {
             if (t.code === 200) {
+              if (t.data.result.establishLatencyMsAvg || t.data.result.establishLatencyMsAvg === 0) {
+                t.data.result.establishLatencyMs = t.data.result.establishLatencyMsAvg
+                index = 0
+              }
+              if (t.data.result.httpResponseLatencyAvg || t.data.result.httpResponseLatencyAvg === 0) {
+                t.data.result.httpResponseLatency = t.data.result.httpResponseLatencyAvg
+                index = 1
+              }
+              if (t.data.result.tcpLostlenPercentAvg || t.data.result.tcpLostlenPercentAvg === 0) {
+                t.data.result.tcpLostlenPercent = t.data.result.tcpLostlenPercentAvg
+                index = 3
+              }
+              if (t.data.result.pktRetransPercentAvg || t.data.result.pktRetransPercentAvg === 0) {
+                t.data.result.pktRetransPercent = t.data.result.pktRetransPercentAvg
+                index = 4
+              }
+              if (t.data.result.sslConLatencyAvg || t.data.result.sslConLatencyAvg === 0) {
+                t.data.result.sslConLatency = t.data.result.sslConLatencyAvg
+                index = 2
+              }
+              scoreInfo[keyPre[index] + 'Score'] = computeScore(t.data.result, index)
               this.npmNetworkCycleData.push(t.data.result)
             }
           })
+          scoreInfo.score = Math.ceil((scoreInfo.tcpScore + scoreInfo.httpScore + scoreInfo.sslScore + scoreInfo.tcpLostScore + scoreInfo.packetRetransScore) * 6)
+          if (scoreInfo.score > 6) {
+            scoreInfo.score = 6
+          }
+          this.$store.commit('setNpmThirdLevelMenuScore', scoreInfo.score)
           this.npmNetworkLastCycleQuery()
         }).catch(e => {
           this.toggleLoading(false)
@@ -166,31 +228,7 @@ export default {
       if (type && condition) {
         this.toggleLoading(true)
         get(api.npm.overview.networkAnalysis, params).then(res => {
-          const keyPre = ['tcp', 'http', 'ssl', 'tcpLost', 'packetRetrans']
-          const scoreInfo = {}
-          let index = 0
           if (res.code === 200) {
-            if (res.data.result.establishLatencyMsAvg || res.data.result.establishLatencyMsAvg === 0) {
-              res.data.result.establishLatencyMs = res.data.result.establishLatencyMsAvg
-              index = 0
-            }
-            if (res.data.result.httpResponseLatencyAvg || res.data.result.httpResponseLatencyAvg === 0) {
-              res.data.result.httpResponseLatency = res.data.result.httpResponseLatencyAvg
-              index = 1
-            }
-            if (res.data.result.tcpLostlenPercentAvg || res.data.result.tcpLostlenPercentAvg === 0) {
-              res.data.result.tcpLostlenPercent = res.data.result.tcpLostlenPercentAvg
-              index = 3
-            }
-            if (res.data.result.pktRetransPercentAvg || res.data.result.pktRetransPercentAvg === 0) {
-              res.data.result.pktRetransPercent = res.data.result.pktRetransPercentAvg
-              index = 4
-            }
-            if (res.data.result.sslConLatencyAvg || res.data.result.sslConLatencyAvg === 0) {
-              res.data.result.sslConLatency = res.data.result.sslConLatencyAvg
-              index = 2
-            }
-            scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)
             this.npmNetworkLastCycleData = res.data.result
             let timer = null
             if (timer) {
@@ -199,15 +237,6 @@ export default {
             timer = setTimeout(() => {
               this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
             }, 300)
-          } else {
-            res[keyPre[index] + 'Score'] = 0
-          }
-          scoreInfo.score = Math.ceil((scoreInfo.tcpScore + scoreInfo.httpScore + scoreInfo.sslScore + scoreInfo.tcpLostScore + scoreInfo.packetRetransScore) * 6)
-          if (scoreInfo.score > 6) {
-            scoreInfo.score = 6
-          }
-          if (!params.q && this.chart.id === 44) {
-            this.$store.commit('setNpmThirdLevelMenuScore', scoreInfo.score)
           }
         }).finally(() => {
           this.toggleLoading(false)