fix: Link monitor网格、蜂窝模块，bandwidth使用率小于0.01的使用<0.01%

src/views/charts2/charts/linkMonitor/LinkBlock.vue

@@ -38,13 +38,13 @@
                     <svg class="icon item-popover-up" aria-hidden="true">
                       <use xlink:href="#cn-icon-egress"></use>
                     </svg>
-                    {{ unitConvert(item.egressUsage, unitTypes.percent).join('') }}
+                    {{ convertValue(item.egressUsage) }}
                   </div>
                   <div>
                     <svg class="icon item-popover-down" aria-hidden="true">
                       <use xlink:href="#cn-icon-ingress"></use>
                     </svg>
-                    {{ unitConvert(item.ingressUsage, unitTypes.percent).join('') }}
+                    {{ convertValue(item.ingressUsage) }}
                   </div>
                 </div>
               </div>
@@ -91,13 +91,13 @@
                     <svg class="icon item-popover-up" aria-hidden="true">
                       <use xlink:href="#cn-icon-egress"></use>
                     </svg>
-                    {{ unitConvert(item.egressUsage, unitTypes.percent).join('') }}
+                    {{ convertValue(item.egressUsage) }}
                   </div>
                   <div>
                     <svg class="icon item-popover-down" aria-hidden="true">
                       <use xlink:href="#cn-icon-ingress"></use>
                     </svg>
-                    {{ unitConvert(item.ingressUsage, unitTypes.percent).join('') }}
+                    {{ convertValue(item.ingressUsage) }}
                   </div>
                 </div>
               </div>
@@ -281,8 +281,20 @@ export default {
 
       // 将上下行乘100保留2位转换，即10.00为5位，100.00为6位，popover弹窗宽度就增加7px
       // 最小宽度为252px，最少位数为上下行相加为8位
-      const egressUsage = (egress * 100).toFixed(2)
+      let egressUsage = ''
-      const ingressUsage = (ingress * 100).toFixed(2)
+      let ingressUsage = ''
+
+      if (egress < 0.0001 && egress !== 0) {
+        egressUsage = '<0.01%'
+      } else {
+        egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
+      }
+      if (ingress < 0.0001 && ingress !== 0) {
+        ingressUsage = '<0.01%'
+      } else {
+        ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
+      }
+
       length = egressUsage.length + ingressUsage.length
 
       if (length > 8) {
@@ -315,6 +327,21 @@ export default {
           t: +new Date()
         }
       })
+    },
+    /**
+     * 对单位进行转换，值小于0.0001的显示为<0.01%，除此之外正常转换显示
+     * @param value
+     * @returns {string}
+     */
+    convertValue (value) {
+      let newValue = null
+      if (value < 0.0001 && value !== 0) {
+        newValue = '<0.01%'
+      } else {
+        newValue = unitConvert(value, unitTypes.percent).join('')
+      }
+
+      return newValue
     }
   }
 }

src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue

@@ -63,7 +63,7 @@ export default {
           // 接口数据乱序，根据入链路id（ingressLinkId）大小排序之后，
           // 再根据同ingressLinkId下的egressLinkId进行排序
           linkData.sort((a, b) => {
-            if (a.ingressLinkId != b.ingressLinkId) {
+            if (a.ingressLinkId !== b.ingressLinkId) {
               return a.ingressLinkId - b.ingressLinkId
             }
             return a.egressLinkId - b.egressLinkId
@@ -73,7 +73,7 @@ export default {
           const nextLinkData = res[1].data.result
           // 接口数据乱序，根据出方向排序，再根据同个出方向下的入进行排序
           nextLinkData.sort((a, b) => {
-            if (a.ingressLinkDirection != b.ingressLinkDirection) {
+            if (a.ingressLinkDirection !== b.ingressLinkDirection) {
               return a.ingressLinkDirection.localeCompare(b.ingressLinkDirection)
             }
             return a.egressLinkDirection.localeCompare(b.egressLinkDirection)
@@ -256,8 +256,20 @@ export default {
       let width = 0
       let length = 0
 
-      const egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
+      let egressUsage = ''
-      const ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
+      let ingressUsage = ''
+
+      if (egress < 0.0001 && egress !== 0) {
+        egressUsage = '<0.01%'
+      } else {
+        egressUsage = JSON.stringify(parseFloat((egress * 100).toFixed(2)))
+      }
+      if (ingress < 0.0001 && ingress !== 0) {
+        ingressUsage = '<0.01%'
+      } else {
+        ingressUsage = JSON.stringify(parseFloat((ingress * 100).toFixed(2)))
+      }
+
       length = egressUsage.length + ingressUsage.length - 1
 
       if (flag === 'popover') {

src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue

@@ -58,13 +58,13 @@
                           <svg class="icon item-popover-up" aria-hidden="true">
                             <use xlink:href="#cn-icon-egress"></use>
                           </svg>
-                          {{ unitConvert(row.egress[index2].egressUsage, unitTypes.percent).join('') }}
+                          {{ convertValue(row.egress[index2].egressUsage) }}
                         </div>
                         <div>
                           <svg class="icon item-popover-down" aria-hidden="true">
                             <use xlink:href="#cn-icon-ingress"></use>
                           </svg>
-                          {{ unitConvert(row.egress[index2].ingressUsage, unitTypes.percent).join('') }}
+                          {{ convertValue(row.egress[index2].ingressUsage) }}
                         </div>
                       </div>
                     </div>
@@ -167,6 +167,23 @@ export default {
         { name: 'overall.packetRetrans' }
       ]
     }
+  },
+  methods: {
+    /**
+     * 对单位进行转换，值小于0.0001的显示为<0.01%，除此之外正常转换显示
+     * @param value
+     * @returns {string}
+     */
+    convertValue (value) {
+      let newValue = null
+      if (value < 0.0001 && value !== 0) {
+        newValue = '<0.01%'
+      } else {
+        newValue = unitConvert(value, unitTypes.percent).join('')
+      }
+
+      return newValue
+    }
   }
 }
 </script>