381 lines
16 KiB
JavaScript
381 lines
16 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, httppost2 } from '../../../../utils/request';
|
||
import { exportFile } from '../../../../utils/tools.js';
|
||
import './index.less'
|
||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||
const Page = () => {
|
||
const projectType = {
|
||
0: '闸后流量',
|
||
1: '雨量',
|
||
2: '闸前水位',
|
||
3: '闸后水位'
|
||
}
|
||
|
||
const bbType = {
|
||
0: '日报表',
|
||
1: '年报表',
|
||
2:'月报表'
|
||
}
|
||
const [searchVal, setSearchVal] = useState(false)
|
||
const [requsetUrlObj, setRequsetUrlObj] = useState({})
|
||
const requsetUrlObjRef = useRef(null)
|
||
requsetUrlObjRef.current = requsetUrlObj;
|
||
const timeColumns = [
|
||
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", fixed: "left" },
|
||
...Array(16).fill(0).map((item, index) => ({
|
||
title: `${index + 9}时`,
|
||
key: `rzH${index + 9}`,
|
||
dataIndex: `rzH${index + 9}`,
|
||
width: 80,
|
||
align: "center",
|
||
sorter: (a, b) => a[`rzH${index + 9}`] - b[`rzH${index + 9}`]
|
||
})),
|
||
...Array(8).fill(0).map((item, index) => ({
|
||
title: `${index + 1}时`,
|
||
key: `rzH${index + 1}`,
|
||
dataIndex: `rzH${index + 1}`,
|
||
width: 80,
|
||
align: "center",
|
||
sorter: (a, b) => a[`rzH${index + 1}`] - b[`rzH${index + 1}`]
|
||
})),
|
||
{ title: '平均', key: 'rzAvg ', dataIndex: 'rzAvg', width: 100, align: "center", sorter: (a, b) => a.rzAvg - b.rzAvg },
|
||
];
|
||
|
||
const dayColumns = [
|
||
{ title: '日期', key: 'date', dataIndex: 'date', width: 120, align: "center", render: (v, r, i) => <span>{v ? `${v}号`: ''}</span>},
|
||
{title: '监测值', key: 'data', dataIndex: 'data', width: 120, 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 newTimeColumns = useMemo(() => {
|
||
const changeColumns = JSON.parse(JSON.stringify(timeColumns));
|
||
changeColumns[changeColumns.length - 1] = {
|
||
title: '日累计',
|
||
key: 'drpD',
|
||
dataIndex: 'drpD',
|
||
width: 100,
|
||
align: 'center',
|
||
sorter: (a, b) => a.drpD - b.drpD
|
||
}
|
||
const cols = [changeColumns[0]];
|
||
changeColumns.forEach((item, i) => {
|
||
if (i > 0) {
|
||
if (i < 17) {
|
||
item.sorter = (a, b) => a[`drpH${i + 8}`] - b[`drpH${i + 8}`]
|
||
} else {
|
||
item.sorter = (a, b) => a[`drpH${i - 16}`] - b[`drpH${i - 16}`]
|
||
}
|
||
cols.push({
|
||
...item,
|
||
key: item.key.replace('rz', 'drp'),
|
||
dataIndex: item.dataIndex.replace('rz', 'drp'),
|
||
})
|
||
}
|
||
})
|
||
return searchVal.type == 1 ? cols : timeColumns
|
||
}, [searchVal])
|
||
|
||
const width = useMemo(() => {
|
||
let columns = searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns;
|
||
return columns.reduce((total, cur) => total + (cur.width), 0)
|
||
}, [searchVal]);
|
||
|
||
const [staData, setStaData] = useState({})
|
||
const [data, setData] = useState([])
|
||
|
||
const getData = async (params) => {
|
||
try {
|
||
const res = await httppost2(requsetUrlObjRef.current?.page, params)
|
||
if (res.code == 200) {
|
||
setData(res.data)
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
|
||
}
|
||
}
|
||
|
||
|
||
// 年报表总结栏
|
||
const getStaData = async (params) => {
|
||
let obj = {};
|
||
try {
|
||
const res = await httppost2(requsetUrlObjRef.current?.yearSummary, params)
|
||
if (res.code == 200) {
|
||
res.data.list?.forEach(item => {
|
||
if (!obj[item.date]) {
|
||
let arr = Object.keys(item)
|
||
params.type == 1 ? arr.splice(0, 1) : arr.splice(0, 2)
|
||
obj[item.date] = arr.map(o => ({ [o]: item[o] }))
|
||
}
|
||
})
|
||
setStaData({ ...res.data, list: obj })
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
// 导出
|
||
const exportExcel = () => {
|
||
let params = {
|
||
...searchVal,
|
||
}
|
||
const fileName =
|
||
(searchVal?.type1 == 0 ?
|
||
`${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` :
|
||
searchVal?.type1 == 1 ?formatDate(searchVal.year):
|
||
formatDate(searchVal.yearMonth)) + projectType[searchVal.type] + bbType[searchVal.type1]
|
||
httppost5(requsetUrlObjRef.current?.export, params).then(res => {
|
||
exportFile(`${fileName}.xlsx`, res.data)
|
||
})
|
||
}
|
||
|
||
const getUrl = (name, type) => {
|
||
let urlObj;
|
||
let obj = {
|
||
page: type == 0 ? apiurl.gcyx.tjbb.swrbb : apiurl.gcyx.tjbb.swnbb,
|
||
export: type == 0 ? apiurl.gcyx.tjbb.swrbbExport : type == 1 ?apiurl.gcyx.tjbb.swnbbExport: apiurl.gcyx.tjbb.swybbExport,
|
||
yearSummary: type == 1 ? apiurl.gcyx.tjbb.swnbbSummary : ''
|
||
}
|
||
switch (name) {
|
||
case 0:
|
||
urlObj = obj
|
||
break;
|
||
case 1:
|
||
urlObj = {
|
||
page: type == 0 ? apiurl.gcyx.tjbb.jyrbb : apiurl.gcyx.tjbb.jynbb,
|
||
export: type == 0 ? apiurl.gcyx.tjbb.jyrbbExport :type == 1 ? apiurl.gcyx.tjbb.jynbbExport: apiurl.gcyx.tjbb.swybbExport,
|
||
yearSummary: type == 1 ? apiurl.gcyx.tjbb.jynbbSummary : ''
|
||
}
|
||
break;
|
||
case 2:
|
||
urlObj = obj
|
||
break;
|
||
case 3:
|
||
urlObj = obj
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return urlObj
|
||
}
|
||
|
||
const [monthData, setMonthData] = useState([])
|
||
const getMonthData = async (params) => {
|
||
try {
|
||
const res = await httppost2(apiurl.gcyx.tjbb.swybb, params)
|
||
if (res.code == 200) {
|
||
const silceData = res.data.slice(-3)
|
||
setData(res.data.slice(0,-3))
|
||
setMonthData(silceData)
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
const formatDate = (date1) => {
|
||
const date = new Date(date1);
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth() + 1;
|
||
const day = date.getDate();
|
||
const res = searchVal.type1 == 0 ? year + '年' + month + '月' + day + '日' :
|
||
searchVal.type1 == 1 ? year + '年' :
|
||
year + '年' + month + '月'
|
||
return res;
|
||
}
|
||
|
||
useEffect(() => {
|
||
setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
|
||
requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
|
||
if (searchVal && searchVal.type1 != 1 && searchVal.type1 != 2) {
|
||
const params = { ...searchVal }
|
||
|
||
getData(params)
|
||
}
|
||
if (searchVal.type1 == 1) {
|
||
getStaData(searchVal)
|
||
}
|
||
|
||
if (searchVal.type1 == 2) {
|
||
getMonthData(searchVal)
|
||
}
|
||
|
||
}, [searchVal])
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className='content-root clearFloat xybm' style={{ 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?.type1 == 0 ?
|
||
`${formatDate(searchVal?.dateRangeSo?.start)} - ${formatDate(searchVal?.dateRangeSo?.end)}` :
|
||
searchVal?.type1 == 1 ?
|
||
formatDate(searchVal.year):formatDate(searchVal.yearMonth)
|
||
}
|
||
{projectType[searchVal.type]}{bbType[searchVal.type1]}</h2>
|
||
<div style={{ textAlign: "right" }}>单位：{searchVal?.type != 1 ? 'm' : 'mm'}</div>
|
||
</>
|
||
)}
|
||
columns={searchVal.type1 == 0 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : dayColumns}
|
||
rowKey="date"
|
||
dataSource={data}
|
||
pagination={false}
|
||
scroll={{ x: width, y: "calc( 100vh - 650px )" }}
|
||
summary={(pageData) => {
|
||
return (
|
||
searchVal.type1 == 1 ?
|
||
searchVal.type != 1 ?
|
||
<Table.Summary fixed>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={100} align='center' className="xyt-custom-cell">
|
||
<div className='table-summary-ceil'>
|
||
<div className='summary-left'></div>
|
||
<div className='summary-right'>平均</div>
|
||
</div>
|
||
</Table.Summary.Cell>
|
||
{staData?.list?.["平均"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={121} align='center' className="xyt-custom-cell">
|
||
<div className='table-summary-ceil'>
|
||
<div className='summary-left'></div>
|
||
<div className='summary-right'>最高</div>
|
||
</div>
|
||
</Table.Summary.Cell>
|
||
{staData?.list?.["最高"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={46} align='center' className="xyt-custom-cell">
|
||
<div className='table-summary-ceil'>
|
||
<div className='summary-left'>月统计</div>
|
||
<div className='summary-right'>最高日期</div>
|
||
</div>
|
||
</Table.Summary.Cell>
|
||
{staData?.list?.["最高日期"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={156} align='center' className="xyt-custom-cell">
|
||
<div className='table-summary-ceil'>
|
||
<div className='summary-left'></div>
|
||
<div className='summary-right'>最低</div>
|
||
</div>
|
||
</Table.Summary.Cell>
|
||
{staData?.list?.["最低"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={155} align='center' className="xyt-custom-cell" >
|
||
<div className='table-summary-ceil'>
|
||
<div className='summary-left'></div>
|
||
<div className='summary-right'>最低日期</div>
|
||
</div>
|
||
</Table.Summary.Cell>
|
||
{staData?.list?.["最低日期"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={200} align='center' >年统计</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={1} align='center' >最高水位</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={2} align='center' colSpan={3}>{staData?.max}</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={3} align='center'>最低水位</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.min}</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={3} align='center'>平均水位</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.avg}</Table.Summary.Cell>
|
||
</Table.Summary.Row>
|
||
</Table.Summary> :
|
||
<Table.Summary fixed>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={100} align='center' >月降雨量</Table.Summary.Cell>
|
||
{staData?.list?.["月降雨量"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={21} align='center' >降雨日数</Table.Summary.Cell>
|
||
{staData?.list?.["降雨日数"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={22} align='center' >最大日量</Table.Summary.Cell>
|
||
{staData?.list?.["最大日量"]?.map((item, index) => (
|
||
<Table.Summary.Cell index={index + 1} align='center'>{item[`drpM${index + 1}`]}</Table.Summary.Cell>
|
||
)
|
||
)}
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={12} align='center' >年统计</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={1} align='center' colSpan={3}>降水量</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={2} align='center' colSpan={3}>{staData?.drpSum}</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={3} align='center' colSpan={3}>降雨日数</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={4} align='center' colSpan={3}>{staData?.dayCount}</Table.Summary.Cell>
|
||
</Table.Summary.Row>
|
||
</Table.Summary>
|
||
:
|
||
searchVal.type1 == 2 ?<Table.Summary fixed>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={12} align='center' >月平均</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={12} align='center' >{monthData[0]?.data}</Table.Summary.Cell>
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={12} align='center' >月最大</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={12} align='center' >{monthData[1]?.data}</Table.Summary.Cell>
|
||
</Table.Summary.Row>
|
||
<Table.Summary.Row>
|
||
<Table.Summary.Cell index={12} align='center' >月最小</Table.Summary.Cell>
|
||
<Table.Summary.Cell index={12} align='center' >{monthData[2]?.data}</Table.Summary.Cell>
|
||
</Table.Summary.Row>
|
||
</Table.Summary>:null
|
||
)
|
||
}}
|
||
/>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page;
|