feat: npm dashboard初始化

src/assets/css/components/index.scss

@@ -46,8 +46,9 @@
 @import './components/rightBox/report/builtinReportBox';
 
 @import './views/charts2/panel';
-@import 'views/charts2/networkOverviewLine';
-@import 'views/charts2/networkOverviewDdosDetection';
-@import 'views/charts2/networkOverviewPerformanceEvent';
-@import 'views/charts2/networkOverviewTabs';
+@import './views/charts2/networkOverviewLine';
+@import './views/charts2/networkOverviewDdosDetection';
+@import './views/charts2/networkOverviewPerformanceEvent';
+@import './views/charts2/networkOverviewTabs';
+@import './views/charts2/npmTabs';
 //@import '../chart';

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

@@ -0,0 +1,38 @@
+.npm-tabs {
+  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 20px;
+  }
+  .el-tabs--top .el-tabs__item {
+    padding: 0;
+  }
+  .el-tabs__active-bar.is-top {
+    top: 0;
+    height: 3px;
+    border-radius: 5px 2.5px 0 0;
+  }
+  .el-tabs__item.is-top {
+    .npm-tab__label {
+      padding: 0 20px;
+      color: #353636;
+      font-size: 14px;
+      font-weight: bold;
+      box-sizing: border-box;
+
+      i {
+        padding-right: 7px;
+        font-size: 16px;
+        font-weight: normal;
+      }
+    }
+    &.is-active {
+      .npm-tab__label {
+        color: #353636;
+        box-shadow: 1px 0 0px 0px #E2E5EC, inset 1px 0 0 #E2E5EC;
+
+        i {
+          color: #046EC9;
+        }
+      }
+    }
+  }
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1657871017803') format('woff2'),
-       url('iconfont.woff?t=1657871017803') format('woff'),
-       url('iconfont.ttf?t=1657871017803') format('truetype');
+  src: url('iconfont.woff2?t=1658116710807') format('woff2'),
+       url('iconfont.woff?t=1658116710807') format('woff'),
+       url('iconfont.ttf?t=1658116710807') format('truetype');
 }
 
 .cn-icon {
@@ -13,39 +13,39 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.cn-icon-a-SocialNetwork:before {
+.cn-icon-social-network:before {
   content: "\e79b";
 }
 
-.cn-icon-Video:before {
+.cn-icon-video:before {
   content: "\e79c";
 }
 
-.cn-icon-VoIP:before {
+.cn-icon-voip:before {
   content: "\e79d";
 }
 
-.cn-icon-Email:before {
+.cn-icon-email:before {
   content: "\e79e";
 }
 
-.cn-icon-Gaming:before {
+.cn-icon-gaming:before {
   content: "\e79f";
 }
 
-.cn-icon-a-FileSharing:before {
+.cn-icon-file-sharing:before {
   content: "\e7a0";
 }
 
-.cn-icon-Location:before {
+.cn-icon-location:before {
   content: "\e798";
 }
 
-.cn-icon-Events:before {
+.cn-icon-events:before {
   content: "\e799";
 }
 
-.cn-icon-Overview:before {
+.cn-icon-overview:before {
   content: "\e79a";
 }
 

src/components/layout/Header.vue

@@ -43,6 +43,8 @@
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
+
+    <!-- 菜单 -->
     <el-drawer
         v-model="showMenu"
         direction="ttb"
@@ -69,6 +71,8 @@
         </div>
       </div>
     </el-drawer>
+
+    <!-- 改密码 -->
     <el-dialog v-model="showChangePin"
                width="30%"
                :before-close="handleClose">

src/views/charts2/Chart.vue

@@ -17,6 +17,14 @@
     <network-overview-tabs
          v-else-if="chart.type === typeMapping.networkOverview.table"
     ></network-overview-tabs>
+    <npm-tabs
+        v-else-if="chart.type === typeMapping.npm.npmTabs"
+        @tabChange="index => $emit('tabChange', index)"
+    ></npm-tabs>
+    <npm-network-quantity
+        v-else-if="chart.type === typeMapping.npm.npmNetworkQuantity"
+        :chart="chart"
+    ></npm-network-quantity>
   </div>
 </template>
 
@@ -28,6 +36,8 @@ 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 NpmTabs from '@/views/charts2/charts/NpmTabs'
+import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
 export default {
   name: 'Chart',
   components: {
@@ -36,7 +46,9 @@ export default {
     NetworkOverviewLine,
     NetworkOverviewDdosDetection,
     NetworkOverviewPerformanceEvent,
-    NetworkOverviewTabs
+    NetworkOverviewTabs,
+    NpmTabs,
+    NpmNetworkQuantity
   },
   props: {
     chart: Object

src/views/charts2/ChartList.vue

@@ -19,7 +19,18 @@
                  :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"
+            :id="item.id"
+            :chart="item"
+            @tabChange="index => { this.npmTabIndex = index }"
+          ></chart>
+        </template>
+        <chart
+            v-else
+            :id="item.id"
             :chart="item"
         ></chart>
       </grid-item>
@@ -31,17 +42,23 @@
 import VueGridLayout from 'vue-grid-layout'
 import _ from 'lodash'
 import Chart from '@/views/charts2/Chart'
+import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { typeMapping } from '@/views/charts2/chart-tools'
 export default {
   name: 'ChartList',
   props: {
     timeFilter: Object,
+    panelType: Number,
     chartList: Array,
     panelLock: Boolean,
     entity: Object
   },
   data () {
     return {
-      layout: []
+      panelTypeAndRouteMapping,
+      typeMapping,
+      layout: [],
+      npmTabIndex: 0
     }
   },
   components: {

src/views/charts2/Panel.vue

@@ -22,6 +22,7 @@
         ref="chartList"
         :time-filter="timeFilter"
         :chart-list="chartList"
+        :panel-type="panelType"
         :panel-lock="panelLock"
         :entity="entity"
     ></chart-list>

src/views/charts2/chart-tools.js

@@ -5,5 +5,9 @@ export const typeMapping = {
     performanceEvent: 302,
     table: 601,
     ddosDetection: 701
+  },
+  npm: {
+    npmTabs: 704,
+    npmNetworkQuantity: 703
   }
 }

src/views/charts2/charts/NpmNetworkQuantity.vue

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

src/views/charts2/charts/NpmTabs.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="npm-tabs">
+    <el-tabs @tab-change="tabChange">
+      <el-tab-pane>
+        <template #label>
+          <div class="npm-tab__label">
+            <i class="cn-icon cn-icon-overview"></i>
+            <span>{{$t('overall.overview')}}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane>
+        <template #label>
+          <div class="npm-tab__label">
+            <i class="cn-icon cn-icon-location"></i>
+            <span>{{$t('overall.location')}}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane>
+        <template #label>
+          <div class="npm-tab__label">
+            <i class="cn-icon cn-icon-events"></i>
+            <span>{{$t('overall.events')}}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NpmTabs',
+  methods: {
+    tabChange (index) {
+      this.$emit('tabChange', index)
+    }
+  }
+}
+</script>