1.17 修改异常监控和今日开标列表滚动样式

src/pages/ElecEvaluation/Monitor/Exception/index.tsx

@@ -513,11 +513,11 @@ const MonitorException: React.FC<{}> = () => {
                     <div className="monitor-left-main">
                         <ScreenLabel title="1小时未开标项目列表" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType(null); setModalListData(noOpenListData); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={noOpenListData} columns={columns} ynum={266} rowKey="sectionId" selectKey={selectKey} />
+                            <ScrollTable dataSource={noOpenListData} columns={columns} ynum={260} rowKey="sectionId" rowClassName="scroll-select-bg0" tableKey={0} isScroll />
                         </div>
                         <ScreenLabel title="开标后六小时未开启评审" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType(null); setModalListData(noOpenAssessListData); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={noOpenAssessListData} columns={columns} ynum={266} rowKey="sectionId" selectKey={selectKey} />
+                            <ScrollTable dataSource={noOpenAssessListData} columns={columns} ynum={260} rowKey="sectionId" rowClassName="scroll-select-bg1" tableKey={1} isScroll />
                         </div>
                     </div>
                 </Col>
@@ -525,11 +525,11 @@ const MonitorException: React.FC<{}> = () => {
                     <div className="monitor-center-main">
                         <ScreenLabel title="解密异常项目列表" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("解密异常"); setModalListData(decryptData?.decryptExceptionList ? decryptData?.decryptExceptionList : []); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={decryptData?.decryptExceptionList} columns={columnsSecond} rowKey="id" selectKey={selectKey} ynum={266} />
+                            <ScrollTable dataSource={decryptData?.decryptExceptionList} columns={columnsSecond} rowKey="id" rowClassName="scroll-select-bg2" ynum={260} tableKey={2} isScroll />
                         </div>
                         <ScreenLabel title="开启评审后3日未结束评标" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("开启评审后3日未结束评标"); setModalListData(threeDayNoEndData); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={threeDayNoEndData} columns={columnsForth} ynum={266} rowKey="sectionName" selectKey={selectKey} />
+                            <ScrollTable dataSource={threeDayNoEndData} columns={columnsForth} ynum={260} rowKey="sectionName" rowClassName="scroll-select-bg3" tableKey={3} isScroll />
                         </div>
                     </div>
                 </Col>
@@ -537,11 +537,11 @@ const MonitorException: React.FC<{}> = () => {
                     <div className="monitor-right-main">
                         <ScreenLabel title="MAC地址重复项目列表" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("MAC地址重复"); setModalListData(decryptData?.macSameList ? decryptData?.macSameList : []); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={decryptData?.macSameList} columns={columnsFifth} ynum={266} rowKey="id" selectKey={selectKey} />
+                            <ScrollTable dataSource={decryptData?.macSameList} columns={columnsFifth} ynum={260} rowKey="id" rowClassName="scroll-select-bg4" tableKey={4} isScroll />
                         </div>
                         <ScreenLabel title="评标结束后3日内未发布公示" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("评标结束后3日内未发布公示"); setModalListData(threeDaysUnSendAnnoList); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={threeDaysUnSendAnnoList} columns={columnsThird} ynum={266} rowKey="bidSectName" selectKey={selectKey} />
+                            <ScrollTable dataSource={threeDaysUnSendAnnoList} columns={columnsThird} ynum={260} rowKey="bidSectName" rowClassName="scroll-select-bg5" tableKey={5} isScroll />
                         </div>
                     </div>
                 </Col>

src/pages/ElecEvaluation/Monitor/Home/index.tsx

@@ -460,10 +460,59 @@ export const StageCard = (props: { percentage: string | number, total: string |
     )
 }
 //滚动列表
-export const ScrollTable = (props: { dataSource: any[], columns: any[], ynum?: number, rowKey?: string, selectKey?: number, onDoubleClick?: (record: any) => void }) => {
+export const ScrollTable = (props: { dataSource: any[], columns: any[], ynum?: number, rowKey?: string, rowClassName?: string, tableKey?: number, rollNum?: number, isScroll?: boolean, onDoubleClick?: (record: any) => void }) => {
-    const { dataSource, columns, ynum = 300, rowKey = "id", selectKey = -1, onDoubleClick = () => { } } = props;
+    const { dataSource, columns, ynum = 300, rowKey = "id", rowClassName = "scroll-select-bg0", rollNum = 10, tableKey = 0, isScroll = false, onDoubleClick = () => { } } = props;
+    //selectKey
+    // const [selectKey, setSelectKey] = useState<number>(-1);
+    const timer = useRef<any>();
+    const initScroll = (data: any[]) => {
+        // let count = selectKey != -1 ? selectKey : 0;
+        const length = isNotEmpty(data) ? data.length : 0;
+        // if (length > 1) {//至少2条才能滚动
+        //     timer.current = setInterval(() => {
+        //         if (count < length) {
+        //             setSelectKey(count);
+        //             const v0 = document.getElementsByClassName(rowClassName)[0];
+        //             v0?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        //             count++;
+        //         } else {
+        //             count = 0;
+        //         }
+        //     }, 3000)
+        // }
+        if (isScroll && (length > rollNum)) {
+            // 只有当大于10条数据的时候 才会看起滚动
+            const v = document.getElementsByClassName("ant-table-body")[tableKey];
+            timer.current = setInterval(() => {
+                v.scrollTop += 0.5;
+                if (
+                    Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString())
+                ) {
+                    setTimeout(() => {
+                        v.scrollTop = 0;
+                    }, 500);
+                }
+            }, 20);
+        }
+    }
+    useEffect(() => {
+        initScroll(dataSource);
+        return () => {
+            clearInterval(timer.current);
+        }
+    }, [dataSource])
+
     return (
-        <div style={{ ["--monitor-table-height" as any]: `${ynum}px` }}>
+        <div
+            style={{ ["--monitor-table-height" as any]: `${ynum}px` }}
+            onMouseEnter={() => {
+                timer.current && clearInterval(timer.current);
+            }}
+            onMouseLeave={() => {
+                timer.current && clearInterval(timer.current);
+                initScroll(dataSource);
+            }}
+        >
             <Table
                 pagination={false}
                 className="monitor-scroll-table"
@@ -474,12 +523,12 @@ export const ScrollTable = (props: { dataSource: any[], columns: any[], ynum?: n
                     // scrollToFirstRowOnChange: true,
                 }}
                 // dataSource={tableData}
-                rowClassName={(record, index) => {
+                // rowClassName={(record, index) => {
-                    if (index == selectKey) {
+                //     if (index == selectKey) {
-                        return "scroll-select-bg"; //highlight样式需要自己定义
+                //         return rowClassName; //highlight样式需要自己定义
-                    }
+                //     }
-                    return "scroll-select-default";
+                //     return "scroll-select-default";
-                }}
+                // }}
                 dataSource={dataSource}
                 columns={columns}
                 onRow={record => {

src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx

@@ -315,13 +315,13 @@ const OpenToday: React.FC<{}> = () => {
                 <Col span={12}>
                     <ScreenLabel title="今日开标明细" />
                     <div className='monitor-tender-card'>
-                        <ScrollTable dataSource={todayOpeningData?.todayList} columns={columns} ynum={540} rowKey="sectionId" selectKey={selectKey} onDoubleClick={(record: any) => { setModalTitle("今日开标明细"); setModalListData([record]); setModalListVisible(true); }} />
+                        <ScrollTable dataSource={todayOpeningData?.todayList} columns={columns} ynum={540} rowKey="sectionId" isScroll tableKey={0} rollNum={14} onDoubleClick={(record: any) => { setModalTitle("今日开标明细"); setModalListData([record]); setModalListVisible(true); }} />
                     </div>
                 </Col>
                 <Col span={12}>
                     <ScreenLabel title="重保项目" />
                     <div className='monitor-tender-card'>
-                        <ScrollTable dataSource={isNotEmpty(todayOpeningData?.importantList) ? todayOpeningData?.importantList : []} columns={reiColumns} ynum={540} rowKey="id" selectKey={selectKey} onDoubleClick={(record: any) => { setModalTitle("重保项目明细"); setModalListData([record]); setModalListVisible(true); }} />
+                        <ScrollTable dataSource={isNotEmpty(todayOpeningData?.importantList) ? todayOpeningData?.importantList : []} columns={reiColumns} ynum={540} rowKey="id" isScroll tableKey={1} rollNum={14} onDoubleClick={(record: any) => { setModalTitle("重保项目明细"); setModalListData([record]); setModalListVisible(true); }} />
                     </div>
                 </Col>
             </Row>

src/pages/ElecEvaluation/Monitor/style.less

@@ -725,7 +725,12 @@
         height: var(--monitor-table-height);
     }
 
-    .scroll-select-bg {
+    .scroll-select-bg0,
+    .scroll-select-bg1,
+    .scroll-select-bg2,
+    .scroll-select-bg3,
+    .scroll-select-bg4,
+    .scroll-select-bg5 {
         background: #66666666;
     }
 }