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