333 lines
10 KiB
JavaScript
333 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 {
|
||
Box,
|
||
Typography,
|
||
Checkbox,
|
||
FormControlLabel,
|
||
ButtonGroup,
|
||
Button,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableContainer,
|
||
TableHead,
|
||
TableRow,
|
||
IconButton,
|
||
Collapse,
|
||
Paper
|
||
} from '@material-ui/core';
|
||
// import AddIcon from '@material-ui/icons/Add';
|
||
import RemoveIcon from '@material-ui/icons/Remove';
|
||
import WarningIcon from '@material-ui/icons/Warning';
|
||
import AddIcon from '@material-ui/icons/Add';
|
||
import { useDispatch } from 'react-redux';
|
||
|
||
import { DatePicker } from 'antd';
|
||
import moment from 'moment';
|
||
|
||
const { RangePicker } = DatePicker;
|
||
const useStyles = makeStyles((theme) => ({
|
||
root: {
|
||
color: '#fff'
|
||
},
|
||
table: {
|
||
'& .MuiTableCell-root': {
|
||
color: '#fff',
|
||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
||
}
|
||
},
|
||
warningRow: {
|
||
'&.immediate': {
|
||
backgroundColor: 'rgba(211, 47, 47,0.5)'
|
||
},
|
||
'&.prepare': {
|
||
backgroundColor: 'rgba(237, 108, 2,0.5)'
|
||
}
|
||
},
|
||
expandIcon: {
|
||
marginRight: theme.spacing(1),
|
||
fontSize: 20,
|
||
cursor: 'pointer',
|
||
transition: 'transform 0.3s',
|
||
'&.expanded': {
|
||
transform: 'rotate(180deg)'
|
||
}
|
||
},
|
||
warningCount: {
|
||
marginLeft: theme.spacing(1)
|
||
},
|
||
expandedContent: {
|
||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||
padding: theme.spacing(2)
|
||
},
|
||
statsSection: {
|
||
marginTop: theme.spacing(4)
|
||
},
|
||
statsTitle: {
|
||
color: '#1976d2',
|
||
marginBottom: theme.spacing(3)
|
||
},
|
||
warningStats: {
|
||
display: 'flex',
|
||
justifyContent: 'space-around',
|
||
marginTop: theme.spacing(2)
|
||
},
|
||
statItem: {
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center'
|
||
},
|
||
warningIcon: {
|
||
fontSize: 40,
|
||
marginBottom: theme.spacing(1),
|
||
'&.immediate': {
|
||
color: '#d32f2f'
|
||
},
|
||
'&.prepare': {
|
||
color: '#ed6c02'
|
||
}
|
||
}
|
||
}));
|
||
export default function Overall({ style }) {
|
||
|
||
const classes = useStyles();
|
||
|
||
const [timeRange, setTimeRange] = useState('1h');
|
||
const [expanded, setExpanded] = useState({});
|
||
|
||
const warningData = [
|
||
{
|
||
type: 'immediate',
|
||
label: '立即转移',
|
||
count: 3,
|
||
details: [] // 这里可以添加详细信息的数组
|
||
},
|
||
{
|
||
type: 'prepare',
|
||
label: '准备转移',
|
||
count: 0,
|
||
details: [] // 这里可以添加详细信息的数组
|
||
}
|
||
];
|
||
|
||
const handleExpand = (type) => {
|
||
setExpanded(prev => ({
|
||
...prev,
|
||
[type]: !prev[type]
|
||
}));
|
||
};
|
||
|
||
const [params, setParams] = useState({ tm: [] })
|
||
|
||
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 zyData = [
|
||
{
|
||
"status": null,
|
||
"warngradeid": 5,
|
||
"warnetm": "2025-05-22 18:12:28",
|
||
"warndesc": "张家畈镇1个测站超警,余家河(张家畈)(18:12)3小时雨量57.5毫米,超警戒雨量值(55.00)2.5毫米",
|
||
"warnstatusid": 30,
|
||
"warnstm": "2025-05-22 18:05:00",
|
||
"tempcolumn": 0,
|
||
"warnid": 1120,
|
||
"isauto": "0",
|
||
"warnnm": "张家畈镇山洪准备转移",
|
||
"adnm": "张家畈镇",
|
||
"adcd": "421181106000000",
|
||
"warntypeid": 10,
|
||
"temprownumber": 9,
|
||
status: '关闭预警'
|
||
},
|
||
{
|
||
"status": null,
|
||
"warngradeid": 5,
|
||
"warnetm": "2025-05-22 18:12:30",
|
||
"warndesc": "夫子河镇北门村1个测站超警,青草河(夫子河)(18:12)3小时雨量100.5毫米,超危险雨量值(85.00)15.5毫米",
|
||
"warnstatusid": 30,
|
||
"warnstm": "2025-05-22 18:00:00",
|
||
"tempcolumn": 0,
|
||
"warnid": 1119,
|
||
"isauto": "0",
|
||
"warnnm": "夫子河镇北门村山洪准备转移",
|
||
"adnm": "夫子河镇北门村",
|
||
"adcd": "421181104001000",
|
||
"warntypeid": 10,
|
||
"temprownumber": 10,
|
||
status: '关闭预警'
|
||
},
|
||
{
|
||
"status": null,
|
||
"warngradeid": 5,
|
||
"warnetm": "2025-05-22 18:12:11",
|
||
"warndesc": "张家畈镇余家河1个测站超警,余家河(张家畈)(18:11)3小时雨量57.5毫米,超警戒雨量值(55.00)2.5毫米",
|
||
"warnstatusid": 30,
|
||
"warnstm": "2025-05-22 18:05:00",
|
||
"tempcolumn": 0,
|
||
"warnid": 1121,
|
||
"isauto": "0",
|
||
"warnnm": "张家畈镇余家河山洪准备转移",
|
||
"adnm": "张家畈镇余家河村",
|
||
"adcd": "421181106017000",
|
||
"warntypeid": 10,
|
||
"temprownumber": 8,
|
||
status: '关闭预警'
|
||
},
|
||
|
||
]
|
||
const dispatch = useDispatch();
|
||
|
||
const flyTo = (record) => {
|
||
dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
|
||
}
|
||
|
||
return (
|
||
<PanelBox
|
||
style={style}
|
||
title="山洪预警"
|
||
color="green"
|
||
>
|
||
|
||
<Box className={classes.root}>
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<div style={{ color: "#fff" }}>时段选择：</div>
|
||
<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>
|
||
</div>
|
||
<TableContainer component={Paper} style={{ backgroundColor: 'transparent' }}>
|
||
<Table className={classes.table}>
|
||
<TableHead>
|
||
<TableRow>
|
||
<TableCell>乡镇</TableCell>
|
||
<TableCell>预警时间</TableCell>
|
||
<TableCell>预警状态</TableCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{warningData.map((row) => (
|
||
<React.Fragment key={row.type}>
|
||
<TableRow className={`${classes.warningRow} ${row.type}`}>
|
||
<TableCell>
|
||
<Box display="flex" alignItems="center">
|
||
{expanded[row.type] ? (
|
||
<RemoveIcon
|
||
className={`${classes.expandIcon} expanded`}
|
||
onClick={() => handleExpand(row.type)}
|
||
/>
|
||
) : (
|
||
<AddIcon
|
||
className={classes.expandIcon}
|
||
onClick={() => handleExpand(row.type)}
|
||
/>
|
||
)}
|
||
{row.label}
|
||
</Box>
|
||
</TableCell>
|
||
<TableCell></TableCell>
|
||
<TableCell>
|
||
{row.count}个乡镇
|
||
</TableCell>
|
||
</TableRow>
|
||
<TableRow>
|
||
<TableCell colSpan={3} style={{ padding: 0 }}>
|
||
<Collapse in={expanded[row.type]} timeout="auto" unmountOnExit>
|
||
<Box className={classes.expandedContent}>
|
||
{/* 这里可以添加展开后显示的详细内容 */}
|
||
{/* <Typography>暂无详细信息</Typography> */}
|
||
{
|
||
row.type == 'immediate' ? zyData.map(item => (
|
||
<TableRow onClick={() => flyTo(item)}>
|
||
<TableCell style={{ width: '30%' }}><div
|
||
className="table-ellipsis cursor-pointer"
|
||
>{item.adnm}</div></TableCell>
|
||
<TableCell style={{ width: '40%' }}><div
|
||
className="table-ellipsis cursor-pointer"
|
||
>{item.warnetm}</div></TableCell>
|
||
<TableCell style={{ width: '30%' }}><div
|
||
className="table-ellipsis cursor-pointer"
|
||
>{item.status}</div></TableCell>
|
||
</TableRow>
|
||
))
|
||
|
||
:
|
||
<Typography>暂无详细信息</Typography>
|
||
}
|
||
</Box>
|
||
</Collapse>
|
||
</TableCell>
|
||
</TableRow>
|
||
</React.Fragment>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
|
||
<Box className={classes.statsSection}>
|
||
<Typography variant="h6" className={classes.statsTitle}>
|
||
预警统计: 共 3 条
|
||
</Typography>
|
||
<Box className={classes.warningStats}>
|
||
{warningData.map((stat) => (
|
||
<Box key={stat.type} className={classes.statItem}>
|
||
<div style={{ display: 'flex' }}>
|
||
<div>
|
||
<WarningIcon className={`${classes.warningIcon} ${stat.type}`} />
|
||
<Typography>{stat.label}</Typography>
|
||
</div>
|
||
<Typography variant="h6" style={{ color: '#fff' }}>{stat.count}</Typography>
|
||
</div>
|
||
|
||
</Box>
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</PanelBox>
|
||
)
|
||
}
|