From a110ed9efada04101e7b268f1071b7d1d8913f1c 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, 29 Sep 2022 14:48:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E5=87=BA=E5=85=A5=E6=96=B9=E5=90=91=E5=90=8D=E7=A7=B0=E4=B8=8D?=
 =?UTF-8?q?=E5=AF=B9=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E5=8D=95=E4=BD=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/linkDirectionGrid.scss      |  2 +-
 src/mock/linkMonitor.js                       |  2 +-
 .../charts/linkMonitor/LinkDirectionGrid.vue  |  2 +-
 .../LinkDirectionGrid/PopoverContent.vue      | 32 ++++++++++++-------
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/assets/css/components/views/charts2/linkDirectionGrid.scss b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
index 727ec62c..c7554f2c 100644
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -113,7 +113,7 @@ $blue: #046ECA;
 
     .block-content-item-value {
       display: flex;
-      width: 100px;
+      width: 130px;
       font-weight: 600;
     }
   }
diff --git a/src/mock/linkMonitor.js b/src/mock/linkMonitor.js
index fcc2f756..93d53c24 100644
--- a/src/mock/linkMonitor.js
+++ b/src/mock/linkMonitor.js
@@ -135,7 +135,7 @@ if (openMock) {
     const egressLinkIds = ['西安', '太原', '西宁']
     ingressLinkIds.forEach(ingress => {
       egressLinkIds.forEach(egress => {
-        data.push({ egressLinkDirection: egress, ingressLinkDirection: ingress, egressBytes: 12800000000, ingressBytes: 52800000000, totalBytes: 985412000, establishLatencyMs: 50, httpResponseLatency: 50, sslConLatency: 50, tcpLostlenPercent: 0.2, pktRetransPercent: 0.1 })
+        data.push({ egressLinkDirection: egress, ingressLinkDirection: ingress, egressBytes: 12800000000, ingressBytes: 52800000000, totalBytes: 98541200, establishLatencyMs: 50, httpResponseLatency: 50, sslConLatency: 50, tcpLostlenPercent: 0.2, pktRetransPercent: 0.1 })
       })
     })
     return {
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index 0df23c18..3ec4fe2f 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -190,7 +190,7 @@ export default {
      * 计算上下行使用占比
      */
     computeUsage (e, bandwidth) {
-      return Math.ceil((e / bandwidth) * 100)
+      return (e / bandwidth)
     },
     /**
      * 本地计算npm分数
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
index 61cdcad9..61961a6f 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -18,7 +18,7 @@
         </div>
         <div v-for="(item, index2) in row.egress" :key="index2">
 
-          <el-popover :width="370" placement="right" trigger="hover">
+          <el-popover :width="400" placement="right" trigger="hover">
             <template #reference>
               <div class="data-item data-item__hover">
                 <div :class="row.egress[index2].scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
@@ -35,8 +35,8 @@
                 <svg class="icon item-popover-header-icon" aria-hidden="true">
                   <use xlink:href="#cn-icon-arrow-right2"></use>
                 </svg>
-                <span v-if="row.nextHop">{{ row.egress[index2].nextHop }}</span>
-                <span v-else>{{ row.linkId }}</span>
+                <span v-if="row.nextHop">{{ row.egress[index2].egressLinkDirection }}</span>
+                <span v-else>{{ row.egress[index2].linkId }}</span>
               </div>
 
               <div class="item-popover-block">
@@ -55,13 +55,15 @@
                           <svg class="icon item-popover-up" aria-hidden="true">
                             <use xlink:href="#cn-icon-egress"></use>
                           </svg>
-                          {{ row.egress[index2].egressUsage }}%
+<!--                          {{ row.egress[index2].egressUsage }}%-->
+                          {{ unitConvert(row.egress[index2].egressUsage, unitTypes.percent).join('') }}
                         </div>
                         <div>
                           <svg class="icon item-popover-down" aria-hidden="true">
                             <use xlink:href="#cn-icon-ingress"></use>
                           </svg>
-                          {{ row.egress[index2].ingressUsage }}%
+<!--                          {{ row.egress[index2].ingressUsage }}%-->
+                          {{ unitConvert(row.egress[index2].ingressUsage, unitTypes.percent).join('') }}
                         </div>
                       </div>
                     </div>
@@ -70,7 +72,8 @@
                       <div class="block-content-item-name">{{ $t('linkMonitor.linkBlock.total') }}</div>
 
                       <div class="block-content-item-value">
-                        {{ row.egress[index2].totalBytes / 1000 }}Mbps
+<!--                        {{row.egress[index2].totalBytes}}-->
+                        {{unitConvert(row.egress[index2].totalBytes, unitTypes.bps).join('')}}
                       </div>
                     </div>
                   </div>
@@ -95,35 +98,38 @@
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t(npmNetworkName[0].name) }}</div>
                       <div class="block-content-item-value">
-                        {{ row.egress[index2].establishLatencyMs }}ms
+<!--                        {{ row.egress[index2].establishLatencyMs }}ms-->
+                        {{ unitConvert(row.egress[index2].establishLatencyMs, unitTypes.time).join('') }}
                       </div>
                     </div>
 
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t(npmNetworkName[1].name) }}</div>
                       <div class="block-content-item-value">
-                        {{ row.egress[index2].httpResponseLatency }}ms
+<!--                        {{ row.egress[index2].httpResponseLatency }}ms-->
+                        {{ unitConvert(row.egress[index2].httpResponseLatency, unitTypes.time).join('') }}
                       </div>
                     </div>
 
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t(npmNetworkName[2].name) }}</div>
                       <div class="block-content-item-value">
-                        {{ row.egress[index2].sslConLatency }}ms
+<!--                        {{ row.egress[index2].sslConLatency }}ms-->
+                        {{ unitConvert(row.egress[index2].sslConLatency, unitTypes.time).join('') }}
                       </div>
                     </div>
 
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t(npmNetworkName[3].name) }}</div>
                       <div class="block-content-item-value">
-                        {{ row.egress[index2].tcpLostlenPercent * 100 }}%
+                        {{ unitConvert(row.egress[index2].tcpLostlenPercent, unitTypes.percent).join('') }}
                       </div>
                     </div>
 
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t(npmNetworkName[4].name) }}</div>
                       <div class="block-content-item-value">
-                        {{ row.egress[index2].pktRetransPercent * 100 }}%
+                        {{ unitConvert(row.egress[index2].pktRetransPercent, unitTypes.percent).join('') }}
                       </div>
                     </div>
                   </div>
@@ -140,6 +146,8 @@
 </template>
 
 <script>
+import unitConvert from '@/utils/unit-convert'
+import { unitTypes } from '@/utils/constants'
 export default {
   name: 'PopoverContent',
   props: {
@@ -147,6 +155,8 @@ export default {
   },
   data () {
     return {
+      unitConvert,
+      unitTypes,
       npmNetworkName: [
         { name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
         { name: 'networkAppPerformance.httpResponse' },