107 lines
4.5 KiB
JavaScript
107 lines
4.5 KiB
JavaScript
import React, {useEffect, useMemo, useState} from 'react';
|
||
import {Form, Input, DatePicker, Popover, Button, message, Table} from 'antd';
|
||
import {useDispatch, useSelector} from "react-redux";
|
||
import moment from 'moment';
|
||
import SetDrpStation from '../setMapStation/drp.js'
|
||
|
||
const { RangePicker } = DatePicker
|
||
|
||
|
||
const cysd = [
|
||
{ label:'昨天08:00~当前时间',tms:[moment().add(-1,'days').format('YYYY-MM-DD 08:00:00'),moment().format('YYYY-MM-DD HH:mm:ss')]},
|
||
{ label:'今天08:00~当前时间',tms:[moment().format('YYYY-MM-DD 08:00:00'),moment().format('YYYY-MM-DD HH:mm:ss')]},
|
||
{ label:'昨天08:00~今天08:00',tms:[moment().add(-1,'days').format('YYYY-MM-DD 08:00:00'),moment().format('YYYY-MM-DD 08:00:00')]},
|
||
{ label:'最近1小时',tms:[moment().add(-1,'hours').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
|
||
{ label:'最近3小时',tms:[moment().add(-3,'hours').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
|
||
{ label:'最近6小时',tms:[moment().add(-6,'hours').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
|
||
{ label:'最近12小时',tms:[moment().add(-12,'hours').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
|
||
{ label:'最近24小时',tms:[moment().add(-24,'hours').format('YYYY-MM-DD HH:mm:ss'),moment().format('YYYY-MM-DD HH:mm:ss')]},
|
||
]
|
||
|
||
const Page = ({showPanels,setTms2}) => {
|
||
const dispatch = useDispatch();
|
||
const [tms, setTms] = useState([moment(moment().add(-1,'days').format('YYYY-MM-DD 08:00')),moment(moment().format('YYYY-MM-DD 08:00'))])
|
||
const tmsStr = useMemo(()=>[moment(tms[0]).format('YYYY-MM-DD HH:mm:ss'),moment(tms[1]).format('YYYY-MM-DD HH:mm:ss')],[tms])
|
||
const [ tableData, setTableData ] = useState([])
|
||
const [open, setOpen] = useState(false)
|
||
|
||
const columns = [
|
||
{ title: '站名', key: 'stnm', dataIndex: 'stnm',align: "center", ellipsis: true },
|
||
{ title: '时段雨量（mm）', key: 'drp', dataIndex: 'drp',align: "center", render:(v)=>v===null?'-':v },
|
||
];
|
||
|
||
const getData = (label,tms)=>{
|
||
if(label==='今天08:00~当前时间'&& moment().format('HH')<8){
|
||
return message.error('请在08:00后选择')
|
||
}
|
||
setTms([moment(tms[0]),moment(tms[1])])
|
||
}
|
||
|
||
useEffect(()=>{
|
||
setTms2(tms)
|
||
},[tms])
|
||
|
||
|
||
return (
|
||
<div className='fxdd_fhxs_jyxx'>
|
||
<Form
|
||
className='toolbarBox'
|
||
>
|
||
<Form.Item label='时段选择' name='tm' style={{ margin: '0 0 8px 5px' }}>
|
||
<RangePicker
|
||
showTime
|
||
allowClear={false}
|
||
style={{ width: '340px' }}
|
||
onChange={(v)=>setTms(v)}
|
||
value={tms}
|
||
format='YYYY-MM-DD HH:mm'
|
||
/>
|
||
<Popover content={
|
||
cysd.map((item)=>
|
||
<div style={{padding:'5px',cursor:'pointer'}} onClick={()=>{
|
||
getData(item.label,item.tms)
|
||
setOpen(false)
|
||
}}>
|
||
{item.label}
|
||
</div>
|
||
)
|
||
} placement="bottom" trigger="focus" open={open}>
|
||
<img onClick={()=>setOpen(!open)} width={25} src={`${process.env.PUBLIC_URL}/assets/xyt/fxdd/changyong.png`} alt="" style={{marginLeft:'10px',cursor:'pointer'}}/>
|
||
</Popover>
|
||
</Form.Item>
|
||
</Form>
|
||
<div className="ant-card-body" style={{padding:"10px"}}>
|
||
<Table rowKey="adcd"
|
||
sticky
|
||
columns={columns}
|
||
pagination={false}
|
||
dataSource={tableData}
|
||
scroll={{ y: "300px"}}
|
||
onRow={
|
||
(data)=>({
|
||
onClick:()=>{
|
||
// dispatch.map.setLayerVisible({"HdswLayer":true});
|
||
dispatch.runtime.setFeaturePop({
|
||
id: data.stcd,
|
||
data: {
|
||
...data,
|
||
myParams: tms,
|
||
stm: tms[0] ? moment(tms[0]).format("YYYY-MM-DD HH:mm") : '',
|
||
etm: tms[1] ? moment(tms[1]).format("YYYY-MM-DD HH:mm") : '',
|
||
},
|
||
type: 'drp',
|
||
lgtd: data.lgtd,
|
||
lttd: data.lttd,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
<SetDrpStation tms={tmsStr} setTableData={setTableData}/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Page;
|