mcfxkh-Web/src/views/Home/InfoDlg/SljcDlg/table.js

import { TableCell, withStyles, Table, TableBody, TableContainer, TableHead, TableRow, TextField, Grid } from '@material-ui/core';
import { DatePicker } from 'antd';
import { makeStyles } from '@material-ui/core/styles';
import moment from 'moment';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import DescriptionItem from '../../components/DescrptionItem2';
import ReactEcharts from 'echarts-for-react';
import drpOption from './drpOption';
import { DateTimePicker } from '@material-ui/pickers';
import React, { useEffect, useState,useMemo } from 'react';
import './index.less'
const { RangePicker } = DatePicker;
const useStyles = makeStyles({
    tableContainer: {
      background: '#182d42', // 设置表格容器的背景颜色
    },
    item: {
        '& .MuiGrid-item': {
          '& [class*="makeStyles-title"]': {
            color: '#fff',
            backgroundColor: '#104175',
          },
        },
      },
  });
const DpTableCell = withStyles({
    head: {
        backgroundColor: '#104175',
        color: '#fff',
        fontSize: '1rem',
        padding: '0.5rem 0.3rem !important',
      },
    body: {
        color: '#fff',
        fontSize: '0.9rem',
        padding: '0.7rem 0.3rem !important',
        borderBottom: 'none',
        position: "relative"
    },
  })(TableCell);



const data = [
    {
        "res_cd": "42118140004",
        "rz": 71.08,
        "dt": "2025-04-28",
        "low_z": 0.38
    },
    {
        "res_cd": "42118140004",
        "rz": 71.08,
        "dt": "2025-04-29",
        "low_z": 0.29
    },
    {
        "res_cd": "42118140004",
        "rz": 71.08,
        "dt": "2025-04-30",
        "low_z": 0.29
    },
    {
        "res_cd": "42118140004",
        "rz": 71.08,
        "dt": "2025-05-01",
        "low_z": 0.27
    },
    {
        "res_cd": "42118140004",
        "rz": 71.07,
        "dt": "2025-05-02",
        "low_z": 0.28
    },
    {
        "res_cd": "42118140004",
        "rz": 71.07,
        "dt": "2025-05-03",
        "low_z": 0.17
    },
    {
        "res_cd": "42118140004",
        "rz": 71.06,
        "dt": "2025-05-04",
        "low_z": 0
    },
    {
        "res_cd": "42118140004",
        "rz": 71.1,
        "dt": "2025-05-05",
        "low_z": 0.71
    },
    {
        "res_cd": "42118140004",
        "rz": 71.04,
        "dt": "2025-05-06",
        "low_z": 0.43
    },
    {
        "res_cd": "42118140004",
        "rz": 70.98,
        "dt": "2025-05-07",
        "low_z": 0.34
    },
    {
        "res_cd": "42118140004",
        "rz": 70.97,
        "dt": "2025-05-08",
        "low_z": 1.73
    },
    {
        "res_cd": "42118140004",
        "rz": 71.3,
        "dt": "2025-05-09",
        "low_z": 0.71
    },
    {
        "res_cd": "42118140004",
        "rz": 71.33,
        "dt": "2025-05-10",
        "low_z": 0.56
    },
    {
        "res_cd": "42118140004",
        "rz": 71.35,
        "dt": "2025-05-11",
        "low_z": 0.47
    },
    {
        "res_cd": "42118140004",
        "rz": 71.35,
        "dt": "2025-05-12",
        "low_z": 0.38
    },
    {
        "res_cd": "42118140004",
        "rz": 71.35,
        "dt": "2025-05-13",
        "low_z": 0.3
    },
    {
        "res_cd": "42118140004",
        "rz": 71.35,
        "dt": "2025-05-14",
        "low_z": 0.29
    },
    {
        "res_cd": "42118140004",
        "rz": 71.38,
        "dt": "2025-05-15",
        "low_z": 0.63
    },
    {
        "res_cd": "42118140004",
        "rz": 71.4,
        "dt": "2025-05-16",
        "low_z": 0.45
    },
    {
        "res_cd": "42118140004",
        "rz": 71.41,
        "dt": "2025-05-17",
        "low_z": 0.38
    },
    {
        "res_cd": "42118140004",
        "rz": 71.41,
        "dt": "2025-05-18",
        "low_z": 0.34
    },
    {
        "res_cd": "42118140004",
        "rz": 71.41,
        "dt": "2025-05-19",
        "low_z": 0.3
    },
    {
        "res_cd": "42118140004",
        "rz": 71.41,
        "dt": "2025-05-20",
        "low_z": 0.27
    },
    {
        "res_cd": "42118140004",
        "rz": 71.41,
        "dt": "2025-05-21",
        "low_z": 0.25
    },
    {
        "res_cd": "42118140004",
        "rz": 71.41,
        "dt": "2025-05-22",
        "low_z": 3.81
    },
    {
        "res_cd": "42118140004",
        "rz": 72.04,
        "dt": "2025-05-23",
        "low_z": 2.26
    },
    {
        "res_cd": "42118140004",
        "rz": 72.15,
        "dt": "2025-05-24",
        "low_z": 0.75
    },
    {
        "res_cd": "42118140004",
        "rz": 72.19,
        "dt": "2025-05-25",
        "low_z": 0.68

    },
    {
        "res_cd": "42118140004",
        "rz": 72.21,
        "dt": "2025-05-26",
        "low_z": 0.62
    },
    {
        "res_cd": "42118140004",
        "rz": 72.22,
        "dt": "2025-05-27",
        "low_z": 0.55
    },
    {
        "res_cd": "42118140004",
        "rz": 72.22,
        "dt": "2025-05-28",
        "low_z": 0.54
    }
]

function DrpStAround({ record }) {
    const classes = useStyles();

    const option = useMemo(() => {
      return drpOption(data);
    }, [])
    
  
    return (
        <div className='infoDlg_jcsj'>
            <div className='toolbar'>
                <div className='tm' style={{position:"relative",zIndex:999999}}>
                    <RangePicker
                        width="100%"
                        className='time-picker'
                        style={{
                            flex:1,
                            background: "transparent",
                            border: "none",
                            color: "#fff",
                        }}
                        allowClear
                        format="YYYY-MM-DD"
                        showTime={{
                          format: 'HH:mm',
                        }}
                        value={[moment('2025-04-28'),moment('2025-05-28')]}
                    />
                </div>
                <button className='search'>查询</button>
            </div>
            <div className='content' style={{height:"49vh"}}>
                <div className='list'>
                    <TableContainer style={{ height: '100%' }} className={classes.tableContainer}>
                        <Table size="small" stickyHeader>
                            <TableHead>
                                <TableRow>
                                <DpTableCell align="center" style={{ width: '20%' }}>时间</DpTableCell>
                                <DpTableCell align="center" style={{ width: '20%' }}>库水位(m)</DpTableCell>
                                <DpTableCell align="center" style={{ width: '20%' }}>渗流量(L/s)</DpTableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {
                                    data.map((row) => (
                                <DpTableRow key={row.dt}>
                                    <DpTableCell align="center"><div className="ellipsis">{row.dt}</div></DpTableCell>
                                    <DpTableCell align="center">{59.38?? "-"}</DpTableCell>
                                    <DpTableCell align="center">{0.3?? "-"}</DpTableCell>
                                </DpTableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </div>
                <div className='echartBox'>
                    <div className='echart1'>
                        <ReactEcharts
                            option={option}
                            style={{ height: '100%' }}
                        />
                    </div>
                </div>
            </div>
            <div className='foot'>
                <Grid container size="small">
                    <DescriptionItem label="最大值(m)" myWidth={'20%'}>0.3</DescriptionItem>
                    <DescriptionItem label="日期" myWidth={'20%'}>2025-04-28</DescriptionItem>
                    <DescriptionItem label="最小值" myWidth={'20%'}>0.3</DescriptionItem>
                    <DescriptionItem label="日期" myWidth={'20%'}>2025-05-20</DescriptionItem>
                    <DescriptionItem label="变幅" myWidth={'20%'}>0</DescriptionItem>
                </Grid>
            </div>
        </div>
    )
}

export default DrpStAround