59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
|
import React 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: 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' },
|
||
|
|
];
|
||
|
|
|
||
|
|
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 dispatch = useDispatch();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="dp-actiondock">
|
||
|
|
{
|
||
|
|
VIEWS.map(o => (
|
||
|
|
<BootstrapTooltip key={o.id} title={<Typography variant="h6">{o.title}</Typography>}>
|
||
|
|
<div className="dock-item" onClick={() => dispatch.map.setView(o.id)}>
|
||
|
|
<div className={clsx('button', { active: view === o.id })}>
|
||
|
|
<img 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>
|
||
|
|
)
|
||
|
|
}
|