mcfxkh-Web/src/views/Home/panels/Gcxxzl/index.js

63 lines
2.5 KiB
JavaScript

import React from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
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';
export default function Overall({ style }) {
const { data } = useRequest(OverallPromise.get);
const showData = [
{
unit: '浮桥河灌区',
inspectionCount: '大型',
eventCount: 31.96,
processingCount: '--'
},
]
return (
<PanelBox
style={style}
title="信息总览"
color="green"
>
{/* <OverallContent data={data} /> */}
<img src={`${process.env.PUBLIC_URL}/assets/xxzl.jpg`} alt="" style={{width:421}}/>
<TableContainer style={{ height: '30%',marginTop:'10px' }}>
<Table size="small" stickyHeader>
<TableHead>
<TableRow >
<DpTableCell style={{ width: '25%' }} align="center">灌区名称</DpTableCell>
<DpTableCell style={{ width: '25%' }} align="center">灌区类型</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>灌溉面积(万亩)</DpTableCell>
<DpTableCell align="center" style={{ width: '25%' }}>受益人口</DpTableCell>
</TableRow>
</TableHead>
<TableBody>
{showData.map((row) => (
<DpTableRow key={row.id}>
<DpTableCell align="center">
<div
className="table-ellipsis cursor-pointer"
>{row.unit}</div>
</DpTableCell>
<DpTableCell align="center">{row.inspectionCount}</DpTableCell>
<DpTableCell align="center"><div className="table-ellipsis cursor-pointer">{row.eventCount}</div></DpTableCell>
<DpTableCell align="center">{row.processingCount}</DpTableCell>
{/* {rzRender(row.rz, row.grz)}
{rzRender(row.rz, row.wrz)} */}
</DpTableRow>
))}
</TableBody>
</Table>
</TableContainer>
</PanelBox>
)
}