From 02de60e3d29a1f8a3424a94fb7f273871f4a3252 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 28 Sep 2022 16:55:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=B8=8A=E4=B8=8B=E8=A1=8C=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E7=8E=87=E8=B6=85=E8=BF=8790%=EF=BC=8C=E6=88=96?=
 =?UTF-8?q?=E8=80=85npm=E5=88=86=E6=95=B0=E4=BD=8E=E4=BA=8E3=E5=88=86?=
 =?UTF-8?q?=EF=BC=8C=E7=BA=A2=E7=82=B9=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts2/linkDirectionGrid.scss      |  5 +++-
 .../charts/linkMonitor/LinkDirectionGrid.vue  | 26 ++++++++++++++++---
 .../LinkDirectionGrid/PopoverContent.vue      | 14 +++++-----
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/assets/css/components/views/charts2/linkDirectionGrid.scss b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
index c327e9f4..b35459fd 100644
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -55,7 +55,7 @@
           border: 1px solid #DEDEDE;
           border-radius: 4px;
 
-          .data-item__point {
+          .data-item__point, .data-item__point-red {
             height: 8px;
             width: 8px;
             border-radius: 50%;
@@ -65,6 +65,9 @@
               margin-right: 6px;
             }
           }
+          .data-item__point-red {
+            background-color: #E26154;
+          }
         }
 
       }
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index 2cedd368..0df23c18 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -77,8 +77,18 @@ export default {
               const egressUsage = this.computeUsage(d.egressBytes, egressLink.bandwidth)
               // 下行使用情况计算
               const ingressUsage = this.computeUsage(d.ingressBytes, egressLink.bandwidth)
+              // 宽带使用超过90%，赋红点
+              d.usageMore90 = false
+              if (egressUsage >= 90 || ingressUsage >= 90) {
+                d.usageMore90 = true
+              }
               // 计算npm分数
+              // 分数低于3分，赋红点
               d.score = this.localComputeScore(d)
+              d.scoreLow3 = false
+              if (d.score < 3) {
+                d.scoreLow3 = true
+              }
 
               if (data) {
                 const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -105,6 +115,8 @@ export default {
               }
             }
           })
+          console.log('左侧出入链路数据', gridData)
+          this.gridData = gridData
 
           nextLinkData.forEach(d => {
             const ingressLink = linkInfo.find(l => l.nextHop === d.ingressLinkDirection && l.direction === 'ingress')
@@ -128,8 +140,18 @@ export default {
               const egressUsage = this.computeUsage(d.egressBytes, egressBanwidth)
               // 下行使用情况计算
               const ingressUsage = this.computeUsage(d.ingressBytes, ingressBanwidth)
+              // 宽带使用超过90%，赋红点
+              d.usageMore90 = false
+              if (egressUsage >= 90 || ingressUsage >= 90) {
+                d.usageMore90 = true
+              }
               // 计算npm分数
+              // 分数低于3分，赋红点
               d.score = this.localComputeScore(d)
+              d.scoreLow3 = false
+              if (d.score < 3) {
+                d.scoreLow3 = true
+              }
 
               if (data) {
                 const existedEgressLink = data.egress.find(e => e.linkId === egressLink.linkId)
@@ -159,9 +181,7 @@ export default {
               }
             }
           })
-          console.log('左侧出入链路数据', gridData)
           console.log('右侧下一跳数据', gridData2)
-          this.gridData = gridData
           this.gridData2 = gridData2
         }
       })
@@ -170,7 +190,7 @@ export default {
      * 计算上下行使用占比
      */
     computeUsage (e, bandwidth) {
-      return Math.ceil((e / bandwidth) * 100) + '%'
+      return Math.ceil((e / bandwidth) * 100)
     },
     /**
      * 本地计算npm分数
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
index 5f938cd4..f3edc1a6 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -12,6 +12,7 @@
       </div>
       <div class="data-row" v-for="(row, index2) in gridData" :key="index2">
         <div class="ingress-id">
+          <!--兼容下一跳情况-->
           <span v-if="row.nextHop">{{ row.nextHop }}</span>
           <span v-else>{{ row.linkId }}</span>
         </div>
@@ -20,14 +21,15 @@
           <el-popover :width="370" placement="right" trigger="hover">
             <template #reference>
               <div class="data-item data-item__hover">
-                <div class="data-item__point"></div>
-                <div class="data-item__point"></div>
+                <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>
             </template>
 
             <!--鼠标移动的弹窗模块-->
             <template #default>
               <div class="item-popover-header">
+                <!--兼容下一跳情况-->
                 <span v-if="row.nextHop">{{ row.nextHop }}</span>
                 <span v-else>{{ row.linkId }}</span>
                 <svg class="icon item-popover-header-icon" aria-hidden="true">
@@ -42,7 +44,7 @@
 
                 <div style="display: flex">
                   <div class="row-dot">
-                    <div class="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">
@@ -53,13 +55,13 @@
                           <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 }}%
                         </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 }}%
                         </div>
                       </div>
                     </div>
@@ -80,7 +82,7 @@
 
                 <div style="display: flex">
                   <div class="row-dot">
-                    <div class="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">