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

import React, { useState, useEffect } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import {
  Box,
  Typography,
  Checkbox,
  FormControlLabel,
  ButtonGroup,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  IconButton,
  Collapse,
  Paper
} from '@material-ui/core';
// import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import WarningIcon from '@material-ui/icons/Warning';
import AddIcon from '@material-ui/icons/Add';

import { DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;
const useStyles = makeStyles((theme) => ({
  root: {
    color: '#fff'
  },
  table: {
    '& .MuiTableCell-root': {
      color: '#fff',
      borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
    }
  },
  warningRow: {
    '&.immediate': {
      backgroundColor: 'rgba(211, 47, 47,0.5)'
    },
    '&.prepare': {
      backgroundColor: 'rgba(237, 108, 2,0.5)'
    }
  },
  expandIcon: {
    marginRight: theme.spacing(1),
    fontSize: 20,
    cursor: 'pointer',
    transition: 'transform 0.3s',
    '&.expanded': {
      transform: 'rotate(180deg)'
    }
  },
  warningCount: {
    marginLeft: theme.spacing(1)
  },
  expandedContent: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    padding: theme.spacing(2)
  },
  statsSection: {
    marginTop: theme.spacing(4)
  },
  statsTitle: {
    color: '#1976d2',
    marginBottom: theme.spacing(3)
  },
  warningStats: {
    display: 'flex',
    justifyContent: 'space-around',
    marginTop: theme.spacing(2)
  },
  statItem: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  warningIcon: {
    fontSize: 40,
    marginBottom: theme.spacing(1),
    '&.immediate': {
      color: '#d32f2f'
    },
    '&.prepare': {
      color: '#ed6c02'
    }
  }
}));
export default function Overall({ style }) {

  const classes = useStyles();

  const [timeRange, setTimeRange] = useState('1h');
  const [expanded, setExpanded] = useState({});

  const warningData = [
    {
      type: 'immediate',
      label: '立即转移',
      count: 3,
      details: [] // 这里可以添加详细信息的数组
    },
    {
      type: 'prepare',
      label: '准备转移',
      count: 0,
      details: [] // 这里可以添加详细信息的数组
    }
  ];

  const handleExpand = (type) => {
    setExpanded(prev => ({
      ...prev,
      [type]: !prev[type]
    }));
  };

  const [params, setParams] = useState({ tm: [] })

  const searchTm = (e) => {
    setParams({
      ...params,
      stm: e[0].format("YYYY-MM-DD HH:mm"),
      etm: e[1].format("YYYY-MM-DD HH:mm"),
      tm: e,
    })
  };
  useEffect(() => {
    let options = "";
    options = {
      etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
      stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
      tm: [
        moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
        moment().add(1, 'hour').set({ minute: 0, second: 0 }),
      ],
    }

    setParams(options)

  }, [])

  const zyData = [
    {
      adnm: '石桥湾村',
      tm: '2025-05-22 12:03:00',
      status: '关闭预警'
    },
    {
      adnm: '凉亭村',
      tm: '2025-05-22 12:03:00',
      status: '关闭预警'
    },
    {
      adnm: '古城村',
      tm: '2025-05-22 12:03:00',
      status: '关闭预警'
    }
  ]

  return (
    <PanelBox
      style={style}
      title="山洪预警"
      color="green"
    >

      <Box className={classes.root}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ color: "#fff" }}>时段选择：</div>
          <div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "60%", margin: '10px' }}>
            <RangePicker
              // width="100%"
              className='time-picker'
              style={{
                flex: 1,
                background: "transparent",
                border: "none",
                color: "#fff",
              }}
              onChange={searchTm}
              allowClear
              format="YYYY-MM-DD HH:mm"
              showTime={{
                format: 'HH:mm',
              }}
              value={params.tm}
              getPopupContainer={trigger => trigger.parentElement}
            />
          </div>
        </div>
        <TableContainer component={Paper} style={{ backgroundColor: 'transparent' }}>
          <Table className={classes.table}>
            <TableHead>
              <TableRow>
                <TableCell>乡镇</TableCell>
                <TableCell>预警时间</TableCell>
                <TableCell>预警状态</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {warningData.map((row) => (
                <React.Fragment key={row.type}>
                  <TableRow className={`${classes.warningRow} ${row.type}`}>
                    <TableCell>
                      <Box display="flex" alignItems="center">
                        {expanded[row.type] ? (
                          <RemoveIcon
                            className={`${classes.expandIcon} expanded`}
                            onClick={() => handleExpand(row.type)}
                          />
                        ) : (
                          <AddIcon
                            className={classes.expandIcon}
                            onClick={() => handleExpand(row.type)}
                          />
                        )}
                        {row.label}
                      </Box>
                    </TableCell>
                    <TableCell></TableCell>
                    <TableCell>
                      {row.count}个乡镇
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell colSpan={3} style={{ padding: 0 }}>
                      <Collapse in={expanded[row.type]} timeout="auto" unmountOnExit>
                        <Box className={classes.expandedContent}>
                          {/* 这里可以添加展开后显示的详细内容 */}
                          {/* <Typography>暂无详细信息</Typography> */}
                          {
                            row.type == 'immediate' ? zyData.map(item => (
                              <TableRow>
                                <TableCell style={{ width: '30%' }}><div
                                  className="table-ellipsis cursor-pointer"
                                >{item.adnm}</div></TableCell>
                                <TableCell style={{ width: '40%' }}><div
                                  className="table-ellipsis cursor-pointer"
                                >{item.tm}</div></TableCell>
                                <TableCell style={{ width: '30%' }}><div
                                  className="table-ellipsis cursor-pointer"
                                >{item.status}</div></TableCell>
                              </TableRow>
                            ))

                              :
                              <Typography>暂无详细信息</Typography>
                          }
                        </Box>
                      </Collapse>
                    </TableCell>
                  </TableRow>
                </React.Fragment>
              ))}
            </TableBody>
          </Table>
        </TableContainer>

        <Box className={classes.statsSection}>
          <Typography variant="h6" className={classes.statsTitle}>
            预警统计: 共 3 条
          </Typography>
          <Box className={classes.warningStats}>
            {warningData.map((stat) => (
              <Box key={stat.type} className={classes.statItem}>
                <div style={{ display: 'flex' }}>
                  <div>
                    <WarningIcon className={`${classes.warningIcon} ${stat.type}`} />
                    <Typography>{stat.label}</Typography>
                  </div>
                  <Typography variant="h6" style={{ color: '#fff' }}>{stat.count}</Typography>
                </div>

              </Box>
            ))}
          </Box>
        </Box>
      </Box>
    </PanelBox>
  )
}