diff --git a/webapp/app/containers/Display/Preview/Reveal.tsx b/webapp/app/containers/Display/Preview/Reveal.tsx index 10c44be07..c2606384b 100644 --- a/webapp/app/containers/Display/Preview/Reveal.tsx +++ b/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) diff --git a/webapp/app/containers/Display/components/Setting/DisplaySettingModal.tsx b/webapp/app/containers/Display/components/Setting/DisplaySettingModal.tsx index 5f2cb8c40..78f5b210e 100644 --- a/webapp/app/containers/Display/components/Setting/DisplaySettingModal.tsx +++ b/webapp/app/containers/Display/components/Setting/DisplaySettingModal.tsx @@ -85,7 +85,7 @@ const formItemStyle: Partial = { const DisplaySettingModal: React.FC = (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 = (props) => { + + {getFieldDecorator('needScroll', { + initialValue: needScroll, + valuePropName: 'checked' + })()} + + {form.getFieldValue('needScroll') === true && ( + + {getFieldDecorator('scrollWaitTime', { + initialValue: scrollWaitTime, + validateFirst: true, + rules: [{ required: true, message: '请输入数字' }] + })()} + + )} {getFieldDecorator('autoPlay', { initialValue: autoPlay, diff --git a/webapp/app/containers/Display/components/Setting/constants.ts b/webapp/app/containers/Display/components/Setting/constants.ts index 96022e920..6839230b9 100644 --- a/webapp/app/containers/Display/components/Setting/constants.ts +++ b/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, + } diff --git a/webapp/app/containers/Viz/components/types.ts b/webapp/app/containers/Viz/components/types.ts index 095f0d3c1..04fc9a439 100644 --- a/webapp/app/containers/Viz/components/types.ts +++ b/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 { diff --git a/webapp/app/containers/Widget/components/Chart/Table/Table.less b/webapp/app/containers/Widget/components/Chart/Table/Table.less index 303581a95..a95a2a634 100644 --- a/webapp/app/containers/Widget/components/Chart/Table/Table.less +++ b/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; +} + diff --git a/webapp/share/containers/Display/Reveal/Reveal.tsx b/webapp/share/containers/Display/Reveal/Reveal.tsx index c000aabaa..e6dc74dcf 100644 --- a/webapp/share/containers/Display/Reveal/Reveal.tsx +++ b/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