From 7606f1afcaff2e12df56099c89f619bfac1fec2e 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 16:36:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E7=BA=A2=E7=82=B9=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/views/charts2/linkDirectionGrid.scss   |  2 +-
 .../charts2/charts/linkMonitor/LinkDirectionGrid.vue  | 11 ++++++++---
 .../linkMonitor/LinkDirectionGrid/PopoverContent.vue  |  8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/components/views/charts2/linkDirectionGrid.scss b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
index c7554f2c..dcb343ce 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: 130px;
+      width: 145px;
       font-weight: 600;
     }
   }
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index 3ec4fe2f..98a4d983 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -62,6 +62,7 @@ export default {
           const linkData = res[0].data.result
           // 链路下一跳信息
           const nextLinkData = res[1].data.result
+          console.log('接口的下一跳数据', nextLinkData)
 
           // 链路流量数据
           const gridData = []
@@ -79,7 +80,7 @@ export default {
               const ingressUsage = this.computeUsage(d.ingressBytes, egressLink.bandwidth)
               // 宽带使用超过90%，赋红点
               d.usageMore90 = false
-              if (egressUsage >= 90 || ingressUsage >= 90) {
+              if (egressUsage >= 0.9 || ingressUsage >= 0.9) {
                 d.usageMore90 = true
               }
               // 计算npm分数
@@ -142,7 +143,7 @@ export default {
               const ingressUsage = this.computeUsage(d.ingressBytes, ingressBanwidth)
               // 宽带使用超过90%，赋红点
               d.usageMore90 = false
-              if (egressUsage >= 90 || ingressUsage >= 90) {
+              if (egressUsage >= 0.9 || ingressUsage >= 0.9) {
                 d.usageMore90 = true
               }
               // 计算npm分数
@@ -190,7 +191,11 @@ export default {
      * 计算上下行使用占比
      */
     computeUsage (e, bandwidth) {
-      return (e / bandwidth)
+      let usage = e / bandwidth
+      if (usage >= 1) {
+        usage = 1
+      }
+      return usage
     },
     /**
      * 本地计算npm分数
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
index 61961a6f..92b5bae6 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -18,11 +18,11 @@
         </div>
         <div v-for="(item, index2) in row.egress" :key="index2">
 
-          <el-popover :width="400" placement="right" trigger="hover">
+          <el-popover :width="415" 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>
                 <div :class="row.egress[index2].usageMore90 ? 'data-item__point-red':'data-item__point'"></div>
+                <div :class="row.egress[index2].scoreLow3 ? 'data-item__point-red':'data-item__point'"></div>
               </div>
             </template>
 
@@ -44,7 +44,7 @@
 
                 <div style="display: flex">
                   <div class="row-dot">
-                    <div :class="row.egress[index2].scoreLow3 ? 'red-dot':'green-dot'"></div>
+                    <div :class="row.egress[index2].usageMore90 ? 'red-dot':'green-dot'"></div>
                   </div>
                   <div class="item-popover-block-content">
                     <div class="block-content-item">
@@ -85,7 +85,7 @@
 
                 <div style="display: flex">
                   <div class="row-dot">
-                    <div :class="row.egress[index2].usageMore90 ? 'red-dot':'green-dot'"></div>
+                    <div :class="row.egress[index2].scoreLow3 ? 'red-dot':'green-dot'"></div>
                   </div>
                   <div class="item-popover-block-content">
                     <div class="block-content-item">