From 5e7eab6a3dd7f9426c26bc286d3a41dec45d9f5f Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sun, 26 Sep 2021 14:01:16 +0800
Subject: [PATCH] =?UTF-8?q?CN-153=20fix:=20=E4=BF=AE=E5=A4=8D=E4=BA=8C?=
 =?UTF-8?q?=E7=BA=A7=E4=B8=8B=E6=8B=89=E5=88=97=E8=A1=A8=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E8=BF=87=E7=A8=8B=E4=B8=AD=E6=98=BE=E7=A4=BAno=20data=E5=AD=97?=
 =?UTF-8?q?=E6=A0=B7=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/PieTable.vue | 60 +++++++++++++++++-------------
 src/views/charts/Chart.vue         |  1 -
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
index e9b57d09..4c2ba7fd 100644
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -12,40 +12,45 @@
       :size="'mini'"
       :height="'100%'">
     <el-table-column type="expand" :min-width="'5%'">
-      <template #default="props" style="height: auto">
-        <el-table
-            tooltip-effect="light"
-            class="expand-table"
-            :data="childrenTableData"
-            style="width: 100%;"
-            :show-header="false"
-            :size="'mini'"
-            :height="'100%'">
-          <el-table-column
-              width="48">
-          </el-table-column>
-          <el-table-column
-              v-for="(item, index) in tableTitlesOther"
-              :key="index"
-              show-overflow-tooltip
-              :min-width="item.width"
-              :label="item.label"
-              :prop="item.prop"
-              #default="{row}">
+      <template #default="props">
+        <div style="position: relative">
+          <div class="chart__loading" style="top: 0; height: 100%; z-index: 1;" v-show="loading">
+            <i class="el-icon-loading"></i>
+          </div>
+          <el-table
+              tooltip-effect="light"
+              class="expand-table"
+              :data="childrenTableData"
+              style="width: 100%;"
+              :show-header="false"
+              :size="'mini'"
+              :height="'100%'">
+            <el-table-column
+                width="48">
+            </el-table-column>
+            <el-table-column
+                v-for="(item, index) in tableTitlesOther"
+                :key="index"
+                show-overflow-tooltip
+                :min-width="item.width"
+                :label="item.label"
+                :prop="item.prop"
+                #default="{row}">
             <span v-if="item.prop === 'nameColumn'">
                 {{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
             </span>
-            <span v-else-if="item.prop === 'bytes'">
+              <span v-else-if="item.prop === 'bytes'">
                 {{unitConvert(row[item.prop], unitTypes.byte).join(' ')}}
             </span>
-            <span v-else-if="item.prop === 'packets' || item.prop === 'sessions'">
+              <span v-else-if="item.prop === 'packets' || item.prop === 'sessions'">
                 {{unitConvert(row[item.prop], unitTypes.number).join(' ')}}
             </span>
-            <span v-else>
+              <span v-else>
                 {{ row[item.prop] }}
             </span>
-          </el-table-column>
-        </el-table>
+            </el-table-column>
+          </el-table>
+        </div>
       </template>
     </el-table-column>
     <el-table-column
@@ -166,11 +171,13 @@ export default {
           prop: 'bytes',
           width: '18%'
         }
-      ]
+      ],
+      loading: true
     }
   },
   methods: {
     currentChange (row, expandedRows) {
+      this.loading = true
       this.childrenTableData = []
       if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
         this.expandRowKeys = []
@@ -191,6 +198,7 @@ export default {
             this.childrenTableData = response2.data.result
           }
         }).finally(() => {
+          this.loading = false
         })
       }, 500)
     },
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 3d0da0ae..5b6deba9 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -611,7 +611,6 @@ export default {
             this.singleValue.icon = chartParams.icon
             const gotData = new Promise(resolve => {
               if (chartParams.dataKey) {
-                console.info(this.parentData, chartParams)
                 if (this.parentData && this.parentData[chartParams.dataKey]) {
                   this.singleValue.value = this.parentData[chartParams.dataKey]
                 } else {