102 lines
3.3 KiB
JavaScript
102 lines
3.3 KiB
JavaScript
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
|
||
import { useSelector } from 'react-redux';
|
||
import ToolBar from './toolbar';
|
||
import apiurl from '../../../../service/apiurl';
|
||
import usePageTable from '../../../../components/crud/usePageTable2';
|
||
import { createCrudService } from '../../../../components/crud/_';
|
||
import { exportFile } from '../../../../utils/tools.js';
|
||
import { httppost2, httppost5 } from '../../../../utils/request';
|
||
const url = "http://223.75.53.141:9100/gs-tsg"
|
||
const Page = () => {
|
||
const role = useSelector(state => state.auth.role);
|
||
const [searchVal, setSearchVal] = useState(false)
|
||
const columns = [
|
||
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||
...Array(24).fill(0).map((item,index) => ({
|
||
title: `${index}时` ,
|
||
key: index == 0 ? `rzH24`:`rzH${index}`,
|
||
dataIndex: index == 0 ? `rzH24`:`rzH${index}`,
|
||
width: 80,
|
||
align: "center",
|
||
sorter: (a, b) => a[index == 0 ? `rzH24`:`rzH${index}`] - b[index == 0 ? `rzH24`:`rzH${index}`]
|
||
})),
|
||
{ title: '平均', key: 'rzAvg', dataIndex: 'rzAvg', width: 100, align: "center",sorter: (a, b) => a.rzAvg - b.rzAvg, },
|
||
|
||
];
|
||
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||
const [data, setData] = useState([])
|
||
const getData = async (params) => {
|
||
try {
|
||
const res = await httppost2(apiurl.rcgl.btbb.sdswrbb.page, params)
|
||
if (res.code == 200) {
|
||
setData(res.data)
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
|
||
}
|
||
}
|
||
|
||
const exportExcel = () => {
|
||
let params = {
|
||
...searchVal,
|
||
}
|
||
httppost5(apiurl.rcgl.btbb.sdswrbb.export, params).then(res => {
|
||
exportFile(`时段水位日报表.xlsx`,res.data)
|
||
})
|
||
}
|
||
|
||
const formatDate = (date1) => {
|
||
const date = new Date(date1);
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth() + 1;
|
||
const day = date.getDate();
|
||
|
||
return year + '年' + month + '月' + day + '日';
|
||
}
|
||
|
||
|
||
useEffect(() => {
|
||
if (searchVal) {
|
||
const params = {
|
||
...searchVal,
|
||
};
|
||
getData(params)
|
||
}
|
||
}, [searchVal])
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className='content-root clearFloat xybm' style={{paddingRight:"10px",paddingBottom:"0"}}>
|
||
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||
<Card className='nonebox'>
|
||
<ToolBar
|
||
setSearchVal={setSearchVal}
|
||
exportFile={exportExcel}
|
||
role={role}
|
||
/>
|
||
</Card>
|
||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||
<Table
|
||
title={() => (
|
||
<>
|
||
<h2 style={{ textAlign: "center" }}>{formatDate(searchVal.start)}-{formatDate(searchVal.end)}时段水位日报表</h2>
|
||
<div style={{ textAlign: "right" }}>单位：m</div>
|
||
</>
|
||
)}
|
||
columns={columns}
|
||
rowKey="date"
|
||
dataSource={data}
|
||
pagination={false}
|
||
scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page;
|