mcfxkh-Web/src/views/Home/InfoDlg/HistoryYyDlg/rightYy.js

import React from 'react';
import {
  Box,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Tabs,
  Tab,
  Typography,
  makeStyles
} from '@material-ui/core';
import Fxyb from './fxyb';


const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    backgroundColor: 'transparent',
    color: '#fff'
  },
  tabs: {
    borderBottom: '1px solid rgba(255, 255, 255, 0.12)',
    '& .MuiTab-root': {
      color: '#fff',
      '&.Mui-selected': {
        color: '#2196f3'
      }
    },
    '& .MuiTabs-indicator': {
      backgroundColor: '#2196f3'
    }
  },
  table: {
    backgroundColor: 'transparent',
    '& .MuiTableCell-root': {
      color: '#fff',
      borderColor: 'rgba(255, 255, 255, 0.12)'
    }
  },
  statsContainer: {
    marginTop: theme.spacing(2),
    backgroundColor: 'transparent',
    borderRadius: theme.shape.borderRadius,
    padding: theme.spacing(2)
  },
  statsRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: theme.spacing(1)
  },
  warningCell: {
    backgroundColor: 'rgba(156, 39, 176, 0.3)'
  },
  yearLabel: {
    backgroundColor: '#1976d2',
    padding: '2px 2px',
    borderRadius: 12,
    fontSize: '0.75rem'
  },
  title: {
    color: '#1976d2',
    marginBottom: theme.spacing(2),
    marginTop: 10,
    marginLeft:20,
    display: 'flex',
    alignItems: 'center',
    '&::before': {
      content: '""',
      width: 4,
      height: 16,
      backgroundColor: '#1976d2',
      marginRight: theme.spacing(1),
    },
  },
}));
const RainfallMonitor = () => {
  const rainfallList = [
    {
      time: '2024-12-10 10:00:00',
      rainfall: 1.5,
      magnified: 3,
      simulated: 4.5
    },
    {
      time: '2024-12-10 11:00:00',
      rainfall: 1.5,
      magnified: 3,
      simulated: 4.5
    },
    {
      time: '2024-12-10 12:00:00',
      rainfall: 4.5,
      magnified: 9,
      simulated: 13.5
    },
    {
      time: '2024-12-10 13:00:00',
      rainfall: 1.5,
      magnified: 3,
      simulated: 4.5
    },
    {
      time: '2024-12-10 14:00:00',
      rainfall: 1.5,
      magnified: 3,
      simulated: 4.5
    },
    {
      time: '2024-12-10 15:00:00',
      rainfall: 0,
      magnified: 0,
      simulated: 0
    },
    {
      time: '2024-12-10 16:00:00',
      rainfall: 1.5,
      magnified: 3,
      simulated: 4.5
    },
    {
      time: '2024-12-10 17:00:00',
      rainfall: 1.5,
      magnified: 3,
      simulated: 4.5
    },
    {
      time: '2024-12-10 18:00:00',
      rainfall: 3,
      magnified: 6,
      simulated: 9
    },

  ];
  const classes = useStyles();
  const [tabValue, setTabValue] = React.useState(0);

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };

  return (
    <Box className={classes.root}>
      <Tabs
        value={tabValue}
        onChange={handleTabChange}
        className={classes.tabs}
      >
        <Tab label="降雨情景" />
        <Tab label="风险评估" />
      </Tabs>
      
      {
        tabValue == 0 ? <>
          <TableContainer component={Paper} className={classes.table}>
            <Typography variant="h6" className={classes.title}>
              降雨预测
            </Typography>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell style={{width:'37%'}}>时间</TableCell>
                  <TableCell style={{width:'20%'}}>面雨量(mm)</TableCell>
                  <TableCell style={{width:'20%'}}>放大量(mm)</TableCell>
                  <TableCell style={{width:'20%'}}>预演面雨量(mm)</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {/* 这里添加实际的降雨数据行 */}
                {rainfallList.map((row) => (
                  <TableRow key={row.time}>
                    <TableCell><div
                      className="table-ellipsis cursor-pointer"
                      title={row.time}
                    >{row.time}</div></TableCell>
                    <TableCell>{row.rainfall}</TableCell>
                    <TableCell>{row.magnified}</TableCell>
                    <TableCell>{row.simulated}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>

          <Box className={classes.statsContainer}>
            <Box className={classes.statsRow}>
              <Typography variant="subtitle2" style={{ color: "#fff", width: '50px' }}></Typography>
              {['1小时', '3小时', '6小时', '12小时', '24小时'].map((period) => (
                <Typography key={period} variant="body2">{period}</Typography>
              ))}
            </Box>
            <Box className={classes.statsRow}>
              <Typography variant="subtitle2" style={{ color: "#fff" }}><div style={{ whiteSpace: 'pre-wrap', width: 50 }}>最大雨量重现期统计</div></Typography>
              {[265.5, 591, 943.5, 1311.6, 1451.7].map((value, index) => (
                <Typography key={index} variant="body2" className={classes.warningCell}>
                  {value}
                </Typography>
              ))}
            </Box>
            <Box className={classes.statsRow}>
              <Typography variant="subtitle2" style={{ color: "#fff", width: '80px' }}></Typography>
              {['>102.0', '>125.0', '>141.0', '>163.0', '>188.0'].map((threshold, index) => (
                <Box key={index} display="flex" flexDirection="column" alignItems="center">
                  <Typography variant="body2">{threshold}</Typography>
                  <Typography variant="caption" className={classes.yearLabel}>100年一遇</Typography>
                </Box>
              ))}
            </Box>
          </Box>
        </> : <Fxyb />
      }
    </Box>
  );
};

export default RainfallMonitor;