283 lines
9.0 KiB
JavaScript
283 lines
9.0 KiB
JavaScript
import React, { useState } 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 { InfoPopNames } from '../../InfoPops';
|
||
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 RemoveIcon from '@material-ui/icons/Remove';
|
||
import config from '../../../../config';
|
||
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: {
|
||
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: 1, color: 'blue2' },
|
||
{ id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
|
||
];
|
||
|
||
const toggleExpand = (id) => {
|
||
setExpanded(prev => ({
|
||
...prev,
|
||
[id]: !prev[id]
|
||
}));
|
||
};
|
||
|
||
const drpData = [
|
||
{
|
||
"stcd": "61612910",
|
||
"stnm": "桃林河(阎河)",
|
||
"adcd": "421181000000000",
|
||
'test':1,
|
||
"wscd": null,
|
||
"importancy": 0,
|
||
"lgtd": 115.087777777,
|
||
"lttd": 31.164444444,
|
||
"elev": null,
|
||
"hasRz": true,
|
||
"type": "sh",
|
||
"today": 7,
|
||
"h1": 12,
|
||
"h3": 40,
|
||
"h6": 69,
|
||
"h12": 133,
|
||
"h24": 261,
|
||
"tm": "2025-06-03T02:10:00.000Z",
|
||
"state": 1,
|
||
"warning": 0
|
||
},
|
||
]
|
||
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,
|
||
});
|
||
}
|
||
}
|
||
return (
|
||
<PanelBox
|
||
style={style}
|
||
title="降雨分析"
|
||
color="green"
|
||
>
|
||
<Box className={classes.root}>
|
||
<Box className={classes.typeSection}>
|
||
<Typography component="span">类型：</Typography>
|
||
<FormControlLabel
|
||
control={<Checkbox checked={types.mountain} onChange={handleTypeChange} name="mountain" />}
|
||
label="山洪"
|
||
/>
|
||
<FormControlLabel
|
||
control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
|
||
label="水文"
|
||
/>
|
||
<FormControlLabel
|
||
control={<Checkbox checked={types.weather} onChange={handleTypeChange} name="weather" />}
|
||
label="气象"
|
||
/>
|
||
<FormControlLabel
|
||
control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
|
||
label="水库"
|
||
/>
|
||
</Box>
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<Typography component="div">最近时段：</Typography>
|
||
<ButtonGroup variant="outlined">
|
||
{[
|
||
{ value: '1h', label: '1小时' },
|
||
{ value: '3h', label: '3小时' },
|
||
{ value: '6h', label: '6小时' },
|
||
{ value: '12h', label: '12小时' },
|
||
{ value: '24h', label: '24小时' }
|
||
].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>
|
||
|
||
<TableContainer >
|
||
<Table stickyHeader>
|
||
<TableHead >
|
||
<TableRow>
|
||
<DpTableCell style={{ width: '50%' }}>站名</DpTableCell>
|
||
<DpTableCell style={{ width: '20%' }}>累计雨量(mm)</DpTableCell>
|
||
<DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell>
|
||
<DpTableCell style={{ width: '15%' }}>所属流域</DpTableCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{stations.map((station) => (
|
||
<React.Fragment key={station.id}>
|
||
<TableRow
|
||
// className={classes.stationRow}
|
||
className={`${classes.warningRow} ${station.color}`}
|
||
>
|
||
<DpTableCell>
|
||
<Box display="flex" alignItems="center">
|
||
<IconButton
|
||
size="small"
|
||
className={classes.expandButton}
|
||
onClick={() => toggleExpand(station.id)}
|
||
>
|
||
{expanded[station.id] ? <RemoveIcon /> : <AddIcon />}
|
||
</IconButton>
|
||
{station.name}({station.count})
|
||
</Box>
|
||
</DpTableCell>
|
||
<DpTableCell></DpTableCell>
|
||
<DpTableCell></DpTableCell>
|
||
<DpTableCell></DpTableCell>
|
||
</TableRow>
|
||
<TableRow>
|
||
<DpTableCell colSpan={4} style={{ padding: 0 }}>
|
||
<Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
|
||
<Box className={`${classes.expandedRow} ${station.color}`}>
|
||
{/* 展开的详细内容可以在这里添加 */}{
|
||
station.id == 'heavy' && drpData.map(item => (
|
||
<TableRow onClick={() =>flyTo(item)}>
|
||
<DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
|
||
<DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>
|
||
<DpTableCell style={{ width: '20%' }}>阎家河镇</DpTableCell>
|
||
<DpTableCell style={{ width: '27%' }}>桃林河</DpTableCell>
|
||
</TableRow>
|
||
))
|
||
}
|
||
|
||
</Box>
|
||
</Collapse>
|
||
</DpTableCell>
|
||
</TableRow>
|
||
</React.Fragment>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
</Box>
|
||
</PanelBox>
|
||
)
|
||
}
|