From f007ee3d81bc4bae80a1e33130f241d71141ffc8 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 19 Jul 2022 10:16:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20networkoverview=20app=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/components/index.scss          |  1 +
 .../views/charts2/networkOverviewApps.scss    | 76 +++++++++++++++++++
 .../charts2/networkOverviewDdosDetection.scss |  1 -
 .../views/charts2/networkOverviewLine.scss    |  7 +-
 .../networkOverviewPerformanceEvent.scss      |  1 -
 src/views/charts2/Chart.vue                   |  7 ++
 .../charts2/charts/NetworkOverviewApps.vue    | 38 ++++++++++
 7 files changed, 125 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/css/components/views/charts2/networkOverviewApps.scss
 create mode 100644 src/views/charts2/charts/NetworkOverviewApps.vue

diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 3b3e0fc7..dd4fddee 100644
--- a/src/assets/css/components/index.scss
+++ b/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';
diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss
new file mode 100644
index 00000000..a5d68f6c
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
index 51291bb0..849c355d 100644
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/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;
diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss
index fd2e68ab..524f7fb0 100644
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/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;
diff --git a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
index e18d914f..001dd581 100644
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/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;
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 39a2f2dc..bc39ed94 100644
--- a/src/views/charts2/Chart.vue
+++ b/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
   },
diff --git a/src/views/charts2/charts/NetworkOverviewApps.vue b/src/views/charts2/charts/NetworkOverviewApps.vue
new file mode 100644
index 00000000..0a5aa2ba
--- /dev/null
+++ b/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>