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
       }
-      get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
+      setTimeout(() => {
-        if (response2.code === 200) {
+        get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
-          this.childrenTableData = response2.data.result
+          if (response2.code === 200) {
-        }
+            this.childrenTableData = response2.data.result
-        if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
+          }
-          this.expandRowKeys = []
+        }).finally(() => {
-        } else {
+          this.subLoading = false
-          this.expandRowKeys = [row.domain]
+        })
-        }
+      }, 500)
-      })
     },
     getRowKey (row) {
       return row.domain

src/views/charts/Chart.vue

@@ -516,18 +516,20 @@ export default {
       }
     },
     timeLineIsAllZero (data) {
-      let allZero = true
+      if (data.resultType === 'matrix') {
-      try {
+        let allZero = true
-        data.forEach(d => {
+        try {
-          d.values.forEach(r => {
+          data.forEach(d => {
-            if (r[1] && r[1] !== '0' && r[1] !== 0) {
+            d.values.forEach(r => {
-              allZero = false
+              if (r[1] && r[1] !== '0' && r[1] !== 0) {
-              throw new Error('break')
+                allZero = false
-            }
+                throw new Error('break')
+              }
+            })
           })
-        })
+        } catch (e) {}
-      } catch (e) {}
+        return allZero
-      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,