From ff979609183343878239dd5380458cc24dcd0709 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Wed, 28 Sep 2022 14:59:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E5=90=8E=E6=8A=98=E7=BA=BF=E5=9B=BE=E4=B8=8D?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/dnsInsight/DnsTrafficLine.vue      | 108 +++++++++---------
 .../LinkTrafficDrillDownLine.vue              |  78 ++++++-------
 .../networkOverview/NetworkOverviewLine.vue   | 106 +++++++++--------
 .../charts2/charts/npm/NpmTrafficLine.vue     |  11 +-
 4 files changed, 148 insertions(+), 155 deletions(-)

diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
index 941f42ad..bb76eb2f 100644
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -1,66 +1,64 @@
 <template>
   <div class="line network dns-traffic-line">
     <chart-no-data v-if="isNoData"></chart-no-data>
-    <template v-else>
-      <div class="line-header">
-        <div class="line-header-left">
-          <div class="line-value-active" v-if="lineTab"></div>
-          <div class="line-value">
-            <div class="line-value-mpackets"
-                 v-show="item.show"
-                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-                 v-for="(item, index) in mpackets"
-                 :key="index"
-                 @mouseenter="mouseenter(item)"
-                 @mouseleave="mouseleave(item)"
-                 @click="activeChange(item, index)">
-              <div class="line-value-mpackets-name">
-                <div :class="item.class"></div>
-                <div class="mpackets-name">{{$t(item.name)}}</div>
-              </div>
-              <div class="line-value-unit">
-                <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
-                <span class="line-value-unit-number2">
-                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
-              </span>
-              </div>
+    <div class="line-header" v-else>
+      <div class="line-header-left">
+        <div class="line-value-active" v-if="lineTab"></div>
+        <div class="line-value">
+          <div class="line-value-mpackets"
+               v-show="item.show"
+               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+               v-for="(item, index) in mpackets"
+               :key="index"
+               @mouseenter="mouseenter(item)"
+               @mouseleave="mouseleave(item)"
+               @click="activeChange(item, index)">
+            <div class="line-value-mpackets-name">
+              <div :class="item.class"></div>
+              <div class="mpackets-name">{{$t(item.name)}}</div>
             </div>
-          </div>
-        </div>
-        <div class="line-select line-header-right">
-          <div class="line-select-metric">
-            <span>{{$t('network.metric')}}:</span>
-            <div class="line-select__operation">
-              <el-select
-                  size="mini"
-                  v-model="lineMetric"
-                  popper-class="common-select"
-                  :popper-append-to-body="false"
-                  @change="metricSelectChange"
-              >
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              </el-select>
-            </div>
-          </div>
-          <div class="line-select-reference-line">
-            <span>{{$t('network.referenceLine')}}:</span>
-            <div class="line-select__operation">
-              <el-select
-                  size="mini"
-                  v-model="lineRefer"
-                  :disabled="!lineTab"
-                  popper-class="common-select"
-                  :popper-append-to-body="false"
-                  @change="referenceSelectChange"
-              >
-                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              </el-select>
+            <div class="line-value-unit">
+              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+              <span class="line-value-unit-number2">
+              <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
+            </span>
             </div>
           </div>
         </div>
       </div>
-      <div class="chart-drawing" v-show="showMarkLine" id="dnsLineChart"></div>
-    </template>
+      <div class="line-select line-header-right">
+        <div class="line-select-metric">
+          <span>{{$t('network.metric')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="lineMetric"
+                popper-class="common-select"
+                :popper-append-to-body="false"
+                @change="metricSelectChange"
+            >
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="line-select-reference-line">
+          <span>{{$t('network.referenceLine')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="lineRefer"
+                :disabled="!lineTab"
+                popper-class="common-select"
+                :popper-append-to-body="false"
+                @change="referenceSelectChange"
+            >
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="chart-drawing" v-show="showMarkLine && !isNoData" id="dnsLineChart"></div>
   </div>
 </template>
 
diff --git a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue
index 758db909..4ac1c149 100644
--- a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue
+++ b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue
@@ -1,51 +1,49 @@
 <template>
   <div class="line network link-traffic">
     <chart-no-data v-if="isNoData"></chart-no-data>
-    <template v-else>
-      <div class="line-header">
-        <div class="line-header-left">
-          <div class="line-value-active" v-if="lineTab"></div>
-          <div class="line-value">
-            <div class="line-value-mpackets"
-                 v-show="item.show"
-                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-                 v-for="(item, index) in mpackets"
-                 :key="index"
-                 @mouseenter="mouseenter(item)"
-                 @mouseleave="mouseleave(item)"
-                 @click="activeChange(item, index)">
-              <div class="line-value-mpackets-name">
-                <div :class="item.class"></div>
-                <div class="mpackets-name">{{$t(item.name)}}</div>
-              </div>
-              <div class="line-value-unit">
-                <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
-                <span class="line-value-unit-number2">
-                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
-              </span>
-              </div>
+    <div class="line-header" v-else>
+      <div class="line-header-left">
+        <div class="line-value-active" v-if="lineTab"></div>
+        <div class="line-value">
+          <div class="line-value-mpackets"
+               v-show="item.show"
+               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+               v-for="(item, index) in mpackets"
+               :key="index"
+               @mouseenter="mouseenter(item)"
+               @mouseleave="mouseleave(item)"
+               @click="activeChange(item, index)">
+            <div class="line-value-mpackets-name">
+              <div :class="item.class"></div>
+              <div class="mpackets-name">{{$t(item.name)}}</div>
             </div>
-          </div>
-        </div>
-        <div class="line-select line-header-right">
-          <div class="line-select-metric">
-            <span>{{$t('network.metric')}}:</span>
-            <div class="line-select__operation">
-              <el-select
-                  size="mini"
-                  v-model="lineMetric"
-                  popper-class="common-select"
-                  :popper-append-to-body="false"
-                  @change="metricSelectChange"
-              >
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              </el-select>
+            <div class="line-value-unit">
+              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+              <span class="line-value-unit-number2">
+              <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
+            </span>
             </div>
           </div>
         </div>
       </div>
-      <div class="chart-drawing" v-show="showMarkLine" id="linkTrafficLineChart"></div>
-    </template>
+      <div class="line-select line-header-right">
+        <div class="line-select-metric">
+          <span>{{$t('network.metric')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="lineMetric"
+                popper-class="common-select"
+                :popper-append-to-body="false"
+                @change="metricSelectChange"
+            >
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="chart-drawing" v-show="showMarkLine && !isNoData" id="linkTrafficLineChart"></div>
   </div>
 </template>
 
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index 42f5c15a..73d46e2a 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -1,66 +1,64 @@
 <template>
   <div class="line network">
     <chart-no-data v-if="isNoData"></chart-no-data>
-    <template v-else>
-      <div class="line-header">
-        <div class="line-header-left">
-          <div class="line-value-active" v-if="lineTab"></div>
-          <div class="line-value">
-            <div class="line-value-mpackets"
-                 v-show="item.show"
-                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-                 v-for="(item, index) in mpackets"
-                 :key="index"
-                 @mouseenter="mouseenter(item)"
-                 @mouseleave="mouseleave(item)"
-                 @click="activeChange(item, index)">
-              <div class="line-value-mpackets-name">
-                <div :class="item.class"></div>
-                <div class="mpackets-name">{{$t(item.name)}}</div>
-              </div>
-              <div class="line-value-unit">
-                <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
-                <span class="line-value-unit-number2">
+    <div class="line-header" v-else>
+      <div class="line-header-left">
+        <div class="line-value-active" v-if="lineTab"></div>
+        <div class="line-value">
+          <div class="line-value-mpackets"
+               v-show="item.show"
+               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+               v-for="(item, index) in mpackets"
+               :key="index"
+               @mouseenter="mouseenter(item)"
+               @mouseleave="mouseleave(item)"
+               @click="activeChange(item, index)">
+            <div class="line-value-mpackets-name">
+              <div :class="item.class"></div>
+              <div class="mpackets-name">{{$t(item.name)}}</div>
+            </div>
+            <div class="line-value-unit">
+              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+              <span class="line-value-unit-number2">
                 <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
               </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="line-select line-header-right">
-          <div class="line-select-metric">
-            <span>{{$t('network.metric')}}:</span>
-            <div class="line-select__operation">
-              <el-select
-                  size="mini"
-                  v-model="lineMetric"
-                  popper-class="common-select"
-                  :popper-append-to-body="false"
-                  @change="metricSelectChange"
-              >
-                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              </el-select>
-            </div>
-          </div>
-          <div class="line-select-reference-line">
-            <span>{{$t('network.referenceLine')}}:</span>
-            <div class="line-select__operation">
-              <el-select
-                  size="mini"
-                  v-model="lineRefer"
-                  :disabled="!lineTab"
-                  popper-class="common-select"
-                  :popper-append-to-body="false"
-                  @change="referenceSelectChange"
-              >
-                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              </el-select>
             </div>
           </div>
         </div>
       </div>
-      <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
-    </template>
+      <div class="line-select line-header-right">
+        <div class="line-select-metric">
+          <span>{{$t('network.metric')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="lineMetric"
+                popper-class="common-select"
+                :popper-append-to-body="false"
+                @change="metricSelectChange"
+            >
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="line-select-reference-line">
+          <span>{{$t('network.referenceLine')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="lineRefer"
+                :disabled="!lineTab"
+                popper-class="common-select"
+                :popper-append-to-body="false"
+                @change="referenceSelectChange"
+            >
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="chart-drawing" v-show="showMarkLine && !isNoData" id="overviewLineChart"></div>
   </div>
 </template>
 
diff --git a/src/views/charts2/charts/npm/NpmTrafficLine.vue b/src/views/charts2/charts/npm/NpmTrafficLine.vue
index b2a6f6f9..020bd2ad 100644
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -170,9 +170,7 @@ export default {
       this.toggleLoading(true)
       get(api.npm.overview.trafficGraph, 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((t, i) => {
             if (t.type === 'bytes' && val === 'Bits/s') {
               const mpackets = _.cloneDeep(this.mpackets)
@@ -276,6 +274,9 @@ export default {
         } else {
           this.isNoData = true
         }
+      }).catch(e => {
+        console.error(e)
+        this.isNoData = true
       }).finally(() => {
         this.toggleLoading(false)
       })
@@ -283,9 +284,7 @@ export default {
     echartsInit (echartsData) {
       echartsData = echartsData.filter(t => t.show === true)
       const dom = document.getElementById('chart')
-      if (!this.myChart) {
-        this.myChart = echarts.init(dom)
-      }
+      !this.myChart && (this.myChart = echarts.init(dom))
       this.chartOption = trafficLineChartOption
       const chartOption = this.chartOption.series[0]
       this.chartOption.series = echartsData.map((t, i) => {