312 lines
8.3 KiB
JavaScript
312 lines
8.3 KiB
JavaScript
|
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">{row.rz?? "-"}</DpTableCell>
|
||
|
|
<DpTableCell align="center">{row.low_z?? "-"}</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%'}>209.55</DescriptionItem>
|
||
|
|
<DescriptionItem label="日期" myWidth={'20%'}>2025-04-28</DescriptionItem>
|
||
|
|
<DescriptionItem label="最小值" myWidth={'20%'}>209.40</DescriptionItem>
|
||
|
|
<DescriptionItem label="日期" myWidth={'20%'}>2025-05-20</DescriptionItem>
|
||
|
|
<DescriptionItem label="变幅" myWidth={'20%'}>3.97</DescriptionItem>
|
||
|
|
</Grid>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DrpStAround
|