379 lines
10 KiB
JavaScript
379 lines
10 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
|
import useRequest from '../../../../utils/useRequest';
|
|
import PanelBox from '../../components/PanelBox';
|
|
|
|
import Table from '@material-ui/core/Table';
|
|
import TableContainer from '@material-ui/core/TableContainer';
|
|
import TableBody from '@material-ui/core/TableBody';
|
|
import TableHead from '@material-ui/core/TableHead';
|
|
import TableRow from '@material-ui/core/TableRow';
|
|
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import useRefresh from '../../../../utils/useRefresh';
|
|
import { HDRealPromise } from '../../../../models/_/real';
|
|
import clsx from 'clsx';
|
|
import { renderHDRz } from '../../../../utils/renutils';
|
|
import Setting from './Setting';
|
|
import { InfoPopNames } from '../../InfoPops';
|
|
import config from '../../../../config';
|
|
import moment from 'moment';
|
|
|
|
function rzRender(rz, base) {
|
|
return (
|
|
<DpTableCell align="right" style={{ color: rz >= base ? 'red' : '#fff' }}>
|
|
{typeof base === 'number' ? base.toFixed(2) : ''}
|
|
</DpTableCell>
|
|
);
|
|
}
|
|
|
|
function HDReal({ style }) {
|
|
const dispatch = useDispatch();
|
|
const tableRzFilter = useSelector(s => s.realview.tableRzFilter);
|
|
const hdAutoRefresh = useSelector(s => s.realview.hdAutoRefresh);
|
|
const t = useRefresh(hdAutoRefresh ? 60 * 1000 : 0);
|
|
// let { data } = useRequest(HDRealPromise.get, t);
|
|
const [setting, showSetting] = useState(false);
|
|
|
|
// const showData = useMemo(() => {
|
|
// if (!data) {
|
|
// return [];
|
|
// }
|
|
// let ret = [];
|
|
// data.forEach(o => {
|
|
// if (!tableRzFilter[o.type]) {
|
|
// return;
|
|
// }
|
|
// o.status = Math.floor(Math.random() * (4 - 0 + 1)) + 0
|
|
// o.kd = (Math.random() * 100).toFixed(2);
|
|
// o.ll = (Math.random() * 100).toFixed(1);
|
|
// ret.push(o);
|
|
// });
|
|
// return ret;
|
|
// }, [data, tableRzFilter]);
|
|
const randomMinutes = Math.floor(Math.random() * 60) + 1;
|
|
const format = 'YYYY-MM-DD HH:mm';
|
|
const SOIL_STATIONS = [
|
|
{
|
|
id: 1,
|
|
name: '宋埠镇站',
|
|
location: {
|
|
lat: 31.1725,
|
|
lng: 115.0139
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '乘马岗镇站',
|
|
location: {
|
|
lat: 31.2503,
|
|
lng: 115.1242
|
|
}
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '白果镇站',
|
|
location: {
|
|
lat: 31.0958,
|
|
lng: 115.2417
|
|
}
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '福田河站',
|
|
location: {
|
|
lat: 31.1847,
|
|
lng: 115.1536
|
|
}
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '黄土岗镇站',
|
|
location: {
|
|
lat: 31.2158,
|
|
lng: 115.0825
|
|
}
|
|
}
|
|
];
|
|
// const showData = Array(10).fill(0).map((o, i) => ({
|
|
// stnm:SOIL_STATIONS[i%2]?.name,
|
|
// id:i + 1,
|
|
// time: moment()
|
|
// .subtract(i * 60 + randomMinutes, 'minutes')
|
|
// .format(format),
|
|
// sd: (Math.random() * 100).toFixed(2),
|
|
// }))
|
|
|
|
const flyTo = (record) => {
|
|
const { lgtd, lttd } = record;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
|
zoom: config.poiPositionZoom.hd,
|
|
pitch: config.poiPitch,
|
|
});
|
|
}
|
|
}
|
|
|
|
const toggleStType = (type) => {
|
|
const visible = !tableRzFilter[type];
|
|
dispatch.realview.setTableRzFilter({ [type]: visible });
|
|
}
|
|
const showData = [
|
|
{
|
|
"id": "1",
|
|
"indexCode": "-1",
|
|
"name": "坝顶公路入口",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7632670",
|
|
"lttd": "31.4934740",
|
|
"menuId": 1,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "2",
|
|
"indexCode": "-1",
|
|
"name": "大坝中",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7635070",
|
|
"lttd": "31.4958250",
|
|
"menuId": 1,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "3",
|
|
"indexCode": "-1",
|
|
"name": "溢洪道左",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7632360",
|
|
"lttd": "31.4984280",
|
|
"menuId": 2,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "4",
|
|
"indexCode": "-1",
|
|
"name": "溢洪道右",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7639080",
|
|
"lttd": "31.4987730",
|
|
"menuId": 2,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "5",
|
|
"indexCode": "-1",
|
|
"name": "溢洪道消力池",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7645800",
|
|
"lttd": "31.4976180",
|
|
"menuId": 2,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "6",
|
|
"indexCode": "-1",
|
|
"name": "中心机房",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7630480",
|
|
"lttd": "31.4925400",
|
|
"menuId": 3,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "7",
|
|
"indexCode": "-1",
|
|
"name": "灌溉发电洞入口",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7614910",
|
|
"lttd": "31.4931630",
|
|
"menuId": 4,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "8",
|
|
"indexCode": "-1",
|
|
"name": "灌溉发电洞出口",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7617570",
|
|
"lttd": "31.4917830",
|
|
"menuId": 4,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "9",
|
|
"indexCode": "-1",
|
|
"name": "灌溉发电洞启闭机房",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7616050",
|
|
"lttd": "31.4924070",
|
|
"menuId": 4,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "10",
|
|
"indexCode": "-1",
|
|
"name": "副坝坝上",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7584290",
|
|
"lttd": "31.4923590",
|
|
"menuId": 5,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
},
|
|
{
|
|
"id": "11",
|
|
"indexCode": "-1",
|
|
"name": "陈店河入库口",
|
|
"ipAddress": null,
|
|
"chan": null,
|
|
"type": 1,
|
|
"buildDate": null,
|
|
"lgtd": "114.7467450",
|
|
"lttd": "31.5407780",
|
|
"menuId": 6,
|
|
"menuName": null,
|
|
"remark": null,
|
|
"createTime": null
|
|
}
|
|
]
|
|
|
|
const toggleAutoRefresh = () => {
|
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
|
}
|
|
|
|
const renderStatus = (row) => {
|
|
let bz = '运行'
|
|
switch (row.status) {
|
|
case 0:
|
|
bz = '停止'
|
|
break;
|
|
case 1:
|
|
bz = '运行'
|
|
break;
|
|
case 2:
|
|
bz = '故障'
|
|
break;
|
|
case 3:
|
|
bz = '维护中'
|
|
break;
|
|
case 4:
|
|
bz = '待机'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return bz
|
|
}
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="视频监控"
|
|
color="green"
|
|
// tabs={
|
|
// <span className="button-group">
|
|
// <span className={clsx({ active: tableRzFilter.sh })} onClick={() => toggleStType('sh')}>山洪</span>
|
|
// <span className={clsx({ active: tableRzFilter.sw })} onClick={() => toggleStType('sw')}>水文</span>
|
|
// </span>
|
|
// }
|
|
extra={
|
|
<>
|
|
<i style={{ marginRight: '0.5rem', color: hdAutoRefresh ? '#00deff' : '#aaa' }} className="ionicons loop cursor-pointer" onClick={toggleAutoRefresh}></i>
|
|
{/* <i className="ionicons gear cursor-pointer" onClick={() => showSetting(true)}></i> */}
|
|
</>
|
|
}
|
|
>
|
|
<TableContainer style={{ height: '100%' }}>
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell style={{ width: '10%' }} align="left">序号</DpTableCell>
|
|
<DpTableCell style={{ width: '45%' }} align="left">视频点名称</DpTableCell>
|
|
<DpTableCell align="center" style={{ width: '45%' }}>所属区域</DpTableCell>
|
|
{/* <DpTableCell align="center" style={{ width: '40%' }}>监测时间</DpTableCell> */}
|
|
{/* <DpTableCell align="right">警戒水位</DpTableCell> */}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{showData.map((row) => (
|
|
<DpTableRow key={row.id}>
|
|
<DpTableCell component="th" scope="row">
|
|
<div
|
|
className="table-ellipsis cursor-pointer"
|
|
>{row.id}</div>
|
|
</DpTableCell>
|
|
<DpTableCell component="th" scope="row">
|
|
<div
|
|
className="table-ellipsis cursor-pointer"
|
|
// onClick={() => flyTo(row)}
|
|
>{row.name}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">{row.name}</DpTableCell>
|
|
{/* <DpTableCell align="center">{row.time}</DpTableCell> */}
|
|
{/* {rzRender(row.rz, row.grz)}
|
|
{rzRender(row.rz, row.wrz)} */}
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
{
|
|
setting && <Setting onClose={() => showSetting(false)} />
|
|
}
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default HDReal;
|