fix: NpmNetworkQuantity模块添加error处理

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

@@ -1,6 +1,7 @@
 <template>
   <div class="npm-network-quantity">
     <single-value
+        v-if="npmNetworkData.length>0"
       :npm-network-name="npmNetworkName"
       :npm-network-data="npmNetworkData"
     ></single-value>
@@ -125,15 +126,30 @@ export default {
         const packetPercent = get(api.npm.overview.packetRetransPercent, params)
         this.toggleLoading(true)
         Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
+          // todo 模拟数据，记得删
+          res[0] = {
+            code: 50001,
+            msg: 'jhgfdfghjklkjhg'
+          }
           this.npmNetworkCycleData = []
-          res.forEach(t => {
+          res.forEach((t, index) => {
             if (t.code === 200) {
               this.npmNetworkCycleData.push(t.data.result)
+            } else {
+              this.npmNetworkCycleData.push(t)
             }
           })
           this.npmNetworkLastCycleQuery()
         }).catch(e => {
           this.toggleLoading(false)
+          // 此时e为数组
+          if (e instanceof Array) {
+            this.npmNetworkCycleData = []
+            e.forEach((t) => {
+              this.npmNetworkCycleData.push(t)
+            })
+            this.npmNetworkLastCycleQuery()
+          }
         })
       }
     },
@@ -187,16 +203,37 @@ export default {
         params.type = params.type || type
         this.toggleLoading(true)
         get(api.npm.overview.networkAnalysis, params).then(res => {
+          // if (res.code === 200) {
+          //   this.npmNetworkLastCycleData = res.data.result
+          //   let timer = null
+          //   if (timer) {
+          //     clearTimeout(timer)
+          //   }
+          //   timer = setTimeout(() => {
+          //     this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
+          //   }, 300)
+          // }
           if (res.code === 200) {
             this.npmNetworkLastCycleData = res.data.result
-            let timer = null
+          } else {
-            if (timer) {
+            this.npmNetworkLastCycleData = [res]
-              clearTimeout(timer)
-            }
-            timer = setTimeout(() => {
-              this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
-            }, 300)
           }
+          let timer = null
+          if (timer) {
+            clearTimeout(timer)
+          }
+          timer = setTimeout(() => {
+            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
+          }, 300)
+        }).catch((e) => {
+          let timer = null
+          if (timer) {
+            clearTimeout(timer)
+          }
+          this.npmNetworkLastCycleData = [e]
+          timer = setTimeout(() => {
+            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
+          }, 300)
         }).finally(() => {
           this.toggleLoading(false)
         })
@@ -204,16 +241,37 @@ export default {
         this.toggleLoading(true)
         params.type = this.networkOverviewBeforeTab
         get(api.npm.overview.networkAnalysis, params).then(res => {
+          // if (res.code === 200) {
+          //   this.npmNetworkLastCycleData = res.data.result
+          //   let timer = null
+          //   if (timer) {
+          //     clearTimeout(timer)
+          //   }
+          //   timer = setTimeout(() => {
+          //     this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
+          //   }, 300)
+          // }
           if (res.code === 200) {
             this.npmNetworkLastCycleData = res.data.result
-            let timer = null
+          } else {
-            if (timer) {
+            this.npmNetworkLastCycleData = [res]
-              clearTimeout(timer)
-            }
-            timer = setTimeout(() => {
-              this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
-            }, 300)
           }
+          let timer = null
+          if (timer) {
+            clearTimeout(timer)
+          }
+          timer = setTimeout(() => {
+            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
+          }, 300)
+        }).catch((e) => {
+          let timer = null
+          if (timer) {
+            clearTimeout(timer)
+          }
+          this.npmNetworkLastCycleData = [e]
+          timer = setTimeout(() => {
+            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
+          }, 300)
         }).finally(() => {
           this.toggleLoading(false)
         })
@@ -228,9 +286,19 @@ export default {
           res.forEach((t, i) => {
             if (t.code === 200) {
               this.npmNetworkLastCycleData.push(t.data.result)
-              this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 1)
+            } else {
+              this.npmNetworkLastCycleData.push(t)
             }
+            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 1)
           })
+        }).catch((e) => {
+          // todo 此处的e可能为数组
+          if (e instanceof Array) {
+            e.forEach((t, i) => {
+              this.npmNetworkLastCycleData.push(t)
+              this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 1)
+            })
+          }
         }).finally(() => {
           this.toggleLoading(false)
         })

src/views/charts2/charts/npm/localComponents/SingleValue.vue

@@ -2,7 +2,7 @@
   <div class="single-value" v-for="(npm, index) in newNpmNetworkData" :key="index">
     <div class="single-value__title" style="display: flex">
       {{ $t(npmNetworkName[index].name) }}
-      <chart-error v-if="!npm.value" tooltip :content="npm.msg"></chart-error>
+      <chart-error v-if="npm.message" tooltip :content="npm.message"></chart-error>
     </div>
 
     <div class="single-value__content">
@@ -88,21 +88,25 @@ export default {
         npmNetworkData.forEach((item) => {
           const tempObj = {}
           for (const i in item) {
-            // 将含有avg、p90等关键字使用avg、p90来代替，形成统一属性
+            if (item.msg || item.message) {
-            if (i.indexOf('Avg') > -1) {
+              // 为了兼容字段为msg的情况
-              tempObj.Avg = item[i]
+              tempObj.message = item.msg ? item.msg : item.message
-            } else if (i.indexOf('P50') > -1) {
+            } else {
-              tempObj.P50 = item[i]
+              // 将含有avg、p90等关键字使用avg、p90来代替，形成统一属性
-            } else if (i.indexOf('P90') > -1) {
+              if (i.indexOf('Avg') > -1) {
-              tempObj.P90 = item[i]
+                tempObj.Avg = item[i]
-            } else if (i.indexOf('P95') > -1) {
+              } else if (i.indexOf('P50') > -1) {
-              tempObj.P95 = item[i]
+                tempObj.P50 = item[i]
-            } else if (i.indexOf('P99') > -1) {
+              } else if (i.indexOf('P90') > -1) {
-              tempObj.P99 = item[i]
+                tempObj.P90 = item[i]
+              } else if (i.indexOf('P95') > -1) {
+                tempObj.P95 = item[i]
+              } else if (i.indexOf('P99') > -1) {
+                tempObj.P99 = item[i]
+              }
+              tempObj.value = item.value
             }
           }
-          tempObj.value = item.value
-          tempObj.msg = item.msg
           dealList.push(tempObj)
         })
         this.newNpmNetworkData = dealList