337 lines
11 KiB
JavaScript
337 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
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
search(params)
|
|||
|
|
getGsChartData(params?.search)
|
|||
|
|
}, [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;
|