fix： 修改 group 部分图表 不加载的问题

nezha-fronted/src/components/chart/chart/chartTable.vue

@@ -52,38 +52,46 @@ export default {
     return {
       tableData: [],
       columns: [],
-      valueMapping: {}
+      valueMapping: {},
+      tableTimer: null
     }
   },
   methods: {
     initChart () {
-      this.columns = this.chartInfo.param.columns
-      this.chartInfo.param.valueMapping.forEach((item) => {
-        if (this.valueMapping[item.column]) {
-          this.valueMapping[item.column].push(item)
-        } else {
-          this.valueMapping[item.column] = [item]
-        }
-      })
-      const data = this.initTableData(this.chartInfo, this.chartData)
-      const arr = []
-      Object.keys(data).forEach(key => {
-        arr.push(data[key])
-      })
-      arr.forEach(item => {
-        item.display = this.handleDisplayTable(item)
-      })
-      arr.forEach(item => {
-        item.valueMapping = this.selectTableMapping(item, this.valueMapping)
-      })
-      this.tableData = arr
-      this.$refs.dataTable.doLayout()
+      if (this.tableTimer) {
+        clearTimeout(this.tableTimer)
+        this.tableTimer = null
+      }
+      this.tableTimer = setTimeout(() => {
+        this.columns = this.chartInfo.param.columns
+        this.chartInfo.param.valueMapping.forEach((item) => {
+          if (this.valueMapping[item.column]) {
+            this.valueMapping[item.column].push(item)
+          } else {
+            this.valueMapping[item.column] = [item]
+          }
+        })
+        const data = this.initTableData(this.chartInfo, this.chartData)
+        const arr = []
+        Object.keys(data).forEach(key => {
+          arr.push(data[key])
+        })
+        arr.forEach(item => {
+          item.display = this.handleDisplayTable(item)
+        })
+        arr.forEach(item => {
+          item.valueMapping = this.selectTableMapping(item, this.valueMapping)
+        })
+        this.tableData = arr
+        this.$refs.dataTable && this.$refs.dataTable.doLayout()
+      }, 200)
     },
     initTableData (chartInfo, originalDatas) {
       let colorIndex = 0
       const returnData = {}
       const arr = chartInfo.param.indexs.split(',')
-      originalDatas.forEach((originalData, expressionIndex) => {
+      const tableInitialData = lodash.cloneDeep(originalDatas)
+      tableInitialData.forEach((originalData, expressionIndex) => {
         let key = expressionIndex
         if (chartInfo.elements && chartInfo.elements[expressionIndex].name) {
           key = chartInfo.elements[expressionIndex].name
@@ -94,6 +102,7 @@ export default {
         originalData.forEach((data, dataIndex) => {
           this.isNoData = false
           data.$labels = data.metric
+          console.log(data.values)
           const value = getMetricTypeValue(data.values, chartInfo.param.statistics || 'last')
           const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
           // const mapping = this.selectTableMapping(value, chartInfo.param.valueMapping)
@@ -216,7 +225,11 @@ export default {
     }
   },
   mounted () {
-    this.chartInfo.loaded &&  this.initChart()
+    this.chartInfo.loaded && this.initChart()
+  },
+  beforeDestroy () {
+    clearTimeout(this.tableTimer)
+    this.tableTimer = null
   }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -67,7 +67,9 @@ export default {
     initChart (chartOption = this.chartOption) {
       this.legends = []
       chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
-
+      if (this.isNoData) {
+        return
+      }
       const { minTime, maxTime, minValue, maxValue } = this.getMinMaxFromData(this.chartData) // 此处时间是秒
       chartOption.xAxis.axisLabel.formatter = this.xAxisLabelFormatter(minTime * 1000, maxTime * 1000) // 需转为毫秒
       chartOption.tooltip.formatter = this.tooltipFormatter(this.chartInfo.param.stack)

nezha-fronted/src/components/chart/chartList.vue

@@ -285,6 +285,7 @@ export default {
       }, 300)
     },
     onScroll (scrollTop = 0) {
+      let self = this
       setTimeout(() => {
         this.copyDataList.forEach(item => {
           if (item.loaded) {
@@ -307,13 +308,13 @@ export default {
             // 4.浏览器可见区域的高度
             const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 70
             // console.log(this.$refs['chart' + item.id][0].$el.offsetHeight, scrollTop,'scrollTop',windowHeight,mainOffsetTop + mainHeight / 4,(windowScrollTop + windowHeight))
-            if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight)) {
+            if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight) || self.isGroup) {
               item.loaded = true
               this.$refs['chart' + item.id][0].getChartData()
             }
           }
         })
-      },100)
+      },200)
     }
   },
   created () {

nezha-fronted/src/components/chart/panelChart.vue

@@ -212,7 +212,7 @@ export default {
               }
             }
             if (this.chartInfo.type === 'group') {
-              this.chartData = lodash.get(this,'chartInfo.children', [])
+              this.chartData = lodash.get(this, 'chartInfo.children', [])
               this.groupInit()
             }
             if (this.chartInfo.type === 'topology') {
@@ -312,7 +312,7 @@ export default {
     }
   },
   mounted () {
-    // this.getChartData()
+    this.chartInfo.loaded && this.getChartData()
   }
 }
 </script>