251 lines
12 KiB
JavaScript
251 lines
12 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { useLocation } from 'react-router'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { Collapse, DatePicker } from 'antd';
|
|
import './index.less'
|
|
import Yujing from './item_yujing/index.js'
|
|
import Yuqing from './item_yuqing'
|
|
import ShuiKu from './item_shuiku'
|
|
import TuRangShangQing from './item_turangshangqing'
|
|
import GongShui from './item_gongshui'
|
|
import GongCheng from './item_gongcheng'
|
|
import JianCe from './item_jiance'
|
|
import ShuiZhi from './item_shuizhi'
|
|
import ShiPinDian from './item_shipindian'
|
|
import XunChaXunJian from './item_xunchaxunjian'
|
|
|
|
import GCShuiKu from './item_gongchengshuiku'
|
|
import DaBa from './item_daba'
|
|
import YiHongDao from './item_yihongdao'
|
|
|
|
import WeiXianQx from './item_weixianqu'
|
|
import AnZhiDian from './item_anzhidian'
|
|
import QSYDW from './item_qishiyedanwei'
|
|
import YHJMH from './item_yanhejuminhu'
|
|
import SetWxqStation from '../setMapStation/wxq'
|
|
import Bzt from '../../gcaqjc/bzt2'
|
|
|
|
import Tuli from '../TuLi/Tuli.js'
|
|
import Tuli2 from '../TuLi/Tuli2.js';
|
|
import Tuli3 from '../TuLi/Tuli3.js'
|
|
import Tuli4 from '../TuLi/Tuli4.js'
|
|
import Tuli5 from '../TuLi/Tuli5.js'
|
|
|
|
|
|
|
|
import moment from 'moment';
|
|
|
|
const { Panel } = Collapse;
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const items = [
|
|
{ key:'1', label:'综合监视', children:[
|
|
{ key:'11', label:'预警', labelRight:'预警', icon:'yujing' },
|
|
{ key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' },
|
|
{ key:'13', label:'水库水情', labelRight:'实时水情', icon:'shuikushuiqing' },
|
|
{ key:'19', label:'土壤墒情', labelRight:'土壤墒情', icon:'turangshangqing' },
|
|
{ key:'15', label:'工程安全', labelRight:'工程安全监测', icon:'gongchenganquan' },
|
|
{ key:'16', label:'监测设备状态', labelRight:'监测设备运行', icon:'jianceshebeizhuangtai' },
|
|
// { key:'17', label:'水质', labelRight:'水质', icon:'shuizhi' },
|
|
{ key:'18', label:'视频点', labelRight:'视频点', icon:'shipindian' },
|
|
] },
|
|
{ key:'2', label:'巡查巡检', children:[
|
|
{ key:'21', label:'巡查巡检', labelRight:'工程巡检', icon:'jianceshebeizhuangtai' },
|
|
// { key:'22', label:'大坝', labelRight:'基本信息', icon:'daba' },
|
|
// { key:'23', label:'溢洪道', labelRight:'基本信息', icon:'yihongdao' },
|
|
] },
|
|
{ key:'3', label:'洪水防御', children:[
|
|
{ key:'31', label:'危险区', labelRight:'危险区列表', icon:'weixianqu' },
|
|
{ key:'32', label:'安置点', labelRight:'安置点列表', icon:'anzhidian' },
|
|
{ key:'33', label:'企事业单位', labelRight:'企事业单位列表', icon:'qishiyedanwei' },
|
|
{ key:'34', label:'沿河居民户', labelRight:'沿河居民户列表', icon:'yanhejuminhu' },
|
|
] },
|
|
{ key:'4', label:'水资源调度', children:[
|
|
{ key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' },
|
|
] },
|
|
{ key:'5', label:'水库工程', children:[
|
|
{ key:'51', label:'水库', labelRight:'基本信息', icon:'shuiku' },
|
|
{ key:'52', label:'大坝', labelRight:'基本信息', icon:'daba' },
|
|
{ key:'53', label:'溢洪道', labelRight:'基本信息', icon:'yihongdao' },
|
|
] },
|
|
|
|
]
|
|
|
|
const HomePage = ({showPanels}) => {
|
|
|
|
const dispatch = useDispatch();
|
|
const [ checkedObj, setCheckedObj ] = useState({})
|
|
const [ showTable, setShowTable ] = useState(false)
|
|
const [ tms , setTms ] = useState([
|
|
moment(moment().add(-1,'days').format('YYYY-MM-DD 08:00:00')),
|
|
moment(moment().format('YYYY-MM-DD 08:00:00')),
|
|
])
|
|
|
|
|
|
useEffect(()=>{
|
|
dispatch.runtime.closeFeaturePopAll()
|
|
if(checkedObj.label==='水库'||checkedObj.label==='大坝'||checkedObj.label==='溢洪道'||checkedObj.label==='视频点'){
|
|
dispatch.map.setLayerVisible({ PicStLayer: true })
|
|
}else{
|
|
dispatch.map.setLayerVisible({ PicStLayer: false })
|
|
}
|
|
|
|
if(checkedObj.label==='危险区'||checkedObj.label==='安置点'||checkedObj.label==='企事业单位'||checkedObj.label==='沿河居民户'){
|
|
dispatch.map.setLayerVisible({ AZDLayer: true })
|
|
dispatch.map.setLayerVisible({ QSYDWLayer: true })
|
|
dispatch.map.setLayerVisible({ YHJMHLayer: true })
|
|
}else{
|
|
dispatch.map.setLayerVisible({ AZDLayer: false })
|
|
dispatch.map.setLayerVisible({ QSYDWLayer: false })
|
|
dispatch.map.setLayerVisible({ YHJMHLayer: false })
|
|
}
|
|
|
|
return ()=>{
|
|
dispatch.runtime.closeFeaturePopAll()
|
|
dispatch.map.setLayerVisible({ PicStLayer: false })
|
|
dispatch.map.setLayerVisible({ AZDLayer: false })
|
|
dispatch.map.setLayerVisible({ QSYDWLayer: false })
|
|
dispatch.map.setLayerVisible({ YHJMHLayer: false })
|
|
}
|
|
},[checkedObj])
|
|
|
|
useEffect(()=>{
|
|
setCheckedObj({ key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' })
|
|
},[])
|
|
|
|
|
|
return (
|
|
<div className='homePage' style={{display:!showPanels?'none':'block'}}>
|
|
<div className='homePage_leftBox'>
|
|
<div className='homePage_head'>综合展示</div>
|
|
<Collapse ghost onChange={(a)=>{
|
|
dispatch.runtime.closeFeaturePopAll()
|
|
if(a===undefined){
|
|
setCheckedObj({ key:'12', label:'雨情', labelRight:'统计', icon:'yuqing' })
|
|
setShowTable(false)
|
|
}else if(a==='1'){
|
|
setShowTable(true)
|
|
dispatch.runtime.setHome()
|
|
setCheckedObj({ key:'11', label:'预警', labelRight:'预警', icon:'yujing' })
|
|
}else if(a==='2'){
|
|
setShowTable(true)
|
|
// dispatch.runtime.setHome()
|
|
setCheckedObj({ key:'21', label:'巡查巡检', labelRight:'工程巡检', icon:'shuiku' })
|
|
}else if(a==='3'){
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [114.75, 31.493],
|
|
zoom: 13.5,
|
|
pitch: 60
|
|
})
|
|
setShowTable(true)
|
|
setCheckedObj({ key:'31', label:'危险区', labelRight:'危险区列表', icon:'weixianqu' })
|
|
}else if(a==='4'){
|
|
setCheckedObj({ key:'41', label:'供水', labelRight:'今日供水实况', icon:'gongshui' })
|
|
}else if(a==='5'){
|
|
setCheckedObj({ key:'51', label:'水库', labelRight:'基本信息', icon:'shuiku' })
|
|
setShowTable(true)
|
|
}else{
|
|
}
|
|
}} expandIconPosition="end" accordion={true} bordered={false}>
|
|
{
|
|
items.map((item,index)=>
|
|
<Panel
|
|
key={item.key}
|
|
header={
|
|
<>
|
|
<div className='homePage_Panel'>
|
|
<div className='homePage_Panel_icon'></div>
|
|
{item.label}
|
|
</div>
|
|
</>
|
|
}
|
|
>
|
|
{
|
|
item.children.map((item)=>
|
|
<dit className='homePage_Panel_item' style={(checkedObj.key===item.key&&showTable)?{color:'#409eff'}:{}} onClick={()=>{
|
|
setCheckedObj(item)
|
|
setShowTable(true)
|
|
}}>
|
|
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/${item.icon}.png`} width="20" height="20" alt="" style={{marginRight:'10px'}} />
|
|
{item.label}
|
|
{
|
|
(checkedObj.key===item.key&&showTable)?
|
|
<div style={{flex:1,display:'flex',flexDirection:'row-reverse'}}>
|
|
<div style={{width:"3px",height:'40px',background:'rgba(64, 158, 255, 1)'}}></div>
|
|
</div>
|
|
:null
|
|
}
|
|
</dit>
|
|
)
|
|
}
|
|
</Panel>
|
|
)
|
|
}
|
|
</Collapse>
|
|
</div>
|
|
{/* {
|
|
(checkedObj.label === '预警'||checkedObj.label === '雨情')?
|
|
<div className='homePage_centerBox'><RangePicker showTime value={tms} disabled/></div>
|
|
:null
|
|
} */}
|
|
{
|
|
checkedObj.labelRight?
|
|
<div className='homePage_rightBox' style={{display:!showPanels?'none':'block',padding:showTable?'10px':'0px'}}>
|
|
{
|
|
showTable?
|
|
<div className='homePage_head2'>
|
|
<div className='homePage_head2_Bg'>
|
|
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
|
|
{checkedObj.labelRight}
|
|
</div>
|
|
<div style={{display:'flex',alignItems:'center'}}>
|
|
{/* <img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/x.svg`} width="12" height="12" alt="" style={{margin:'0 10px'}} /> */}
|
|
</div>
|
|
</div>:null
|
|
}
|
|
{ checkedObj.label === '预警' ? <><Yujing mySetTms={setTms}/><Yuqing mySetTms={setTms} show={false}/></>:null }
|
|
{ checkedObj.label === '雨情' ? <Yuqing mySetTms={setTms} show={showTable}/>:null }
|
|
{ checkedObj.label === '水库水情' ? <ShuiKu/>:null }
|
|
{ checkedObj.label === '土壤墒情' ? <TuRangShangQing/>:null }
|
|
{ checkedObj.label === '供水' ? <GongShui/>:null }
|
|
{ checkedObj.label === '工程安全' ? <GongCheng/>:null }
|
|
{ checkedObj.label === '监测设备状态' ? <JianCe/>:null }
|
|
{/* { checkedObj.label === '水质' ? <ShuiZhi/>:null } */}
|
|
{ checkedObj.label === '视频点' ? <ShiPinDian/>:null }
|
|
|
|
{ checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null }
|
|
|
|
{ checkedObj.label === '水库' ? <GCShuiKu/>:null }
|
|
{ checkedObj.label === '大坝' ? <DaBa/>:null }
|
|
{ checkedObj.label === '溢洪道' ? <YiHongDao/>:null }
|
|
|
|
{ checkedObj.label === '危险区' ? <WeiXianQx/>:null }
|
|
{ checkedObj.label === '安置点' ? <AnZhiDian/>:null }
|
|
{ checkedObj.label === '企事业单位' ? <QSYDW/>:null }
|
|
{ checkedObj.label === '沿河居民户' ? <YHJMH/>:null }
|
|
|
|
{ checkedObj.label === '危险区' || checkedObj.label === '安置点' || checkedObj.label === '企事业单位' || checkedObj.label === '沿河居民户'?<SetWxqStation/>:null }
|
|
</div>
|
|
:null
|
|
}
|
|
|
|
{
|
|
checkedObj.label === '工程安全' ?<div className='homePage_bztBox'>
|
|
<Bzt isHome={true}/>
|
|
</div>:null
|
|
}
|
|
|
|
<div className='homePage_leftBottomBox'>
|
|
{ checkedObj.label==='雨情'?<Tuli/>:null }
|
|
{ checkedObj.label==='水库水情'?<Tuli2/>:null }
|
|
{ checkedObj.label==='供水'?<Tuli3/>:null }
|
|
{ (checkedObj.label==='水库'||checkedObj.label==='大坝'||checkedObj.label==='溢洪道'||checkedObj.label==='视频点')?<Tuli4/>:null }
|
|
{ (checkedObj.label==='危险区'||checkedObj.label==='安置点'||checkedObj.label==='企事业单位'||checkedObj.label==='沿河居民户')?<Tuli5/>:null }
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HomePage
|