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: 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: 302, title: '水质安全', img: '/assets/menu/水情监测.png' },
      { id: 303, title: '水厂运行', img: '/assets/menu/水库管理.png' },
      { id: 306, title: '管网健康诊断', img: '/assets/menu/水利设施.png' },
      { id: 307, title: '应急指挥调度', img: '/assets/menu/病险水库.png' },
      { id: 305, 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)
              dispatch.runtime.setScya(false)
              dispatch.runtime.setGwtc(false)
            }}>
              <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)
                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)

              }
            }}>
              <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>
  )
}