339 lines
11 KiB
JavaScript
339 lines
11 KiB
JavaScript
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
||
import { Table, Card,Modal,Form,Input,Button,Row,Col,message } from 'antd';
|
||
import ToolBar from './toolbar';
|
||
import { useSelector } from 'react-redux';
|
||
import TjToolBar from './toolbar1';
|
||
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';
|
||
import ReactEcharts from 'echarts-for-react';
|
||
import gsOption from './gsOption';
|
||
import tjOption from './tjOption';
|
||
import "./index.less"
|
||
const Page = () => {
|
||
const role = useSelector(state => state.auth.role);
|
||
const columns = [
|
||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||
{ title: '时间', key: 'tm', dataIndex: 'tm', width: 200, ellipsis: true, align:"center" },
|
||
{
|
||
title: '发电灌溉',
|
||
align: "center",
|
||
children: [
|
||
{
|
||
title: '流量(m³/s)',
|
||
key: "ecologyQ",
|
||
dataIndex:"ecologyQ",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: '水量(万m³)',
|
||
key: "ecologyV",
|
||
dataIndex:"ecologyV",
|
||
align: "center",
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '水厂取水',
|
||
align: "center",
|
||
children: [
|
||
{
|
||
title: '流量(m³/s)',
|
||
key: "lifeQ",
|
||
dataIndex:"lifeQ",
|
||
align: "center",
|
||
},
|
||
{
|
||
title: '水量(万m³)',
|
||
key: "lifeV",
|
||
dataIndex:"lifeV",
|
||
align: "center",
|
||
}
|
||
]},
|
||
{
|
||
title: '小计(万m³)', key: 'sumV', dataIndex: 'sumV',ellipsis: true, align: "center",
|
||
render: (rec, record) => <span style={{color:"#ffa171"}}>{rec}</span>
|
||
},
|
||
];
|
||
|
||
const tjColumns = [
|
||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||
{ title: '时间', key: 'tm', dataIndex: 'tm', width: 100, ellipsis: true, align:"center" },
|
||
{
|
||
title: '发电灌溉',
|
||
align: "center",
|
||
children: [
|
||
{
|
||
title: '年度占比',
|
||
key: "ecologyYearRateV",
|
||
dataIndex:"ecologyYearRateV",
|
||
align: "center",
|
||
},
|
||
|
||
{
|
||
title: '水量(万m³)',
|
||
key: "ecologyV",
|
||
dataIndex:"ecologyV",
|
||
align: "center",
|
||
width:100
|
||
},
|
||
{
|
||
title: '同比',
|
||
key: "ecologyYoyV",
|
||
dataIndex:"ecologyYoyV",
|
||
align: "center",
|
||
render: (rec, record) => <span style={{
|
||
color: rec.includes("↑") ? "#38fb45" :
|
||
rec.includes("↓") ? "#e4766b" : "#000"
|
||
|
||
}}>{rec}</span>
|
||
},
|
||
{
|
||
title: '环比',
|
||
key: "ecologyQoqV",
|
||
dataIndex:"ecologyQoqV",
|
||
align: "center",
|
||
render: (rec, record) => <span style={{
|
||
color: rec.includes("↑") ? "#38fb45" :
|
||
rec.includes("↓") ? "#e4766b" : "#000"
|
||
|
||
}}>{rec}</span>
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '水厂取水',
|
||
align: "center",
|
||
children: [
|
||
{
|
||
title: '年度占比',
|
||
key: "lifeYearRateV",
|
||
dataIndex:"lifeYearRateV",
|
||
align: "center",
|
||
},
|
||
|
||
{
|
||
title: '水量(万m³)',
|
||
key: "lifeV",
|
||
dataIndex:"lifeV",
|
||
align: "center",
|
||
width: 100,
|
||
|
||
},
|
||
{
|
||
title: '同比',
|
||
key: "lifeYoyV",
|
||
dataIndex:"lifeYoyV",
|
||
align: "center",
|
||
render: (rec, record) => <span style={{
|
||
color: rec.includes("↑") ? "#38fb45" :
|
||
rec.includes("↓") ? "#e4766b" : "#000"
|
||
|
||
}}>{rec}</span>
|
||
},
|
||
{
|
||
title: '环比',
|
||
key: "lifeQoqV",
|
||
dataIndex:"lifeQoqV",
|
||
align: "center",
|
||
render: (rec, record) => <span style={{
|
||
color: rec.includes("↑") ? "#38fb45" :
|
||
rec.includes("↓") ? "#e4766b" : "#000"
|
||
|
||
}}>{rec}</span>
|
||
}
|
||
]},
|
||
];
|
||
const [searchVal, setSearchVal] = useState(false)
|
||
const [tjSearchVal, setTjSearchVal] = useState()
|
||
const [mode, setMode] = useState('')
|
||
const [krlist, setkrList] = useState([]) //供水图表数据
|
||
const [tjlist, setTjList] = useState([]) //统计分析表格和图表数据
|
||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.gstjfx.gspage).find_noCode);
|
||
|
||
const exportExcel = () => {
|
||
let pageSo = {
|
||
pageNumber: tableProps.pagination.current,
|
||
pageSize:tableProps.pagination.pageSize
|
||
}
|
||
let params = {
|
||
...searchVal,
|
||
searchType:mode,
|
||
pageSo
|
||
}
|
||
httppost5(apiurl.gsxl.gstjfx.gsexport, params).then(res => {
|
||
exportFile(`供水水方统计表.xlsx`,res.data)
|
||
})
|
||
}
|
||
|
||
const tjExportExcel = () => {
|
||
httppost5(`${apiurl.gsxl.gstjfx.tjexport}?year=${tjSearchVal.year}`).then(res => {
|
||
exportFile(`统计分析表.xlsx`,res.data)
|
||
})
|
||
}
|
||
const getGsChartData = async (parmas) => {
|
||
try {
|
||
const res =await httppost2(apiurl.gsxl.gstjfx.gschartList, parmas)
|
||
setkrList(res.data)
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
const getTjData = async (parmas) => {
|
||
try {
|
||
const res = await httppost2(`${apiurl.gsxl.gstjfx.tjlist}?year=${parmas.year}`)
|
||
setTjList(res.data.map((item,i) => ({...item,inx:i + 1})))
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
const gsoptions = useMemo(() => {
|
||
if (krlist.length > 0) {
|
||
return gsOption(krlist)
|
||
} else {
|
||
return []
|
||
}
|
||
}, [krlist])
|
||
const sumObj = useMemo(() => {
|
||
let obj = {};
|
||
if (tableProps.dataSource.length > 0) {
|
||
obj.stgs = tableProps.dataSource.reduce((total, cur) => (cur.ecologyV) + total, 0)
|
||
obj.shgs = tableProps.dataSource.reduce((total, cur) => (cur.lifeV) + total, 0)
|
||
obj.zj = tableProps.dataSource.reduce((total, cur) => (cur.sumV) + total, 0)
|
||
return obj
|
||
} else {
|
||
return "1"
|
||
}
|
||
}, [tableProps])
|
||
|
||
// 统计饼形图
|
||
const tjOptions = useMemo(() => {
|
||
let obj = {};
|
||
if (tjlist.length > 0) {
|
||
obj.stgs = tjlist.reduce((total, cur) => Number((cur.ecologyV)) + total, 0)
|
||
obj.shgs = tjlist.reduce((total, cur) => Number((cur.lifeV)) + total, 0)
|
||
obj.zj = obj.stgs + obj.shgs
|
||
return tjOption(obj)
|
||
} else {
|
||
return ""
|
||
}
|
||
}, [tjlist])
|
||
useEffect(() => {
|
||
const params = {
|
||
search: {
|
||
...searchVal,
|
||
searchType: mode,
|
||
isAsc: false,
|
||
orderField:"tm"
|
||
}
|
||
};
|
||
search(params)
|
||
getGsChartData({...params?.search, isAsc: true, })
|
||
}, [searchVal, mode])
|
||
|
||
useEffect(() => {
|
||
if (tjSearchVal) {
|
||
getTjData(tjSearchVal)
|
||
}
|
||
}, [tjSearchVal])
|
||
|
||
return (
|
||
<>
|
||
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
|
||
<div className='gsTitle' style={{display:"flex",alignItems:"center",columnGap:15,marginBottom:20}}>
|
||
<img
|
||
alt=''
|
||
src={`${process.env.PUBLIC_URL}/assets/gs.png`}
|
||
style={{width:30}}
|
||
/>
|
||
<span style={{fontSize:18}}>供水水方</span>
|
||
</div>
|
||
<ToolBar
|
||
setSearchVal={setSearchVal}
|
||
exportFile={exportExcel}
|
||
setMode={(e)=>setMode(String(e))}
|
||
role={role}
|
||
/>
|
||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||
<div className='gs-content' style={{display:"flex",columnGap:30}}>
|
||
<div style={{width:800}}>
|
||
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ y: "calc( 100vh - 400px )"}}/>
|
||
</div>
|
||
<div style={{flex:1}}>
|
||
<div style={{color:"#ffa87c",display:"flex",columnGap:20}}>
|
||
<div className='des-title'>
|
||
<div>发电灌溉总合计(万m³)：</div>
|
||
<div style={{margin:"10px 0"}}>水厂取水总合计(万m³)：</div>
|
||
<div>供水总合计(万m³)：</div>
|
||
</div>
|
||
<div className='des-title'>
|
||
<div>{sumObj?.stgs?.toFixed(2)}</div>
|
||
<div style={{margin:"10px 0"}}>{sumObj?.shgs?.toFixed(2)}</div>
|
||
<div>{sumObj?.zj?.toFixed(2)}</div>
|
||
</div>
|
||
</div>
|
||
<div className='gs-charts'>
|
||
{
|
||
krlist.length > 0 ?
|
||
<ReactEcharts
|
||
option={gsoptions}
|
||
style={{width: "100%", height: 360}}
|
||
notMerge={true}
|
||
/> : <div style={{textAlign: "center", margin: "10%"}}>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div className='tj-box' style={{ marginTop: 20 }}>
|
||
<div className='tj-title' style={{display:"flex",alignItems:"center",columnGap:15,marginBottom:20}}>
|
||
<img
|
||
alt=''
|
||
src={`${process.env.PUBLIC_URL}/assets/tj.png`}
|
||
style={{width:30}}
|
||
/>
|
||
<span style={{fontSize:18}}>统计分析</span>
|
||
</div>
|
||
<TjToolBar
|
||
setSearchVal={setTjSearchVal}
|
||
exportFile={tjExportExcel}
|
||
role={role}
|
||
/>
|
||
<div className='gs-content' style={{ display: "flex", columnGap: 30, margin: "10px 0" }}>
|
||
<div style={{width:800}}>
|
||
<Table
|
||
columns={tjColumns}
|
||
rowKey="inx"
|
||
dataSource={tjlist}
|
||
pagination={false}
|
||
scroll={{ y: "calc( 100vh - 400px )" }} />
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
{
|
||
tjlist.length > 0 ?
|
||
<ReactEcharts
|
||
option={tjOptions}
|
||
style={{width: "100%", height: 460}}
|
||
notMerge={true}
|
||
/> : <div style={{textAlign: "center", margin: "10%"}}>
|
||
<img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default Page;
|