75 lines
2.9 KiB
JavaScript
75 lines
2.9 KiB
JavaScript
import React,{useState,useEffect, useMemo} from 'react'
|
|
import {Table} from 'antd';
|
|
import ReactEcharts from 'echarts-for-react';
|
|
import {queryStPptnDetails} from '../../../../service/ssyq'
|
|
import { httppost2 } from '../../../../utils/request'
|
|
import apiurl from '../../../../service/apiurl'
|
|
import moment from 'moment';
|
|
import Toolbar from './toolbar'
|
|
import drpOption from './drpOption';
|
|
|
|
export default function Sjcx({ data }) {
|
|
const stcd = data?.stcd||''
|
|
const [tms, setTms] = useState([moment().add(-1,'months'),moment()])
|
|
const [list, setList] = useState([])
|
|
const option = useMemo(() => drpOption(list,data), [list])
|
|
const columns = [
|
|
{ title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'120px',render: (rec) => <span>{rec.slice(5,16) ?? "-"}</span> },
|
|
{ title: '水位(m)', key: 'waterLevel', dataIndex: 'waterLevel', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
|
{ title: '库容(万m³)', key: 'boxNum', dataIndex: 'boxNum', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
|
{ title: '溢洪流量(m³/s)', key: 'flowNum', dataIndex: 'flowNum', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
|
{ title: '累计溢洪量(万m³)', key: 'qtotal', dataIndex: 'qtotal', align: 'center',render: (rec) => <span>{ rec ?? "-"}</span> },
|
|
];
|
|
|
|
|
|
|
|
|
|
useEffect(()=>{
|
|
if(stcd){
|
|
getList(stcd,tms)
|
|
}
|
|
},[stcd,tms])
|
|
|
|
const getList = async (stcd,tms)=>{
|
|
const pam = {
|
|
dateSo:{
|
|
start:moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),
|
|
end:moment(tms[1]).format('YYYY-MM-DD HH:mm:ss'),
|
|
},
|
|
stcd
|
|
}
|
|
const { code, data } = await httppost2(apiurl.home.yihongList,pam)
|
|
if(code!==200){
|
|
return
|
|
}
|
|
setList(data)
|
|
}
|
|
|
|
return (
|
|
<div className='qth_skyh_sjcx'>
|
|
<div className='qth_skyh_sjcx_top'>
|
|
<Toolbar search={(tm)=>{setTms([...tm])}}/>
|
|
</div>
|
|
<div className='qth_skyh_sjcx_center'>
|
|
<div className='qth_skyh_sjcx_center_left'>
|
|
<Table
|
|
owKey="tm"
|
|
sticky
|
|
columns={columns}
|
|
pagination={false}
|
|
dataSource={list}
|
|
scroll={{ y: "650px"}}
|
|
/>
|
|
</div>
|
|
<div className='qth_skyh_sjcx_center_right'>
|
|
{
|
|
list.length>0?
|
|
<ReactEcharts option={option} style={{width: "100%", height: '750px'}}/>
|
|
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|