fix: 优化 Dahsboard - npm - 网络质量概览图表 接口请求

src/views/charts2/charts/SingleValue.vue

@@ -1,4 +1,4 @@
-<template v-if="npmNetworkCycleData.length > 0 && npmNetworkLastCycleData.length > 0">
+<template v-if="npmNetworkData.length > 0">
   <div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index">
     <template v-if="index === 0">
       <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
@@ -106,90 +106,16 @@
 <script>
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import { getChainRatio } from '@/utils/tools'
-import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
-import _ from 'lodash'
-import chartMixin from '@/views/charts2/chart-mixin'
 export default {
   name: 'SingleValue',
   props: {
-    npmNetworkCycleData: Array,
+    npmNetworkName: Array,
-    npmNetworkName: Array
+    npmNetworkData: Array
   },
-  mixins: [chartMixin],
   data () {
     return {
       unitTypes,
-      unitConvert,
+      unitConvert
-      npmNetworkData: [],
-      npmNetworkLastCycleData: [],
-      side: '',
-      chartData: {}
-    }
-  },
-  watch: {
-    npmNetworkCycleData: {
-      deep: true,
-      immediate: true,
-      handler (n) {
-        if (n) {
-          this.npmNetworkLastCycleQuery()
-        }
-      }
-    }
-  },
-  methods: {
-    npmNetworkQuantity (cycle, lastCycle) {
-      cycle.forEach(t => {
-        lastCycle.forEach(e => {
-          Object.keys(t).forEach(r => {
-            Object.keys(e).forEach(d => {
-              if (r === d) {
-                t.value = getChainRatio(t[r], e[d])
-              }
-            })
-          })
-        })
-      })
-      this.npmNetworkData = cycle
-    },
-    npmNetworkLastCycleQuery () {
-      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
-      const type = this.$store.getters.getDimensionType
-      const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime),
-        cycle: 1
-      }
-      if (this.chartData.id === 23) {
-        this.side = 'client'
-      } else {
-        this.side = 'server'
-      }
-      if (condition && type) {
-        params.q = `${type}='${condition[1]}' and side='${this.side}'`
-        params.type = type
-      }
-      const tcp = get(api.npm.overview.tcpSessionDelay, params)
-      const http = get(api.npm.overview.httpResponseDelay, params)
-      const ssl = get(api.npm.overview.sslConDelay, params)
-      const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
-      const packetPercent = get(api.npm.overview.packetRetransPercent, params)
-      Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
-        res.forEach(t => {
-          if (t.code === 200) {
-            this.npmNetworkLastCycleData.push(t.data.result)
-            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
-          }
-        })
-      })
-    }
-  },
-  mounted () {
-    if (this.chart) {
-      this.chartData = _.cloneDeep(this.chart)
     }
   }
 }

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="npm-network-quantity">
     <single-value
-      :npm-network-cycle-data="npmNetworkCycleData"
       :npm-network-name="npmNetworkName"
-      :time-filter="timeFilter"
+      :npm-network-data="npmNetworkData"
-      :chartData="chartData"
     ></single-value>
   </div>
 </template>
@@ -16,6 +14,7 @@ import { getSecond } from '@/utils/date-util'
 import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
 import _ from 'lodash'
+import { getChainRatio } from '@/utils/tools'
 export default {
   name: 'NpmNetworkQuantity',
   components: { SingleValue },
@@ -30,6 +29,8 @@ export default {
         { name: 'overall.packetRetrans' }
       ],
       npmNetworkCycleData: [],
+      npmNetworkLastCycleData: [],
+      npmNetworkData: [],
       side: '',
       chartData: {}
     }
@@ -67,14 +68,62 @@ export default {
       }).finally(() => {
         this.toggleLoading(false)
       })
+    },
+    npmNetworkLastCycleQuery () {
+      const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
+      const type = this.$store.getters.getDimensionType
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        cycle: 1
+      }
+      if (this.chartData.id === 23) {
+        this.side = 'client'
+      } else {
+        this.side = 'server'
+      }
+      if (condition && type) {
+        params.q = `${type}='${condition[1]}' and side='${this.side}'`
+        params.type = type
+      }
+      const tcp = get(api.npm.overview.tcpSessionDelay, params)
+      const http = get(api.npm.overview.httpResponseDelay, params)
+      const ssl = get(api.npm.overview.sslConDelay, params)
+      const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
+      const packetPercent = get(api.npm.overview.packetRetransPercent, params)
+      this.toggleLoading(true)
+      Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
+        res.forEach(t => {
+          if (t.code === 200) {
+            this.npmNetworkLastCycleData.push(t.data.result)
+            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
+          }
+        })
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    },
+    npmNetworkQuantity (cycle, lastCycle) {
+      cycle.forEach(t => {
+        lastCycle.forEach(e => {
+          Object.keys(t).forEach(r => {
+            Object.keys(e).forEach(d => {
+              if (r === d) {
+                t.value = getChainRatio(t[r], e[d])
+              }
+            })
+          })
+        })
+      })
+      this.npmNetworkData = cycle
     }
-
   },
   mounted () {
     if (this.chart) {
       this.chartData = _.cloneDeep(this.chart)
     }
     this.npmNetworkCycleQuery()
+    this.npmNetworkLastCycleQuery()
   }
 }
 </script>