From 567670e51a3dd06773731690466cfd13f840dd60 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sun, 11 Sep 2022 19:33:51 +0800
Subject: [PATCH] =?UTF-8?q?CN-708=20feat:=20=E8=89=B2=E5=9D=97=E5=9B=BE?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91-=E5=A2=9E=E5=8A=A0hover=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E3=80=81=E5=A2=9E=E5=8A=A0=E7=83=AD=E5=8A=9Blegend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/views/charts2/linkBlock.scss   | 31 +++++++++++++++++++
 .../charts2/charts/linkMonitor/LinkBlock.vue  | 11 ++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/components/views/charts2/linkBlock.scss b/src/assets/css/components/views/charts2/linkBlock.scss
index 8a22ab7d..32b45c55 100644
--- a/src/assets/css/components/views/charts2/linkBlock.scss
+++ b/src/assets/css/components/views/charts2/linkBlock.scss
@@ -59,6 +59,37 @@
       }
     }
   }
+  .block-heat-legend {
+    display: flex;
+    padding-right: 20px;
+    justify-content: flex-end;
+    padding-top: 10px;
+
+    .legend__box {
+      display: flex;
+      flex-direction: column;
+      flex-basis: 220px;
+
+      .legend__value {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 5px;
+        font-size: 12px;
+        color: #353636;
+      }
+      .legend__color-piece {
+        width: 100%;
+        height: 13px;
+        background-image: linear-gradient(to right, #40537E, #FF005C);
+      }
+      .legend__desc {
+        font-size: 12px;
+        color: #353636;
+        padding-top: 5px;
+      }
+    }
+  }
 }
 .link-block__popper {
   background-color: #1F2B33 !important;
diff --git a/src/views/charts2/charts/linkMonitor/LinkBlock.vue b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
index 340b1b04..94afbf1b 100644
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -31,7 +31,16 @@
         </template>
       </el-popover>
     </div>
-    <div class="block-heat-legend"></div>
+    <div class="block-heat-legend">
+      <div class="legend__box">
+        <div class="legend__value">
+          <span>0</span>
+          <span>90%</span>
+        </div>
+        <div class="legend__color-piece"></div>
+        <div class="legend__desc">{{$t('linkMonitor.linkBlock.bandwidthUsage')}}</div>
+      </div>
+    </div>
   </div>
 </template>