From da6d6a5e42b89475f167b54d414c57c68296c674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Thu, 13 Oct 2022 16:36:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Link=20monitor=E7=9A=84=E8=9C=82?=
 =?UTF-8?q?=E7=AA=9D=E5=9B=BE=E5=92=8C=E7=BD=91=E6=A0=BC=E5=9B=BE=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=EF=BC=8C=E6=B7=BB=E5=8A=A0loading=E4=BB=A5=E5=8F=8Ano?=
 =?UTF-8?q?Data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TimeRange/TimeRefresh.vue          |  2 --
 .../charts/linkMonitor/LinkDirectionGrid.vue  | 21 +++++++++++++++----
 .../LinkDirectionGrid/PopoverContent.vue      | 14 ++++++++++---
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/common/TimeRange/TimeRefresh.vue b/src/components/common/TimeRange/TimeRefresh.vue
index d8bb5e6b..3f9ce829 100644
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -132,8 +132,6 @@ export default {
         this.$store.commit('setRefreshTime', null)
         this.$store.commit('setRefreshFlag', false)
       }
-
-      console.log('查看此时的值=============================')
     },
     showRefreshList () {
       this.dropdownShow = !this.dropdownShow
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
index 3aad5f7b..d93fdf47 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="link-direction-grid">
     <!--左侧链路出入口-->
-    <popover-content :gridData="gridData" style="width: 900px"/>
+    <popover-content :isNoData="isNoData" :gridData="gridData" style="width: 900px;"/>
 
     <!--右侧链路下一跳-->
-    <popover-content :gridData="gridData2"/>
+    <popover-content :isNoData="isNoData" :gridData="gridData2" />
   </div>
 </template>
 
@@ -23,7 +23,8 @@ export default {
   data () {
     return {
       gridData: [],
-      gridData2: []
+      gridData2: [],
+      isNoData: false
     }
   },
   components: {
@@ -37,7 +38,6 @@ export default {
     }
   },
   mounted () {
-    this.toggleLoading(false)
     this.init()
   },
   methods: {
@@ -54,6 +54,7 @@ export default {
 
       const dataRequest = get(api.linkMonitor.bigramAnalysis, params)
       const nextHopRequest = get(api.linkMonitor.bigramNextHopAnalysis, params)
+      this.toggleLoading(true)
 
       Promise.all([dataRequest, nextHopRequest]).then(res => {
         if (res[0].code === 200 && res[1].code === 200) {
@@ -62,6 +63,11 @@ export default {
           // 链路下一跳信息
           const nextLinkData = res[1].data.result
 
+          this.isNoData = linkData.length === 0 && nextLinkData.length === 0
+          if (this.isNoData) {
+            return
+          }
+
           // 链路流量数据
           const gridData = []
           // 链路下一跳数据
@@ -181,7 +187,14 @@ export default {
             }
           })
           this.gridData2 = gridData2
+        } else {
+          this.isNoData = true
         }
+      }).catch(e => {
+        console.error('====', e)
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     },
     /**
diff --git a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
index a98243e1..13ea1d05 100644
--- a/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkDirectionGrid/PopoverContent.vue
@@ -1,8 +1,11 @@
 <template>
-  <div class="link-statistical-dimension">
+  <div class="link-statistical-dimension" style="position: relative">
     <div class="dimension-title">{{ $t('linkMonitor.egressLink') }}&nbsp;&&nbsp;{{ $t('linkMonitor.ingressLink') }}
     </div>
-    <div class="data-grid">
+
+    <chart-no-data v-if="isNoData"></chart-no-data>
+
+    <div class="data-grid" v-show="!isNoData">
       <div class="egress-row">
         <div class="egress-id" v-for="(item, index) in gridData" :key="index">
           <!--兼容下一跳情况-->
@@ -142,10 +145,15 @@
 <script>
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
 export default {
   name: 'PopoverContent',
   props: {
-    gridData: Array
+    gridData: Array,
+    isNoData: Boolean
+  },
+  components: {
+    ChartNoData
   },
   data () {
     return {