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

src/assets/css/common/index.scss

@@ -10,6 +10,7 @@
   height: 100%;
   width: 100%;
   color: #999;
+  position: absolute;
 }
 .data-column__span {
   font-weight: bold;

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

@@ -1,10 +1,11 @@
 .line.network {
   height: 100%;
   width: 100%;
+  position: relative;
   border: 1px solid #E2E5EC;
   border-radius: 4px;
   .chart-drawing {
-    height: 100%;
+    height: calc(100% - 74px);
     width: 100%;
     .echarts-tooltip.echarts-tooltip-dark {
       .cn-chart-body {

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

@@ -27,6 +27,7 @@
       background: #E2E5EC;
     }
     .performance-event-pie {
+      position: relative;
       height: 50%;
       width: 100%;
       .chart-drawing {

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

@@ -4,6 +4,7 @@
   width: 100%;
   display: flex;
   .npm-app-left {
+    position: relative;
     height: 100%;
     display: flex;
     flex: 1;

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

@@ -1,4 +1,5 @@
 .npm-event {
+  position: relative;
   width: 100%;
   height: 100%;
   .npm-event-title {

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

@@ -1,4 +1,5 @@
 .npm-line {
+  position: relative;
   height: 100%;
   width: 100%;
   border: 1px solid #f0f0f0;

src/views/charts2/Chart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cn-chart" style="height: 100%; width: 100%;">
-    <loading :loading="loading"></loading>
+    <loading :loading="loading && !disableLoading"></loading>
     <network-overview-line
         v-if="chart.type === typeMapping.networkOverview.line"
         :chart="chart"
@@ -171,6 +171,13 @@ export default {
       queryParams: {}
     }
   },
+  computed: {
+    // 排除某些不需要loading的图表，例如npm-tabs
+    disableLoading () {
+      const disableChartTypes = [typeMapping.npm.npmTabs]
+      return disableChartTypes.indexOf(this.chart.type) > -1
+    }
+  },
   mounted () {
     this.getChartData()
   },

src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue

@@ -1,9 +1,9 @@
 <template>
  <div class="ddos-detection">
+   <chart-no-data v-if="isNoData"></chart-no-data>
    <div class="ddos-detection-title"><i class="cn-icon cn-icon-a-DDosDetection"></i>{{$t('network.ddosDetection')}}</div>
-   <div class="ddos-detection-value">
+   <div class="ddos-detection-value" v-if="!isNoData">
-     <chart-no-data v-if="isNoData"></chart-no-data>
+     <div class="ddos-detection-type">
-     <div class="ddos-detection-type" v-else>
        <div class="ddos-detection-type-value">
          <div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
          <div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
@@ -59,11 +59,10 @@ export default {
         if (res.code === 200) {
           if (res.data.result.length === 0) {
             this.isNoData = true
-            return
           } else {
+            this.ddosData = res.data.result[0]
             this.isNoData = false
           }
-          this.ddosData = res.data.result[0]
         }
       }).finally(() => {
         this.toggleLoading(false)

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="line network">
+    <chart-no-data v-if="isNoData"></chart-no-data>
     <div class="line-header">
       <div class="line-header-left">
         <div class="line-value-active" v-if="activeTab"></div>
@@ -57,10 +58,7 @@
         </div>
       </div>
     </div>
-    <div style="height: calc(100% - 74px); width: 100%;">
+    <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
-      <chart-no-data v-if="isNoData"></chart-no-data>
-      <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
-    </div>
   </div>
 </template>
 

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') {
+            this.chartData.forEach(d => {
-              t.index = 0
+              if (d.eventSeverity === t.eventSeverity) {
-            } else if (t.eventSeverity === 'high') {
+                d.count = t.count
-              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 = res.data.result.sort((a, b) => { return a.index - b.index })
         }
       }).finally(() => {
         this.toggleLoading(false)

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

@@ -1,5 +1,6 @@
 <template>
   <div class="npm-line">
+    <chart-no-data v-if="isNoData"></chart-no-data>
     <template v-if="chartData.id === 11">
       <div class="npm-line-header">
         <div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
@@ -10,33 +11,27 @@
           </div>
         </div>
       </div>
-      <chart-no-data v-if="throughputName"></chart-no-data>
+      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
-      <div v-show="!throughputName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 12">
       <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
-      <chart-no-data v-if="tcpName"></chart-no-data>
+      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
-      <div v-show="!tcpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 13">
       <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
-      <chart-no-data v-if="httpName"></chart-no-data>
+      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
-      <div v-show="!httpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 14">
       <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
-      <chart-no-data v-if="sslName"></chart-no-data>
+      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
-      <div v-show="!sslName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 15">
       <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
-      <chart-no-data v-if="packetsLossName"></chart-no-data>
+      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
-      <div v-show="!packetsLossName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
     <template v-else-if="chartData.id === 16">
       <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
-      <chart-no-data v-if="packetsRetrainsName"></chart-no-data>
+      <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
-      <div v-show="!packetsRetrainsName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
     </template>
   </div>
 </template>
@@ -80,14 +75,8 @@ export default {
       timer: null,
       myChartArray: [],
       side: this.$store.state.panel.npmLocationSide,
-      country: this.$store.state.panel.npmLocationCountry,
+      country: this.$store.state.panel.npmLocationCountry
       // province: '',
-      throughputName: '',
-      tcpName: '',
-      httpName: '',
-      sslName: '',
-      packetsLossName: '',
-      packetsRetrainsName: ''
     }
   },
   watch: {
@@ -122,112 +111,48 @@ export default {
         // province: this.province
       }
       this.toggleLoading(true)
-      if (this.chartData.id === 11) {
+      let url
-        get(api.npm.location.thoughput, params).then(res => {
+      if (this.chart.params) {
-          if (res.code === 200) {
+        if (this.chart.params.index === 0) {
-            if (res.data.result.length === 0) {
+          url = api.npm.location.thoughput
-              this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
+        } else if (this.chart.params.index === 1) {
-              return
+          url = api.npm.location.tcpConnectionEstablishLatency
-            } else {
+        } else if (this.chart.params.index === 2) {
-              this.throughputName = ''
+          url = api.npm.location.httpResponseLatency
-            }
+        } else if (this.chart.params.index === 3) {
-            res.data.result.forEach((t, i) => {
+          url = api.npm.location.sslHandshakeLatency
-              if (t.type === 'totalBytesRate') {
+        } else if (this.chart.params.index === 4) {
-                this.chartOptionLineData[i].values = t.values
+          url = api.npm.location.packetsLoss
-              } else if (t.type === 'inboundBytesRate') {
+        } else if (this.chart.params.index === 5) {
-                this.chartOptionLineData[i].values = t.values
+          url = api.npm.location.packetsRetrains
-              } else if (t.type === 'outboundBytesRate') {
+        }
-                this.chartOptionLineData[i].values = t.values
+        if (url) {
+          get(url, params).then(res => {
+            if (res.code === 200) {
+              this.isNoData = res.data.result.length === 0
+              if (this.chart.params.index === 0) {
+                res.data.result.forEach((t, i) => {
+                  if (t.type === 'totalBytesRate') {
+                    this.chartOptionLineData[i].values = t.values
+                  } else if (t.type === 'inboundBytesRate') {
+                    this.chartOptionLineData[i].values = t.values
+                  } else if (t.type === 'outboundBytesRate') {
+                    this.chartOptionLineData[i].values = t.values
+                  }
+                })
+                const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
+                this.echartsInit(result, this.chartData, this.chartData.params.unitType)
+              } else {
+                this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
               }
-            })
-            const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
-            this.echartsInit(result, this.chartData, this.chartData.params.unitType)
-          } else {
-            this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-          }
-        }).finally(() => {
-          this.toggleLoading(false)
-        })
-      } else if (this.chartData.id === 12) {
-        get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
-          if (res.code === 200) {
-            if (res.data.result.length === 0) {
-              this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-              return
-            } else {
-              this.tcpName = ''
             }
-            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
+          }).finally(() => {
-          } else {
+            this.toggleLoading(false)
-            this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
+          })
-          }
+        }
-        }).finally(() => {
+      } else {
-          this.toggleLoading(false)
+        this.isNoData = true
-        })
+        this.toggleLoading(false)
-      } else if (this.chartData.id === 13) {
-        get(api.npm.location.httpResponseLatency, params).then(res => {
-          if (res.code === 200) {
-            if (res.data.result.length === 0) {
-              this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-              return
-            } else {
-              this.httpName = ''
-            }
-            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
-          } else {
-            this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-          }
-        }).finally(() => {
-          this.toggleLoading(false)
-        })
-      } else if (this.chartData.id === 14) {
-        get(api.npm.location.sslHandshakeLatency, params).then(res => {
-          if (res.code === 200) {
-            if (res.data.result.length === 0) {
-              this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-              return
-            } else {
-              this.sslName = ''
-            }
-            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
-          } else {
-            this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-          }
-        }).finally(() => {
-          this.toggleLoading(false)
-        })
-      } else if (this.chartData.id === 15) {
-        get(api.npm.location.packetsLoss, params).then(res => {
-          if (res.code === 200) {
-            if (res.data.result.length === 0) {
-              this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-              return
-            } else {
-              this.packetsLossName = ''
-            }
-            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
-          } else {
-            this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-          }
-        }).finally(() => {
-          this.toggleLoading(false)
-        })
-      } else if (this.chartData.id === 16) {
-        get(api.npm.location.packetsRetrains, params).then(res => {
-          if (res.code === 200) {
-            if (res.data.result.length === 0) {
-              this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-              return
-            } else {
-              this.packetsRetrainsName = ''
-            }
-            this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
-          } else {
-            this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-          }
-        }).finally(() => {
-          this.toggleLoading(false)
-        })
       }
     },
     echartsInit (data, chartData, type) {

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

@@ -96,9 +96,7 @@ export default {
       this.toggleLoading(true)
       get(url, params).then(res => {
         if (res.code === 200) {
-          if (res.data.result.length === 0) {
+          this.isNoData = res.data.result.length === 0
-            this.isNoData = true
-          }
           res.data.result.forEach(e => {
             if (e.startTime) {
               e.startTime = dateFormatByAppearance(e.startTime)

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

@@ -76,7 +76,6 @@ export default {
     }
   },
   mounted () {
-    this.toggleLoading(false)
     if (this.chart.panelId === drillDownPanelTypeMapping.npmOverviewIp) {
       // 当client或server的session数为0时，对应tab置灰，不可选，默认高亮另一个不为0的tab
       const condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)