CN-153 fix: 修复二级下拉列表加载过程中显示no data字样的问题

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">
+      <template #default="props">
-        <el-table
+        <div style="position: relative">
-            tooltip-effect="light"
+          <div class="chart__loading" style="top: 0; height: 100%; z-index: 1;" v-show="loading">
-            class="expand-table"
+            <i class="el-icon-loading"></i>
-            :data="childrenTableData"
+          </div>
-            style="width: 100%;"
+          <el-table
-            :show-header="false"
+              tooltip-effect="light"
-            :size="'mini'"
+              class="expand-table"
-            :height="'100%'">
+              :data="childrenTableData"
-          <el-table-column
+              style="width: 100%;"
-              width="48">
+              :show-header="false"
-          </el-table-column>
+              :size="'mini'"
-          <el-table-column
+              :height="'100%'">
-              v-for="(item, index) in tableTitlesOther"
+            <el-table-column
-              :key="index"
+                width="48">
-              show-overflow-tooltip
+            </el-table-column>
-              :min-width="item.width"
+            <el-table-column
-              :label="item.label"
+                v-for="(item, index) in tableTitlesOther"
-              :prop="item.prop"
+                :key="index"
-              #default="{row}">
+                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-column>
-        </el-table>
+          </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)
     },

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 {