125 lines
4.7 KiB
JavaScript
125 lines
4.7 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: '/assets/menu/防洪形势.png',children:[
|
|
{ id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
|
|
{ id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
|
|
{ id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' },
|
|
{ id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
|
|
{ id: 3, title: '辅助决策', img: '/assets/menu/辅助决策.png' },
|
|
{ id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
|
|
{ id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
|
|
] },
|
|
{ id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
|
|
{ id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' },
|
|
{ id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' },
|
|
{ id: 203, title: '安全监测', img: '/assets/menu/安全监测.png' },
|
|
{ id: 204, title: '视频监视', img: '/assets/menu/视频监视.png' },
|
|
{ id: 205, title: '防汛调度', img: '/assets/menu/防汛调度.png' },
|
|
{ id: 206, title: '水库管理', img: '/assets/menu/水库管理.png' },
|
|
] },
|
|
{ id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
|
|
{ id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },
|
|
|
|
// 供水态势
|
|
// 水质安全
|
|
// 水厂运行
|
|
// 管网健康诊断
|
|
// 应急指挥调度
|
|
// 决策支持与报表
|
|
] },
|
|
{
|
|
id: 400, title: '灌区', img: '/assets/menu/灌区专题.png', children: [
|
|
{ id: 501, title: '灌区监测', img: '/assets/menu/灌区监测.png' },
|
|
{ id: 504, title: '水旱灾害防御', img: '/assets/menu/水旱灾害防御.png' },
|
|
// { id: 502, title: '预警信息管理', img: '/assets/menu/预警信息管理.png' },
|
|
{ id: 503, title: '水资源调度', img: '/assets/menu/水资源调度.png' },
|
|
{ id: 505, title: '量测水管理', img: '/assets/menu/量测水管理.png' },
|
|
{ id: 506, title: '水政管理', img: '/assets/menu/水政管理.png' },
|
|
{ id: 507, title: '工程管理', img: '/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();
|
|
|
|
|
|
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(o.id) 这里不知道用哪个，等问好在弄
|
|
setViewKey(null)
|
|
}}>
|
|
<div className={clsx('button', { active: false })}>
|
|
<img width={40} style={{marginLeft:'5px'}} src={'/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)
|
|
}else{
|
|
//二级菜单
|
|
dispatch.map.setView(o.id)
|
|
}
|
|
}}>
|
|
<div className={clsx('button', { active: 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>
|
|
)
|
|
}
|