feat: Link monitor网格模块，动态适配弹窗宽度

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;
     }
   }

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
     }
   }
 }

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>