326 lines
11 KiB
JavaScript
326 lines
11 KiB
JavaScript
import clsx from 'clsx';
|
||
import React, { useMemo, useState,useEffect } from 'react';
|
||
import { useDispatch, useSelector } from 'react-redux';
|
||
import useRequest from '../../../../utils/useRequest';
|
||
import PanelBox from '../../components/PanelBox';
|
||
import {
|
||
Box,
|
||
Typography,
|
||
Checkbox,
|
||
FormControlLabel,
|
||
ButtonGroup,
|
||
Button,
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableContainer,
|
||
TableHead,
|
||
TableRow,
|
||
IconButton,
|
||
Collapse,
|
||
Paper
|
||
} from '@material-ui/core';
|
||
import RemoveIcon from '@material-ui/icons/Remove';
|
||
import { makeStyles } from '@material-ui/core/styles';
|
||
import AddIcon from '@material-ui/icons/Add';
|
||
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
||
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
||
import appconsts from '../../../../models/appconsts';
|
||
import { DatePicker } from 'antd';
|
||
import { SkRealPromise } from '../../../../models/_/real';
|
||
import { InfoPopNames } from '../../InfoPops';
|
||
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
|
||
import config from '../../../../config';
|
||
import moment from 'moment';
|
||
const { RangePicker } = DatePicker;
|
||
|
||
const ljtj = [
|
||
{'level':'≥250',children:[],stcd:'001',color:'#ffd5d5'},
|
||
{'level':'100~250',children:[],stcd:'002',color:'#f2defe'},
|
||
{'level':'50~100',children:[],stcd:'003',color:'#ddf'},
|
||
{'level':'25~50',children:[],stcd:'004',color:'#d2e9fc'},
|
||
{'level':'10~25',children:[],stcd:'005',color:'#d9f7ff'},
|
||
{'level':'0.1~10',stcd:'006',color:'#edfce9',children:[
|
||
{
|
||
"stcd": "61612910",
|
||
"stnm": "白果镇",
|
||
"adcd": "421181000000000",
|
||
"wscd": null,
|
||
"importancy": 0,
|
||
"lgtd": 115.01083,
|
||
"lttd": 31.041152,
|
||
"elev": null,
|
||
"hasRz": true,
|
||
"type": "sh",
|
||
"today": 0,
|
||
"h1": 7,
|
||
"h3": 8.4,
|
||
"h6": 10.5,
|
||
"h12": 11.200000000000001,
|
||
"h24": 0.6,
|
||
"h48": 32.8,
|
||
"tm": "2025-06-03T02:10:00.000Z",
|
||
"state": 1,
|
||
"warning": 0
|
||
},
|
||
{
|
||
"stcd": "61614460",
|
||
"stnm": "夫子河镇",
|
||
"adcd": "421181000000000",
|
||
"wscd": null,
|
||
"importancy": 0,
|
||
"lgtd": 115.026944,
|
||
"lttd": 30.959121,
|
||
"elev": null,
|
||
"hasRz": true,
|
||
"type": "sh",
|
||
"today": 0,
|
||
"h1": 6,
|
||
"h3": 7.199999999999999,
|
||
"h6": 9,
|
||
"h12": 9.600000000000001,
|
||
"h24": 0.6,
|
||
"h48": 11.899999999999999,
|
||
"tm": "2025-06-03T02:00:00.000Z",
|
||
"state": 1,
|
||
"warning": 0
|
||
},
|
||
{
|
||
"stcd": "61615110",
|
||
"stnm": "盐田河镇",
|
||
"adcd": "421181000000000",
|
||
"wscd": null,
|
||
"importancy": 0,
|
||
"lgtd": 115.172808,
|
||
"lttd": 30.963342,
|
||
"elev": null,
|
||
"hasRz": true,
|
||
"type": "sh",
|
||
"today": 0,
|
||
"h1": 7,
|
||
"h3": 8.4,
|
||
"h6": 10.5,
|
||
"h12": 11.200000000000001,
|
||
"h24": 0.4,
|
||
"h48": 31.299999999999997,
|
||
"tm": "2025-06-03T02:00:00.000Z",
|
||
"state": 1,
|
||
"warning": 0
|
||
},
|
||
{
|
||
"stcd": "616151210",
|
||
"stnm": "龟山镇",
|
||
"adcd": "421181000000000",
|
||
"wscd": null,
|
||
"importancy": 0,
|
||
"lgtd": 115.183208,
|
||
"lttd": 31.074978,
|
||
"elev": null,
|
||
"hasRz": true,
|
||
"type": "sh",
|
||
"today": 0,
|
||
"h1": 7,
|
||
"h3": 8.4,
|
||
"h6": 10.5,
|
||
"h12": 11.200000000000001,
|
||
"h24": 0.51,
|
||
"h48": 31.299999999999997,
|
||
"tm": "2025-06-03T02:00:00.000Z",
|
||
"state": 1,
|
||
"warning": 0
|
||
},
|
||
]},
|
||
]
|
||
|
||
const useStyles = makeStyles((theme) => ({
|
||
root: {
|
||
color: '#fff'
|
||
},
|
||
table: {
|
||
'& .MuiTableCell-root': {
|
||
color: '#fff',
|
||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
|
||
}
|
||
},
|
||
warningRow: {
|
||
'&.immediate': {
|
||
backgroundColor: '#d32f2f'
|
||
},
|
||
'&.prepare': {
|
||
backgroundColor: '#ed6c02'
|
||
}
|
||
},
|
||
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 AreaDrp({ style }) {
|
||
const dispatch = useDispatch();
|
||
const classes = useStyles();
|
||
const [params, setParams] = useState({ tm: [moment(),moment().add(1,'days')] })
|
||
const [tabVal, setTabVal] = useState('1')
|
||
const [expanded, setExpanded] = useState({});
|
||
let { data } = useRequest(SkRealPromise.get);
|
||
const sortedData = useMemo(() => (data || []).sort((a, b) => (b.aRz - a.aRz), [data]));
|
||
|
||
const flyTo = (record) => {
|
||
const { lgtd, lttd } = record;
|
||
if (lgtd && lttd) {
|
||
// dispatch.runtime.setFeaturePop({ type: 'RealDrpPop', properties: record, coordinates: [lgtd, lttd] });
|
||
dispatch.runtime.setCameraTarget({
|
||
center: [lgtd, lttd ],
|
||
zoom: 12,//12config.poiPositionZoom.sk,
|
||
pitch: 0,//config.poiPitch,
|
||
bearing: 0,
|
||
});
|
||
}
|
||
}
|
||
|
||
const handleExpand = (type) => {
|
||
setExpanded(prev => ({
|
||
// ...prev,
|
||
[type]: !prev[type]
|
||
}));
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div style={{color:'#ffffff',padding:'7px 5px 10px 5px',display:'flex',alignItems:'center',fontWeight:200}}>
|
||
{/* 时段选择 */}
|
||
麻城市未来24小时最大网格点雨量量级统计
|
||
|
||
{/* <div className='tm' style={{position:"relative",zIndex:999999,color:"#fff",width:"71%",margin:'10px'}}>
|
||
<RangePicker
|
||
className='time-picker'
|
||
disabled
|
||
style={{
|
||
flex:1,
|
||
background: "transparent",
|
||
border: "none",
|
||
color: "#fff",
|
||
}}
|
||
onChange={(e)=>{
|
||
setParams({
|
||
...params,
|
||
stm: e[0].format("YYYY-MM-DD HH:mm"),
|
||
etm: e[1].format("YYYY-MM-DD HH:mm"),
|
||
tm:e,
|
||
})
|
||
}}
|
||
allowClear
|
||
format="YYYY-MM-DD HH:mm"
|
||
showTime={{
|
||
format: 'HH:mm',
|
||
}}
|
||
value={params.tm}
|
||
/>
|
||
</div> */}
|
||
</div>
|
||
<TableContainer style={{ height: '30rem', border:'1px solid rgb(50 50 65)' }}>
|
||
<Table size="small" stickyHeader>
|
||
<TableHead>
|
||
<TableRow>
|
||
<DpTableCell style={{ minWidth: '1rem' }} align="left"></DpTableCell>
|
||
<DpTableCell style={{ minWidth: '3rem' }} align="center">政区</DpTableCell>
|
||
<DpTableCell style={{ minWidth: '6rem' }} align="center">最大网格点雨量(mm)</DpTableCell>
|
||
</TableRow>
|
||
</TableHead>
|
||
<TableBody>
|
||
{ljtj.map((row) => (
|
||
<>
|
||
<DpTableRow key={row.stcd}>
|
||
<DpTableCell component="th" scope="row">
|
||
<Box display="flex" alignItems="center">
|
||
{expanded[row.stcd] ? (
|
||
<RemoveIcon
|
||
className={`${classes.expandIcon} expanded`}
|
||
onClick={() => handleExpand(row.stcd)}
|
||
/>
|
||
) : (
|
||
<AddIcon
|
||
className={classes.expandIcon}
|
||
onClick={() => handleExpand(row.stcd)}
|
||
/>
|
||
)}
|
||
</Box>
|
||
</DpTableCell>
|
||
<DpTableCell align="center">
|
||
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.level+"（"+row.children.length+"）"}</div>
|
||
</DpTableCell>
|
||
<DpTableCell align="center"></DpTableCell>
|
||
</DpTableRow>
|
||
<DpTableRow>
|
||
<DpTableCell colSpan={4} style={{ padding: 0 }}>
|
||
<Collapse in={expanded[row.stcd]} timeout="auto" unmountOnExit>
|
||
<div style={{position:'relative'}}>
|
||
<div style={{position:'absolute',left:'0rem'}}>
|
||
{
|
||
row.children.map((i,index)=>(
|
||
<div style={{display:'flex', color:'#ffffff',padding:'10px 0',paddingLeft:"2.5rem",background:'#1c2439',width:'26.6rem'}}>
|
||
<div style={{width:'13rem',textAlign:'center',cursor:'pointer'}} onClick={()=>{
|
||
flyTo(i)
|
||
}}>{i.stnm}</div>
|
||
<div style={{width:'10rem',textAlign:'center'}}>{i.h24}</div>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
</Collapse>
|
||
</DpTableCell>
|
||
</DpTableRow>
|
||
</>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</TableContainer>
|
||
{/* <div style={{color:'#ffffff',padding:'0px 5px',display:'flex',marginTop:'4px',background:'#050d22',alignItems:'center'}}>
|
||
站点统计（个）：<span style={{fontSize:'24px',color:'#3788fc',padding:"0 15px 0 5px"}}>120 </span>
|
||
其中有雨站点（个）：<span style={{fontSize:'24px',color:'#3788fc',padding:"0 15px 0 5px"}}>120</span>
|
||
</div>
|
||
<img src='/assets/天气预报2.jpg' style={{width:'100%',padding:'10px 5px'}}/> */}
|
||
</>
|
||
)
|
||
}
|