From 2f1be12fa5e0ae91b4680e83af8fcaf82f6ad683 Mon Sep 17 00:00:00 2001 From: jl-zhoujl2 Date: Tue, 20 Sep 2022 09:24:03 +0800 Subject: [PATCH] =?UTF-8?q?9.20=20=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MonitorScreen/Home/index.tsx | 171 ++++++++++++++++-- .../MonitorScreen/Home/style.less | 28 ++- 2 files changed, 174 insertions(+), 25 deletions(-) diff --git a/src/pages/ElecEvaluation/MonitorScreen/Home/index.tsx b/src/pages/ElecEvaluation/MonitorScreen/Home/index.tsx index 42dbeff..2779b8a 100644 --- a/src/pages/ElecEvaluation/MonitorScreen/Home/index.tsx +++ b/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, - onHeaderCell, - }, - { - title: '专家人数', - dataIndex: 'userNumber', - key: 'userNumber', - align: 'center', + width: '60%', 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) => {record.type == "2" ? `人数预警(${record.userNumber})` : `陌生人预警(${record.userNumber})`}, + }, +]; /** * 当前时间 * @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 }) => { ); } +//异常列表滚动 +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(dataSource); + const timer = useRef(); + 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 ( +
{ + timer.current && clearInterval(timer.current); + }} + onMouseLeave={() => { + timer.current && clearInterval(timer.current); + InitialScroll(dataSource); + }} + > + { + return { + onClick: () => projectDetailClick(record?.id), + } + }} + /> + + ) +} 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}
-
+
projectDetailClick(sampleData?.id)}> 评标室监控
+
+ {/*

项目名称：{sampleData?.projectName}

+

标段名称：{sampleData?.sectionName}

+

监控设备名称：{sampleData?.devicePageVOList[0].deviceName}

+

评标室名称：{sampleData?.areaName}省分：{proviceEnum[sampleData?.provinceDictId]}

*/} +
{ sampleData ? ( <> -
-

项目名称：{sampleData?.projectName}

-

标段名称：{sampleData?.sectionName}

-

监控设备名称：{sampleData?.devicePageVOList[0].deviceName}

-

评标室名称：{sampleData?.areaName}省分：{proviceEnum[sampleData?.provinceDictId]}

-
{cameraParams && }
@@ -682,7 +794,7 @@ export default () => {
-
+
异常预警
@@ -690,8 +802,22 @@ export default () => {
+ {/* {bidProjectData.length > 0 &&
{ + return { + onClick: () => projectDetailClick(record?.id), + } + }} + />} */} + {bidProjectData.length > 0 && } -
+
评标室项目情况 projectClick()} />
@@ -702,6 +828,11 @@ export default () => { size="small" dataSource={bidProjectData} columns={evalColumn} + onRow={record => { + return { + onClick: () => projectDetailClick(record?.id), + } + }} />}
diff --git a/src/pages/ElecEvaluation/MonitorScreen/Home/style.less b/src/pages/ElecEvaluation/MonitorScreen/Home/style.less index 7fe7325..9584890 100644 --- a/src/pages/ElecEvaluation/MonitorScreen/Home/style.less +++ b/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 {