feat: networkoverview app列表图

src/assets/css/components/index.scss

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

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

@@ -0,0 +1,76 @@
+.network-overview-apps {
+  height: 100%;
+
+  .line-select-metric {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    &>span {
+      font-size: 12px;
+      color: #575757;
+      font-weight: 400;
+      margin-right: 3px;
+    }
+    .line-select__operation {
+      height: 24px;
+      margin-left: 3px;
+      box-shadow: none;
+      border-radius: 2px;
+      .option__select {
+        pointer-events:none;
+        .el-input__inner {
+          width: 80px;
+          height: 24px;
+          padding-left: 4px;
+          line-height: 24px;
+          font-size: 12px;
+          color: #2C72C6;
+          font-weight: 400;
+        }
+        .el-input__suffix {
+          display: flex;
+          .el-input__suffix-inner {
+            line-height: 24px;
+            .el-select__caret {
+              line-height: 24px;
+              width: 16px;
+              color: #575757;
+            }
+          }
+        }
+      }
+      .option__select.select-column {
+        .el-input__inner {
+          width: 86px;
+          padding-left: 8px;
+        }
+      }
+      .icon-group-divide {
+        height: 14px;
+        width: 1px;
+        background-color: $--color-primary;
+      }
+      i {
+        font-size: 12px;
+      }
+    }
+  }
+
+
+  .app-cards {
+    display: grid;
+    grid-template-rows: repeat(auto-fill, 100px);
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    grid-gap: 20px;
+    width: 100%;
+    padding-top: 10px;
+    height: calc(100% - 24px);
+
+    .app-card {
+      height: 100%;
+      border: 1px solid #E2E5EC;
+      border-radius: 4px;
+    }
+  }
+}

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

@@ -54,7 +54,6 @@
       border-radius: 4px;
       padding: 8px 5px;
       span {
-        font-family: NotoSansHans-Medium;
         font-size: 12px;
         color: #575757;
         font-weight: 500;

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

@@ -12,7 +12,6 @@
         display: flex;
         justify-content: space-between;
         .cn-chart-tooltip-value.cn-chart-tooltip__color {
-          font-family: NotoSansHans-Medium;
           font-size: 12px;
           color: #353636;
           line-height: 12px;
@@ -29,7 +28,7 @@
     position: absolute;
     .line-select-metric,.line-select-reference-line {
       display: flex;
-      span {
+      &>span {
         font-size: 12px;
         color: #575757;
         font-weight: 400;
@@ -38,7 +37,7 @@
       .line-select__operation {
         height: 24px;
         margin-left: 3px;
-        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
+        box-shadow: none;
         border-radius: 2px;
         .option__select {
           pointer-events:none;
@@ -93,7 +92,7 @@
       display: flex;
       flex-direction: column;
       span:nth-of-type(1) {
-        font-family: 'Helvetica-Bold';
+        font-family: Helvetica-Bold;
         font-size: 28px;
         color: #353636;
         margin-right: 4px;

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

@@ -46,7 +46,6 @@
       padding: 8px 5px;
       margin-left: 30px;
       span {
-        font-family: NotoSansHans-Medium;
         font-size: 12px;
         color: #575757;
         font-weight: 500;

src/views/charts2/Chart.vue

@@ -17,6 +17,11 @@
     <network-overview-tabs
          v-else-if="chart.type === typeMapping.networkOverview.table"
     ></network-overview-tabs>
+    <network-overview-apps
+        v-else-if="chart.type === typeMapping.networkOverview.appList"
+        :chart="chart"
+    >
+    </network-overview-apps>
     <npm-tabs
         v-else-if="chart.type === typeMapping.npm.npmTabs"
         @tabChange="npmTabChange"
@@ -36,6 +41,7 @@ import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine'
 import NetworkOverviewDdosDetection from '@/views/charts2/charts/NetworkOverviewDdosDetection'
 import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverviewPerformanceEvent'
 import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs'
+import NetworkOverviewApps from '@/views/charts2/charts/NetworkOverviewApps'
 import NpmTabs from '@/views/charts2/charts/NpmTabs'
 import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
 export default {
@@ -47,6 +53,7 @@ export default {
     NetworkOverviewDdosDetection,
     NetworkOverviewPerformanceEvent,
     NetworkOverviewTabs,
+    NetworkOverviewApps,
     NpmTabs,
     NpmNetworkQuantity
   },

src/views/charts2/charts/NetworkOverviewApps.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="network-overview-apps">
+    <div class="line-select-metric">
+      <span>{{$t('network.metric')}}:</span>
+      <div class="line-select__operation">
+        <el-select
+            size="mini"
+            v-model="metricFilter"
+            class="option__select select-topn"
+            placeholder=""
+            popper-class="option-popper"
+        >
+          <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="app-cards">
+      <div class="app-card" v-for="(app, index) in chart.params.app" :key="index">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NetworkOverviewApps',
+  props: {
+    chart: Object
+  },
+  data () {
+    return {
+      metricFilter: '',
+      metricOptions: []
+    }
+  }
+}
+</script>