9.20 首页样式修改
This commit is contained in:
jl-zhoujl2
@ -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) => <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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user