101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
|
|
import React, { useEffect, useState } from 'react'
|
|
import { Collapse, DatePicker } from 'antd';
|
|
import {useDispatch, useSelector} from "react-redux";
|
|
import Jyxx from './jyxx'
|
|
import Sksw from './sksw'
|
|
import TuLi from '../TuLi/Tuli.js';
|
|
import moment from 'moment';
|
|
import { SkRealPromiseWX } from "../../../models/_/real";
|
|
import './index.less'
|
|
const { Panel } = Collapse;
|
|
const { RangePicker } = DatePicker
|
|
|
|
const Page = ({showPanels}) => {
|
|
const dispatch = useDispatch();
|
|
let mapObj = useSelector(s => s.map.map)
|
|
const [tms, setTms] = useState([moment(moment().add(-1,'days').format('YYYY-MM-DD 08:00')),moment(moment().format('YYYY-MM-DD 08:00'))])
|
|
const [myKey, setMyKey] = useState('')
|
|
const [data,setData] = useState({})//水库
|
|
|
|
useEffect(()=>{
|
|
// dispatch.map.setLayerVisible({ ShuiKuLayer: true })
|
|
dispatch.map.setLayerVisible({ HdswLayer: true })
|
|
getData()
|
|
return ()=>{
|
|
dispatch.map.setLayerVisible({ ShuiKuLayer: false })
|
|
dispatch.map.setLayerVisible({ HdswLayer: false })
|
|
}
|
|
},[])
|
|
|
|
useEffect(()=>{
|
|
if(myKey==='2'){
|
|
dispatch.map.setLayerVisible({ ShuiKuLayer: true })
|
|
}else{
|
|
dispatch.map.setLayerVisible({ ShuiKuLayer: false })
|
|
}
|
|
},[myKey])
|
|
|
|
useEffect(()=>{
|
|
if(mapObj){
|
|
setMyKey('1')
|
|
}
|
|
},[mapObj])
|
|
const [skList, setSkList] = useState([])
|
|
const getData = async (params) => {
|
|
SkRealPromiseWX.get().then((res) => {
|
|
const list = res.map((i)=>{
|
|
return {
|
|
id : i.stcd,
|
|
name: i.stnm,
|
|
...i
|
|
}
|
|
})
|
|
setSkList(list)
|
|
const data = list[0]
|
|
setData(data)
|
|
});
|
|
}
|
|
|
|
const getShuiKu = (e)=>{
|
|
e.stopPropagation()
|
|
dispatch.runtime.setFeaturePop({
|
|
id: data.id,
|
|
type: 'shuiku',
|
|
data,
|
|
lgtd: data.lgtd,
|
|
lttd: data.lttd,
|
|
elev: data.elev,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className='fxdd_fhxs' style={{display:!showPanels?'none':'block'}}>
|
|
<div className='homePage_leftBox'>
|
|
<Collapse ghost onChange={(e)=>setMyKey(e)} defaultActiveKey={['1']} expandIconPosition="end" accordion={true} bordered={false}>
|
|
<Panel
|
|
key={'1'}
|
|
header={<div className='homePage_Panel'><img src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} alt=""/>降雨信息</div>}
|
|
>
|
|
{ myKey==='1'||myKey==='2'?<Jyxx setTms2={setTms}/>:null }
|
|
</Panel>
|
|
<Panel
|
|
key={'2'}
|
|
header={<div className='homePage_Panel'><img src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} alt=""/>水库水位
|
|
{/* {
|
|
data.resCode?<div onClick={getShuiKu} className='fxdd_fhxs_xq'>详情</div>:null
|
|
} */}
|
|
</div>}
|
|
>
|
|
{myKey === '2' ? <Sksw data={data} list={skList} />:null }
|
|
</Panel>
|
|
</Collapse>
|
|
</div>
|
|
<div style={{position:'absolute',left:'calc( 40% + 50px)',top:'10px'}} className='homePage_centerBox2'><RangePicker showTime value={tms} disabled/></div>
|
|
<div style={{position:'absolute',left:'20px',top:'calc( 100vh - 400px )'}}><TuLi/></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Page;
|