diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue index 17e5d2f7f..6cf5016e8 100644 --- a/nezha-fronted/src/components/chart/chart/chartTable.vue +++ b/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 } } diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index a05dcc0ff..38b142889 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/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) diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue index 899cc1dc5..82085f65b 100644 --- a/nezha-fronted/src/components/chart/chartList.vue +++ b/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 () { diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 88874aeef..5d938d225 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/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() } }