270 lines
8.6 KiB
JavaScript
270 lines
8.6 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 clsx from 'clsx';
|
|
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: {
|
|
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": "Q9111",
|
|
"stnm": "福田河",
|
|
"adcd": "421181000000000",
|
|
'test':1,
|
|
"wscd": null,
|
|
"importancy": 0,
|
|
"lgtd": 115.0944,
|
|
"lttd": 31.4747,
|
|
"elev": null,
|
|
"hasRz": true,
|
|
"type": "qx",
|
|
"today": 50.3,
|
|
"h1": 50.2,
|
|
"h3": 50.2,
|
|
"h6": 50.2,
|
|
"h12": 50.2,
|
|
"h24": 50.3,
|
|
"tm": "2025-06-06T22:00: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,
|
|
});
|
|
}
|
|
}
|
|
const [type, setType] = useState('h24')
|
|
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>
|
|
<TableContainer >
|
|
<Table stickyHeader>
|
|
<TableHead >
|
|
<TableRow>
|
|
<DpTableCell style={{ width: '51%' }}>站名</DpTableCell>
|
|
<DpTableCell style={{ width: '30%' }}>累计雨量(mm)</DpTableCell>
|
|
{/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
|
|
<DpTableCell style={{ width: '20%' }}>{timeRange == '1h' ? '所属政区':'所属流域'}</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 == 'storm' && drpData.map(item => (
|
|
<TableRow onClick={() =>flyTo(item)}>
|
|
<DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
|
|
<DpTableCell style={{ width: timeRange == '1h' ?'27%':"28%" }}>{item.today}</DpTableCell>
|
|
<DpTableCell style={{ width: timeRange == '1h' ?'20%':'19%' }}>{timeRange == '1h' ? '福田河镇':'长江流域'}</DpTableCell>
|
|
</TableRow>
|
|
))
|
|
}
|
|
|
|
</Box>
|
|
</Collapse>
|
|
</DpTableCell>
|
|
</TableRow>
|
|
</React.Fragment>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Box>
|
|
</PanelBox>
|
|
)
|
|
}
|