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

import React, { useState } 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
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
const useStyles = makeStyles((theme) => ({
  root: {
    color: '#fff',
    '& .MuiTypography-root': {
      color: '#fff'
    },
    '& .MuiCheckbox-root': {
      color: '#fff',
      '&.Mui-checked': {
        color: '#409eff'
      }
    },
    '& .MuiButtonGroup-root': {
      marginTop: theme.spacing(2),
      marginBottom: theme.spacing(3)
    }
  },
  typeSection: {
    marginBottom: theme.spacing(2)
  },
  timeButton: {
    color: '#fff',
    borderColor: 'rgba(255,255,255,0.3)',
    '&.MuiButton-contained': {
      backgroundColor: '#409eff',
      color: '#fff',
      '&:hover': {
        backgroundColor: '#409eff'
      }
    },
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
  table: {
    '& .MuiTableCell-root': {
      color: '#fff',
      borderColor: 'rgba(255,255,255,0.1)'
    }
  },
  expandButton: {
    color: '#fff'
  },
  stationRow: {
    '&:nth-of-type(odd)': {
      backgroundColor: 'rgba(255,255,255,0.05)'
    },
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
    warningRow: {
    '&.pink': {
      backgroundColor: 'rgba(254, 212, 219,0.5)'
    },
    '&.purple': {
      backgroundColor: 'rgba(252, 236, 207,0.5)'
    }
  },
  expandedRow: {
    '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
    '&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
    '&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
  }
}));
export default function Overall({ style }) {

  const classes = useStyles();
  const [types, setTypes] = useState({
    mountain: true,
    water: true,
    weather: true,
    reservoir: true
  });
  const [timeRange, setTimeRange] = useState('1h');
  const [expanded, setExpanded] = useState({});

  const handleTypeChange = (event) => {
    setTypes({
      ...types,
      [event.target.name]: event.target.checked
    });
  };

  const stations = [
    { id: 'history', name: '超危险水位', count: 0, type: 'pink' },
    { id: '100year', name: '超警戒水位', count: 0, type: 'purple' },
  ];

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

  return (
    <PanelBox
      style={style}
      title="河道预警"
      color="green"
    >
      <Box className={classes.root}>
        <Box className={classes.typeSection}>
          <Typography component="span">类型：</Typography>
           <FormControlLabel
            control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
            label="山洪"
          />
          <FormControlLabel
            control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
            label="水文"
          />
         
        </Box>
  

        <TableContainer>
          <Table className={classes.table}>
            <TableHead>
              <TableRow>
                <TableCell style={{ width: '35%' }}>站名</TableCell>
                <TableCell style={{ width: '30%' }}>水位(mm)</TableCell>
                <TableCell style={{ width: '15%' }}>所属政区</TableCell>
                <TableCell style={{ width: '15%' }}>所属流域</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {stations.map((station) => (
                <React.Fragment key={station.id}>
                  <TableRow className={`${classes.warningRow} ${station.type}`}>
                    <TableCell>
                      <Box display="flex" alignItems="center">
                        <IconButton
                          size="small"
                          className={classes.expandButton}
                          onClick={() => toggleExpand(station.id)}
                        >
                          {expanded[station.id] ? <RemoveIcon /> : <AddIcon />}
                        </IconButton>
                        {station.name}({station.count})
                      </Box>
                    </TableCell>
                    <TableCell></TableCell>
                    <TableCell></TableCell>
                    <TableCell></TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell colSpan={4} style={{ padding: 0 }}>
                      <Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
                        <Box className={`${classes.expandedRow} ${station.color}`}>
                          {/* 展开的详细内容可以在这里添加 */}
                          {/* <TableRow>
                            <TableCell style={{ width: '25%' }}>站名</TableCell>
                            <TableCell style={{ width: '20%' }}>水位(m)</TableCell>
                            <TableCell style={{ width: '25%' }}>所属政区</TableCell>
                            <TableCell style={{ width: '30%' }}>所属流域</TableCell>
                          </TableRow> */}
                        </Box>
                      </Collapse>
                    </TableCell>
                  </TableRow>
                </React.Fragment>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
    </PanelBox>
  )
}