9.20 首页样式修改

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

@@ -1,4 +1,4 @@
-import { Carousel, Col, Radio, Row, Table } from 'antd';
+import { Carousel, Col, Radio, Row, Table, Tag } from 'antd';
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import './style.less';
 import './china';
@@ -103,6 +103,7 @@ const evalColumn: any[] = [
         key: 'provinceDictId',
         align: 'center',
         ellipsis: true,
+        width: '20%',
         onCell,
         onHeaderCell,
         render: (_: any, record: any) => proviceEnum[_],
@@ -112,14 +113,7 @@ const evalColumn: any[] = [
         dataIndex: 'projectName',
         key: 'projectName',
         ellipsis: true,
-        onCell,
+        width: '60%',
-        onHeaderCell,
-    },
-    {
-        title: '专家人数',
-        dataIndex: 'userNumber',
-        key: 'userNumber',
-        align: 'center',
         onCell,
         onHeaderCell,
     },
@@ -127,12 +121,46 @@ const evalColumn: any[] = [
         title: '状态',
         dataIndex: 'status',
         key: 'status',
+        width: '20%',
         align: 'center',
         onCell,
         onHeaderCell,
         render: (_: any, record: any) => roomStatusMap[_],
     },
 ];
+
+const warnColumn: any[] = [
+    {
+        title: '省分',
+        dataIndex: 'provinceDictId',
+        key: 'provinceDictId',
+        width: '20%',
+        align: 'center',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+        render: (_: any, record: any) => proviceEnum[_],
+    },
+    {
+        title: '项目名称',
+        dataIndex: 'projectName',
+        key: 'projectName',
+        ellipsis: true,
+        width: '60%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '告警数量',
+        dataIndex: 'userNumber',
+        key: 'userNumber',
+        width: '20%',
+        align: 'center',
+        onCell,
+        onHeaderCell,
+        // render: (_: any, record: any) => <Tag color={record.type == "2" ? "#72c1dd" : "#ee6766"}>{record.type == "2" ? `人数预警(${record.userNumber})` : `陌生人预警(${record.userNumber})`}</Tag>,
+    },
+];
 /**
  * 当前时间
  * @returns 
@@ -158,6 +186,15 @@ export const LocalTime = () => {
 const projectClick = () => {
     history.push("/ElecMonitorScreen/MonitorRoom");
 }
+/**
+ * 项目详情-跳转
+ */
+const projectDetailClick = (monitorId: any) => {
+    history.push({
+        pathname: "/ElecMonitorScreen/ProjectMonitorRoom",
+        state: { monitorId },
+    })
+}
 /**
  * echarts图表
  * @param props 
@@ -289,6 +326,9 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
                     emphasis: {
                         disabled: true
                     },
+                    select: {
+                        disabled: true
+                    },
                     itemStyle: {
                         areaColor: "#0d0059",
                         borderColor: "#389dff",
@@ -326,7 +366,10 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
                         label: {
                             show: false
                         }
-                    }
+                    },
+                    select: {
+                        disabled: true
+                    },
                 },
                 {
                     name: "",
@@ -428,6 +471,75 @@ const PieChart = (props: { data: any[], title: string }) => {
         </div>
     );
 }
+//异常列表滚动
+const ScrollWarnTable = (props: { dataSource: any[], columns: any[], rollTime?: number, rollNum?: number }) => {
+    const { dataSource, columns, rollTime = 50, rollNum = 5 } = props;
+    const [scrollY, setScrollY] = useState('');
+    const [tableData, setTableData] = useState<any[]>(dataSource);
+    const timer = useRef<any>();
+    useEffect(() => {
+        InitialScroll(dataSource);
+        return () => clearInterval(timer.current);
+    }, [dataSource]);
+    useEffect(() => {
+        getScrollY();
+        window.addEventListener("resize", debounce(() => getScrollY(), 100));
+        return () => {
+            window.removeEventListener("resize", debounce(() => getScrollY(), 100));
+        }
+    }, [])
+    //初始化
+    const InitialScroll = (data: any[]) => {
+        const v = document.getElementsByClassName("ant-table-body")[0];
+        if (data.length > Number(rollNum)) {
+            // 只有当大于10条数据的时候 才会看起滚动
+            timer.current = setInterval(() => {
+                v.scrollTop++;
+                if (
+                    Math.ceil(v.scrollTop) >= parseFloat((v.scrollHeight - v.clientHeight).toString())
+                ) {
+                    v.scrollTop = 0;
+                    //   setTimeout(() => { v.scrollTop = 0 }, 1000)
+                    // setTableData(() => [...dataSource, ...dataSource.map((item, index) => { item.id = index; return item })]);
+                }
+            }, Number(rollTime));
+        }
+    }
+    const getScrollY = () => {
+        const Y = document.getElementsByClassName("ant-table-body")[0]?.clientHeight;
+        if (Y) setScrollY(`${Y - 32}px`)
+    }
+    return (
+        <div
+            onMouseEnter={() => {
+                timer.current && clearInterval(timer.current);
+            }}
+            onMouseLeave={() => {
+                timer.current && clearInterval(timer.current);
+                InitialScroll(dataSource);
+            }}
+        >
+            <Table
+                pagination={false}
+                className="screen-table screen-warn-list"
+                rowKey="id"
+                size="small"
+                scroll={{
+                    y: (window.innerHeight - 185.8) * 134.8 / 300,
+                    scrollToFirstRowOnChange: true,
+                    // y: scrollY,
+                }}
+                dataSource={tableData}
+                columns={columns}
+                onRow={record => {
+                    return {
+                        onClick: () => projectDetailClick(record?.id),
+                    }
+                }}
+            />
+        </div>
+    )
+}
 
 const randomData = () => Math.round(Math.random() * 100);
 
@@ -495,7 +607,7 @@ export default () => {
         getRoomProjectData({ pageNo: 1, pageSize: 20 }).then(res => {
             if (res?.code == 200) {
                 // const data = res?.data;
-                const data = [{ "id": "1565620867201146880", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146881", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 7, "pageNo": null, "pageSize": null }, { "id": "1565620867201146882", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146883", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146884", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146885", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 3, "pageNo": null, "pageSize": null }, { "id": "1565620867201146886", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146887", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146888", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146889", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 7, "pageNo": null, "pageSize": null }, { "id": "1565620867201146890", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146891", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null }, { "id": "1565620867201146892", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null },];
+                const data = [{ "id": "1565620867201146880", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146881", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 7, "pageNo": null, "pageSize": null, "type": "3" }, { "id": "1565620867201146882", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146883", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "0", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146884", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "3" }, { "id": "1565620867201146885", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 3, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146886", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146887", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "1", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "3" }, { "id": "1565620867201146888", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146889", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 7, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146890", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "3" }, { "id": "1565620867201146891", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "2" }, { "id": "1565620867201146892", "placeId": "1523951236107988992", "projectName": "2022年中国联通活动策划执行及展览设计制作服务项目（勿动）", "realStartDate": null, "provinceDictId": "0022", "provinceDictName": "吉林省分公司", "placeName": "吉林联通评标中心", "status": "2", "userNumber": 5, "pageNo": null, "pageSize": null, "type": "3" },];
                 setBidProjectData(data);
             }
         })
@@ -595,18 +707,18 @@ export default () => {
                                 {categoryChart}
                             </div>
                             <div className='screen-card screen-top8'>
-                                <div className='card-title'>
+                                <div className='card-title card-title-click' onClick={() => projectDetailClick(sampleData?.id)}>
                                     <span>评标室监控</span>
                                 </div>
+                                <div className='card-project-content'>
+                                    {/* <p>项目名称：{sampleData?.projectName}</p>
+                                        <p>标段名称：{sampleData?.sectionName}</p>
+                                        <p>监控设备名称：{sampleData?.devicePageVOList[0].deviceName}</p>
+                                        <p><span>评标室名称：{sampleData?.areaName}</span><span>省分：{proviceEnum[sampleData?.provinceDictId]}</span></p> */}
+                                </div>
                                 {
                                     sampleData ? (
                                         <>
-                                            <div className='card-project-content'>
-                                                <p>项目名称：{sampleData?.projectName}</p>
-                                                <p>标段名称：{sampleData?.sectionName}</p>
-                                                <p>监控设备名称：{sampleData?.devicePageVOList[0].deviceName}</p>
-                                                <p><span>评标室名称：{sampleData?.areaName}</span><span>省分：{proviceEnum[sampleData?.provinceDictId]}</span></p>
-                                            </div>
                                             <div className='card-carema-c'>
                                                 {cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={0} />}
                                             </div>
@@ -682,7 +794,7 @@ export default () => {
                     </Row>
                 </Col>
                 <Col span={6} className='screen-left4'>
-                    <div className='screen-card'>
+                    <div className='screen-card screen-card-double'>
                         <div className='card-title'>
                             <span>异常预警</span>
                         </div>
@@ -690,8 +802,22 @@ export default () => {
                             <EarlyWarn name="陌生人预警" img={warn_icon_01} num={earlyWarnData?.strangerCount ? earlyWarnData?.strangerCount : 0} />
                             <EarlyWarn name="评标室人数预警" img={warn_icon_02} num={earlyWarnData?.numberCount ? earlyWarnData?.numberCount : 0} />
                         </div>
+                        {/* {bidProjectData.length > 0 && <Table
+                            pagination={false}
+                            className="screen-table screen-warn-list"
+                            rowKey="id"
+                            size="small"
+                            dataSource={bidProjectData}
+                            columns={warnColumn}
+                            onRow={record => {
+                                return {
+                                    onClick: () => projectDetailClick(record?.id),
+                                }
+                            }}
+                        />} */}
+                        {bidProjectData.length > 0 && <ScrollWarnTable dataSource={bidProjectData} columns={warnColumn} />}
                     </div>
-                    <div className='screen-card screen-card-double screen-top8'>
+                    <div className='screen-card screen-top8'>
                         <div className='card-title'>
                             <span>评标室项目情况<RightCircleOutlined style={{ marginLeft: "0.5rem", cursor: 'pointer' }} onClick={() => projectClick()} /></span>
                         </div>
@@ -702,6 +828,11 @@ export default () => {
                             size="small"
                             dataSource={bidProjectData}
                             columns={evalColumn}
+                            onRow={record => {
+                                return {
+                                    onClick: () => projectDetailClick(record?.id),
+                                }
+                            }}
                         />}
                     </div>
                 </Col>

src/pages/ElecEvaluation/MonitorScreen/Home/style.less

@@ -73,11 +73,28 @@
         font-size: 1rem;
     }
 
+    .card-title-click {
+        cursor: pointer;
+    }
+
     .screen-warn {
         display: flex;
         justify-content: space-evenly;
         align-items: center;
-        height: calc(92.6% - 36px);
+        height: calc(32% - 36px);
+    }
+
+    .screen-warn-list {
+        height: 67.4%;
+        margin-top: 0;
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+
+        .ant-table-cell-scrollbar {
+            display: none;
+        }
     }
 
     .screen-graph-top {
@@ -187,7 +204,7 @@
     }
 
     .card-project-default {
-        height: calc(~"(100vh - 177px - 3rem) / 3");
+        height: calc(~"(100vh - 188px - 3rem) / 3");
         background-repeat: no-repeat;
         background-size: 100% 100%;
         border-bottom-left-radius: 2px;
@@ -210,14 +227,14 @@
     }
 
     .card-carema-c {
-        height: calc(~"100% - 110px - 0.5rem");
+        height: calc(~"100% - 32px - 0.5rem");
         width: 100%;
-        border: 1px solid #fff
+        border: 1px solid @screen-color;
     }
 }
 
 .screen-card-double {
-    height: calc(~"(100vh - 61px - 2.5rem) / 3 * 2");
+    height: calc(~"(100vh - 61px - 2.3rem) / 3 * 2");
 }
 
 .screen-warn-content {
@@ -381,6 +398,7 @@
         .screen-table-header;
         background: #041a6d;
         color: #2adff5;
+        cursor: pointer;
     }
 
     .screen-table-even-content {