From 1ac910fc54d6c3bc90d894d07019dc08df6a37fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Thu, 24 Nov 2022 09:48:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20SingleValue=E7=B2=BE=E7=AE=80=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../npm/localComponents/SingleValue.vue       | 223 +++++++-----------
 1 file changed, 87 insertions(+), 136 deletions(-)

diff --git a/src/views/charts2/charts/npm/localComponents/SingleValue.vue b/src/views/charts2/charts/npm/localComponents/SingleValue.vue
index c6159c54..e4dc92d1 100644
--- a/src/views/charts2/charts/npm/localComponents/SingleValue.vue
+++ b/src/views/charts2/charts/npm/localComponents/SingleValue.vue
@@ -1,153 +1,65 @@
-<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>
-      <div class="single-value__content">
-        <div class="single-value__content-number">{{unitConvert(npm.establishLatencyMsAvg, unitTypes.time).join(' ')}}</div>
-        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-          <span v-if="npm.value <= 5">
-            {{unitConvert(npm.value, unitTypes.percent).join('')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-decline cn-icon"></i>&nbsp;
-          <span v-if="npm.value >= -5">
-            {{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
-          <i class="cn-icon-constant cn-icon"></i>
-        </div>
-        <div v-else></div>
+<template>
+  <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>
+    </div>
+
+    <div class="single-value__content">
+      <div class="single-value__content-number" v-if="index ===0 || index ===1 || index ===2">
+        {{ unitConvert(npm.Avg, unitTypes.time).join(' ') }}
       </div>
-      <div class="single-value__circle">
-        <div class="single-value__circle-p95">P95: {{unitConvert(npm.establishLatencyMsP95, unitTypes.time).join(' ')}}</div>
-        <div class="single-value__circle-p99">P99: {{unitConvert(npm.establishLatencyMsP99, unitTypes.time).join(' ')}}</div>
+      <div class="single-value__content-number" v-else>
+        {{unitConvert(npm.Avg, unitTypes.percent).join(' ')}}
       </div>
-    </template>
-    <template v-if="index === 1">
-      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
-      <div class="single-value__content">
-        <div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div>
-        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-          <span v-if="npm.value <= 5">
-            {{unitConvert(npm.value, unitTypes.percent).join('')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-decline cn-icon"></i>&nbsp;
-          <span v-if="npm.value >= -5">
-            {{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
-          <i class="cn-icon-constant cn-icon"></i>
-        </div>
-        <div v-else></div>
+      <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
+        <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+        <span v-if="npm.value <= 5">
+            {{ unitConvert(npm.value, unitTypes.percent).join('') }}
+        </span>
+        <span v-else>>500.00%</span>
       </div>
-      <div class="single-value__circle">
-        <div class="single-value__circle-p95">P95: {{unitConvert(npm.httpResponseLatencyP95, unitTypes.time).join(' ')}}</div>
-        <div class="single-value__circle-p99">P99: {{unitConvert(npm.httpResponseLatencyP99, unitTypes.time).join(' ')}}</div>
+      <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
+        <i class="cn-icon-decline cn-icon"></i>&nbsp;
+        <span v-if="npm.value >= -5">
+            {{ unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '') }}
+        </span>
+        <span v-else>>500.00%</span>
       </div>
-    </template>
-    <template v-if="index === 2">
-      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
-      <div class="single-value__content">
-        <div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div>
-        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-          <span v-if="npm.value <= 5">
-            {{unitConvert(npm.value, unitTypes.percent).join('')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-decline cn-icon"></i>&nbsp;
-          <span v-if="npm.value >= -5">
-            {{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
-          <i class="cn-icon-constant cn-icon"></i>
-        </div>
-        <div v-else></div>
+      <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
+        <i class="cn-icon-constant cn-icon"></i>
       </div>
-      <div class="single-value__circle">
-        <div class="single-value__circle-p95">P95: {{unitConvert(npm.sslConLatencyP95, unitTypes.time).join(' ')}}</div>
-        <div class="single-value__circle-p99">P99: {{unitConvert(npm.sslConLatencyP99, unitTypes.time).join(' ')}}</div>
+      <div v-else></div>
+    </div>
+
+    <div class="single-value__circle">
+      <div class="single-value__circle-p95">
+        <span v-if="index ===0 || index ===1 || index ===2">
+          P95:{{ unitConvert(npm.P95, unitTypes.time).join(' ') }}</span>
+        <span v-else>
+          P95:{{ unitConvert(npm.P95, unitTypes.percent).join(' ') }}
+        </span>
       </div>
-    </template>
-    <template v-if="index === 3">
-      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
-      <div class="single-value__content">
-        <div class="single-value__content-number">{{unitConvert(npm.tcpLostlenPercentAvg, unitTypes.percent).join(' ')}}</div>
-        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-          <span v-if="npm.value <= 5">
-            {{unitConvert(npm.value, unitTypes.percent).join('')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-decline cn-icon"></i>&nbsp;
-          <span v-if="npm.value >= -5">
-            {{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
-          <i class="cn-icon-constant cn-icon"></i>
-        </div>
-        <div v-else></div>
+      <div class="single-value__circle-p99">
+        <span v-if="index ===0 || index ===1 || index ===2">
+          P99:{{ unitConvert(npm.P99, unitTypes.time).join(' ') }}
+        </span>
+        <span v-else>
+          P99:{{ unitConvert(npm.P99, unitTypes.percent).join(' ') }}
+        </span>
       </div>
-      <div class="single-value__circle">
-        <div class="single-value__circle-p95">P95: {{unitConvert(npm.tcpLostlenPercentP95, unitTypes.percent).join(' ')}}</div>
-        <div class="single-value__circle-p99">P99: {{unitConvert(npm.tcpLostlenPercentP99, unitTypes.percent).join(' ')}}</div>
-      </div>
-    </template>
-    <template v-if="index === 4">
-      <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
-      <div class="single-value__content">
-        <div class="single-value__content-number">{{unitConvert(npm.pktRetransPercentAvg, unitTypes.percent).join(' ')}}</div>
-        <div v-if="npm.value > 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
-          <span v-if="npm.value <= 5">
-            {{unitConvert(npm.value, unitTypes.percent).join('')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-decline cn-icon"></i>&nbsp;
-          <span v-if="npm.value >= -5">
-            {{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
-          </span>
-          <span v-else>>500.00%</span>
-        </div>
-        <div v-else-if="npm.value === 0" class="single-value__content-trend single-value__content-trend-black">
-          <i class="cn-icon-constant cn-icon"></i>
-        </div>
-        <div v-else></div>
-      </div>
-      <div class="single-value__circle">
-        <div class="single-value__circle-p95">P95: {{unitConvert(npm.pktRetransPercentP95, unitTypes.percent).join(' ')}}</div>
-        <div class="single-value__circle-p99">P99: {{unitConvert(npm.pktRetransPercentP99, unitTypes.percent).join(' ')}}</div>
-      </div>
-    </template>
+    </div>
   </div>
 </template>
 
 <script>
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
+import ChartError from '@/components/common/Error'
+
 export default {
   name: 'SingleValue',
+  components: { ChartError },
   props: {
     npmNetworkName: Array,
     npmNetworkData: Array
@@ -155,7 +67,46 @@ export default {
   data () {
     return {
       unitTypes,
-      unitConvert
+      unitConvert,
+      newNpmNetworkData: [] // 整合处理传过来的数据列表
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    /**
+    * 初始化数据
+    */
+    initData () {
+      // 传过来的数据
+      const npmNetworkData = this.npmNetworkData
+      // 处理数据后的数组
+      const dealList = []
+
+      if (npmNetworkData !== undefined && npmNetworkData.length > 0) {
+        npmNetworkData.forEach((item) => {
+          const tempObj = {}
+          for (const i in item) {
+            // 将含有avg、p90等关键字使用avg、p90来代替，形成统一属性
+            if (i.indexOf('Avg') > -1) {
+              tempObj.Avg = item[i]
+            } else if (i.indexOf('P50') > -1) {
+              tempObj.P50 = item[i]
+            } else if (i.indexOf('P90') > -1) {
+              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.msg = item.msg
+          dealList.push(tempObj)
+        })
+        this.newNpmNetworkData = dealList
+      }
     }
   }
 }