341 lines
10 KiB
JavaScript
341 lines
10 KiB
JavaScript
|
import React, { useState,useEffect } from 'react';
|
||
|
|
import { OverallPromise } from '../../../../models/_/real';
|
||
|
|
import useRequest from '../../../../utils/useRequest';
|
||
|
|
import PanelBox from '../../components/PanelBox';
|
||
|
|
import OverallContent from './OverallContent';
|
||
|
|
import { makeStyles } from '@material-ui/core/styles';
|
||
|
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||
|
|
import {
|
||
|
|
Box,
|
||
|
|
Typography,
|
||
|
|
Checkbox,
|
||
|
|
FormControlLabel,
|
||
|
|
ButtonGroup,
|
||
|
|
Button,
|
||
|
|
Table,
|
||
|
|
TableBody,
|
||
|
|
TableCell,
|
||
|
|
TableContainer,
|
||
|
|
TableHead,
|
||
|
|
TableRow,
|
||
|
|
IconButton,
|
||
|
|
Collapse
|
||
|
|
} from '@material-ui/core';
|
||
|
|
import AddIcon from '@material-ui/icons/Add';
|
||
|
|
import { useDispatch, useSelector } from 'react-redux';
|
||
|
|
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import RemoveIcon from '@material-ui/icons/Remove';
|
||
|
|
import config from '../../../../config';
|
||
|
|
import { InfoPopNames } from '../../InfoPops';
|
||
|
|
const useStyles = makeStyles((theme) => ({
|
||
|
|
root: {
|
||
|
|
color: '#fff',
|
||
|
|
'& .MuiTypography-root': {
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
'& .MuiCheckbox-root': {
|
||
|
|
color: '#fff',
|
||
|
|
'&.Mui-checked': {
|
||
|
|
color: '#409eff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'& .MuiButtonGroup-root': {
|
||
|
|
marginTop: theme.spacing(2),
|
||
|
|
marginBottom: theme.spacing(3)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
typeSection: {
|
||
|
|
marginBottom: theme.spacing(2)
|
||
|
|
},
|
||
|
|
timeButton: {
|
||
|
|
width:210,
|
||
|
|
color: '#fff',
|
||
|
|
borderColor: 'rgba(255,255,255,0.3)',
|
||
|
|
'&.MuiButton-contained': {
|
||
|
|
backgroundColor: '#409eff',
|
||
|
|
color: '#fff',
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: '#409eff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: 'rgba(255,255,255,0.1)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
table: {
|
||
|
|
'& .MuiTableCell-root': {
|
||
|
|
color: '#fff',
|
||
|
|
borderColor: 'rgba(255,255,255,0.1)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
expandButton: {
|
||
|
|
color: '#fff'
|
||
|
|
},
|
||
|
|
stationRow: {
|
||
|
|
'&:nth-of-type(odd)': {
|
||
|
|
backgroundColor: 'rgba(255,255,255,0.05)'
|
||
|
|
},
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: 'rgba(255,255,255,0.1)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
warningRow: {
|
||
|
|
'&.pink': { backgroundColor: 'rgba(255,192,203,0.5)' },
|
||
|
|
'&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' },
|
||
|
|
'&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' },
|
||
|
|
'&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' },
|
||
|
|
'&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' },
|
||
|
|
'&.green': { backgroundColor: 'rgba(144,238,144,0.5)' }
|
||
|
|
},
|
||
|
|
|
||
|
|
expandedRow: {
|
||
|
|
'&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
|
||
|
|
'&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
|
||
|
|
'&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
|
||
|
|
'&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
export default function Overall({ style }) {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
|
||
|
|
const classes = useStyles();
|
||
|
|
const [types, setTypes] = useState({
|
||
|
|
mountain: true,
|
||
|
|
water: true,
|
||
|
|
weather: true,
|
||
|
|
reservoir: true
|
||
|
|
});
|
||
|
|
const [timeRange, setTimeRange] = useState('1h');
|
||
|
|
const [expanded, setExpanded] = useState({});
|
||
|
|
|
||
|
|
const handleTypeChange = (event) => {
|
||
|
|
setTypes({
|
||
|
|
...types,
|
||
|
|
[event.target.name]: event.target.checked
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const stations = [
|
||
|
|
{ id: 'history', name: '历史极值站点', count: 0, color: 'pink' },
|
||
|
|
{ id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
|
||
|
|
{ id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
|
||
|
|
{ id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
|
||
|
|
{ id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
|
||
|
|
{ id: 'storm', name: '暴雨站点', count: 1, color: 'green' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const toggleExpand = (id) => {
|
||
|
|
setExpanded(prev => ({
|
||
|
|
...prev,
|
||
|
|
[id]: !prev[id]
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
|
||
|
|
const drpData = [
|
||
|
|
{
|
||
|
|
"stcd": "61612910",
|
||
|
|
"stnm": "桃林河(阎河)",
|
||
|
|
"adcd": "421181000000000",
|
||
|
|
adnm: '阎家河镇桃林河村村民委员会',
|
||
|
|
zgrz: '55.67',
|
||
|
|
time: '2025-06-11 10:14至2025-06-12 10:14',
|
||
|
|
jjrz:'58.43',
|
||
|
|
"wscd": null,
|
||
|
|
"importancy": 0,
|
||
|
|
"lgtd": 115.087777777,
|
||
|
|
"lttd": 31.164444444,
|
||
|
|
"elev": null,
|
||
|
|
"hasRz": true,
|
||
|
|
"type": "sh",
|
||
|
|
"today": 21,
|
||
|
|
"h1": 15.5,
|
||
|
|
"h3": 21,
|
||
|
|
"h6": 21,
|
||
|
|
"h12": 21,
|
||
|
|
"h24": 21,
|
||
|
|
"h48": 21,
|
||
|
|
"tm": "2025-06-06T22:15:00.000Z",
|
||
|
|
"state": 1,
|
||
|
|
"warning": 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"stcd": "61612150",
|
||
|
|
"stnm": "鹰山畈(黄土岗)",
|
||
|
|
"adcd": "421181000000000",
|
||
|
|
"wscd": null,
|
||
|
|
adnm: '黄士岗镇英山畈村村民委员会(雾港河村、鹰山畈村)',
|
||
|
|
zgrz: '77.00',
|
||
|
|
time: '2025-06-12 10:33',
|
||
|
|
jjrz:'78.98',
|
||
|
|
"importancy": 0,
|
||
|
|
"lgtd": 115.073611,
|
||
|
|
"lttd": 31.386667,
|
||
|
|
"elev": null,
|
||
|
|
"hasRz": true,
|
||
|
|
"type": "sh",
|
||
|
|
"today": 27,
|
||
|
|
"h1": 18.5,
|
||
|
|
"h3": 27,
|
||
|
|
"h6": 27,
|
||
|
|
"h12": 27,
|
||
|
|
"h24": 27,
|
||
|
|
"h48": 27,
|
||
|
|
"tm": "2025-06-06T22:00:00.000Z",
|
||
|
|
"state": 1,
|
||
|
|
"warning": 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"stcd": "61613700",
|
||
|
|
"stnm": "四角门(宋铁二桥)",
|
||
|
|
"adcd": "421181000000000",
|
||
|
|
"wscd": null,
|
||
|
|
"importancy": 0,
|
||
|
|
"lgtd": 114.8291,
|
||
|
|
"lttd": 31.0754,
|
||
|
|
adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)',
|
||
|
|
zgrz: '27.57',
|
||
|
|
time: '2025-06-11 10:14至2025-06-12 10:14',
|
||
|
|
jjrz:'34.86',
|
||
|
|
"elev": null,
|
||
|
|
"hasRz": true,
|
||
|
|
"type": "sh",
|
||
|
|
"today": 3.5,
|
||
|
|
"h1": 2,
|
||
|
|
"h3": 3.5,
|
||
|
|
"h6": 3.5,
|
||
|
|
"h12": 3.5,
|
||
|
|
"h24": 3.5,
|
||
|
|
"h48": 3.5,
|
||
|
|
"tm": "2025-06-06T22:00:00.000Z",
|
||
|
|
"state": 1,
|
||
|
|
"warning": 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"stcd": "61614460",
|
||
|
|
"stnm": "项生(宋埠)",
|
||
|
|
"adcd": "421181000000000",
|
||
|
|
"wscd": null,
|
||
|
|
"importancy": 0,
|
||
|
|
adnm: '宋埠镇项生村村民委员会',
|
||
|
|
zgrz: '21.93',
|
||
|
|
time: '2025-06-11 10:14至2025-06-12 10:14',
|
||
|
|
jjrz:'23.65',
|
||
|
|
"lgtd": 114.798056,
|
||
|
|
"lttd": 31.058611,
|
||
|
|
"elev": null,
|
||
|
|
"hasRz": true,
|
||
|
|
"type": "sh",
|
||
|
|
"today": 4.5,
|
||
|
|
"h1": 2,
|
||
|
|
"h3": 4.5,
|
||
|
|
"h6": 4.5,
|
||
|
|
"h12": 4.5,
|
||
|
|
"h24": 4.5,
|
||
|
|
"h48": 4.5,
|
||
|
|
"tm": "2025-06-06T22:00:00.000Z",
|
||
|
|
"state": 1,
|
||
|
|
"warning": 0
|
||
|
|
},
|
||
|
|
]
|
||
|
|
const skData = []
|
||
|
|
const flyTo = (record) => {
|
||
|
|
const { lgtd, lttd } = record;
|
||
|
|
if (lgtd && lttd) {
|
||
|
|
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
|
||
|
|
dispatch.runtime.setCameraTarget({
|
||
|
|
center: [lgtd, lttd + config.poiPositionOffsetY.hd],
|
||
|
|
zoom: config.poiPositionZoom.hd,
|
||
|
|
pitch: config.poiPitch,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const [type, setType] = useState('1h')
|
||
|
|
const [data, setData] = useState([])
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const newArr = timeRange == '3h' ? skData : drpData;
|
||
|
|
setData(newArr)
|
||
|
|
}, [timeRange])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PanelBox
|
||
|
|
style={style}
|
||
|
|
title="水情统计"
|
||
|
|
color="green"
|
||
|
|
extra={
|
||
|
|
<span className="button-group">
|
||
|
|
{
|
||
|
|
['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
|
||
|
|
<span key={key} className={clsx({ active: type === key })} onClick={() => setType(key)}>{key}</span>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</span>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Box className={classes.root}>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
|
|
<ButtonGroup variant="outlined">
|
||
|
|
{[
|
||
|
|
{ value: '1h', label: '河道水情' },
|
||
|
|
{ value: '3h', label: '水库水情' },
|
||
|
|
].map((item) => (
|
||
|
|
<Button
|
||
|
|
key={item.value}
|
||
|
|
className={classes.timeButton}
|
||
|
|
onClick={() => {
|
||
|
|
if (item.value == '1h' || item.value == '3h') {
|
||
|
|
setTimeRange(item.value)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
variant={timeRange === item.value ? 'contained' : 'outlined'}
|
||
|
|
style={{ padding: '5px 10px' }}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Button>
|
||
|
|
))}
|
||
|
|
</ButtonGroup>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</Box>
|
||
|
|
<TableContainer style={{ height: '70%' }}>
|
||
|
|
<Table size="small" stickyHeader>
|
||
|
|
<TableHead >
|
||
|
|
<DpTableRow>
|
||
|
|
<DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell>
|
||
|
|
<DpTableCell style={{minWidth: '8rem' }} align='center'>站名</DpTableCell>
|
||
|
|
<DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
|
||
|
|
<DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
|
||
|
|
<DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
|
||
|
|
<DpTableCell style={{ minWidth: '8rem' }} align='center'>警戒水位(m)</DpTableCell>
|
||
|
|
{/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
|
||
|
|
</DpTableRow>
|
||
|
|
</TableHead>
|
||
|
|
<TableBody>
|
||
|
|
{
|
||
|
|
data.map((item,i) => (
|
||
|
|
<DpTableRow key={item.stcd} onClick={() => flyTo(item)}>
|
||
|
|
<DpTableCell align='center'>{i + 1}</DpTableCell>
|
||
|
|
<DpTableCell align='center'>{item.stnm}</DpTableCell>
|
||
|
|
<DpTableCell align='center'>
|
||
|
|
<div
|
||
|
|
className="table-ellipsis cursor-pointer"
|
||
|
|
title={item.adnm}
|
||
|
|
>{item.adnm}</div>
|
||
|
|
</DpTableCell>
|
||
|
|
<DpTableCell align='center'>{item.zgrz}</DpTableCell>
|
||
|
|
<DpTableCell align='center'>{item.time}</DpTableCell>
|
||
|
|
<DpTableCell align='center'>{item.jjrz}</DpTableCell>
|
||
|
|
</DpTableRow>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</TableContainer>
|
||
|
|
</PanelBox>
|
||
|
|
)
|
||
|
|
}
|