mcfxkh-Web/src/views/Home/components/ActionDock/index.js

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: 300, title: '水厂', img: '/assets/menu/实时数据.png',children:[
    // 供水态势
    // 水质安全
    // 水厂运行
    // 管网健康诊断
    // 应急指挥调度
    // 决策支持与报表
  ] },
  { id: 400, title: '灌区', img: '/assets/menu/实时数据.png',children:[
    // 图层控制
    // 灌区监测
    // 预警信息管理
    // 水旱灾害防御
    // 水资源调度
    // 量测水管理
    // 水政管理
    // 工程管理
  ] },

];


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">返回</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">{o.title}</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 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>
  )
}