feat: networkoverview app列表图

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>