[ feat ]:display表格滚动支持

webapp/app/containers/Display/Preview/Reveal.tsx

@@ -38,9 +38,17 @@ const DisplayReveal: React.FC = () => {
   const currentDisplay = useSelector(makeSelectCurrentDisplay())
 
   useStatistic(currentProject, currentDisplay)
+  const { autoPlay, autoSlide, transitionStyle, transitionSpeed, needScroll, scrollWaitTime } =
+  currentDisplay.config.displayParams || DefaultDisplayParams
+
+  let timer = null;
+  if (window.timerList) {
+    for (let i = 0; i < window.timerList.length; i++) {
+      clearInterval(window.timerList[i])
+    }
+  }
+  window.timerList = [];
 
-  const { autoPlay, autoSlide, transitionStyle, transitionSpeed } =
-    currentDisplay.config.displayParams || DefaultDisplayParams
 
   useEffect(() => {
     Reveal.initialize({
@@ -69,6 +77,32 @@ const DisplayReveal: React.FC = () => {
     })
   }, [])
 
+  const taskScroll = (i) => {
+    console.log('scrollTop ', document.querySelectorAll('.ant-table-body')[i].scrollTop );
+    console.log('offsetHeight ', document.querySelectorAll('.ant-table-body')[i].offsetHeight );
+    console.log('clientHeight ', document.querySelectorAll('.ant-table-body')[i].clientHeight );
+    if (document.querySelectorAll('.ant-table-body')[i].scrollTop 
+    >= document.querySelectorAll('.ant-table-tbody')[i].offsetHeight 
+    - document.querySelectorAll('.ant-table-body')[i].clientHeight) {
+      document.querySelectorAll('.ant-table-body')[i].scrollTop = 0;
+    }
+    else {
+      document.querySelectorAll('.ant-table-body')[i].scrollTop += 50;
+    }
+  }
+
+  setTimeout(() => {
+    const len = document.querySelectorAll('.ant-table-body').length
+    if (needScroll) {
+      for (let i = 0; i < len; i++) {
+        timer = setInterval(() => taskScroll(i), scrollWaitTime * 1000);
+        window.timerList.push(timer)
+      }
+    }
+    console.log('window.timerList', window.timerList)
+  }, 5000)
+
+
   const slideChanged = useCallback((e) => {
     const { indexh: slideIdx } = e
     setCurrentSlideIndex(slideIdx)

webapp/app/containers/Display/components/Setting/DisplaySettingModal.tsx

@@ -85,7 +85,7 @@ const formItemStyle: Partial<FormItemProps> = {
 const DisplaySettingModal: React.FC<IDisplaySettingModalProps> = (props) => {
   const { visible, displayParams, form, onCancel, onOk } = props
   const { getFieldDecorator } = form
-  const { autoPlay, autoSlide, transitionStyle, transitionSpeed, grid } =
+  const { autoPlay, autoSlide, transitionStyle, transitionSpeed, grid, needScroll, scrollWaitTime } =
     displayParams || DefaultDisplayParams
 
   const ok = useCallback(() => {
@@ -109,6 +109,21 @@ const DisplaySettingModal: React.FC<IDisplaySettingModalProps> = (props) => {
         <Row gutter={8}>
           <Col span={10}>
             <Card title="全局播放设置" size="small">
+            <FormItem label="表格滚动" {...formItemStyle}>
+                {getFieldDecorator<IDisplayParams>('needScroll', {
+                  initialValue: needScroll,
+                  valuePropName: 'checked'
+                })(<Checkbox />)}
+              </FormItem>
+              {form.getFieldValue('needScroll') === true && (
+                <FormItem label="表格滚动停留时间（秒）" {...formItemStyle}>
+                  {getFieldDecorator<IDisplayParams>('scrollWaitTime', {
+                    initialValue: scrollWaitTime,
+                    validateFirst: true,
+                    rules: [{ required: true, message: '请输入数字' }]
+                  })(<InputNumber min={1} />)}
+                </FormItem>
+              )}
               <FormItem label="自动播放" {...formItemStyle}>
                 {getFieldDecorator<IDisplayParams>('autoPlay', {
                   initialValue: autoPlay,

webapp/app/containers/Display/components/Setting/constants.ts

@@ -27,5 +27,8 @@ export const DefaultDisplayParams: IDisplayParams = {
   autoSlide: 10,
   transitionStyle: 'none',
   transitionSpeed: 'default',
-  grid: [DisplayDefaultGridSize, DisplayDefaultGridSize]
+  grid: [DisplayDefaultGridSize, DisplayDefaultGridSize],
+  needScroll: true,
+  scrollWaitTime: 1,
+
 }

webapp/app/containers/Viz/components/types.ts

@@ -47,7 +47,9 @@ export interface IDisplayParams {
   autoSlide: number
   transitionStyle: 'none' | 'fade' | 'slide' | 'convex' | 'concave' | 'zoom'
   transitionSpeed: 'default' | 'fast' | 'slow'
-  grid: [number, number]
+  grid: [number, number],
+  needScroll: boolean
+  scrollWaitTime: number
 }
 
 export interface IDisplayFormed extends IDisplayBase {

webapp/app/containers/Widget/components/Chart/Table/Table.less

@@ -78,3 +78,18 @@
   background-color: #1890ff!important;
   color: #fff!important;
 }
+
+::-webkit-scrollbar {/*滚动条整体样式*/
+  width: 0 !important;
+  height: 0 !important;
+  background-color: transparent  !important;
+}
+
+::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+  background-color: transparent  !important;
+}
+
+::-webkit-scrollbar-track {/*滚动条里面轨道*/
+  background-color: transparent  !important;
+}
+

webapp/share/containers/Display/Reveal/Reveal.tsx

@@ -34,9 +34,39 @@ const ShareDisplayReveal: React.FC = () => {
   const {
     config: { displayParams }
   } = useSelector(makeSelectDisplay())
-  const { autoPlay, autoSlide, transitionStyle, transitionSpeed } =
+  const { autoPlay, autoSlide, transitionStyle, transitionSpeed, needScroll, scrollWaitTime } =
     displayParams || DefaultDisplayParams
 
+  let timer = null;
+  if (window.timerList) {
+    for (let i = 0; i < window.timerList.length; i++) {
+      clearInterval(window.timerList[i])
+    }
+  }
+  window.timerList = [];
+
+
+  const taskScroll = (i) => {
+    if (document.querySelectorAll('.ant-table-body')[i].scrollTop 
+    >= document.querySelectorAll('.ant-table-tbody')[i].offsetHeight 
+    - document.querySelectorAll('.ant-table-body')[i].clientHeight) {
+      document.querySelectorAll('.ant-table-body')[i].scrollTop = 0;
+    }
+    else {
+      document.querySelectorAll('.ant-table-body')[i].scrollTop += 50;
+    }
+  }
+
+  setTimeout(() => {
+    const len = document.querySelectorAll('.ant-table-body').length
+    if (needScroll) {
+      for (let i = 0; i < len; i++) {
+        timer = setInterval(() => taskScroll(i), scrollWaitTime * 1000);
+        window.timerList.push(timer)
+      }
+    }
+  }, 5000)
+
   const slidesCount = useSelector(makeSelectSlidesCount())
   const slideNumberParam = new URLSearchParams(window.location.search).get('p')
   const slideNumber = +slideNumberParam