mcfxkh-Web/src/views/Home/panels/Drpfx/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(255,192,203,0.5)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' },
      '&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' },
      '&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' },
      '&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' },
    '&.green': { backgroundColor: 'rgba(144,238,144,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, color: 'pink' },
    { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
    { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
    { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
    { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
    { id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
  ];

  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.mountain} onChange={handleTypeChange} name="mountain" />}
            label="山洪"
          />
          <FormControlLabel
            control={<Checkbox checked={types.water} onChange={handleTypeChange} name="water" />}
            label="水文"
          />
          <FormControlLabel
            control={<Checkbox checked={types.weather} onChange={handleTypeChange} name="weather" />}
            label="气象"
          />
          <FormControlLabel
            control={<Checkbox checked={types.reservoir} onChange={handleTypeChange} name="reservoir" />}
            label="水库"
          />
        </Box>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Typography component="div">最近时段：</Typography>
          <ButtonGroup variant="outlined">
            {[
              { value: '1h', label: '1小时' },
              { value: '3h', label: '3小时' },
              { value: '6h', label: '6小时' },
              { value: '12h', label: '12小时' },
              { value: '24h', label: '24小时' }
            ].map((item) => (
              <Button
                key={item.value}
                className={classes.timeButton}
                onClick={() => setTimeRange(item.value)}
                variant={timeRange === item.value ? 'contained' : 'outlined'}
                style={{ padding: '5px 10px' }}
              >
                {item.label}
              </Button>
            ))}
          </ButtonGroup>

        </div>

        <TableContainer>
          <Table className={classes.table}>
            <TableHead>
              <TableRow>
                <TableCell style={{ width: '50%' }}>站名</TableCell>
                <TableCell style={{ width: '20%' }}>累计雨量(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.stationRow}
                    className={`${classes.warningRow} ${station.color}`}
                  >
                    <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>
  )
}