Merge pull request #8405 from dataease/pr@dev@feat_antv_table_smooth_scroll

feat(视图): AntV 表格支持平滑滚动 #7277

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",

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)

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() {