perf: nodata处理、npmLine.vue代码优化

src/views/charts2/charts/npm/NpmEventsHeader.vue

@@ -1,6 +1,6 @@
 <template>
  <div class="npm-header">
-  <div class="npm-header-body" v-for="(item, index) in chartData" :key="index">
+  <div class="npm-header-body" v-for="(item, index) in chartData" :key=index>
     <div class="npm-header-body-severity">
       <div class="npm-header-body-severity-icon" :class="item.eventSeverity"></div>
       <div class="npm-header-body-severity-value">{{item.eventSeverity}}</div>
@@ -20,7 +20,33 @@ export default {
   mixins: [chartMixin],
   data () {
     return {
-      chartData: [],
+      chartData: [
+        {
+          eventSeverity: 'critical',
+          count: '-',
+          index: 0
+        },
+        {
+          eventSeverity: 'high',
+          count: '-',
+          index: 1
+        },
+        {
+          eventSeverity: 'medium',
+          count: '-',
+          index: 2
+        },
+        {
+          eventSeverity: 'low',
+          count: '-',
+          index: 3
+        },
+        {
+          eventSeverity: 'info',
+          count: '-',
+          index: 4
+        }
+      ],
       type: 'severity'
     }
   },
@@ -43,19 +69,12 @@ export default {
       get(api.npm.events.list, params).then(res => {
         if (res.code === 200) {
           res.data.result.forEach(t => {
-            if (t.eventSeverity === 'critical') {
-              t.index = 0
-            } else if (t.eventSeverity === 'high') {
-              t.index = 1
-            } else if (t.eventSeverity === 'info') {
-              t.index = 4
-            } else if (t.eventSeverity === 'low') {
-              t.index = 3
-            } else if (t.eventSeverity === 'medium') {
-              t.index = 2
-            }
+            this.chartData.forEach(d => {
+              if (d.eventSeverity === t.eventSeverity) {
+                d.count = t.count
+              }
+            })
           })
-          this.chartData = res.data.result.sort((a, b) => { return a.index - b.index })
         }
       }).finally(() => {
         this.toggleLoading(false)