feat: Dahsboard - npm - 网络质量概览图表 根据接口返回展示数据

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

@@ -14,6 +14,14 @@
       margin-right: 10px;
       align-items: center;
     }
+    .npm-line-header-right.active {
+      .npm-line-header-icon {
+        background: #ccc;
+      }
+      .npm-line-header-value {
+        color: #ccc;
+      }
+    }
     .npm-line-header-icon {
       border-radius: 3px;
       width: 16px;
@@ -35,10 +43,6 @@
       line-height: 12px;
       font-weight: 400;
     }
-    .npm-line-header-value.active {
-      color: #717171;
-      font-weight: 600;
-    }
   }
   .chart-drawing {
     height: 100%;

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

@@ -31,32 +31,37 @@
         font-weight: 700;
         margin-right: 12px;
       }
-      .single-value__content-value {
-        font-size: 12px;
-        font-weight: 500;
-        height: 20px;
-        width: 52px;
-        line-height: 20px;
-        border-radius: 10px;
+      .single-value__content-trend {
         display: flex;
+        margin-left: 6px;
+        align-items: center;
         justify-content: center;
-        position: relative;
-        top: 50%;
-        margin-top: -10px;
-        div {
-          i {
-            margin-right: 5px;
-          }
+        margin-top: 2px;
+        border-radius: 10px;
+        font-weight:500;
+        font-size: 12px;
+      }
+      .single-value__content-trend-black {
+        background-color: rgba(113,113,113,0.12);
+        color: #717171;
+        width: 36px;
+        height: 20px;
+      }
+      .single-value__content-trend-green {
+        background-color: rgba(126,159,84,0.12);
+        width: 52px;
+        height: 20px;
+        color:#7E9F54;
+      }
+      .single-value__content-trend-red {
+        background-color: rgba(226,97,84,0.12);
+        width: 52px;
+        height: 20px;
+        color:#E26154;
+        .cn-icon-rise1 {
+          color: #E44D3E;
         }
       }
-      .single-value__content-value.red {
-        background-color: rgba(226, 97, 84, 0.12);
-        color: #E26154;
-      }
-      .single-value__content-value.green {
-        background-color: rgba(126, 159, 84, 0.12);
-        color: #7E9F54;
-      }
     }
     .single-value__circle {
       display: flex;

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

@@ -4,7 +4,7 @@
   .npm-recent-title {
     font-size: 14px;
     color: #353636;
-    font-weight: 500;
+    font-weight: 600;
     margin-bottom: 10px;
   }
   .npm-recent-table {