mcfxkh-Web/src/views/Home/panels/WeatherForcast/WF.js

import { Button, Grid, makeStyles } from '@material-ui/core'
import { CheckBox, CheckBoxOutlineBlank } from '@material-ui/icons';
import React, { useMemo,useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import DpAlert from '../../../../layouts/mui/DpAlert';
import H24Player from './H24Player';
import LegendCommon from './LegendCommon';

const useStyles = makeStyles({
  root: {
    color: '#fff',
    padding: '0.8rem 0',
  },

  tool: {
    marginBottom: '1.2rem',
  },


  buttons: {
    backgroundColor: 'red',
    flexShrink: 0,
  },
  legend: {
    backgroundColor: 'green',
  },

  checklabel: {
    justifyContent: 'flex-start',
  }
})

function WF() {
  const classes = useStyles();
  const dispatch = useDispatch();

  let contourSetting = useSelector(s => s.runtime.layerSetting.contour);
  const { type, outdated, strtm } = useMemo(() => {
    let type = contourSetting?.type;
    const ret = { type };
    if (type === 'wf24h') {
      ret.strtm = contourSetting?.tm;
      ret.outdated = false;
    } else if (type === 'wf2h') {
      ret.strtm = contourSetting?.tm;
      ret.outdated = false;
    }
    return ret;
  }, [contourSetting]);

  const genWeatherContour24H = () => {
    dispatch.runtime.setYyfa({yy:''})
    dispatch.shyjview.showWeather24h();
    const map = window.__mapref
    map.setLayoutProperty('热力图', 'visibility', 'none');
    // if (map) {
    // }
  }

  const genWeatherContourRadar = () => {
    dispatch.runtime.setYyfa({yy:''})
    dispatch.shyjview.showWeatherRadar();
    const map = window.__mapref
    map.setLayoutProperty('热力图', 'visibility', 'none');
  }

  const setIndexH24 = (index) => {
    let newContourSetting = { ...contourSetting };
    if (typeof index === 'number') {
      newContourSetting.index = index + 1;
    } else {
      newContourSetting.index = 0;
    }
    dispatch.runtime.setLayerSetting({ contour: newContourSetting })
  }

  // useEffect(() => {
  //   let timer = setTimeout(() => {
  //       genWeatherContour24H()
  //   },0)
  //   return () => {
  //     clearTimeout(timer)
  //   }
  // }, [])
  
  return (
    <div className={classes.root}>
      <Grid container className={classes.tool}>
        <Grid item xs style={{ marginRight: '0.5rem' }}>
          <Button
            fullWidth
            color="primary"
            variant={type === 'wf24h' ? 'contained' : 'outlined'}
            onClick={genWeatherContour24H}
          >24小时天气预报</Button>
        </Grid>
        <Grid item xs>
          <Button
            fullWidth
            color="primary"
            variant={type === 'wf2h' ? 'contained' : 'outlined'}
            onClick={genWeatherContourRadar}
          >短时雷达天气预报</Button>
        </Grid>
      </Grid>
      {
        strtm && contourSetting?.msg ? (
          <DpAlert
            className={classes.tool}
            severity="error"
          >{contourSetting.msg}</DpAlert>
        ) : null
      }
      {
        strtm ? (
          <DpAlert
            className={classes.tool}
            severity={outdated ? 'error' : 'success'}
          >{`天气预报时间: ${strtm.substr(0, '0000-00-00 00'.length)}`}</DpAlert>
        ) : (
          <DpAlert
            severity="info"
          >点击上方按钮查看实时天气预报</DpAlert>
        )
      }
      {
        type === 'wf24h' ? (
          <>
            <Button
              fullWidth
              size="large"
              classes={{ label: classes.checklabel }}
              onClick={setIndexH24}
              startIcon={contourSetting?.index === 0 ? <CheckBox color="primary" /> : <CheckBoxOutlineBlank />}
            >24小时总雨量预报</Button>

            <Button
              fullWidth
              size="large"
              classes={{ label: classes.checklabel }}
              onClick={() => setIndexH24(0)}
              startIcon={contourSetting?.index > 0 ? <CheckBox color="primary" /> : <CheckBoxOutlineBlank />}
            >逐小时雨量预报</Button>

            {
              contourSetting?.index > 0 ? (
                <>
                  <H24Player contour={contourSetting} />
                  <LegendCommon breaks={contourSetting.breaks} features={contourSetting?.shps[contourSetting.index]?.features} />
                </>
              ) : (
                <LegendCommon breaks={contourSetting?.breaks} features={contourSetting?.shps[0]?.features} />
              )
            }
          </>
        ) : null
      }
      {
        type === 'wf2h' ? (
          <LegendCommon features={contourSetting?.shp?.features} breaks={contourSetting?.breaks} />
        ) : null
      }
    </div >
  )
}

export default React.memo(WF);