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

import { Button, makeStyles } from '@material-ui/core';
import { Email } from '@material-ui/icons';
import React, { useMemo } from 'react';
import { BXSKLIST } from '../../../../models/_/bxsk';
import moment from 'moment';
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'
  },

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

export default function OverallContent({ data, skAll }) {
  const classes = useStyles();
  const start = moment().format('D日');
  const end = moment().add(1,'day').format('D日');

  const stat = useMemo(() => {
    const dataF = data.filter(o => o.dbczwt);
    const 中型 = dataF?.filter(o => o.gcgm === '中型');
    const 小一型 = dataF?.filter(o => o.gcgm === '小（1）型');
    const 小二型 = dataF?.filter(o => o.gcgm === '小（2）型');
    const 超汛限 = dataF?.filter(o => o.rzWarning === 1 && o.rzState === 1);

    return {
      all: dataF,
      中型,
      小一型,
      小二型,
      超汛限
    };
  }, [data]);

  return (
    <div className={classes.root}>
      <div>
        <span className={classes.titleDate}>{start}9时</span>至<span className={classes.titleDate}>{end}9时</span>
              24小时中共有<span className={classes.number}>1</span>
              个站点雨量为<span className={classes.sttype}>大暴雨</span>，雨量值
              <span className={classes.number}>261mm</span>；
              共产生<span className={classes.number}>3</span>个山洪预警（2个内部预警，1个外部预警），均已处置；<span className={classes.number}>1</span>个水库超汛限，已短信通知责任人；<span className={classes.number}>1</span>个超警戒河道预警。

            </div>
      {/* <div>
        共有水库<span className={classes.number}>{skAll?.length || '-'}</span>坐，
        病险水库共有<span className={classes.number}>{stat.all?.length || '-'}</span>坐
        (
        中型<span className={classes.number}>{stat.中型?.length || '-'}</span>坐，
        小一型<span className={classes.number}>{stat.小一型?.length || '-'}</span>坐，
        小二型<span className={classes.number}>{stat.小二型?.length || '-'}</span>坐
        )

        ，其中超汛限<span className={classes.number}>{stat.超汛限?.length || '-'}</span>座。
      </div> */}
    </div>
  )
}