111 lines
3.7 KiB
JavaScript
111 lines
3.7 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 ToolBar from './toolbar';
|
||
import apiurl from '../../../../service/apiurl';
|
||
import usePageTable from '../../../../components/crud/usePageTable2';
|
||
import { createCrudService } from '../../../../components/crud/_';
|
||
import { httppost5 } from '../../../../utils/request';
|
||
import { exportFile } from '../../../../utils/tools.js';
|
||
|
||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||
const Page = () => {
|
||
|
||
const [searchVal, setSearchVal] = useState(false)
|
||
const timeColumns = [
|
||
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||
...Array(16).fill(0).map((item,index) => ({
|
||
title: `${index+9}时`,
|
||
key: `drpH${index+9}`,
|
||
dataIndex: `drpH${index+9}`,
|
||
width: 80,
|
||
align: "center",
|
||
sorter: (a, b) => a[`drpH${index+9}`] - b[`drpH${index+9}`]
|
||
})),
|
||
...Array(8).fill(0).map((item,index) => ({
|
||
title: `${index+1}时`,
|
||
key: `drpH${index+1}`,
|
||
dataIndex: `drpH${index+1}`,
|
||
width: 80,
|
||
align: "center",
|
||
sorter: (a, b) => a[`drpH${index+1}`] - b[`drpH${index+1}`]
|
||
})),
|
||
{ title: '日累计', key: 'drpD', dataIndex: 'drpD', width: 100, align: "center",sorter: (a, b) => a.drpD - b.drpD, },
|
||
|
||
];
|
||
|
||
const dayColumns = [
|
||
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||
...Array(30).fill(0).map((item,index) => ({
|
||
title: `${index+1}天`,
|
||
key: `drpM${index+1}`,
|
||
dataIndex: `drpM${index+1}`,
|
||
width: 100,
|
||
align: "center",
|
||
}))
|
||
];
|
||
const yearColumns = [
|
||
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||
...Array(12).fill(0).map((item,index) => ({
|
||
title: `${index+1}月`,
|
||
key: `drpM${index+1}`,
|
||
dataIndex: `drpM${index+1}`,
|
||
width: 100,
|
||
align: "center",
|
||
}))
|
||
];
|
||
|
||
const width = useMemo(() => {
|
||
let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns : yearColumns;
|
||
return columns.reduce((total, cur) => total + (cur.width), 0)
|
||
}, [searchVal.type1]);
|
||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
|
||
// 导出
|
||
const exportExcel = () => {
|
||
let params = {
|
||
...searchVal,
|
||
}
|
||
httppost5(apiurl.pxjh.export, params).then(res => {
|
||
exportFile(`统计报表.xlsx`,res.data)
|
||
})
|
||
}
|
||
useEffect(()=>{
|
||
const params = {
|
||
search: {
|
||
...searchVal,
|
||
}
|
||
};
|
||
search(params)
|
||
}, [searchVal])
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||
<Card className='nonebox'>
|
||
<ToolBar
|
||
setSearchVal={setSearchVal}
|
||
exportFile1={exportExcel}
|
||
/>
|
||
</Card>
|
||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||
<Table
|
||
title={() => (
|
||
<>
|
||
<h2 style={{ textAlign: "center" }}>{searchVal?.year}闸后流量报表</h2>
|
||
<div style={{ textAlign: "right" }}>单位：m³/s</div>
|
||
</>
|
||
)}
|
||
columns={searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns :yearColumns}
|
||
rowKey="inx"
|
||
{...tableProps}
|
||
scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page;
|