CN-629 feat: Dahsboard - npm - 网络质量概览图表开发

src/assets/css/components/index.scss

@@ -50,5 +50,6 @@
 @import './views/charts2/networkOverviewDdosDetection';
 @import './views/charts2/networkOverviewPerformanceEvent';
 @import './views/charts2/networkOverviewTabs';
+@import './views/charts2/npmNetworkQuantity';
 @import './views/charts2/npmTabs';
 //@import '../chart';

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

@@ -0,0 +1,72 @@
+.npm-network-quantity {
+  display: flex;
+  border: 1px solid #E2E5EC;
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+  .single-value:nth-of-type(1) {
+    border-left: none;
+  }
+  .single-value {
+    flex: 1;
+    padding-left: 20px;
+    height: calc(100% - 48px);
+    margin: auto;
+    border-left: 1px solid #E2E5EC;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .single-value__title {
+      font-size: 14px;
+      color: #575757;
+      font-weight: 400;
+    }
+    .single-value__content {
+      margin: 10px 0 12px 0;
+      display: flex;
+      .single-value__content-number {
+        font-family: Helvetica-Bold;
+        font-size: 24px;
+        color: #353636;
+        font-weight: 700;
+        margin-right: 12px;
+      }
+      .single-value__content-value {
+        font-family: NotoSansHans-Medium;
+        font-size: 12px;
+        font-weight: 500;
+        height: 20px;
+        width: 52px;
+        line-height: 20px;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        position: relative;
+        top: 50%;
+        margin-top: -10px;
+        div {
+          i {
+            margin-right: 5px;
+          }
+        }
+      }
+      .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;
+      font-size: 12px;
+      color: #717171;
+      font-weight: 400;
+      .single-value__circle-p95 {
+        margin-right: 10px;
+      }
+    }
+  }
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1658116710807') format('woff2'),
-       url('iconfont.woff?t=1658116710807') format('woff'),
-       url('iconfont.ttf?t=1658116710807') format('truetype');
+  src: url('iconfont.woff2?t=1658134544266') format('woff2'),
+       url('iconfont.woff?t=1658134544266') format('woff'),
+       url('iconfont.ttf?t=1658134544266') format('truetype');
 }
 
 .cn-icon {

src/views/charts2/charts/NpmNetworkQuantity.vue

@@ -1,9 +1,25 @@
 <template>
-  <div style="height: 100%; width: 100%; border: 1px solid gray"></div>
+  <div class="npm-network-quantity">
+    <single-value :npm-network-quantity="npmNetworkQuantity"></single-value>
+  </div>
 </template>
 
 <script>
+import SingleValue from '@/views/charts2/charts/SingleValue'
+
 export default {
-  name: 'NpmNetworkQuantity'
+  name: 'NpmNetworkQuantity',
+  components: { SingleValue },
+  data () {
+    return {
+      npmNetworkQuantity: [
+        { name: 'networkAppPerformance.tcpConnectionEstablishLatency', value: 6, number: 145, P95: 56, P99: 150, unitType: 'time', trend: 'up' },
+        { name: 'networkAppPerformance.httpResponse', value: 6, number: 184, P95: 57, P99: 192, unitType: 'time', trend: 'up' },
+        { name: 'networkAppPerformance.sslResponseLatency', value: 2, number: 0.1, P95: 0, P99: 0, unitType: 'time', trend: 'down' },
+        { name: 'networkAppPerformance.packetLoss', value: 2, number: 0.0192, P95: 0.0099, P99: 0.0099, unitType: 'percent', trend: 'down' },
+        { name: 'overall.packetRetrans', value: 2, number: 0.0386, P95: 0.0299, P99: 0.0416, unitType: 'percent', trend: 'down' }
+      ]
+    }
+  }
 }
 </script>

src/views/charts2/charts/SingleValue.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="single-value" v-for="npm in npmNetworkQuantity" :key="npm.name">
+    <div class="single-value__title">{{$t(npm.name)}}</div>
+    <div class="single-value__content">
+      <div class="single-value__content-number">{{unitConvert(npm.number, npm.unitType).join(' ')}}</div>
+      <div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'">
+        <div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div>
+        <div>{{npm.value}}%</div>
+      </div>
+    </div>
+    <div class="single-value__circle">
+      <div class="single-value__circle-p95">P95: {{unitConvert(npm.P95, npm.unitType).join(' ')}}</div>
+      <div class="single-value__circle-p99">P99: {{unitConvert(npm.P99, npm.unitType).join(' ')}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { unitTypes } from '@/utils/constants'
+import unitConvert from '@/utils/unit-convert'
+
+export default {
+  name: 'SingleValue',
+  props: {
+    npmNetworkQuantity: Array
+  },
+  data () {
+    return {
+      unitTypes,
+      unitConvert
+    }
+  }
+}
+</script>