From f33dbae49d71992e21f8127cef15dd95f175b5cd Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 16 Aug 2022 09:48:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=201.=E7=8E=AF=E6=AF=94=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B42.Dahsboard=20-=20npm=20-?=
 =?UTF-8?q?=20=E7=BD=91=E7=BB=9C=E8=B4=A8=E9=87=8F=E6=A6=82=E8=A7=88?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/networkOverviewApps.scss    |  5 +-
 src/views/charts2/charts/SingleValue.vue      | 16 +++---
 .../networkOverview/NetworkOverviewApps.vue   |  2 +-
 .../charts/npm/NpmAppCategoryScore.vue        | 49 ++++---------------
 .../charts2/charts/npm/NpmEventsByType.vue    |  5 +-
 5 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
index 05550088..c264f01b 100644
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -159,13 +159,16 @@
           justify-content: center;
           position: relative;
           top: 50%;
-          color: #fff;
+          color: #717171;
           margin-top: -10px;
+          background-color: rgba(113, 113, 113, 0.12);
         }
         .app-card__body-content-percent.red {
+          color: #fff;
           background-color: rgb(226, 97, 84);
         }
         .app-card__body-content-percent.green {
+          color: #fff;
           background-color: rgb(126, 159, 84);
         }
       }
diff --git a/src/views/charts2/charts/SingleValue.vue b/src/views/charts2/charts/SingleValue.vue
index aba04567..d89a3f65 100644
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -10,9 +10,10 @@
         <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
-        <div v-else class="single-value__content-trend single-value__content-trend-black">
+        <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.establishLatencyP95, unitTypes.time).join(' ')}}</div>
@@ -29,9 +30,10 @@
         <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
-        <div v-else class="single-value__content-trend single-value__content-trend-black">
+        <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.httpResponseLatencyP95, unitTypes.time).join(' ')}}</div>
@@ -48,9 +50,10 @@
         <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
-        <div v-else class="single-value__content-trend single-value__content-trend-black">
+        <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.sslConLatencyP95, unitTypes.time).join(' ')}}</div>
@@ -67,9 +70,10 @@
         <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
-        <div v-else class="single-value__content-trend single-value__content-trend-black">
+        <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.sequenceGapLossP95, unitTypes.percent).join(' ')}}</div>
@@ -86,9 +90,10 @@
         <div v-else-if="npm.value < 0" class="single-value__content-trend single-value__content-trend-green">
           <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
         </div>
-        <div v-else class="single-value__content-trend single-value__content-trend-black">
+        <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.pktRetransP95, unitTypes.percent).join(' ')}}</div>
@@ -138,7 +143,6 @@ export default {
           Object.keys(t).forEach(r => {
             Object.keys(e).forEach(d => {
               if (r === d) {
-                t.trend = getChainRatio(t[r], e[d])
                 t.value = getChainRatio(t[r], e[d])
               }
             })
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index e2e79d0b..bc7275da 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -38,7 +38,7 @@
                 <div class="app-card__body-content-percent green" v-else-if="app.value < 0">
                   -{{unitConvert(app.value, unitTypes.percent).join('').replaceAll('-', '')}}
                 </div>
-                <div v-else></div>
+                <div v-else-if="app.value === '-' || app.value === 0" class="app-card__body-content-percent">0</div>
               </div>
             </div>
             <div class="app-card__body-previous">
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index c93dcff3..9afcbb9a 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -1,47 +1,15 @@
 <template>
   <div class="npm-app">
-   <div class="npm-app-left">
+    <div class="npm-app-left">
       <div class="npm-app-letter">
         <div v-for="(letter, index) in colorPatchData" :key="index">
           {{letter.letter}}
         </div>
       </div>
       <div class="npm-app-body">
-        <div class="npm-app-body-patch">
-          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-video"></i></span></div>
-          <template v-if="tableData.length > 0">
-            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[0].score >= index + 1}"></div>
-          </template>
-        </div>
-        <div class="npm-app-body-patch">
-          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-social-network"></i></span></div>
-          <template v-if="tableData.length > 0">
-            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[4].score >= index + 1}"></div>
-          </template>
-        </div>
-        <div class="npm-app-body-patch">
-          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-file-sharing"></i></span></div>
-          <template v-if="tableData.length > 0">
-            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[1].score >= index + 1}"></div>
-          </template>
-        </div>
-        <div class="npm-app-body-patch">
-          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-gaming"></i></span></div>
-          <template v-if="tableData.length > 0">
-            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[3].score >= index + 1}"></div>
-          </template>
-        </div>
-        <div class="npm-app-body-patch">
-          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-email"></i></span></div>
-          <template v-if="tableData.length > 0">
-            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[5].score >= index + 1}"></div>
-          </template>
-        </div>
-        <div class="npm-app-body-patch">
-          <div class="npm-app-body-icon"><span><i class="cn-icon cn-icon-voip"></i></span></div>
-          <template v-if="tableData.length > 0">
-            <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': tableData[2].score >= index + 1}"></div>
-          </template>
+        <div class="npm-app-body-patch" v-for="(data, index) in tableData" :key="index">
+          <div class="npm-app-body-icon"><span><i :class="data.icon"></i></span></div>
+          <div class="npm-app-body-color" v-for="(item, index) in 6" :key="index" :class="{'score-color': data.score >= index + 1}"></div>
         </div>
       </div>
     </div>
@@ -72,9 +40,10 @@
                   <div v-else-if="scope.row.bytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                   </div>
-                  <div v-else class="data-total-trend data-total-trend-black">
+                  <div v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
                   </div>
+                  <div v-else></div>
                 </template>
                 <template v-else-if="item.prop === 'outbound'">
                   {{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}
@@ -84,9 +53,10 @@
                   <div v-else-if="scope.row.outboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                   </div>
-                  <div v-else class="data-total-trend data-total-trend-black">
+                  <div v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
                   </div>
+                  <div v-else></div>
                 </template>
                 <template v-else-if="item.prop === 'inbound'">
                   {{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}
@@ -96,9 +66,10 @@
                   <div v-else-if="scope.row.inboundBytesRateChainRatio < 0" class="data-total-trend data-total-trend-green">
                     <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
                   </div>
-                  <div v-else class="data-total-trend data-total-trend-black">
+                  <div v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
                   </div>
+                  <div v-else></div>
                 </template>
                 <template v-else-if="item.prop === 'score'">
                   <div v-if="scope.row.score <= 2" :class="{'data-score-red': scope.row.score <= 2}" class="data-score">
diff --git a/src/views/charts2/charts/npm/NpmEventsByType.vue b/src/views/charts2/charts/npm/NpmEventsByType.vue
index 71d08211..6757a618 100644
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -7,7 +7,7 @@
         <div class="chart-drawing" id="chart"></div>
         <div class="npm-event-pie-legends">
           <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div>
+            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
             <template v-for="(legend, index) in chartData" :key="index">
               <div class="npm-event-pie-legend-type">
                 <div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div>
@@ -16,7 +16,7 @@
             </template>
           </div>
           <div class="npm-event-pie-legend">
-            <div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div>
+            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
             <template v-for="(legend, index) in chartData" :key="index">
               <div class="npm-event-pie-legend-total">{{legend.count}}</div>
             </template>
@@ -99,6 +99,7 @@ export default {
         if (res.code === 200) {
           if (res.data.result.length <= 0) {
             this.isNoData = true
+            return
           }
           res.data.result.forEach(t => {
             if (t.eventSeverity === 'critical') {