164 lines
7.4 KiB
JavaScript
164 lines
7.4 KiB
JavaScript
import React, { useMemo, useState } from 'react';
|
|
import clsx from 'clsx';
|
|
import './ActionDock.less';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { makeStyles, Tooltip, Typography } from '@material-ui/core';
|
|
|
|
const VIEWS = [
|
|
|
|
{
|
|
id: 100, title: '防汛', img: process.env.PUBLIC_URL+'/assets/menu/防洪形势.png', children: [
|
|
// { id: 0, title: '防洪形势', img: process.env.PUBLIC_URL+'/assets/menu/防洪形势.png' },
|
|
{ id: 8, title: '防洪形势', img: process.env.PUBLIC_URL+'/assets/menu/防洪形势.png' },
|
|
// { id: 9, title: '防洪形势', img: process.env.PUBLIC_URL+'/assets/menu/防洪形势.png' },
|
|
{ id: 1, title: '监测数据', img: process.env.PUBLIC_URL+'/assets/menu/实时数据.png' },
|
|
// { id: 2, title: '水利设施', img: process.env.PUBLIC_URL+'/assets/menu/水利设施.png' },
|
|
{ id: 5, title: '预报', img: process.env.PUBLIC_URL+'/assets/menu/降雨中心.png' },
|
|
{ id: 6, title: '预警', img: process.env.PUBLIC_URL+'/assets/menu/病险水库.png' },
|
|
{ id: 4, title: '预演', img: process.env.PUBLIC_URL+'/assets/menu/预警分析.png' },
|
|
{ id: 3, title: '预案', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
|
|
{ id: 7, title: '调度', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
|
|
]
|
|
},
|
|
// { id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png',children:[
|
|
// { id: 207, title: '水库总览', img: process.env.PUBLIC_URL+'/assets/menu/水库管理.png' },
|
|
// // { id: 201, title: '雨情监测', img: process.env.PUBLIC_URL+'/assets/menu/雨情监测.png' },
|
|
// // { id: 202, title: '水情监测', img: process.env.PUBLIC_URL+'/assets/menu/水情监测.png' },
|
|
// { id: 203, title: '水库监测', img: process.env.PUBLIC_URL+'/assets/menu/安全监测.png' },
|
|
// // { id: 204, title: '视频监视', img: process.env.PUBLIC_URL+'/assets/menu/视频监视.png' },
|
|
// { id: 205, title: '防汛调度', img: process.env.PUBLIC_URL+'/assets/menu/防汛调度.png' },
|
|
// { id: 206, title: '巡查维养', img: process.env.PUBLIC_URL+'/assets/menu/水库管理.png' },
|
|
// ] },
|
|
{ id: 200, title: '水库', img: process.env.PUBLIC_URL+'/assets/menu/水库专题.png'},
|
|
{
|
|
id: 300, title: '水厂', img: process.env.PUBLIC_URL+'/assets/menu/水利设施.png', children: [
|
|
{ id: 301, title: '供水态势', img: process.env.PUBLIC_URL+'/assets/menu/降雨中心.png' },
|
|
{ id: 302, title: '水质安全', img: process.env.PUBLIC_URL+'/assets/menu/水情监测.png' },
|
|
{ id: 303, title: '水厂运行', img: process.env.PUBLIC_URL+'/assets/menu/水库管理.png' },
|
|
{ id: 306, title: '管网健康诊断', img: process.env.PUBLIC_URL+'/assets/menu/水利设施.png' },
|
|
{ id: 307, title: '应急指挥调度', img: process.env.PUBLIC_URL+'/assets/menu/病险水库.png' },
|
|
// { id: 305, title: '决策支持与报表', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
|
|
]
|
|
},
|
|
{
|
|
id: 400, title: '灌区', img: process.env.PUBLIC_URL+'/assets/menu/预警分析.png', children: [
|
|
{ id: 501, title: '灌区监测', img: process.env.PUBLIC_URL+'/assets/menu/防洪形势.png' },
|
|
{ id: 504, title: '水旱灾害防御', img: process.env.PUBLIC_URL+'/assets/menu/水利设施.png' },
|
|
// { id: 502, title: '预警信息管理', img: process.env.PUBLIC_URL+'/assets/menu/实时数据.png' },
|
|
{ id: 503, title: '水资源调度', img: process.env.PUBLIC_URL+'/assets/menu/病险水库.png' },
|
|
{ id: 505, title: '量测水管理', img: process.env.PUBLIC_URL+'/assets/menu/辅助决策.png' },
|
|
{ id: 506, title: '水政管理', img: process.env.PUBLIC_URL+'/assets/menu/预警分析.png' },
|
|
{ id: 507, title: '工程管理', img: process.env.PUBLIC_URL+'/assets/menu/降雨中心.png' },
|
|
// 图层控制
|
|
// 灌区监测
|
|
// 预警信息管理
|
|
// 水旱灾害防御
|
|
// 水资源调度
|
|
// 量测水管理
|
|
// 水政管理
|
|
// 工程管理
|
|
]
|
|
},
|
|
];
|
|
|
|
|
|
const useStylesBootstrap = makeStyles((theme) => ({
|
|
arrow: {
|
|
color: '#0004',
|
|
},
|
|
tooltip: {
|
|
backgroundColor: '#0008',
|
|
padding: '1rem',
|
|
top: '0.7rem'
|
|
},
|
|
}));
|
|
|
|
function BootstrapTooltip(props) {
|
|
const classes = useStylesBootstrap();
|
|
|
|
return <Tooltip arrow classes={classes} {...props} />;
|
|
}
|
|
|
|
export default function ActionDock({ }) {
|
|
const view = useSelector(s => s.map.view);
|
|
const [viewKey, setViewKey] = useState(null)
|
|
const viewItem = useMemo(() => viewKey ? VIEWS.filter(o => o.id === viewKey)[0].children : VIEWS, [viewKey, VIEWS])
|
|
|
|
const dispatch = useDispatch();
|
|
const removePoint = () => {
|
|
const map = window.__mapref;
|
|
const layer = map.getLayer('关联站点')
|
|
if (layer) {
|
|
map.removeLayer('关联站点');
|
|
map.removeSource('关联站点');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="dp-actiondock">
|
|
{
|
|
viewKey ?
|
|
<BootstrapTooltip key={999} title={<Typography variant="h6"><span style={{ color: '#fff' }}>返回</span></Typography>}>
|
|
<div className="dock-item" onClick={() => {
|
|
dispatch.map.setView(0) //这里不知道用哪个，等问好在弄
|
|
setViewKey(null)
|
|
dispatch.runtime.setScya(false)
|
|
dispatch.runtime.setGwtc(false)
|
|
removePoint()
|
|
}}>
|
|
<div className={clsx('button', { active: false })}>
|
|
<img width={40} style={{ marginLeft: '5px' }} src={process.env.PUBLIC_URL+'/assets/pump/退出.png'} />
|
|
</div>
|
|
</div>
|
|
</BootstrapTooltip>
|
|
: null
|
|
}
|
|
{
|
|
viewItem.map(o => (
|
|
<BootstrapTooltip key={o.id} title={<Typography variant="h6"><span style={{ color: '#fff' }}>{o.title}</span></Typography>}>
|
|
<div className="dock-item" onClick={() => {
|
|
if (o.children) {
|
|
//一级菜单
|
|
dispatch.map.setView(o.children[0].id)
|
|
setViewKey(o.id)
|
|
dispatch.runtime.setScya(false)
|
|
dispatch.runtime.setGwtc(false)
|
|
|
|
} else {
|
|
|
|
// 判断水厂资源调度切换图层
|
|
if (o.id == 307) {
|
|
dispatch.runtime.setScya(true)
|
|
} else {
|
|
dispatch.runtime.setScya(false)
|
|
}
|
|
// if (o.id == 307) {
|
|
// dispatch.runtime.setGwtc(true)
|
|
// } else {
|
|
// dispatch.runtime.setGwtc(true)
|
|
// }
|
|
//二级菜单
|
|
dispatch.map.setView(o.id)
|
|
if (o.id == 6) {
|
|
sessionStorage.setItem('point',o.id)
|
|
} else {
|
|
sessionStorage.setItem('point','')
|
|
}
|
|
removePoint()
|
|
}
|
|
}}>
|
|
<div className={clsx('button', { active: o.id===200?(view===207||view===203||view===205||view===206||view===200):view === o.id })}>
|
|
<img width={32} height={32} src={o.img} />
|
|
</div>
|
|
</div>
|
|
</BootstrapTooltip>
|
|
))
|
|
}
|
|
<div className="logo">
|
|
<a href="http://www.hbwhdc.cn" target="blank" style={{ color: '#fff', cursor: 'pointer' }}>@湖北纬皓端成科技有限公司</a>
|
|
<span style={{ marginRight: '1rem' }}></span>联系电话: 15697168180
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|