mcfxkh-Web/src/views/Home/InfoDlg/FzdxDlg/RpfInfo.js

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