fix: 修正三级四级菜单分数计算逻辑

2022-10-09 15:46:53 +08:00
parent 923ed63bcd
commit 6e6d187d5d
3 changed files with 89 additions and 45 deletions
--- 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映射
--- 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: {
--- 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)