300 lines
9.7 KiB
JavaScript
300 lines
9.7 KiB
JavaScript
import React, { useMemo, useState, useEffect } 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 { DatePicker } from 'antd';
|
|
import moment from 'moment';
|
|
import './index.less'
|
|
const { RangePicker } = DatePicker;
|
|
|
|
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 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 data = [
|
|
{ stnm: '福田镇中心区', leakage: '1258.6', supply: '3526.8', rate: 35.6 },
|
|
{ stnm: '木子店镇区', leakage: '986.3', supply: '2832.7', rate: 34.8 },
|
|
{ stnm: '龙池桥镇区', leakage: '1485.5', supply: '4482.5', rate: 33.1 },
|
|
{ stnm: '宋埠镇区', leakage: '1284.8', supply: '4029.5', rate: 31.9 },
|
|
{ stnm: '黄土岗镇区', leakage: '186.2', supply: '698.2', rate: 26.7 },
|
|
{ stnm: '铁门岗镇区', leakage: '984.2', supply: '3994.4', rate: 24.6 },
|
|
{ stnm: '乘马岗镇区', leakage: '300.6', supply: '1250.5', rate: 24.0 },
|
|
{ stnm: '白果镇区', leakage: '1129.0', supply: '6422.6', rate: 17.6 },
|
|
{ stnm: '张家畈镇区', leakage: '444.8', supply: '2661.8', rate: 16.7 },
|
|
{ name: '顺河镇区', leakage: '749.3', supply: '4490.1', rate: 16.7 }
|
|
];
|
|
const scData = [
|
|
{
|
|
"stcd": "61612610",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "三河口水厂",
|
|
"adcd": "421181109000",
|
|
"wscd": null,
|
|
rate:32.95,
|
|
"importancy": 0,
|
|
"lgtd": 115.166667,
|
|
"lttd": 31.333333,
|
|
"elev": 0,
|
|
"damel": 156.8,
|
|
"dsflz": 154.99,
|
|
"fsltdz": 149,
|
|
"ddz": 124,
|
|
"zcxsw": 149,
|
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 12.5,
|
|
"drpState": 1,
|
|
"rz": 141.45,
|
|
"w": 77.8,
|
|
"a_fsltdz": -7.550000000000011,
|
|
"rzTm": "2025-06-03T01:00:00.000Z",
|
|
"rzWarning": 0,
|
|
"rzState": 1,
|
|
"aRz": -7.55
|
|
},
|
|
{
|
|
"stcd": "7CS000231",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "刘集水厂",
|
|
rate:31.04,
|
|
"adcd": "421181100000",
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.048056,
|
|
"lttd": 31.335556,
|
|
"elev": 0,
|
|
"damel": 79.6,
|
|
"dsflz": 78.65,
|
|
"fsltdz": 72.05,
|
|
"ddz": 69.55,
|
|
"zcxsw": 72.05,
|
|
"drpTm": "2023-11-20T01:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 0,
|
|
"drpState": 2,
|
|
"rz": 76.49,
|
|
"w": 0.049,
|
|
"a_fsltdz": 4.439999999999998,
|
|
"rzTm": "2025-04-11T06:00:00.000Z",
|
|
"rzWarning": 1,
|
|
"rzState": 2,
|
|
"pic": [
|
|
{
|
|
"stcd": "7CS000231",
|
|
"tm": "2023-11-20T01:04:18.000Z",
|
|
"url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000231/20231120090418.jpg"
|
|
},
|
|
{
|
|
"stcd": "7CS000231",
|
|
"tm": "2023-11-20T01:07:54.000Z",
|
|
"url": "http://223.75.53.106:8891/skjgimages/2023/1120/7CS000232/20231120090754.jpg"
|
|
}
|
|
],
|
|
"aRz": 4.44
|
|
},
|
|
{
|
|
"stcd": "716460001",
|
|
"type": "sk",
|
|
"hasRz": true,
|
|
"stnm": "杉林河水厂",
|
|
rate:31.95,
|
|
"adcd": "421181107000",
|
|
"wscd": null,
|
|
percent:42.14,
|
|
"importancy": 0,
|
|
"lgtd": 115.433056,
|
|
"lttd": 31.304444,
|
|
"elev": 0,
|
|
"damel": 236.2,
|
|
"dsflz": 233.92,
|
|
"fsltdz": 231,
|
|
"ddz": 204,
|
|
"zcxsw": 231,
|
|
"drpTm": "2025-04-11T05:00:00.000Z",
|
|
"today": 0,
|
|
"h1": 0,
|
|
"h3": 0,
|
|
"h6": 0,
|
|
"h12": 0,
|
|
"h24": 0,
|
|
"h48": 0,
|
|
"drpState": 2,
|
|
"rz": 224.31,
|
|
"w": 0,
|
|
"a_fsltdz": -6.689999999999998,
|
|
"rzTm": "2025-04-11T05:00:00.000Z",
|
|
"rzWarning": 0,
|
|
"rzState": 2,
|
|
"aRz": -6.69
|
|
},
|
|
]
|
|
const [type, setType] = useState('sc')
|
|
const toggleStType = (type) => {
|
|
setType(type)
|
|
}
|
|
const [params, setParams] = useState({ tm: [] })
|
|
const toggleAutoRefresh = () => {
|
|
dispatch.realview.setHdAutoRefresh(!hdAutoRefresh);
|
|
}
|
|
|
|
const searchTm = (e) => {
|
|
setParams({
|
|
...params,
|
|
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
|
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
|
tm: e,
|
|
})
|
|
};
|
|
useEffect(() => {
|
|
let options = "";
|
|
options = {
|
|
etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
|
stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
|
tm: [
|
|
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
|
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
|
],
|
|
}
|
|
|
|
setParams(options)
|
|
|
|
}, [])
|
|
|
|
const [list, setList] = useState([])
|
|
useEffect(() => {
|
|
const newArr = type == 'sc' ? scData :type == 'xz' ? data:[];
|
|
setList(newArr)
|
|
}, [type])
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="漏损排行榜"
|
|
color="green"
|
|
tabs={
|
|
<span className="button-group">
|
|
<span className={clsx({ active: type == 'sc' })} onClick={() => toggleStType('sc')}>水厂</span>
|
|
<span className={clsx({ active: type == 'xz' })} onClick={() => toggleStType('xz')}>乡镇</span>
|
|
<span className={clsx({ active: type == 'dma'})} onClick={() => toggleStType('dma')}>DMA分区</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> */}
|
|
</>
|
|
}
|
|
>
|
|
<div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
|
|
<RangePicker
|
|
// width="100%"
|
|
className='time-picker'
|
|
style={{
|
|
flex: 1,
|
|
background: "transparent",
|
|
border: "none",
|
|
color: "#fff",
|
|
}}
|
|
onChange={searchTm}
|
|
allowClear
|
|
format="YYYY-MM-DD HH:mm"
|
|
showTime={{
|
|
format: 'HH:mm',
|
|
}}
|
|
value={params.tm}
|
|
getPopupContainer={trigger => trigger.parentElement}
|
|
/>
|
|
</div>
|
|
<TableContainer style={{ height: '80%', marginTop: '10px' }}>
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow >
|
|
<DpTableCell style={{ width: '20%' }} align="center">序号</DpTableCell>
|
|
<DpTableCell style={{ width: '50%' }} align="center">名称</DpTableCell>
|
|
{/* <DpTableCell style={{ width: '25%' }} align="center">漏水量(㎡)</DpTableCell>
|
|
<DpTableCell align="center" style={{ width: '25%' }}>供水量(m³)</DpTableCell> */}
|
|
<DpTableCell align="center" style={{ width: '30%' }}>漏损率(%)</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{list.map((row,i) => (
|
|
<DpTableRow key={row.id} onClick={() => flyTo(row)}>
|
|
<DpTableCell align="center">
|
|
<div
|
|
className="table-ellipsis cursor-pointer"
|
|
>{i+1}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="center">{row.stnm}</DpTableCell>
|
|
{/* <DpTableCell align="center">{row.leakage}</DpTableCell>
|
|
<DpTableCell align="center">{row.supply}</DpTableCell> */}
|
|
<DpTableCell align="center">{row.rate}</DpTableCell>
|
|
{/* {rzRender(row.rz, row.grz)}
|
|
{rzRender(row.rz, row.wrz)} */}
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
{
|
|
setting && <Setting onClose={() => showSetting(false)} />
|
|
}
|
|
<img src={`${process.env.PUBLIC_URL}/assets/tl.png`} alt="" style={{position:'absolute',width:130,height:220,left:-200,top:670}}/>
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default HDReal;
|