From a16c7b452cb29ae13d75a2d6c72ae11b62598c0c Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Sat, 17 Sep 2022 14:27:13 +0800
Subject: [PATCH] =?UTF-8?q?CN-722=20fix:1.=20=E9=83=A8=E5=88=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B42.=E9=83=A8=E5=88=86=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E7=8E=AF=E6=AF=94=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/npmAppEventTable.scss       |  9 +--
 .../views/charts2/npmRecentEvents.scss        |  9 ++-
 .../charts/npm/NpmAppCategoryScore.vue        | 36 +++++++++--
 src/views/charts2/charts/npm/NpmLine.vue      |  2 +-
 .../charts2/charts/npm/NpmRecentEvents.vue    |  1 +
 .../npm/localComponents/SingleValue.vue       | 60 +++++++++++++++----
 6 files changed, 92 insertions(+), 25 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmAppEventTable.scss b/src/assets/css/components/views/charts2/npmAppEventTable.scss
index 9c09b88a..d04fb6bd 100644
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -55,7 +55,7 @@
     }
     .el-table__body-wrapper.is-scrolling-none {
       tr td {
-        padding: 8px 0 0 0;
+        padding: 6.1px 0;
       }
     }
   }
@@ -93,26 +93,21 @@
       font-weight: 400;
     }
     .data-eventType {
-      font-family: NotoSansHans-Medium;
       font-size: 12px;
       color: $blue;
       font-weight: 500;
       background: #EBF1F4;
       border-radius: 4px;
-      padding: 0 6px;
-      margin-right:10px;
       min-width: fit-content;
-      margin-bottom: 8px;
     }
     .data-eventCount {
-      font-family: NotoSansHans-Medium;
       font-size: 12px;
       color: #046ECA;
       font-weight: 500;
       width:200px;
     }
   }
-  .el-table--group::after,.el-table--border::after, .el-table::before {
+  .el-table--group::after,.el-table--border::after,.el-table::before {
     height: 0px;
   }
 }
diff --git a/src/assets/css/components/views/charts2/npmRecentEvents.scss b/src/assets/css/components/views/charts2/npmRecentEvents.scss
index 5d6709ef..1ab947bb 100644
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -7,6 +7,13 @@
     font-weight: 600;
     margin-bottom: 10px;
   }
+  .npm-recent-table-ten.npm-recent-table {
+    .el-table__body-wrapper.is-scrolling-none {
+      tr td {
+        padding: 6.3px 0;
+      }
+    }
+  }
   .npm-recent-table {
     height: calc(100% - 30px) !important;
     border: 1px solid #E2E5EC;
@@ -24,7 +31,7 @@
     }
     .el-table__body-wrapper.is-scrolling-none {
       tr td {
-        padding: 7.5px 0;
+        padding: 6.75px 0;
       }
       .el-table__empty-block .el-table__empty-text {
         line-height: 25px;
diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
index 24becd68..f181ca04 100644
--- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue
@@ -38,10 +38,18 @@
                   <div class="data-total-value">{{unitConvert(scope.row.totalPacketsRate, unitTypes.bps).join('')}}</div>
                   <div class="data-trend">
                     <div v-if="scope.row.bytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
-                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
+                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+                      <span v-if="scope.row.bytesRateChainRatio <= 5">
+                        {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('')}}
+                      </span>
+                      <span v-else>>500.00%</span>
                     </div>
                     <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('-', '')}}
+                      <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                      <span v-if="scope.row.bytesRateChainRatio <= 5">
+                        {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                      </span>
+                      <span v-else>>500.00%</span>
                     </div>
                     <div v-else-if="scope.row.bytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
                       <i class="cn-icon-constant cn-icon"></i>
@@ -53,10 +61,18 @@
                   <div class="data-total-value">{{unitConvert(scope.row.outboundPacketsRate, unitTypes.bps).join('')}}</div>
                   <div class="data-trend">
                     <div v-if="scope.row.outboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
-                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
+                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+                      <span v-if="scope.row.outboundBytesRateChainRatio <= 5">
+                        {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('')}}
+                      </span>
+                      <span v-else>>500.00%</span>
                     </div>
                     <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('-', '')}}
+                      <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                      <span v-if="scope.row.outboundBytesRateChainRatio <= 5">
+                        {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                      </span>
+                      <span v-else>>500.00%</span>
                     </div>
                     <div v-else-if="scope.row.outboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
                       <i class="cn-icon-constant cn-icon"></i>
@@ -68,10 +84,18 @@
                   <div class="data-total-value">{{unitConvert(scope.row.inboundPacketsRate, unitTypes.bps).join('')}}</div>
                   <div class="data-trend">
                     <div v-if="scope.row.inboundBytesRateChainRatio > 0" class="data-total-trend data-total-trend-red">
-                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
+                      <i class="cn-icon-rise1 cn-icon"></i>&nbsp;
+                      <span v-if="scope.row.inboundBytesRateChainRatio <= 5">
+                        {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('')}}
+                      </span>
+                      <span v-else>>500.00%</span>
                     </div>
                     <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('-', '')}}
+                      <i class="cn-icon-decline cn-icon"></i>&nbsp;
+                      <span v-if="scope.row.inboundBytesRateChainRatio <= 5">
+                        {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}}
+                      </span>
+                      <span v-else>>500.00%</span>
                     </div>
                     <div v-else-if="scope.row.inboundBytesRateChainRatio === 0" class="data-total-trend data-total-trend-black">
                       <i class="cn-icon-constant cn-icon"></i>
diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue
index dbd5eefb..937d7197 100644
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -4,7 +4,7 @@
     <template v-if="chartData.id === 11">
       <div class="npm-line-header">
         <div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
-        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !throughputName">
+        <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !isNoData">
           <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
             <div class="npm-line-header-icon" :class="'icon' + index"></div>
             <div class="npm-line-header-value">{{$t(item.legend)}}</div>
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index 810a57be..e4af4be7 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -6,6 +6,7 @@
         :ref="`dataTable_${index}`"
         :data="tableData"
         class="npm-recent-table"
+        :class="{'npm-recent-table-ten': tableData.length === 10}"
         empty-text=""
         height="100%"
     >
diff --git a/src/views/charts2/charts/npm/localComponents/SingleValue.vue b/src/views/charts2/charts/npm/localComponents/SingleValue.vue
index d654c67f..38551294 100644
--- a/src/views/charts2/charts/npm/localComponents/SingleValue.vue
+++ b/src/views/charts2/charts/npm/localComponents/SingleValue.vue
@@ -5,10 +5,18 @@
       <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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+          <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;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
+          <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>
@@ -25,10 +33,18 @@
       <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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+          <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;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
+          <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>
@@ -45,10 +61,18 @@
       <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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+          <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;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
+          <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>
@@ -65,10 +89,18 @@
       <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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+          <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;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
+          <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>
@@ -85,10 +117,18 @@
       <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;{{unitConvert(npm.value, unitTypes.percent).join('')}}
+          <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;{{unitConvert(npm.value, unitTypes.percent).join('').replaceAll('-', '')}}
+          <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>