1.6 第十二版

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

@@ -16,7 +16,7 @@ const MonitorException: React.FC<{}> = () => {
     //超过1小时未开标数量-列表
     const [noOpenListData, setNoOpenListData] = useState<any[]>([]);
     //开标后超过6小时未开启评审室-列表
-    const [noOpenAssessListData, setNoOpenAssessListData] = useState<any>();
+    const [noOpenAssessListData, setNoOpenAssessListData] = useState<any[]>([]);
     //开标后超过6小时未开启评审室-数量
     const [noOpenAssessNumber, setNoOpenAssessNumber] = useState<string | number>(0);
     //异常监控-解密异常、mac地址相同及相关项目列表
@@ -31,6 +31,8 @@ const MonitorException: React.FC<{}> = () => {
     const [modalListData, setModalListData] = useState<any[]>([]);
     //ModalList Type
     const [exceptionType, setExceptionType] = useState<any>();
+    //selectKey
+    const [selectKey, setSelectKey] = useState<number>(-1);
     //权限校验
     const auth = useRef<boolean>(authCheck());
     //超过1小时未开标数量
@@ -148,6 +150,36 @@ const MonitorException: React.FC<{}> = () => {
             getThreeDayNoEndCount();
         }
     }, [])
+    useEffect(() => {
+        let interval: any = null;
+        let count = 0;
+        let lengthMap = [noOpenListData.length, noOpenAssessListData.length, isNotEmpty(decryptData?.decryptExceptionList) ? decryptData?.decryptExceptionList.length : 0, threeDayNoEndData.length, isNotEmpty(decryptData?.macSameList) ? decryptData?.macSameList.length : 0, threeDaysUnSendAnnoList.length].sort((a, b) => b - a);
+        if (lengthMap[0] > 1) {//至少2条才能滚动
+            interval = setInterval(() => {
+                if (count < lengthMap[0]) {
+                    setSelectKey(count);
+                    const v0 = document.getElementsByClassName("scroll-select-bg")[0];
+                    const v1 = document.getElementsByClassName("scroll-select-bg")[1];
+                    const v2 = document.getElementsByClassName("scroll-select-bg")[2];
+                    const v3 = document.getElementsByClassName("scroll-select-bg")[3];
+                    const v4 = document.getElementsByClassName("scroll-select-bg")[4];
+                    const v5 = document.getElementsByClassName("scroll-select-bg")[5];
+                    v0.scrollIntoView(false);
+                    v1.scrollIntoView(false);
+                    v2.scrollIntoView(false);
+                    v3.scrollIntoView(false);
+                    v4.scrollIntoView(false);
+                    v5.scrollIntoView(false);
+                    count++;
+                } else {
+                    count = 0;
+                }
+            }, 5000)
+        }
+        return () => {
+            clearInterval(interval);
+        }
+    }, [noOpenListData, noOpenAssessListData, decryptData?.decryptExceptionList, threeDayNoEndData, decryptData?.macSameList, threeDaysUnSendAnnoList])
 
     const columns: any[] = [
         {
@@ -481,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" />
+                            <ScrollTable dataSource={noOpenListData} columns={columns} ynum={266} rowKey="sectionId" selectKey={selectKey} />
                         </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} />
+                            <ScrollTable dataSource={noOpenAssessListData} columns={columns} ynum={266} selectKey={selectKey} />
                         </div>
                     </div>
                 </Col>
@@ -493,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} ynum={266} />
+                            <ScrollTable dataSource={decryptData?.decryptExceptionList} columns={columnsSecond} selectKey={selectKey} ynum={266} />
                         </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} />
+                            <ScrollTable dataSource={threeDayNoEndData} columns={columnsForth} ynum={266} selectKey={selectKey} />
                         </div>
                     </div>
                 </Col>
@@ -505,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} />
+                            <ScrollTable dataSource={decryptData?.macSameList} columns={columnsFifth} ynum={266} selectKey={selectKey} />
                         </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} />
+                            <ScrollTable dataSource={threeDaysUnSendAnnoList} columns={columnsThird} ynum={266} selectKey={selectKey} />
                         </div>
                     </div>
                 </Col>

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

@@ -458,8 +458,8 @@ export const StageCard = (props: { percentage: string | number, total: string |
     )
 }
 //滚动列表
-export const ScrollTable = (props: { dataSource: any[], columns: any[], rollTime?: number, rollNum?: number, ynum?: number, rowKey?: string }) => {
+export const ScrollTable = (props: { dataSource: any[], columns: any[], rollTime?: number, rollNum?: number, ynum?: number, rowKey?: string, selectKey?: number }) => {
-    const { dataSource, columns, rollTime = 50, rollNum = 5, ynum = 300, rowKey = "id" } = props;
+    const { dataSource, columns, rollTime = 10, rollNum = 5, ynum = 300, rowKey = "id", selectKey = -1 } = props;
     return (
         <div style={{ ["--monitor-table-height" as any]: `${ynum}px` }}>
             <Table
@@ -469,9 +469,18 @@ export const ScrollTable = (props: { dataSource: any[], columns: any[], rollTime
                 bordered={false}
                 scroll={{
                     y: ynum,
-                    scrollToFirstRowOnChange: true,
+                    // scrollToFirstRowOnChange: true,
                 }}
                 // dataSource={tableData}
+                rowClassName={(record, index) => {
+                    if ((selectKey >= (dataSource?.length - 1)) && (index == (dataSource?.length - 1))) {//超过列表长度后锁定最后一条
+                        return "scroll-select-bg";
+                    }
+                    if (index == selectKey) {
+                        return "scroll-select-bg"; //highlight样式需要自己定义
+                    }
+                    return "scroll-select-default";
+                }}
                 dataSource={dataSource}
                 columns={columns}
                 onRow={record => {

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

@@ -33,6 +33,8 @@ const OpenToday: React.FC<{}> = () => {
     const [modalListData, setModalListData] = useState<any[]>([]);
     //ModalList Type
     const [exceptionType, setExceptionType] = useState<any>();
+    //selectKey
+    const [selectKey, setSelectKey] = useState<number>(-1);
     //权限校验
     const auth = useRef<boolean>(authCheck());
     //定时器描述
@@ -61,7 +63,7 @@ const OpenToday: React.FC<{}> = () => {
             width: '20%',
             onCell,
             onHeaderCell,
-            render: (_: any, record: any) => <span>{record.projectName}<br />{record.sectionName}</span>,
+            render: (_: any, record: any) => <span><span title={record.projectName}>{record.projectName}</span><br /><span title={record.sectionName}>{record.sectionName}</span></span>,
         },
         {
             title: '采购预算',
@@ -113,7 +115,7 @@ const OpenToday: React.FC<{}> = () => {
             width: '20%',
             onCell,
             onHeaderCell,
-            render: (_: any, record: any) => <span>{record.projectName}<br />{record.sectionName}</span>,
+            render: (_: any, record: any) => <span><span title={record.projectName}>{record.projectName}</span><br /><span title={record.sectionName}>{record.sectionName}</span></span>,
         },
         {
             title: '采购预算',
@@ -233,6 +235,28 @@ const OpenToday: React.FC<{}> = () => {
             clearInterval(interval);
         }
     }, [])
+    useEffect(() => {
+        let interval: any = null;
+        let count = 0;
+        let lengthMap = [isNotEmpty(todayOpeningData?.todayList) ? todayOpeningData?.todayList.length : 0, isNotEmpty(todayOpeningData?.importantList) ? todayOpeningData?.importantList.length : 0].sort((a, b) => b - a);
+        if (lengthMap[0] > 1) {//至少2条才能滚动
+            interval = setInterval(() => {
+                if (count < lengthMap[0]) {
+                    setSelectKey(count);
+                    const v0 = document.getElementsByClassName("scroll-select-bg")[0];
+                    const v1 = document.getElementsByClassName("scroll-select-bg")[1];
+                    v0.scrollIntoView(false);
+                    v1.scrollIntoView(false);
+                    count++;
+                } else {
+                    count = 0;
+                }
+            }, 5000)
+        }
+        return () => {
+            clearInterval(interval);
+        }
+    }, [todayOpeningData?.todayList, todayOpeningData?.importantList])
     return (
         <ScreenTitle title="今日开标">
             <div className="top-main top-main-bottom">
@@ -276,13 +300,13 @@ const OpenToday: React.FC<{}> = () => {
                 <Col span={12}>
                     <ScreenLabel title="今日开标明细" />
                     <div className='monitor-tender-card'>
-                        <ScrollTable dataSource={todayOpeningData?.todayList} columns={columns} ynum={530} />
+                        <ScrollTable dataSource={todayOpeningData?.todayList} columns={columns} ynum={540} selectKey={selectKey} />
                     </div>
                 </Col>
                 <Col span={12}>
                     <ScreenLabel title="重保项目" />
                     <div className='monitor-tender-card'>
-                        <ScrollTable dataSource={isNotEmpty(todayOpeningData?.importantList) ? todayOpeningData?.importantList : []} columns={reiColumns} ynum={530} />
+                        <ScrollTable dataSource={isNotEmpty(todayOpeningData?.importantList) ? todayOpeningData?.importantList : []} columns={reiColumns} ynum={540} selectKey={selectKey} />
                     </div>
                 </Col>
             </Row>

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

@@ -71,7 +71,7 @@ const Supplier: React.FC<{}> = () => {
     const monthOrYear = useRef<string>("yearData");
     //指标项 tenderCount-投标次数 selectCount-中选次数 bidCost-中选金额
     const metric = useRef<string>("tenderCount");
-    const metricMap = { tenderCount: "投标次数", selectCount: "中选次数", bidCost: "中选金额" };
+    const metricMap = { tenderCount: "投标次数", selectCount: "中选次数", bidCost: "中选金额（万元）" };
     //省份
     const province = useRef<string>("");
     //图表数据

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

@@ -177,7 +177,7 @@ const TenderAgent: React.FC<{}> = () => {
                             <OverviewItem icon={Circle3197} title="代理机构数量" number={tenderAgentData?.agencyProjectCountYear.dljg} unit="个" />
                             <OverviewItem icon={Circle3198} title="代理机构人员数量" number={tenderAgentData?.agencyProjectCountYear.dljgry} unit="人" />
                             <OverviewItem icon={Circle3199} title="代理机构项目数量" number={tenderAgentData?.agencyProjectCountYear.dlxms} unit="个" />
-                            <OverviewItem icon={Circle3200} title="代理项目预算金额" number={tenderAgentData?.agencyProjectCountYear.dlxmys} unit="亿元" />
+                            <OverviewItem icon={Circle3200} title="代理项目预算金额" number={tenderAgentData?.agencyProjectCountYear.dlxmys?.toFixed(0)} unit="亿元" />
                             <OverviewItem icon={Circle3199} title="代理项目完成率" number={isNotEmpty(tenderAgentData?.agencyProjectCountYear.wcl) ? (tenderAgentData?.agencyProjectCountYear.wcl * 100).toFixed(0) : 0} unit="%" />
                         </div>
                     </Col>

src/pages/ElecEvaluation/Monitor/style.less

@@ -724,6 +724,10 @@
     .ant-table-body {
         height: var(--monitor-table-height);
     }
+
+    .scroll-select-bg {
+        background: #1b7ef266;
+    }
 }
 
 .monitor-statistic-table {