CN-623 feat: tab类型布局调整

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

@@ -93,7 +93,7 @@
           position: relative;
           .app-card-title-more-delete {
             z-index: 1;
-            font-family: Helvetica;
+            font-family: Helvetica-Bold;
             position: absolute;
             min-width: 96px;
             line-height: 32px;

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

@@ -148,7 +148,7 @@
       .el-scrollbar__view.el-select-dropdown__list {
         .el-select-dropdown__item {
           padding: 0 8px;
-          font-family: Helvetica;
+          font-family: Helvetica-Bold;
           height: 24px;
           line-height: 24px;
           font-size: 12px;

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

@@ -18,7 +18,7 @@
     }
   }
   .chart-list {
-    height: calc(100% - 46px);
+    height: calc(100% - 68px);
     overflow: auto;
     &>.vue-grid-layout {
       margin-top: -20px;

src/views/charts2/Chart.vue

@@ -30,6 +30,14 @@
         v-else-if="chart.type === typeMapping.npm.npmNetworkQuantity"
         :chart="chart"
     ></npm-network-quantity>
+    <npm-app-category-score
+        v-else-if="chart.type === typeMapping.npm.npmAppCategoryScore"
+        :chart="chart"
+    ></npm-app-category-score>
+    <npm-map
+        v-else-if="chart.type === typeMapping.npm.npmMap"
+        :chart="chart"
+    ></npm-map>
   </div>
 </template>
 
@@ -44,9 +52,13 @@ 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'
+import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
+import NpmMap from '@/views/charts2/charts/NpmMap'
 export default {
   name: 'Chart',
   components: {
+    NpmMap,
+    NpmAppCategoryScore,
     Loading,
     ChartNoData,
     NetworkOverviewLine,

src/views/charts2/ChartList.vue

@@ -19,21 +19,11 @@
                  :h="item.h"
                  :i="item.i"
                  :key="item.i">
-        <!-- npm-tab特殊处理 -->
-        <template v-if="panelType === panelTypeAndRouteMapping.networkAppPerformance">
         <chart
-            v-if="item.type === typeMapping.npm.npmTabs || item.params.tabIndex === npmTabIndex"
-            :time-filter="timeFilter"
-            :id="item.id"
-            :chart="item"
-            @npmTabChange="npmTabChange"
-          ></chart>
-        </template>
-        <chart
-            v-else
             :time-filter="timeFilter"
             :extra-params="extraParams"
             :id="item.id"
+            @npmTabChange="npmTabChange"
             :chart="item"
         ></chart>
       </grid-item>
@@ -71,13 +61,19 @@ export default {
     Chart
   },
   watch: {
-    chartList: {
-      deep: true,
-      handler (n) {
+    chartList (n) {
       if (!_.isEmpty(n)) {
+        if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance) {
+          this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
+        } else {
           this.layout = [...n]
         }
       }
+    },
+    npmTabIndex (n) {
+      if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance) {
+        this.layout = this.chartList.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
+      }
     }
   },
   methods: {

src/views/charts2/chart-tools.js

@@ -7,6 +7,8 @@ export const typeMapping = {
     ddosDetection: 701
   },
   npm: {
+    npmMap: 1,
+    npmAppCategoryScore: 702,
     npmTabs: 704,
     npmNetworkQuantity: 703
   }

src/views/charts2/charts/NpmAppCategoryScore.vue

@@ -0,0 +1,9 @@
+<template>
+  <div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
+</template>
+
+<script>
+export default {
+  name: 'NpmAppCategoryScore'
+}
+</script>

src/views/charts2/charts/NpmMap.vue

@@ -0,0 +1,9 @@
+<template>
+  <div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
+</template>
+
+<script>
+export default {
+  name: 'NpmMap'
+}
+</script>

src/views/charts2/charts/NpmTabs.vue

@@ -52,6 +52,7 @@ export default {
       const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.npm-tabs .el-tabs__item.is-active')
       const activeBar = document.querySelector('.npm-tabs .npm-tabs__active-bar')
       activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+      console.info(activeBar.style.left)
     }
   },
   mounted () {