perf: 解决subtable抖动问题

src/components/charts/PieTable.vue

@@ -21,6 +21,7 @@
             style="width: 100%;"
             :show-header="false"
             :size="'mini'"
+            v-loading="subLoading"
             :height="'100%'">
           <el-table-column
               width="48">
@@ -168,22 +169,19 @@ export default {
           prop: 'bytes',
           width: '18%'
         }
-      ]
+      ],
+      subLoading: true
     }
   },
   methods: {
-    // rowChange (echartParams) {
-    //   const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
-    //   const row = this.pieTableData.find(item => echartParams.name === item[nameColumnKey])
-    //   this.toggleRowExpansion(row)
-    // },
-    // toggleRowExpansion (row) {
-    //   this.$refs.table.toggleRowExpansion(row)
-    // },
     currentChange (row, expandedRows) {
+      this.subLoading = true
       this.childrenTableData = []
-
+      if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
-      // this.$refs.table.toggleRowExpansion(row)
+        this.expandRowKeys = []
+      } else {
+        this.expandRowKeys = [row.domain]
+      }
       const url = this.chartInfo.params.urlChildrenTable
       const queryParams = {
         startTime: parseInt(this.timeFilter.startTime / 1000),
@@ -192,16 +190,15 @@ export default {
         domain: row.domain,
         limit: 10
       }
+      setTimeout(() => {
         get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
           if (response2.code === 200) {
             this.childrenTableData = response2.data.result
           }
-        if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
+        }).finally(() => {
-          this.expandRowKeys = []
+          this.subLoading = false
-        } else {
-          this.expandRowKeys = [row.domain]
-        }
         })
+      }, 500)
     },
     getRowKey (row) {
       return row.domain

src/views/charts/Chart.vue

@@ -516,6 +516,7 @@ export default {
       }
     },
     timeLineIsAllZero (data) {
+      if (data.resultType === 'matrix') {
         let allZero = true
         try {
           data.forEach(d => {
@@ -528,6 +529,7 @@ export default {
           })
         } catch (e) {}
         return allZero
+      }
     },
     initECharts (chartParams) {
       const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), ...this.entity }
@@ -540,7 +542,7 @@ export default {
             this.noData = false
           }
           const seriesTemplate = this.chartOption.series[0]
-          const allZero = this.timeLineIsAllZero(response.data.result)
+          const allZero = this.timeLineIsAllZero(response.data)
           if (allZero) {
             this.chartOption.yAxis = {
               ...this.chartOption.yAxis,
@@ -581,7 +583,7 @@ export default {
           } else {
             this.noData = false
           }
-          const allZero = this.timeLineIsAllZero(response.data.result)
+          const allZero = this.timeLineIsAllZero(response.data)
           if (allZero) {
             this.chartOption.yAxis = {
               ...this.chartOption.yAxis,
@@ -625,13 +627,14 @@ export default {
       tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200) {
+          console.info(response)
           if (this.$_.isEmpty(response.data.result)) {
             this.noData = true
             return
           } else {
             this.noData = false
           }
-          const allZero = this.timeLineIsAllZero(response.data.result)
+          const allZero = this.timeLineIsAllZero(response.data)
           if (allZero) {
             this.chartOption.yAxis = {
               ...this.chartOption.yAxis,