菜单修改

src/views/Home/components/ActionDock/index.js

@@ -1,19 +1,49 @@
-import React from 'react';
+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: 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: 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',
@@ -33,15 +63,41 @@ function BootstrapTooltip(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">
       {
-        VIEWS.map(o => (
+        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={() => dispatch.map.setView(o.id)}>
+            <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>