From 2bea9c95650389906914780ca21740f170bd6d10 Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Wed, 13 Mar 2024 15:43:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=B9=B3=E6=BB=91=E6=BB=9A=E5=8A=A8=20#7277?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/components/ChartComponentS2.vue     | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index 0426fff388..45de8fd209 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -136,6 +136,7 @@ const renderChart = (viewInfo: Chart, resetPageInfo: boolean) => {
   recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
 
   setupPage(chart, resetPageInfo)
+  myChart?.facet.timer?.stop()
   myChart?.destroy()
   const chartView = chartViewManager.getChartView(
     viewInfo.render,
@@ -172,38 +173,44 @@ const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {
   }
 }
 
-let scrollTimer: number
-let scrollTop = 0
 const initScroll = () => {
-  clearInterval(scrollTimer)
   // 首先回到最顶部，然后计算行高*行数作为top，最后判断：如果top<数据量*行高，继续滚动，否则回到顶部
   const customAttr = view.value.customAttr
   const senior = view.value.senior
-  scrollTop = 0
   if (
     senior?.scrollCfg?.open &&
     (view.value.type === 'table-normal' || (view.value.type === 'table-info' && !state.showPage))
   ) {
-    const rowHeight = customAttr.tableCell.tableItemHeight
-    const headerHeight = customAttr.tableHeader.tableTitleHeight
-    const dom = document.getElementById(containerId)
-    if (dom.offsetHeight > rowHeight * chartData.value.tableRow.length + headerHeight) {
+    // 防止多次渲染
+    myChart.facet.timer?.stop()
+    if (myChart.store.get('scrollY') !== 0) {
+      myChart.store.set('scrollY', 0)
+      myChart.render()
+    }
+    // 平滑滚动，兼容原有的滚动速率设置
+    // 假设原设定为 2 行间隔 2 秒，换算公式为: 滚动到底部的时间 = 未展示部分行数 / 2行 * 2秒
+    const offsetHeight = document.getElementById(containerId).offsetHeight
+    // 没显示就不滚了
+    if (!offsetHeight) {
       return
     }
-    scrollTimer = setInterval(() => {
-      const offsetHeight = dom.offsetHeight
-      const top = rowHeight * senior.scrollCfg.row
-      if (offsetHeight - headerHeight + scrollTop < rowHeight * chartData.value.tableRow.length) {
-        scrollTop += top
-      } else {
-        scrollTop = 0
-      }
-      myChart.store.set('scrollY', scrollTop)
-      if (!offsetHeight) {
-        return
-      }
-      myChart.render()
-    }, senior.scrollCfg.interval)
+    const rowHeight = customAttr.tableCell.tableItemHeight
+    const headerHeight = customAttr.tableHeader.tableTitleHeight
+    const scrollBarSize = myChart.theme.scrollBar.size
+    const scrollHeight =
+      rowHeight * chartData.value.tableRow.length + headerHeight - offsetHeight + scrollBarSize
+    // 显示内容没撑满
+    if (scrollHeight < scrollBarSize) {
+      return
+    }
+    const viewHeight = offsetHeight - headerHeight - scrollBarSize
+    const scrollViewCount = chartData.value.tableRow.length - viewHeight / rowHeight
+    const duration = (scrollViewCount / senior.scrollCfg.row) * senior.scrollCfg.interval
+    myChart.facet.scrollWithAnimation(
+      { offsetY: { value: scrollHeight, animate: false } },
+      duration,
+      initScroll
+    )
   }
 }
 
@@ -335,6 +342,7 @@ const resize = (width, height) => {
   }
   timer = setTimeout(() => {
     myChart?.changeSheetSize(width, height)
+    myChart?.facet.timer?.stop()
     myChart?.render()
     initScroll()
   }, 500)
@@ -363,9 +371,9 @@ onMounted(() => {
   resizeObserver.observe(document.getElementById(containerId))
 })
 onBeforeUnmount(() => {
+  myChart?.facet.timer?.stop()
   myChart?.destroy()
   resizeObserver?.disconnect()
-  clearInterval(scrollTimer)
 })
 
 const autoStyle = computed(() => {