mcfxkh-Web/src/views/Home/panels/Zdgzsq/table.js

58 lines
2.5 KiB
JavaScript

import React, { useMemo, useState } from 'react';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import Table from '@material-ui/core/Table';
import TableContainer from '@material-ui/core/TableContainer';
import TableBody from '@material-ui/core/TableBody';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import appconsts from '../../../../models/appconsts';
import { renderDrp, renderSkArz, renderSkRz } from '../../../../utils/renutils';
const data = [
{ name:'宋埠镇', name2:'项生(宋埠)', name3:'675.49', name4:'680.23', name5:'692.17' },
{ name:'黄土岗镇', name2:'鹰山畈(黄土岗)', name3:'692.92', name4:'710.29', name5:'728.38' },
]
const data2 = [
{ name:'阎家河', name2:'桃林河(阎河)', name3:'609.78', name4:'603.20', name5:'639.21' },
{ name:'巴水', name2:'杨梅河(木子店)', name3:'509.53', name4:'539.20', name5:'558.29' },
]
function Page({ tab }) {
return (
<TableContainer style={{ height: '12rem' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow>
<DpTableCell style={{ minWidth: '6rem' }} align="left">{tab==='1'?'乡镇':'流域'}</DpTableCell>
<DpTableCell style={{ minWidth: '8rem' }} align="center">测站</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">实时水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">警戒水位(m)</DpTableCell>
<DpTableCell style={{ minWidth: '6rem' }} align="center">保证水位(m)</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{(tab==='1'?data:data2).map((row) => (
<DpTableRow key={row.name}>
<DpTableCell component="th" scope="row">
<div className="table-ellipsis cursor-pointer" onClick={() => {}}>{row.name}</div>
</DpTableCell>
<DpTableCell align="center">{row.name2}</DpTableCell>
<DpTableCell align="center">{row.name3}</DpTableCell>
<DpTableCell align="center">{row.name4}</DpTableCell>
<DpTableCell align="center">{row.name5}</DpTableCell>
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}
export default React.memo(Page);