From 51ffd3d7efd43e3ccae372f974df4644ad34af06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 14 Oct 2022 14:50:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Link=20monitor=E7=BD=91=E6=A0=BC?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=EF=BC=8C=E5=8A=A8=E6=80=81=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/assets/css/components/views/charts2/linkDirectionGrid.scss b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
index dcb343ce..caac356f 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: 145px;
+      min-width: 75px;
       font-weight: 600;
     }
   }
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index 15aa44a8..373281f1 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -118,6 +118,8 @@ export default {
                     linkId: egressLink.linkId,
                     egressUsage: egressUsage,
                     ingressUsage: ingressUsage,
+                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                     totalBitsRate: d.totalBitsRate,
                     ...d
                   })
@@ -129,6 +131,8 @@ export default {
                     linkId: egressLink.linkId,
                     egressUsage: egressUsage,
                     ingressUsage: ingressUsage,
+                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                     totalBitsRate: d.totalBitsRate,
                     ...d
                   }]
@@ -182,6 +186,8 @@ export default {
                     nextHop: egressLink.nextHop,
                     egressUsage: egressUsage,
                     ingressUsage: ingressUsage,
+                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                     totalBitsRate: d.totalBitsRate,
                     ...d
                   })
@@ -195,6 +201,8 @@ export default {
                     nextHop: ingressLink.nextHop,
                     egressUsage: egressUsage,
                     ingressUsage: ingressUsage,
+                    popoverWidth: this.computeWidth(egressUsage, ingressUsage, 'popover'),
+                    valueWidth: this.computeWidth(egressUsage, ingressUsage, 'value'),
                     totalBitsRate: d.totalBitsRate,
                     ...d
                   }]
@@ -204,7 +212,6 @@ export default {
           })
 
           this.gridData2 = gridData2
-          console.log('打印下一跳数据', gridData2)
         } else {
           this.isNoData = true
         }
@@ -240,6 +247,26 @@ export default {
         npmScore = 6
       }
       return npmScore
+    },
+    /**
+     * 计算popover弹窗和右侧数据模块的宽度
+     * 弹窗最小宽度为360px，右侧数据最小宽度为75px，右侧数据每大一位，popover弹窗宽度增加7px
+     */
+    computeWidth (egress, ingress, flag) {
+      let width = 0
+      let length = 0
+
+      const egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
+      const ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
+      length = egressUsage.length + ingressUsage.length - 1
+
+      if (flag === 'popover') {
+        width = 360 + length * 7
+      } else {
+        width = 75 + length * 7
+      }
+
+      return width
     }
   }
 }
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
index 9f1e9cf5..7638fb4b 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -21,7 +21,7 @@
         </div>
         <div v-for="(item, index2) in row.egress" :key="index2">
 
-          <el-popover :width="415" placement="right" trigger="hover">
+          <el-popover :width="item.popoverWidth" placement="right" trigger="click">
             <template #reference>
               <div class="data-item data-item__hover">
                 <div :class="row.egress[index2].usageMore90 ? 'data-item__point-red':'data-item__point'"></div>
@@ -53,7 +53,7 @@
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t('linkMonitor.bandwidthUsage') }}</div>
 
-                      <div class="block-content-item-value">
+                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
                         <div style="margin-left: -10px">
                           <svg class="icon item-popover-up" aria-hidden="true">
                             <use xlink:href="#cn-icon-egress"></use>
@@ -72,7 +72,7 @@
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t('linkMonitor.linkBlock.total') }}</div>
 
-                      <div class="block-content-item-value">
+                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
                         {{unitConvert(row.egress[index2].totalBitsRate, unitTypes.bps).join('')}}
                       </div>
                     </div>
@@ -90,42 +90,42 @@
                   <div class="item-popover-block-content">
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t('linkMonitor.npmScore1') }}</div>
-                      <div class="block-content-item-value">
+                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
                         {{ row.egress[index2].score }}
                       </div>
                     </div>
 
                     <div class="block-content-item">
                       <div class="block-content-item-name">{{ $t(npmNetworkName[0].name) }}</div>
-                      <div class="block-content-item-value">
+                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
                         {{ 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">
+                      <div class="block-content-item-value" :style="{'width': row.egress[index2].valueWidth + 'px'}">
                         {{ 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">
+                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
                         {{ 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">
+                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
                         {{ 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">
+                      <div class="block-content-item-value" :style="{width: row.egress[index2].valueWidth + 'px'}">
                         {{ unitConvert(row.egress[index2].pktRetransPercent, unitTypes.percent).join('') }}
                       </div>
                     </div>