From fd3ddea8713d0a4ca90c8e2297cd530da9cacd8c Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 8 Sep 2022 17:09:38 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20nodata=E5=A4=84=E7=90=86=E3=80=81npmLin?=
 =?UTF-8?q?e.vue=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common/index.scss              |   1 +
 .../views/charts2/networkOverviewLine.scss    |   3 +-
 .../networkOverviewPerformanceEvent.scss      |   1 +
 .../views/charts2/npmAppCategoryScore.scss    |   1 +
 .../views/charts2/npmEventsByType.scss        |   1 +
 .../css/components/views/charts2/npmLine.scss |   1 +
 src/views/charts2/Chart.vue                   |   9 +-
 .../NetworkOverviewDdosDetection.vue          |   9 +-
 .../networkOverview/NetworkOverviewLine.vue   |   6 +-
 .../charts2/charts/npm/NpmEventsHeader.vue    |  47 +++--
 src/views/charts2/charts/npm/NpmLine.vue      | 171 +++++-------------
 .../charts2/charts/npm/NpmRecentEvents.vue    |   4 +-
 src/views/charts2/charts/npm/NpmTabs.vue      |   1 -
 13 files changed, 103 insertions(+), 152 deletions(-)

diff --git a/src/assets/css/common/index.scss b/src/assets/css/common/index.scss
index 4c71cba7..39aad316 100644
--- a/src/assets/css/common/index.scss
+++ b/src/assets/css/common/index.scss
@@ -10,6 +10,7 @@
   height: 100%;
   width: 100%;
   color: #999;
+  position: absolute;
 }
 .data-column__span {
   font-weight: bold;
diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss
index 29f31ce0..03249c84 100644
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/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 {
diff --git a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
index eeaa4b07..d0a06c39 100644
--- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss
+++ b/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 {
diff --git a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss b/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
index a2dfa819..c93a5751 100644
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/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;
diff --git a/src/assets/css/components/views/charts2/npmEventsByType.scss b/src/assets/css/components/views/charts2/npmEventsByType.scss
index a6357f3c..bffe20f0 100644
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -1,4 +1,5 @@
 .npm-event {
+  position: relative;
   width: 100%;
   height: 100%;
   .npm-event-title {
diff --git a/src/assets/css/components/views/charts2/npmLine.scss b/src/assets/css/components/views/charts2/npmLine.scss
index d46dee35..3e1aed64 100644
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -1,4 +1,5 @@
 .npm-line {
+  position: relative;
   height: 100%;
   width: 100%;
   border: 1px solid #f0f0f0;
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 23242d68..b2f6d6e9 100644
--- a/src/views/charts2/Chart.vue
+++ b/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()
   },
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
index dedc6acf..6c5d426f 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
+++ b/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">
-     <chart-no-data v-if="isNoData"></chart-no-data>
-     <div class="ddos-detection-type" v-else>
+   <div class="ddos-detection-value" v-if="!isNoData">
+     <div class="ddos-detection-type">
        <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)
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 47a36872..8d15db15 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/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%;">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-      <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
-    </div>
+    <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
   </div>
 </template>
 
diff --git a/src/views/charts2/charts/npm/NpmEventsHeader.vue b/src/views/charts2/charts/npm/NpmEventsHeader.vue
index f3a73524..75bdd9f8 100644
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/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)
diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue
index aa3decc4..dbd5eefb 100644
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/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="!throughputName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <div v-show="!isNoData" 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="!tcpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <div v-show="!isNoData" 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="!httpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <div v-show="!isNoData" 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="!sslName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <div v-show="!isNoData" 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="!packetsLossName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <div v-show="!isNoData" 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="!packetsRetrainsName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
+      <div v-show="!isNoData" 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) {
-        get(api.npm.location.thoughput, params).then(res => {
-          if (res.code === 200) {
-            if (res.data.result.length === 0) {
-              this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-              return
-            } else {
-              this.throughputName = ''
-            }
-            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
+      let url
+      if (this.chart.params) {
+        if (this.chart.params.index === 0) {
+          url = api.npm.location.thoughput
+        } else if (this.chart.params.index === 1) {
+          url = api.npm.location.tcpConnectionEstablishLatency
+        } else if (this.chart.params.index === 2) {
+          url = api.npm.location.httpResponseLatency
+        } else if (this.chart.params.index === 3) {
+          url = api.npm.location.sslHandshakeLatency
+        } else if (this.chart.params.index === 4) {
+          url = api.npm.location.packetsLoss
+        } else if (this.chart.params.index === 5) {
+          url = api.npm.location.packetsRetrains
+        }
+        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)
-          } else {
-            this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
-          }
-        }).finally(() => {
-          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)
-        })
+          }).finally(() => {
+            this.toggleLoading(false)
+          })
+        }
+      } else {
+        this.isNoData = true
+        this.toggleLoading(false)
       }
     },
     echartsInit (data, chartData, type) {
diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue
index 9033495c..f79c99be 100644
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/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 = true
-          }
+          this.isNoData = res.data.result.length === 0
           res.data.result.forEach(e => {
             if (e.startTime) {
               e.startTime = dateFormatByAppearance(e.startTime)
diff --git a/src/views/charts2/charts/npm/NpmTabs.vue b/src/views/charts2/charts/npm/NpmTabs.vue
index ead7b52c..f55c47b8 100644
--- a/src/views/charts2/charts/npm/NpmTabs.vue
+++ b/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(/["|'](.*?)["|']/)