mcfxkh-Web/src/views/Home/panels/Diaodujg/tableYj.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
} from '@material-ui/core';
const reservoirData = [
  {
    name: '浮桥河水库',
    maxInflow: {
      value: 12.32,
      time: '03-23 14:32'
    },
    totalStorage: 17.98,
    maxOutflow: {
      value: 12.32,
      time: '03-23 14:32'
    }
  }
];

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    // padding: '20px',
    background: 'transparent',
    borderRadius: '8px',
    position: 'relative',
  },
  tableContainer: {
    background: 'transparent',
    maxHeight: '100%',
    overflowX: 'auto',
    '&::-webkit-scrollbar': {
      height: '8px',
    },
    '&::-webkit-scrollbar-track': {
      background: 'rgba(255, 255, 255, 0.1)',
      borderRadius: '4px',
    },
    '&::-webkit-scrollbar-thumb': {
      background: 'rgba(255, 255, 255, 0.2)',
      borderRadius: '4px',
      '&:hover': {
        background: 'rgba(255, 255, 255, 0.3)',
      },
    },
  },
  table: {
    minWidth: 800,
    // background: 'linear-gradient(180deg, rgba(22, 27, 34, 0.8) 0%, rgba(13, 17, 23, 0.8) 100%)',
    backdropFilter: 'blur(10px)',
  },
  tableHead: {
    background: 'linear-gradient(180deg, rgba(22, 27, 34, 0.9) 0%, rgba(22, 27, 34, 0.7) 100%)',
  },
  headerCell: {
    color: '#c9d1d9',
    fontWeight: 600,
    textAlign: 'center',
    borderBottom: '1px solid rgba(48, 54, 61, 0.6)',
    borderRight: '1px solid rgba(48, 54, 61, 0.6)',
     padding: 0,
    whiteSpace: 'nowrap',
    '&:last-child': {
      borderRight: 'none',
    },
  },
  cell: {
    color: '#c9d1d9',
    textAlign: 'center',
    borderBottom: '1px solid rgba(48, 54, 61, 0.6)',
    borderRight: '1px solid rgba(48, 54, 61, 0.6)',
    padding: '12px 20px',
    whiteSpace: 'nowrap',
    '&:last-child': {
      borderRight: 'none',
    },
  },
  timeText: {
    fontSize: '0.85em',
    color: '#8b949e',
    marginLeft: '4px',
  },
 scrollIndicator: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: '4px',
    background: 'rgba(255, 255, 255, 0.1)',
    borderRadius: '2px',
  },
  scrollProgress: {
    height: '100%',
    background: 'rgba(255, 255, 255, 0.3)',
    borderRadius: '2px',
    width: '50%',
    transform: 'translateX(0%)',
    transition: 'transform 0.3s ease',
  },
}));

const ReservoirTable = ({onChange}) => {
  const classes = useStyles();
  const [scrollPosition, setScrollPosition] = React.useState(0);

  const handleScroll = (e) => {
    const target = e.target;
    const scrollLeft = target.scrollLeft;
    const maxScroll = target.scrollWidth - target.clientWidth;
    const position = (scrollLeft / maxScroll) * 100;
    setScrollPosition(position);
  };

  const formatFlowCell = (data) => (
    <>
      {data.value}
      <span className={classes.timeText}>({data.time})</span>
    </>
  );

  return (
    <Paper className={classes.root} elevation={0}>
      <TableContainer className={classes.tableContainer} >
        <Table  >
          <TableHead >
            <TableRow>
              <TableCell className={classes.headerCell}>水库名称</TableCell>
              <TableCell className={classes.headerCell}>
                最大入库流量<br/>(m³/s)
              </TableCell>
              <TableCell className={classes.headerCell}>
                总入库水量<br/>(万m³)
              </TableCell>
              <TableCell className={classes.headerCell}>
                最大出库流量<br/>(m³/s)
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {reservoirData.map((item, index) => (
              <TableRow key={index} onClick={onChange}>
                <TableCell className={classes.cell}>{item.name}</TableCell>
                <TableCell className={classes.cell}>{formatFlowCell(item.maxInflow)}</TableCell>
                <TableCell className={classes.cell}>{item.totalStorage}</TableCell>
                <TableCell className={classes.cell}>{formatFlowCell(item.maxOutflow)}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      {/* <div className={classes.scrollIndicator}>
        <div
          className={classes.scrollProgress}
          style={{
            transform: `translateX(${scrollPosition}%)`
          }}
        />
      </div> */}
    </Paper>
  );
};

export default ReservoirTable;