156 lines
4.3 KiB
JavaScript
156 lines
4.3 KiB
JavaScript
import { Button, FormGroup, Grid, makeStyles, MenuItem, Select, Slider, TextField, Typography } from '@material-ui/core'
|
||
import React, { useMemo, useState } from 'react'
|
||
import RpfChart, { PredictionCaculator } from '../../../../components/RpfChart'
|
||
import appconsts from '../../../../models/appconsts';
|
||
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||
|
||
const useStyles = makeStyles({
|
||
|
||
root: {
|
||
display: 'flex',
|
||
height: '100%',
|
||
padding: '1rem',
|
||
alignItems: 'flex-start'
|
||
},
|
||
|
||
chart: {
|
||
width: '35rem',
|
||
flexShrink: 0,
|
||
marginRight: '1rem',
|
||
border: '1px solid #bce9f022',
|
||
borderRadius: '1rem'
|
||
},
|
||
|
||
predict: {
|
||
flexGrow: 1,
|
||
},
|
||
|
||
slider: {
|
||
padding: '0.2rem 0.5rem',
|
||
alignItems: 'center',
|
||
lineHeight: 0.1,
|
||
marginBottom: '0.1rem'
|
||
},
|
||
|
||
})
|
||
function RpfInfo({ data }) {
|
||
const classes = useStyles();
|
||
|
||
const [drp, setDrp] = useState();
|
||
const [minutes, setMinutes] = useState(10);
|
||
const [preData, setPreData] = useState();
|
||
const [ycDesc, setYcdesc] = useState();
|
||
const [error, setError] = useState();
|
||
|
||
const caculator = useMemo(() => {
|
||
if (data) {
|
||
return new PredictionCaculator(data.sjby, data.rpf);
|
||
}
|
||
}, [data]);
|
||
|
||
let minmax = {};
|
||
if (caculator?._valid) {
|
||
minmax = caculator.getDrpRange(minutes);
|
||
}
|
||
|
||
const doPredict = () => {
|
||
if (!caculator) {
|
||
return;
|
||
}
|
||
const minmax = caculator.getDrpRange(minutes);
|
||
if (!drp) {
|
||
drp = minmax.min;
|
||
}
|
||
if (!minmax || !drp || drp < minmax.min || drp > minmax.max) {
|
||
return;
|
||
}
|
||
|
||
const result = caculator.caculate(minutes, drp) || {};
|
||
if (result.result === 0) {
|
||
setPreData(result);
|
||
const YCDesc = `预计${data.NAME}${appconsts.sjbyMinutesType[minutes]}降雨量达到${drp}mm，控制断面水位将达到${result.drpRz}M，流量为${result.drpFlow}立方米每秒，受影响人员为${result.drpPop}人。请提前做好相应准备。`;
|
||
setYcdesc(YCDesc);
|
||
setError(null);
|
||
} else {
|
||
if (result.result === -1) {
|
||
setError('小雨最低预测雨量');
|
||
} else if (result.result === 1) {
|
||
setError('大雨最大预测雨量');
|
||
} else {
|
||
setError('计算失败');
|
||
}
|
||
setYcdesc(null);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className={classes.root}>
|
||
|
||
<div className={classes.chart}>
|
||
{
|
||
(data && data.hdm && data.rpf) ? (
|
||
<RpfChart
|
||
style={{ height: '29rem', width: '100%' }}
|
||
data={data}
|
||
preData={preData}
|
||
/>
|
||
) : (
|
||
'水位/人口/流量关系数据缺失'
|
||
)
|
||
}
|
||
</div>
|
||
<div className={classes.predict}>
|
||
{
|
||
error ? <DpAlert severity="error">{error}</DpAlert> : null
|
||
}
|
||
<FormGroup>
|
||
<div style={{ marginBottom: '2rem' }}>
|
||
<Typography variant="subtitle2">地图实时雨量显示雨量时段</Typography>
|
||
<Select
|
||
style={{ fontSize: '1.2rem' }}
|
||
fullWidth
|
||
value={minutes}
|
||
onChange={(event) => setMinutes(event.target.value)}
|
||
>
|
||
{
|
||
data?.sjby.map(o => (
|
||
<MenuItem key={o.minutes} value={o.minutes}>
|
||
{appconsts.sjbyMinutesType[o.minutes]}
|
||
</MenuItem>
|
||
))
|
||
}
|
||
</Select>
|
||
</div>
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<Typography variant="subtitle2">雨量: {drp}</Typography>
|
||
<Grid container className={classes.slider} spacing={2}>
|
||
<Grid item>{minmax?.min || 0}</Grid>
|
||
<Grid item xs>
|
||
<Slider
|
||
min={minmax?.min || 0}
|
||
max={minmax?.max || 200}
|
||
value={drp}
|
||
onChange={(_, val) => setDrp(val)}
|
||
/>
|
||
</Grid>
|
||
<Grid item>
|
||
{minmax?.max || 200}
|
||
</Grid>
|
||
</Grid>
|
||
</div>
|
||
<div style={{ textAlign: 'right', marginBottom: '1rem' }}>
|
||
<Button color="primary" variant="outlined" onClick={doPredict}>预测</Button>
|
||
</div>
|
||
{
|
||
ycDesc ? (
|
||
<DpAlert icon={null} severity="info">{ycDesc}</DpAlert>
|
||
) : null
|
||
}
|
||
</FormGroup>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default RpfInfo
|