CN-708 feat: 色块图调整为蜂窝图

src/assets/css/components/views/charts2/linkBlock.scss

@@ -2,6 +2,65 @@
   $blue: #046ECA;
   $grey: #353636;
 
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+
+  .block-list {
+    display: flex;
+    position: relative;
+    width: calc(50% - 10px);
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    background-color: #F7F7F7;
+
+    .block-list__title {
+      position: absolute;
+      font-size: 14px;
+      color: #046ECA;
+      top: 16px;
+      left: 20px;
+    }
+    .block-list__list {
+      display: flex;
+      flex-wrap: wrap;
+      width: 260px;
+      margin: auto;
+
+      .block-list__block {
+        margin: 0 3px 0 2px;
+        height: 51px;
+
+        .block-hex {
+          overflow: hidden;
+          display: block;
+          width: 44px;
+          height: 51px;
+          transform: rotate(-60deg) skewY(30deg);
+        }
+        .block-hex-in {
+          display: block;
+          width: 44px;
+          height: 51px;
+          text-align: center;
+          transform: skewY(-30deg) rotate(60deg);
+          cursor: pointer;
+        }
+        &:nth-child(9n + 1) {
+          margin-left: 27px;
+        }
+        &:nth-child(n + 5) {
+          margin-top: -9px;
+        }
+      }
+    }
+  }
+}
+/*.link-blocks {
+  $blue: #046ECA;
+  $grey: #353636;
+
   border: 1px solid #E2E5EC;
   height: 100%;
   width: 100%;
@@ -90,7 +149,7 @@
       }
     }
   }
-}
+}*/
 .link-block__popper {
   background-color: #1F2B33 !important;
   border-color: #F7F7F7 !important;

src/mock/linkMonitor.js

@@ -4,8 +4,8 @@ const openMock = true
 if (openMock) {
   Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/links.*'), 'get', function (requestObj) {
     const linkData = []
-    for (let i = 0; i < 94; i++) {
+    for (let i = 0; i < 10; i++) {
-      linkData.push({ linkId: 20 * (i + 300), totalBitsRate: Math.floor(Math.pow(1.1, i) * 10000) })
+      linkData.push({ linkId: 20 * (i + 300), totalBitsRate: Math.floor(Math.pow(1.3, i) * 10000) })
     }
     return {
       msg: 'success',

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

@@ -1,6 +1,6 @@
 <template>
   <div class="link-blocks">
-    <el-tabs v-model="tab">
+<!--<el-tabs v-model="tab">
       <el-tab-pane :label="$t('linkMonitor.links')" :name="0"></el-tab-pane>
       <el-tab-pane :label="$t('linkMonitor.nextHopInternet')" :name="1"></el-tab-pane>
     </el-tabs>
@@ -40,6 +40,74 @@
         <div class="legend__color-piece"></div>
         <div class="legend__desc">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
       </div>
+    </div> -->
+    <div class="block-list">
+      <div class="block-list__title">{{$t('linkMonitor.links')}}</div>
+      <div class="block-list__list">
+        <el-popover
+            placement="bottom"
+            trigger="hover"
+            popper-class="link-block__popper"
+            v-for="(item, index) in linkData"
+            :width="220"
+            :key="index"
+        >
+          <template #reference>
+            <div class="block-list__block" :key="index">
+              <span class="block-hex">
+                <span class="block-hex-in" :style="`background-color: ${item.color}`"></span>
+              </span>
+            </div>
+          </template>
+          <template #default>
+            <div class="popper-content">
+              <div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
+              <div class="popper-content__link-info">
+                <div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
+                <div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
+              </div>
+              <div class="popper-content__link-info">
+                <div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
+                <div class="info__value">50%</div>
+              </div>
+            </div>
+          </template>
+        </el-popover>
+      </div>
+    </div>
+    <div class="block-list">
+      <div class="block-list__title">{{$t('linkMonitor.nextHopInternet')}}</div>
+      <div class="block-list__list">
+        <el-popover
+            placement="bottom"
+            trigger="hover"
+            popper-class="link-block__popper"
+            v-for="(item, index) in linkData"
+            :width="220"
+            :key="index"
+        >
+          <template #reference>
+            <div class="block-list__block" :key="index">
+              <span class="block-hex">
+                <span class="block-hex-in" :style="`background-color: ${item.color}`"></span>
+              </span>
+            </div>
+          </template>
+          <template #default>
+            <div class="popper-content">
+              <div class="popper-content__link-id">Link ID: {{item.linkId}}</div>
+              <div class="popper-content__link-info">
+                <div class="info__label">{{$t('linkMonitor.linkBlock.total')}}</div>
+                <div class="info__value">{{unitConvert(item.totalBitsRate, unitTypes.bps).join('')}}</div>
+              </div>
+              <div class="popper-content__link-info">
+                <div class="info__label">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
+                <div class="info__value">50%</div>
+              </div>
+            </div>
+          </template>
+        </el-popover>
+      </div>
     </div>
   </div>
 </template>