From 814db79bf341bde7db929f44ab3228cb24c9367f Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 7 Mar 2024 18:13:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20AntV=20=E8=A1=A8?= =?UTF-8?q?=E6=A0=BC=E6=94=AF=E6=8C=81=E5=B9=B3=E6=BB=91=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=20#7277?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/frontend/package.json | 2 +- .../src/views/chart/chart/table/table-info.js | 30 ++------- .../chart/components/ChartComponentS2.vue | 63 +++++++++---------- 3 files changed, 36 insertions(+), 59 deletions(-) diff --git a/core/frontend/package.json b/core/frontend/package.json index e60937fdd7..4c6f94d64e 100644 --- a/core/frontend/package.json +++ b/core/frontend/package.json @@ -35,7 +35,7 @@ "@antv/l7-scene": "2.15.0", "@antv/l7-source": "2.15.0", "@antv/l7-utils": "2.15.0", - "@antv/s2": "1.49.1", + "@antv/s2": "^1.54.6", "@antv/util": "^2.0.17", "@riophae/vue-treeselect": "0.4.0", "@tinymce/tinymce-vue": "^3.2.8", diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js index 2055e0c8a9..64aef06947 100644 --- a/core/frontend/src/views/chart/chart/table/table-info.js +++ b/core/frontend/src/views/chart/chart/table/table-info.js @@ -76,15 +76,12 @@ class SortTooltip extends BaseTooltip { }) } } -export function baseTableInfo(s2, container, chart, action, tableData, pageInfo, vueCom, resizeFunc) { +export function baseTableInfo(container, chart, action, tableData, pageInfo, vueCom, resizeFunc) { const containerDom = document.getElementById(container) // fields let fields = chart.data.fields if (!fields || fields.length === 0) { - if (s2) { - s2.destroy() - } return } @@ -242,10 +239,7 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo, } // 开始渲染 - if (s2) { - s2.destroy() - } - s2 = new TableSheet(containerDom, s2DataConfig, s2Options) + const s2 = new TableSheet(containerDom, s2DataConfig, s2Options) // click s2.on(S2Event.DATA_CELL_CLICK, action) @@ -270,16 +264,13 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo, return s2 } -export function baseTableNormal(s2, container, chart, action, tableData, vueCom, resizeFunc) { +export function baseTableNormal(container, chart, action, tableData, vueCom, resizeFunc) { const containerDom = document.getElementById(container) if (!containerDom) return // fields const fields = chart.data.fields if (!fields || fields.length === 0) { - if (s2) { - s2.destroy() - } return } @@ -482,10 +473,7 @@ export function baseTableNormal(s2, container, chart, action, tableData, vueCom, } // 开始渲染 - if (s2) { - s2.destroy() - } - s2 = new TableSheet(containerDom, s2DataConfig, s2Options) + const s2 = new TableSheet(containerDom, s2DataConfig, s2Options) // click s2.on(S2Event.DATA_CELL_CLICK, action) @@ -510,7 +498,7 @@ export function baseTableNormal(s2, container, chart, action, tableData, vueCom, return s2 } -export function baseTablePivot(s2, container, chart, action, headerAction, tableData) { +export function baseTablePivot(container, chart, action, headerAction, tableData) { const containerDom = document.getElementById(container) // row and column @@ -531,9 +519,6 @@ export function baseTablePivot(s2, container, chart, action, headerAction, table // fields const fields = chart.data.fields if (!fields || fields.length === 0) { - if (s2) { - s2.destroy() - } return } @@ -712,10 +697,7 @@ export function baseTablePivot(s2, container, chart, action, headerAction, table } // 开始渲染 - if (s2) { - s2.destroy() - } - s2 = new PivotSheet(containerDom, s2DataConfig, s2Options) + const s2 = new PivotSheet(containerDom, s2DataConfig, s2Options) // click s2.on(S2Event.DATA_CELL_CLICK, action) diff --git a/core/frontend/src/views/chart/components/ChartComponentS2.vue b/core/frontend/src/views/chart/components/ChartComponentS2.vue index 2c326b5305..05e82e7073 100644 --- a/core/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue @@ -142,7 +142,6 @@ export default { }, data() { return { - myChart: null, chartId: uuid.v1(), showTrackBar: true, trackBarStyle: { @@ -242,6 +241,7 @@ export default { beforeDestroy() { clearInterval(this.scrollTimer) window.removeEventListener('resize', this.chartResize) + this.myChart?.facet.timer?.stop() this.myChart?.destroy?.() this.myChart = null }, @@ -287,8 +287,6 @@ export default { }, drawView() { const chart = this.chart - // type - // if (chart.data) { this.antVRenderStatus = true if (!chart.data || (!chart.data.data && !chart.data.series)) { chart.data = { @@ -300,17 +298,16 @@ export default { ] } } + if (this.myChart) { + this.myChart?.facet.timer?.stop() + this.myChart.destroy() + } if (chart.type === 'table-info') { - this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData, this.currentPage, this, this.columnResize) + this.myChart = baseTableInfo(this.chartId, chart, this.antVAction, this.tableData, this.currentPage, this, this.columnResize) } else if (chart.type === 'table-normal') { - this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData, this, this.columnResize) + this.myChart = baseTableNormal(this.chartId, chart, this.antVAction, this.tableData, this, this.columnResize) } else if (chart.type === 'table-pivot') { - this.myChart = baseTablePivot(this.myChart, this.chartId, chart, this.antVAction, this.tableHeaderClick, this.tableData) - } else { - if (this.myChart) { - this.antVRenderStatus = false - this.myChart.destroy() - } + this.myChart = baseTablePivot(this.chartId, chart, this.antVAction, this.tableHeaderClick, this.tableData) } if (this.myChart && this.searchCount > 0) { @@ -406,6 +403,7 @@ export default { this.myChart?.changeSheetSize(width, height) // 大小变化或者tab变化重新渲染 if (chartWidth || chartHeight || !(chartHeight || chartWidth)) { + this.myChart.facet.timer?.stop() this.myChart.render() } this.initScroll() @@ -526,35 +524,32 @@ export default { }, initScroll() { - clearInterval(this.scrollTimer) - // 首先回到最顶部，然后计算行高*行数作为top，最后判断：如果top<数据量*行高，继续滚动，否则回到顶部 + clearTimeout(this.scrollTimer) const customAttr = JSON.parse(this.chart.customAttr) const senior = JSON.parse(this.chart.senior) - - this.scrollTop = 0 - if (senior && senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) { + // 防止多次渲染 + this.myChart.facet.timer?.stop() + if (this.myChart.store.get('scrollY') !== 0) { + this.myChart.store.set('scrollY', 0) + this.myChart.render() + } + // 平滑滚动，兼容原有的滚动速率设置 + // 假设原设定为 2 行间隔 2 秒，换算公式为: 滚动到底部的时间 = 未展示部分行数 / 2行 * 2秒 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 - if ((offsetHeight - headerHeight + this.scrollTop) < rowHeight * this.chart.data.tableRow.length) { - this.scrollTop += top - } else { - this.scrollTop = 0 + const scrollBarSize = this.myChart.theme.scrollBar.size + const offsetHeight = document.getElementById(this.chartId).offsetHeight + const scrollHeight = rowHeight * this.chart.data.tableRow.length + headerHeight - offsetHeight + scrollBarSize + const viewHeight = offsetHeight - headerHeight - scrollBarSize + const scrollViewCount = this.chart.data.tableRow.length - viewHeight / rowHeight + const duration = scrollViewCount / senior.scrollCfg.row * senior.scrollCfg.interval + this.myChart.facet.scrollWithAnimation({ + offsetY: { + value: scrollHeight, + animate: false } - if (!offsetHeight) { - return - } - this.myChart.facet.scrollWithAnimation({ - offsetY: { - value: this.scrollTop, - animate: false - } - }) - }, senior.scrollCfg.interval) + }, duration, this.initScroll) } }, initRemark() {