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 { InfoPopNames } from '../../InfoPops';
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 { useDispatch, useSelector } from 'react-redux';
import DpTableCell from '../../../../layouts/mui/DpTableCell';

import RemoveIcon from '@material-ui/icons/Remove';
import config from '../../../../config';
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 dispatch = useDispatch();

  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: 1, color: 'blue2' },
    { id: 'storm', name: '暴雨站点', count: 0, color: 'green' }
  ];

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

  const drpData = [
    {
      "stcd": "61612910",
      "stnm": "桃林河(阎河)",
      "adcd": "421181000000000",
      'test':1,
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.087777777,
      "lttd": 31.164444444,
      "elev": null,
      "hasRz": true,
      "type": "sh",
      "today": 7,
      "h1": 12,
      "h3": 40,
      "h6": 69,
      "h12": 133,
      "h24": 261,
      "tm": "2025-06-03T02:10:00.000Z",
      "state": 1,
      "warning": 0
    },
  ]
  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }
  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={() => {
                  if (item.value == '1h' || item.value == '3h') {
                    setTimeRange(item.value)
                  }
                }}
                variant={timeRange === item.value ? 'contained' : 'outlined'}
                style={{ padding: '5px 10px' }}
              >
                {item.label}
              </Button>
            ))}
          </ButtonGroup>

        </div>

        <TableContainer >
          <Table  stickyHeader> 
            <TableHead >
              <TableRow>
                <DpTableCell style={{ width: '50%' }}>站名</DpTableCell>
                <DpTableCell style={{ width: '20%' }}>累计雨量(mm)</DpTableCell>
                <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell>
                <DpTableCell style={{ width: '15%' }}>所属流域</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {stations.map((station) => (
                <React.Fragment key={station.id}>
                  <TableRow
                    // className={classes.stationRow}
                    className={`${classes.warningRow} ${station.color}`}
                  >
                    <DpTableCell>
                      <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>
                    </DpTableCell>
                    <DpTableCell></DpTableCell>
                    <DpTableCell></DpTableCell>
                    <DpTableCell></DpTableCell>
                  </TableRow>
                  <TableRow>
                    <DpTableCell colSpan={4} style={{ padding: 0 }}>
                      <Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
                        <Box className={`${classes.expandedRow} ${station.color}`}>
                          {/* 展开的详细内容可以在这里添加 */}{
                           station.id == 'heavy' && drpData.map(item => (
                              <TableRow onClick={() =>flyTo(item)}>
                                <DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
                                <DpTableCell style={{ width: '10%' }}>{item.today}</DpTableCell>
                                <DpTableCell style={{ width: '20%' }}>阎家河镇</DpTableCell>
                                <DpTableCell style={{ width: '27%' }}>桃林河</DpTableCell>
                              </TableRow>
                            ))
                          }

                        </Box>
                      </Collapse>
                    </DpTableCell>
                  </TableRow>
                </React.Fragment>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
    </PanelBox>
  )
}