From 5be4044b51b8531e35d0ef02debb937820aa80e8 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 6 Sep 2022 11:15:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=80=E5=BC=80?=
 =?UTF-8?q?=E5=A7=8B=E6=B2=A1=E6=95=B0=E6=8D=AE=EF=BC=8C=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E5=90=8E=E6=9C=89=E6=95=B0=E6=8D=AE=E4=B9=9F?=
 =?UTF-8?q?=E5=88=B7=E4=B8=8D=E5=87=BA=E6=9D=A5=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../networkOverview/NetworkOverviewLine.vue   | 17 ++++++++++++-----
 .../NetworkOverviewPerformanceEvent.vue       | 12 +++++-------
 src/views/charts2/charts/npm/NpmLine.vue      | 19 ++++++++++---------
 .../charts2/charts/npm/NpmNetworkQuantity.vue |  8 ++++----
 4 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index ae738728..fe78956a 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -59,7 +59,7 @@
           </div>
         </div>
       </div>
-      <div class="chart-drawing" v-show="showMarkLine" id="chart"></div>
+      <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
     </template>
   </div>
 </template>
@@ -199,7 +199,9 @@ export default {
                 }
               })
               this.mpackets = mpackets
-              this.echartsInit(this.mpackets, show)
+              this.$nextTick(() => {
+                this.echartsInit(this.mpackets, show)
+              })
             } else if (t.type === 'packets' && val === 'Packets/s') {
               const mpackets = _.cloneDeep(this.mpackets)
               mpackets[0].analysis = t.totalPacketsRate.analysis
@@ -226,7 +228,9 @@ export default {
                 }
               })
               this.mpackets = mpackets
-              this.echartsInit(this.mpackets, show)
+              this.$nextTick(() => {
+                this.echartsInit(this.mpackets, show)
+              })
             } else if (t.type === 'sessions' && val === 'Sessions/s') {
               const mpackets = _.cloneDeep(this.mpackets)
               mpackets[0].analysis = t.totalSessionsRate.analysis
@@ -241,11 +245,14 @@ export default {
                 }
               })
               this.mpackets = mpackets
-              this.echartsInit(this.mpackets, show)
+              this.$nextTick(() => {
+                this.echartsInit(this.mpackets, show)
+              })
             }
           })
         }
       }).catch(e => {
+        console.error(e)
         this.isNoData = true
       }).finally(() => {
         this.toggleLoading(false)
@@ -254,7 +261,7 @@ export default {
     echartsInit (echartsData, show) {
       const _this = this
       echartsData = echartsData.filter(t => t.show === true)
-      const dom = document.getElementById('chart')
+      const dom = document.getElementById('overviewLineChart')
       if (!this.myChart) {
         this.myChart = echarts.init(dom)
       }
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
index fee60b29..4940828a 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
@@ -4,12 +4,12 @@
     <div class="performance-event-value">
       <div class="performance-event-pie">
         <chart-no-data v-if="isNoData"></chart-no-data>
-        <div class="chart-drawing" id="chart1" v-else></div>
+        <div class="chart-drawing" id="chart1" v-show="!isNoData"></div>
       </div>
       <div class="performance-event-pie-hr"></div>
       <div class="performance-event-pie">
         <chart-no-data v-if="isNoData2"></chart-no-data>
-        <div class="chart-drawing" id="chart2" v-else></div>
+        <div class="chart-drawing" id="chart2" v-show="!isNoData2"></div>
       </div>
     </div>
     <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
@@ -63,6 +63,8 @@ export default {
             if (res.data.result.length === 0) {
               this.isNoData = true
               return
+            } else {
+              this.isNoData = false
             }
             res.data.result = res.data.result.map(t => {
               if (t.eventSeverity === 'critical') {
@@ -82,11 +84,7 @@ export default {
                 index: t.index
               }
             })
-            if (res.data.result.length <= 0) {
-              this.chartOption.legend.show = false
-            } else {
-              this.chartOption.legend.show = true
-            }
+            this.chartOption.legend.show = res.data.result.length > 0
             this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
             this.myChart.setOption(this.chartOption)
           } else {
diff --git a/src/views/charts2/charts/npm/NpmLine.vue b/src/views/charts2/charts/npm/NpmLine.vue
index 2d128e86..aa3decc4 100644
--- a/src/views/charts2/charts/npm/NpmLine.vue
+++ b/src/views/charts2/charts/npm/NpmLine.vue
@@ -43,15 +43,14 @@
 
 <script>
 import * as echarts from 'echarts'
-import { npmLineChartOption } from '@/views/charts2/charts/options/echartOption.js'
-import { shallowRef } from 'vue'
+import {npmLineChartOption} from '@/views/charts2/charts/options/echartOption.js'
+import {shallowRef} from 'vue'
 import _ from 'lodash'
-import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
-import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
+import {stackedLineTooltipFormatter} from '@/views/charts/charts/tools'
+import {getSecond} from '@/utils/date-util'
+import {get} from '@/utils/http'
+import {api} from '@/utils/api'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
-import { throughputData, tcpData, httpData, sslData, packetsLossData, packetsRetrainsData } from '@/views/charts2/charts/npmLineData'
 import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
@@ -258,11 +257,13 @@ export default {
           params.forEach(t => {
             t.seriesName = this.$t(t.seriesName)
           })
-          const str = stackedLineTooltipFormatter(params)
-          return str
+          return stackedLineTooltipFormatter(params)
         }
         this.myChartArray.push(this.myChart)
         this.myChart.setOption(this.chartOption)
+        this.$nextTick(() => {
+          this.myChart.resize()
+        })
       }
     },
     dispatchLegendSelectAction (name) {
diff --git a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
index 2a910a02..42220012 100644
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
@@ -157,19 +157,19 @@ export default {
               index = 0
             }
             if (res.data.result.httpResponseLatencyAvg || res.data.result.httpResponseLatencyAvg === 0) {
-              res.data.result.httpResponseLatency = res.data.result.establishLatencyMsAvg
+              res.data.result.httpResponseLatency = res.data.result.httpResponseLatencyAvg
               index = 1
             }
             if (res.data.result.tcpLostlenPercentAvg || res.data.result.tcpLostlenPercentAvg === 0) {
-              res.data.result.tcpLostlenPercent = res.data.result.establishLatencyMsAvg
+              res.data.result.tcpLostlenPercent = res.data.result.tcpLostlenPercentAvg
               index = 3
             }
             if (res.data.result.pktRetransPercentAvg || res.data.result.pktRetransPercentAvg === 0) {
-              res.data.result.pktRetransPercent = res.data.result.establishLatencyMsAvg
+              res.data.result.pktRetransPercent = res.data.result.pktRetransPercentAvg
               index = 4
             }
             if (res.data.result.sslConLatencyAvg || res.data.result.sslConLatencyAvg === 0) {
-              res.data.result.sslConLatency = res.data.result.establishLatencyMsAvg
+              res.data.result.sslConLatency = res.data.result.sslConLatencyAvg
               index = 2
             }
             scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)