1.17 修改异常监控和今日开标列表滚动样式
This commit is contained in:
jl-zhoujl2
@ -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>
|
||||
|
||||
@ -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 }) => {
|
||||
const { dataSource, columns, ynum = 300, rowKey = "id", selectKey = -1, onDoubleClick = () => { } } = props;
|
||||
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", 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) => {
|
||||
if (index == selectKey) {
|
||||
return "scroll-select-bg"; //highlight样式需要自己定义
|
||||
}
|
||||
return "scroll-select-default";
|
||||
}}
|
||||
// rowClassName={(record, index) => {
|
||||
// if (index == selectKey) {
|
||||
// return rowClassName; //highlight样式需要自己定义
|
||||
// }
|
||||
// return "scroll-select-default";
|
||||
// }}
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
onRow={record => {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user