From c82ebcacce6b2c096834dd3e7a85fda95b34d2ae Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 9 Aug 2022 14:30:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BA=94=E7=94=A8=E8=AF=84=E5=88=86?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=8E=AF=E6=AF=94=E8=AE=A1=E7=AE=97=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/npmAppCategoryScore.scss    |  8 ++---
 .../views/charts2/npmNetworkQuantity.scss     |  7 ++--
 .../charts2/charts/NpmAppCategoryScore.vue    | 32 ++++++++++---------
 src/views/charts2/charts/SingleValue.vue      | 24 +++++++-------
 4 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index 98eadb81..f3be6df9 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
@@ -130,23 +130,21 @@
       margin-top: 2px;
       border-radius: 10px;
       font-weight:500;
+      font-size: 12px;
+      height: 20px;
+      padding: 0 5px;
     }
     .data-total-trend-black {
       background-color: rgba(113,113,113,0.12);
       color: #717171;
       width: 36px;
-      height: 20px;
     }
     .data-total-trend-green {
       background-color: rgba(126,159,84,0.12);
-      width: 52px;
-      height: 20px;
       color:#7E9F54;
     }
     .data-total-trend-red {
       background-color: rgba(226,97,84,0.12);
-      width: 52px;
-      height: 20px;
       color:#E26154;
       .cn-icon-rise1{
         color: #E44D3E;
diff --git a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
index 7abfac03..4fc7fd14 100644
--- a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
+++ b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss
@@ -40,23 +40,20 @@
         border-radius: 10px;
         font-weight:500;
         font-size: 12px;
+        height: 20px;
+        padding: 0 5px;
       }
       .single-value__content-trend-black {
         background-color: rgba(113,113,113,0.12);
         color: #717171;
         width: 36px;
-        height: 20px;
       }
       .single-value__content-trend-green {
         background-color: rgba(126,159,84,0.12);
-        width: 52px;
-        height: 20px;
         color:#7E9F54;
       }
       .single-value__content-trend-red {
         background-color: rgba(226,97,84,0.12);
-        width: 52px;
-        height: 20px;
         color:#E26154;
         .cn-icon-rise1 {
           color: #E44D3E;
diff --git a/src/views/charts2/charts/NpmAppCategoryScore.vue b/src/views/charts2/charts/NpmAppCategoryScore.vue
index a79898f8..575efdaa 100644
--- a/src/views/charts2/charts/NpmAppCategoryScore.vue
+++ b/src/views/charts2/charts/NpmAppCategoryScore.vue
@@ -54,11 +54,11 @@
                 </template>
                 <template v-else-if="item.prop === 'total'">
                   {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
-                  <div v-if="periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'up'" class="data-total-trend data-total-trend-red">
-                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total}}%
+                  <div v-if="chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
                   </div>
-                  <div v-else-if="periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'down'" class="data-total-trend data-total-trend-green">
-                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total}}%
+                  <div v-else-if="chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
                   </div>
                   <div v-else class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
@@ -66,11 +66,11 @@
                 </template>
                 <template v-else-if="item.prop === 'outbound'">
                   {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
-                  <div v-if="periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'up'" class="data-total-trend data-total-trend-red">
-                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).total}}%
+                  <div v-if="chainCalculation(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
                   </div>
-                  <div v-else-if="periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'down'" class="data-total-trend data-total-trend-green">
-                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).total}}%
+                  <div v-else-if="chainCalculation(scope.row.outboundTrendValue, scope.row.pOutboundTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
                   </div>
                   <div v-else class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
@@ -78,11 +78,11 @@
                 </template>
                 <template v-else-if="item.prop === 'inbound'">
                   {{unitConvert(scope.row[item.prop], unitTypes.bps).join('')}}
-                  <div v-if="periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'up'" class="data-total-trend data-total-trend-red">
-                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).total}}%
+                  <div v-if="chainCalculation(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'up' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
                   </div>
-                  <div v-else-if="periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'down'" class="data-total-trend data-total-trend-green">
-                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{periodicJudgmentCalculationChange(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).total}}%
+                  <div v-else-if="chainCalculation(scope.row.inboundTrendValue, scope.row.pInboundTrendValue).value === 'down' && chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total !== 0" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>&nbsp;{{unitConvert(chainCalculation(scope.row.totalTrendValue, scope.row.pTotalTrendValue).total, unitTypes.percent).join('')}}
                   </div>
                   <div v-else class="data-total-trend data-total-trend-black">
                     <i class="cn-icon-constant cn-icon"></i>
@@ -237,16 +237,18 @@ export default {
     tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
       return 'border-right:0px;font-size:12px;font-weight:500;padding:4px 0 !important;border-bottom: 1px solid #E2E5EC;'
     },
-    periodicJudgmentCalculationChange (period, pperiod) {
+    chainCalculation (period, pperiod) {
       const periodicData = {}
       if (period > pperiod) {
         periodicData.value = 'up'
-        periodicData.total = parseInt(((period - pperiod) / pperiod) * 100)
+        console.log((period - pperiod), pperiod)
+        periodicData.total = (period - pperiod) / pperiod
       } else if (period < pperiod) {
         periodicData.value = 'down'
-        periodicData.total = parseInt(((pperiod - period) / pperiod) * 100)
+        periodicData.total = (pperiod - period) / pperiod
       } else {
         periodicData.value = ''
+        periodicData.total = 0
       }
       return periodicData
     }
diff --git a/src/views/charts2/charts/SingleValue.vue b/src/views/charts2/charts/SingleValue.vue
index aed23ab6..b2b81e37 100644
--- a/src/views/charts2/charts/SingleValue.vue
+++ b/src/views/charts2/charts/SingleValue.vue
@@ -5,10 +5,10 @@
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div>
         <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -24,10 +24,10 @@
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div>
         <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -43,10 +43,10 @@
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div>
         <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -62,10 +62,10 @@
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div>
         <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -81,10 +81,10 @@
       <div class="single-value__content">
         <div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div>
         <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
-          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
+          <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{unitConvert(npm.value, unitTypes.percent).join('')}}
         </div>
         <div v-else class="single-value__content-trend single-value__content-trend-black">
           <i class="cn-icon-constant cn-icon"></i>
@@ -136,10 +136,10 @@ export default {
       const periodicData = {}
       if (period > pperiod) {
         periodicData.value = 'up'
-        periodicData.total = parseInt(((period - pperiod) / pperiod) * 100)
+        periodicData.total = (period - pperiod) / pperiod
       } else if (period < pperiod) {
         periodicData.value = 'down'
-        periodicData.total = parseInt(((pperiod - period) / pperiod) * 100)
+        periodicData.total = (pperiod - period) / pperiod
       } else {
         periodicData.value = ''
         periodicData.total = 0