tsg-web/src/views/Home/fhxs/jyxx.js

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},
                            type: 'drp',
                            lgtd: data.lgtd,
                            lttd: data.lttd,
                        })
                        }
                    })
                }
            />
        </div>
        <SetDrpStation tms={tmsStr} setTableData={setTableData}/>
    </div>
  );
}

export default Page;