mcfxkh-Web/src/views/Home/panels/ShWarning/OverallContent.js

import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React from 'react';
import { useDispatch } from 'react-redux';
import config from '../../../../config';
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
import { strNumber } from '../../../../utils/tools';
import { InfoPopNames } from '../../InfoPops';

const useStyles = makeStyles({
  root: {
    padding: '1.5rem 0.75rem 0.75rem 0.75rem',
    color: 'rgb(224, 246, 247)',
    fontSize: '0.9rem',
    lineHeight: '1.8rem',
  },

  titleDate: {
    fontSize: '1.2rem',
    margin: '0.2rem',
    color: '#00deff',
  },

  number: {
    color: '#ffd220',
    fontSize: '1.2rem',
    margin: '0.2rem',
  },

  sttype: {
    color: '#92f0ff',
  },
  stname: {
    fontWeight: 'bold',
    fontSize: '1rem',
    margin: '0.25rem',
    cursor: 'pointer'
  },

  grid: {
    display: 'flex',
    justifyContent: 'space-around',
    marginBottom: '1rem',
    textAlign: 'center',

    '& .value': {
      fontSize: '1.8rem',
      color: '#6fe9fd',
      lineHeight: '2rem'
    },


    '& .key': {
      fontSize: '0.8rem',
      color: '#aaa',
    },
  },

  action: {
    textAlign: 'right',
    color: '#fff',
  }
})

export default function OverallContent({ data }) {
  const classes = useStyles();
  const dispatch = useDispatch();

  const {
    drpInfo,
    skInfo,
    tm1, tm2,
  } = data || {};

  const { h24, h1, h3, h6 } = drpInfo || {};

  const _showRecord = (record, poptype) => {
    if (record) {
      const { lgtd, lttd } = record;
      if (lgtd && lttd) {
        dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
        dispatch.runtime.setCameraTarget({
          center: [lgtd, lttd],
          zoom: 15,
          pitch: config.poiPitch,
        });
      }
    }
  }

  const showRecord = (obj) => {
    if (!obj) {
      return;
    }

    const { type } = obj;
    if (type === 'sk') {
      skRealGet(obj.stcd).then((record) => {
        _showRecord(record, InfoPopNames.RealSkPop)
      })
    } else {
      drpRealGet(obj).then((record) => {
        _showRecord(record, InfoPopNames.RealDrpPop)
      });
    }
  }

  const doBx = () => {
    bxstr().then((data) => {
      dispatch.runtime.setInfoDlg({
        layerId: 'OverallSmtp',
        properties: { txt: data }
      })
    });
  }

  return (
    <div className={classes.root}>
      <div className={classes.grid}>
        <div>
          <div className="value">{strNumber(h24?.drpStCount?.total, '-')}</div>
          <div className="key">降雨测站</div>
        </div>
        <div>
          <div className="value">{strNumber(skInfo?.aRz, '-')}</div>
          <div className="key">超汛限水库</div>
        </div>
        <div>
          <div className="value" style={{ fontSize: '1.5rem', cursor: 'pointer' }} onClick={() => showRecord(h24?.max)}>
            {h24?.max?.stnm || '--'}
          </div>
          <div className="key">最大降雨测站</div>
        </div>
      </div>

      <div>
        <span className={classes.titleDate}>{tm1 || '-'}</span>至<span className={classes.titleDate}>{tm2 || '-'}</span>
        24小时中共有<span className={classes.number}>{strNumber(h24?.drpStCount?.total, '-')}</span>
        个降雨测站(<span className={classes.sttype}>山洪测站</span>
        <span className={classes.number}>{strNumber(h24?.drpStCount?.sh, '-')}</span>
        个)，其中最大降雨测站为<span onClick={() => showRecord(h24?.max)} className={classes.stname}>{h24?.max?.stnm || '-'}</span>
        ，降雨量<span className={classes.number}>{strNumber(h24?.max?.value, '-')}</span>mm
        {h24?.cntDrp10 > 0 && (<>，<span className={classes.sttype}>10mm以下</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp10, '-')}</span>个</>)}
        {h24?.cntDrp25 > 0 && (<>，<span className={classes.sttype}>10mm至25mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp25, '-')}</span>个</>)}
        {h24?.cntDrp50 > 0 && (<>，<span className={classes.sttype}>25mm至50mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp50, '-')}</span>个</>)}
        {h24?.cntDrp100 > 0 && (<>，<span className={classes.sttype}>50mm至100mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp100, '-')}</span>个</>)}
        {h24?.cntDrp250 > 0 && (<>，<span className={classes.sttype}>100mm至250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrp250, '-')}</span>个</>)}
        {h24?.cntDrpg250 > 0 && (<>，<span className={classes.sttype}>大于250mm</span>测站数为<span className={classes.number}>{strNumber(h24?.cntDrpg250, '-')}</span>个</>)}
        。
        {h1?.max?.value > 0 && (<><span className={classes.sttype}>前1小时</span>最大降雨测站是<span onClick={() => showRecord(h1?.max)} className={classes.stname}>{h1?.max?.stnm}</span>({h1?.max?.value}mm)，</>)}
        {h3?.max?.value > 0 && (<><span className={classes.sttype}>前3小时</span>最大降雨测站是<span onClick={() => showRecord(h3?.max)} className={classes.stname}>{h3?.max?.stnm}</span>({h3?.max?.value}mm)，</>)}
        {h6?.max?.value > 0 && (<><span className={classes.sttype}>前6小时</span>最大降雨测站是<span onClick={() => showRecord(h6?.max)} className={classes.stname}>{h6?.max?.stnm}</span>({h6?.max?.value}mm)，</>)}
        {
          !h1?.max?.value || !h3?.max?.value || !h6?.max?.value ? (
            `前${[!h1?.max?.value ? '1' : null, !h3?.max?.value ? '3' : null, !h6?.max?.value ? '6' : null].filter(Boolean).join(',')}小时无降雨。`
          ) : null
        }
        超汛限水位水库数为<span className={classes.number}>{strNumber(skInfo?.aRz, '-')}</span>座。
      </div>
      <div className={classes.action}>
        <Button startIcon={<Email />} onClick={doBx} style={{ color: '#fff' }} size="small">报讯</Button>
      </div>
    </div>
  )
}