78 lines
2.9 KiB
JavaScript
78 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), [list])
|
||
|
|
const columns = [
|
||
|
|
{ title: '时间', key: 'tm', dataIndex: 'tm', align: 'center',width:'120px',render: (rec) => <span>{rec.slice(5,16) ?? "-"}</span> },
|
||
|
|
{ title: '水位(m)', key: 'sw', dataIndex: 'sw', align: 'center',width:'80px',render: (rec) => <span>{rec ?? "-"}</span> },
|
||
|
|
{ title: '库容(万m³)', key: 'kr', dataIndex: 'kr', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||
|
|
{ title: '溢洪流量(m³/s)', key: 'll', dataIndex: 'll', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||
|
|
{ title: '累计溢洪量(万m³)', key: 'lj', dataIndex: 'lj', align: 'center',render: (rec) => <span>{rec ?? "-"}</span> },
|
||
|
|
];
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
useEffect(()=>{
|
||
|
|
getList(stcd,tms)
|
||
|
|
},[stcd,tms])
|
||
|
|
|
||
|
|
const getList = async (stcd,tms)=>{
|
||
|
|
const pam = {
|
||
|
|
stm:tms[0].format('YYYY-MM-DD HH:mm:ss'),
|
||
|
|
etm:tms[1].format('YYYY-MM-DD HH:mm:ss'),
|
||
|
|
stcd
|
||
|
|
}
|
||
|
|
// const res = await httppost2(apiurl)
|
||
|
|
const list = []
|
||
|
|
for (let i=0;i<10;i++){
|
||
|
|
list.push({
|
||
|
|
tm:'2023-02-07 12:'+(i+10)+':00',
|
||
|
|
sw:i+1+'.91',
|
||
|
|
kr:i+22+'.91',
|
||
|
|
ll:i+15+'.91',
|
||
|
|
lj:i+41+'.91',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
setList(list)
|
||
|
|
}
|
||
|
|
|
||
|
|
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="adcd"
|
||
|
|
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>
|
||
|
|
)
|
||
|
|
}
|