feat(): 统计报表开发
parent
63b98c549c
commit
499b122591
|
|
@ -110,6 +110,18 @@ const apiurl = {
|
|||
sbgzjl: {
|
||||
page: service_ykz + '/deviceFailureRecord/page',
|
||||
export:service_ykz + '/deviceFailureRecord/export'
|
||||
},
|
||||
tjbb: {
|
||||
swrbb: service_ykz + '/statistics/sdSwRb',//水位日报表
|
||||
swrbbExport: service_ykz + "/statistics/sdSwRb/export",//水位日报表导出
|
||||
swnbb: service_ykz + '/statistics/rjswNb',//水位年报表上方表格
|
||||
swnbbSummary:service_ykz + '/statistics/rjswNb/stat',//水位年报表下方总结栏
|
||||
swnbbExport: service_ykz + '/statistics/rjswNb/export',//水位年报表导出
|
||||
jyrbb: service_ykz + '/statistics/sdJyRb',//降雨日报表
|
||||
jyrbbExport: service_ykz + '/statistics/sdJyRb/export',//降雨日报表导出
|
||||
jynbb: service_ykz + '/statistics/rjyNb',//降雨年报表上方表格
|
||||
jynbbExport:service_ykz + '/statistics/rjyNb/export',//降雨年报表下方总结栏
|
||||
jynbbSummary: service_ykz + '/statistics/rjyNb/stat',//降雨年报表导出
|
||||
}
|
||||
},
|
||||
systemM: {
|
||||
|
|
|
|||
|
|
@ -1,87 +1,163 @@
|
|||
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 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 { httppost5, httppost2 } 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 [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: `drpH${index+9}`,
|
||||
dataIndex: `drpH${index+9}`,
|
||||
...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[`drpH${index+9}`] - b[`drpH${index+9}`]
|
||||
sorter: (a, b) => a[`rzH${index + 9}`] - b[`rzH${index + 9}`]
|
||||
})),
|
||||
...Array(8).fill(0).map((item,index) => ({
|
||||
title: `${index+1}时`,
|
||||
key: `drpH${index+1}`,
|
||||
dataIndex: `drpH${index+1}`,
|
||||
...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[`drpH${index+1}`] - b[`drpH${index+1}`]
|
||||
sorter: (a, b) => a[`rzH${index + 1}`] - b[`rzH${index + 1}`]
|
||||
})),
|
||||
{ title: '日累计', key: 'drpD', dataIndex: 'drpD', width: 100, align: "center",sorter: (a, b) => a.drpD - b.drpD, },
|
||||
|
||||
{ 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", fixed: "left" },
|
||||
...Array(30).fill(0).map((item,index) => ({
|
||||
title: `${index+1}天`,
|
||||
key: `drpM${index+1}`,
|
||||
dataIndex: `drpM${index+1}`,
|
||||
...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}`,
|
||||
...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)
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
useEffect(()=>{
|
||||
const params = {
|
||||
search: {
|
||||
...searchVal,
|
||||
const cols = [changeColumns[0]];
|
||||
changeColumns.forEach((item, i) => {
|
||||
if (i > 0) {
|
||||
if (i < 16) {
|
||||
item.sorter = (a,b) => a[`drpH${i + 9}`] - b[`drpH${i + 9}`]
|
||||
} else {
|
||||
item.sorter = (a,b) => a[`drpH${i + 1}`] - b[`drpH${i + 1}`]
|
||||
}
|
||||
cols.push({
|
||||
...item,
|
||||
key: item.key.replace('rz', 'drp'),
|
||||
dataIndex: item.dataIndex.replace('rz', 'drp'),
|
||||
})
|
||||
}
|
||||
};
|
||||
search(params)
|
||||
})
|
||||
return searchVal.type == 1 ? cols :timeColumns
|
||||
}, [searchVal])
|
||||
|
||||
|
||||
|
||||
// const newYearColumns = useMemo(() => {
|
||||
// return searchVal.type == 1 ? yearColumns.map(item => ({ ...item, key: item.key.replace('rz', 'drp'), dataIndex: item.dataIndex.replace('rz', 'drp') })) : yearColumns
|
||||
// }, [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 [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 exportExcel = () => {
|
||||
let params = {
|
||||
...searchVal,
|
||||
}
|
||||
httppost5(requsetUrlObjRef.current?.export, params).then(res => {
|
||||
exportFile(`统计报表.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 : apiurl.gcyx.tjbb.swnbbExport
|
||||
}
|
||||
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 : apiurl.gcyx.tjbb.jynbbExport
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
urlObj = obj
|
||||
break;
|
||||
case 3:
|
||||
urlObj = obj
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return urlObj
|
||||
}
|
||||
useEffect(() => {
|
||||
if (searchVal) {
|
||||
// const params = searchVal.type != 1 ? searchVal : { start: searchVal.dateRangeSo.start, end: searchVal.dateRangeSo.end };
|
||||
const params = { ...searchVal }
|
||||
setRequsetUrlObj(getUrl(searchVal.type, searchVal.type1))
|
||||
requsetUrlObjRef.current = getUrl(searchVal.type, searchVal.type1)
|
||||
getData(params)
|
||||
}
|
||||
}, [searchVal])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
|
||||
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
|
||||
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
|
||||
<Card className='nonebox'>
|
||||
<ToolBar
|
||||
setSearchVal={setSearchVal}
|
||||
|
|
@ -96,9 +172,10 @@ const Page = () => {
|
|||
<div style={{ textAlign: "right" }}>单位：m³/s</div>
|
||||
</>
|
||||
)}
|
||||
columns={searchVal.type1 == 0 ? timeColumns : searchVal.type1 == 1 ? dayColumns :yearColumns}
|
||||
rowKey="inx"
|
||||
{...tableProps}
|
||||
columns={searchVal.type1 == 0 ? newTimeColumns : searchVal.type1 == 1 ? yearColumns : yearColumns}
|
||||
rowKey="date"
|
||||
dataSource={data}
|
||||
pagination={false}
|
||||
scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import NormalSelect from '../../../../components/Form/NormalSelect';
|
|||
import moment from 'moment';
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
||||
|
||||
const start = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
|
||||
const end = moment().format('YYYY-MM-DD 23:59:59')
|
||||
const types = [
|
||||
{
|
||||
label: "闸后流量",
|
||||
|
|
@ -30,13 +31,13 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
|||
label: "日报表",
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: "月报表",
|
||||
value: 1
|
||||
},
|
||||
// {
|
||||
// label: "月报表",
|
||||
// value: 1
|
||||
// },
|
||||
{
|
||||
label: "年报表",
|
||||
value: 2
|
||||
value: 1
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -44,28 +45,35 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
|||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = (values) => {
|
||||
let dateSo;
|
||||
let dateRangeSo;
|
||||
if (values.tm) {
|
||||
dateSo = {
|
||||
dateRangeSo = timeType == 0 ? {
|
||||
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
|
||||
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
} : {year: moment(values.tm).format('YYYY')}
|
||||
}
|
||||
delete values.tm
|
||||
setSearchVal({...values, dateSo});
|
||||
const params = timeType == 0 ? dateRangeSo : undefined;
|
||||
setSearchVal({
|
||||
...values,
|
||||
dateRangeSo: params,
|
||||
year: timeType == 1 ? dateRangeSo.year : undefined
|
||||
});
|
||||
}
|
||||
|
||||
const onValuesChange = (val) => {
|
||||
if ('type1' in val) {
|
||||
setTimeType(val.type1)
|
||||
val.type1 == 1 ? form.setFieldValue('tm', moment()) :
|
||||
form.setFieldValue('tm',[moment(start),moment(end)])
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
form.setFieldValue('type1', 0)
|
||||
setSearchVal({type1:0})
|
||||
form.setFieldValue('tm',[moment(start),moment(end)])
|
||||
form.setFieldValue('type1', 0)
|
||||
form.setFieldValue('type', 0)
|
||||
setSearchVal({type1:0,type:0,dateRangeSo:{start:start,end:end}})
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -77,7 +85,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
|||
onFinish={onFinish}
|
||||
onValuesChange={onValuesChange}
|
||||
>
|
||||
<Form.Item label="统计项目" name="name">
|
||||
<Form.Item label="统计项目" name="type">
|
||||
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||
</Form.Item>
|
||||
<Form.Item label="统计维度" name="type1">
|
||||
|
|
@ -93,7 +101,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
|
|||
<DatePicker
|
||||
allowClear
|
||||
style={{ width: "150px" }}
|
||||
picker="month"/> :
|
||||
picker="year"/> :
|
||||
<DatePicker
|
||||
allowClear
|
||||
style={{ width: "150px" }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue