diff --git a/core/frontend/src/components/canvas/customComponent/UserView.vue b/core/frontend/src/components/canvas/customComponent/UserView.vue index 860fb9d68d..ea961a8db9 100644 --- a/core/frontend/src/components/canvas/customComponent/UserView.vue +++ b/core/frontend/src/components/canvas/customComponent/UserView.vue @@ -542,18 +542,17 @@ export default { }, // 监听外部的样式变化 （非实时性要求） 'hw': { - handler(newVal, oldVla) { - if (newVal !== oldVla && this.$refs[this.element.propValue.id]) { + handler(newVal, oldVal) { + if (!newVal) { + return + } + if (this.requestStatus === 'waiting') { + return + } + if (newVal !== oldVal && this.$refs[this.element.propValue.id]) { this.resizeChart() } - }, - deep: true - }, - // 监听外部的样式变化 （非实时性要求） - outStyle: { - handler(newVal, oldVla) { - }, - deep: true + } }, // 监听外部计时器变化 searchCount: function(val1) { @@ -655,7 +654,7 @@ export default { equalsAny, tabSwitch(tabCanvasId) { if (this.charViewS2ShowFlag && tabCanvasId === this.canvasId && this.$refs[this.element.propValue.id]) { - this.$refs[this.element.propValue.id].chartResize() + // do nothing } }, // 编辑状态下 不启动刷新 @@ -786,9 +785,10 @@ export default { param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param) }, clearPanelLinkage(param) { + console.log('clear linkage') if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) { try { - this.$refs[this.element.propValue.id]?.reDrawView?.() + // do nothing } catch (e) { console.error('reDrawView-error：', this.element.propValue.id) } @@ -842,9 +842,7 @@ export default { this.getDataLoading = false this.getData(id, cache, dataBroadcast) clearTimeout(this.cancelTime) - this.cancelTime = setTimeout(() => { - this.requestStatus = 'waiting' - }, 0) + this.requestStatus = 'waiting' return } this.requestStatus = 'waiting' diff --git a/core/frontend/src/views/chart/components/ChartComponent.vue b/core/frontend/src/views/chart/components/ChartComponent.vue index d58cbb2888..d8ad02c827 100644 --- a/core/frontend/src/views/chart/components/ChartComponent.vue +++ b/core/frontend/src/views/chart/components/ChartComponent.vue @@ -144,7 +144,8 @@ export default { 'line', 'line-stack', 'scatter' - ] + ], + resizeTimer: null } }, @@ -511,9 +512,16 @@ export default { }, chartResize() { // 指定图表的配置项和数据 - const chart = this.myChart - chart.resize() - this.reDrawMap() + this.resizeTimer && clearTimeout(this.resizeTimer) + this.resizeTimer = setTimeout(() => { + const { offsetWidth, offsetHeight } = document.getElementById(this.chartId) + const chartWidth = this.myChart.getWidth() + const chartHeight = this.myChart.getHeight() + if (offsetWidth !== chartWidth || offsetHeight !== chartHeight) { + this.myChart.resize() + this.reDrawMap() + } + }, 100) }, reDrawMap() { const chart = this.chart diff --git a/core/frontend/src/views/chart/components/ChartComponentG2.vue b/core/frontend/src/views/chart/components/ChartComponentG2.vue index 23f8ae5569..666387efff 100644 --- a/core/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/core/frontend/src/views/chart/components/ChartComponentG2.vue @@ -127,8 +127,8 @@ export default { remarkCfg: { show: false, content: '' - } - + }, + resizeTimer: null } }, @@ -156,17 +156,9 @@ export default { chart: { handler(newVal, oldVla) { this.initTitle() - this.calcHeightDelay() - new Promise((resolve) => { - resolve() - }).then(() => { - this.drawView() - }) + this.calcHeightRightNow(this.drawView) }, deep: true - }, - resize() { - this.drawEcharts() } }, beforeDestroy() { @@ -192,7 +184,7 @@ export default { for (const key in this.pointParam) { this.$delete(this.pointParam, key) } - window.removeEventListener('resize', this.calcHeightDelay) + window.removeEventListener('resize', this.chartResize) this.myChart = null }, mounted() { @@ -238,13 +230,8 @@ export default { }, preDraw() { this.initTitle() - this.calcHeightDelay() - new Promise((resolve) => { - resolve() - }).then(() => { - this.drawView() - }) - window.addEventListener('resize', this.calcHeightDelay) + this.calcHeightRightNow(this.drawView) + window.addEventListener('resize', this.chartResize) }, async drawView() { const chart = JSON.parse(JSON.stringify(this.chart)) @@ -380,7 +367,10 @@ export default { } }, chartResize() { - this.calcHeightDelay() + this.resizeTimer && clearTimeout(this.resizeTimer) + this.resizeTimer = setTimeout(() => { + this.calcHeightRightNow() + }, 100) }, trackClick(trackAction) { const param = this.pointParam @@ -470,22 +460,19 @@ export default { this.initRemark() }, - calcHeightRightNow() { + calcHeightRightNow(callback) { this.$nextTick(() => { if (this.$refs.chartContainer) { - const currentHeight = this.$refs.chartContainer.offsetHeight + const { offsetHeight } = this.$refs.chartContainer + let titleHeight = 0 if (this.$refs.title) { - const titleHeight = this.$refs.title.offsetHeight - this.chartHeight = (currentHeight - titleHeight) + 'px' + titleHeight = this.$refs.title.offsetHeight } + this.chartHeight = (offsetHeight - titleHeight) + 'px' + this.$nextTick(() => callback?.()) } }) }, - calcHeightDelay() { - setTimeout(() => { - this.calcHeightRightNow() - }, 100) - }, initRemark() { this.remarkCfg = getRemark(this.chart) } diff --git a/core/frontend/src/views/chart/components/ChartComponentS2.vue b/core/frontend/src/views/chart/components/ChartComponentS2.vue index 5f6e389496..ae96b11a25 100644 --- a/core/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue @@ -34,7 +34,7 @@
{ - resolve() - }).then(() => { - this.drawView() - }) + this.calcHeightRightNow(this.drawView) }, deep: true - }, - resize() { - this.drawEcharts() } }, mounted() { @@ -243,7 +236,7 @@ export default { }, beforeDestroy() { clearInterval(this.scrollTimer) - window.removeEventListener('resize', this.onResize) + window.removeEventListener('resize', this.chartResize) this.myChart?.destroy?.() this.myChart = null }, @@ -282,18 +275,10 @@ export default { this.tableData = data }, preDraw() { - this.onResize() - window.addEventListener('resize', this.onResize) - }, - onResize() { this.initData() this.initTitle() - this.calcHeightDelay() - new Promise((resolve) => { - resolve() - }).then(() => { - this.drawView() - }) + this.calcHeightRightNow(this.drawView) + window.addEventListener('resize', this.chartResize) }, drawView() { const chart = this.chart @@ -403,14 +388,21 @@ export default { } }, chartResize() { - this.initData() - this.initTitle() - this.calcHeightDelay() - new Promise((resolve) => { - resolve() - }).then(() => { - this.drawView() - }) + this.resizeTimer && clearTimeout(this.resizeTimer) + this.resizeTimer = setTimeout(() => { + this.initData() + this.initTitle() + this.calcHeightRightNow((width, height) => { + const { width: chartWidth, height: chartHeight } = this.myChart.options + if (width !== chartWidth || height !== chartHeight) { + this.myChart?.changeSheetSize(width, height) + if (chartWidth || chartHeight) { + this.myChart.render() + } + this.initScroll() + } + }) + }, 100) }, trackClick(trackAction) { const param = this.pointParam @@ -483,24 +475,19 @@ export default { this.initRemark() }, - calcHeightRightNow() { + calcHeightRightNow(callback) { this.$nextTick(() => { if (this.$refs.chartContainer) { - const currentHeight = this.$refs.chartContainer.offsetHeight + const { offsetWidth, offsetHeight } = this.$refs.chartContainer + let titleHeight = 0 if (this.$refs.title) { - const titleHeight = this.$refs.title.offsetHeight - this.chartHeight = (currentHeight - titleHeight) + 'px' - this.$refs.tableContainer.style.height = this.chartHeight + titleHeight = this.$refs.title.offsetHeight } + this.chartHeight = (offsetHeight - titleHeight) + 'px' + this.$nextTick(() => callback?.(offsetWidth, offsetHeight - titleHeight)) } }) }, - calcHeightDelay() { - this.calcHeightRightNow() - setTimeout(() => { - this.calcHeightRightNow() - }, 100) - }, pageChange(val) { this.currentPage.pageSize = val if (this.chart.datasetMode === 0 && !NOT_SUPPORT_PAGE_DATASET.includes(this.chart.datasourceType)) { @@ -536,23 +523,28 @@ export default { const senior = JSON.parse(this.chart.senior) this.scrollTop = 0 - this.myChart.store.set('scrollY', this.scrollTop) - this.myChart.render() if (senior && senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) { const rowHeight = customAttr.size.tableItemHeight const headerHeight = customAttr.size.tableTitleHeight this.scrollTimer = setInterval(() => { + const offsetHeight = document.getElementById(this.chartId).offsetHeight const top = rowHeight * senior.scrollCfg.row - const dom = document.getElementById(this.chartId) - if ((dom.offsetHeight - headerHeight + this.scrollTop) < rowHeight * this.chart.data.tableRow.length) { + if ((offsetHeight - headerHeight + this.scrollTop) < rowHeight * this.chart.data.tableRow.length) { this.scrollTop += top } else { this.scrollTop = 0 } - this.myChart.store.set('scrollY', this.scrollTop) - this.myChart.render() + if (!offsetHeight) { + return + } + this.myChart.facet.scrollWithAnimation({ + offsetY: { + value: this.scrollTop, + animate: false + } + }) }, senior.scrollCfg.interval) } }, diff --git a/core/frontend/src/views/chart/components/table/TableNormal.vue b/core/frontend/src/views/chart/components/table/TableNormal.vue index 260bf2a107..e5948321f5 100644 --- a/core/frontend/src/views/chart/components/table/TableNormal.vue +++ b/core/frontend/src/views/chart/components/table/TableNormal.vue @@ -214,7 +214,8 @@ export default { top: '0px' }, pointParam: null, - showSummary: true + showSummary: true, + resizeTimer: null } }, computed: { @@ -425,7 +426,8 @@ export default { }) }, calcHeightDelay() { - setTimeout(() => { + this.resizeTimer && clearTimeout(this.resizeTimer) + this.resizeTimer = setTimeout(() => { this.calcHeightRightNow() }, 100) }, @@ -597,12 +599,6 @@ export default { const scrollContainer = document.getElementsByClassName(this.chart.id)[0].getElementsByClassName('elx-table--body-wrapper')[0] this.scrollTop = 0 - setTimeout(() => { - scrollContainer.scrollTo({ - top: this.scrollTop, - behavior: this.scrollTop === 0 ? 'instant' : 'smooth' - }) - }, 0) if (senior && senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) { let rowHeight = customAttr.size.tableItemHeight @@ -621,11 +617,16 @@ export default { top = rowHeight * senior.scrollCfg.row } - if (scrollContainer.clientHeight + scrollContainer.scrollTop < scrollContainer.scrollHeight) { + const { clientHeight, scrollTop, scrollHeight } = scrollContainer + + if (clientHeight + scrollTop < scrollHeight) { this.scrollTop += top } else { this.scrollTop = 0 } + if (!clientHeight) { + return + } scrollContainer.scrollTo({ top: this.scrollTop, behavior: this.scrollTop === 0 ? 'instant' : 'smooth'