菜单修改

package.json

@@ -3,45 +3,45 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^5.8.0",
-    "@date-io/moment": "^1.3.13",
-    "@fullcalendar/core": "^4.2.0",
-    "@fullcalendar/daygrid": "^4.2.0",
-    "@fullcalendar/interaction": "^4.2.0",
-    "@fullcalendar/react": "^4.2.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@material-ui/pickers": "^3.2.10",
-    "@rematch/core": "^1.4.0",
-    "@rematch/persist": "^1.1.6",
-    "@turf/turf": "^5.1.6",
-    "clone": "^2.1.2",
-    "clsx": "^1.1.1",
-    "craco-less": "^1.17.0",
-    "d3-contour": "^2.0.0",
-    "echarts": "^4.9.0",
+    "@craco/craco": "5.8.0",
+    "@date-io/moment": "1.3.13",
+    "@fullcalendar/core": "4.2.0",
+    "@fullcalendar/daygrid": "4.2.0",
+    "@fullcalendar/interaction": "4.2.0",
+    "@fullcalendar/react": "4.2.0",
+    "@material-ui/core": "4.11.0",
+    "@material-ui/icons": "4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "@material-ui/pickers": "3.2.10",
+    "@rematch/core": "1.4.0",
+    "@rematch/persist": "1.1.6",
+    "@turf/turf": "5.1.6",
+    "clone": "2.1.2",
+    "clsx": "1.1.1",
+    "craco-less": "1.17.0",
+    "d3-contour": "2.0.0",
+    "echarts": "4.9.0",
     "echarts-for-react": "2.0.16",
-    "http-proxy-middleware": "^1.0.6",
-    "localforage": "^1.9.0",
-    "mapbox-gl": "^2.2.0",
-    "moment": "^2.29.1",
-    "polylabel": "^1.1.0",
-    "rc-tree": "^4.1.5",
-    "rc-trigger": "^5.2.5",
-    "react": "^17.0.1",
-    "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^17.0.1",
-    "react-double-marquee": "^1.0.6",
-    "react-hook-form": "^7.2.1",
-    "react-redux": "^7.2.2",
-    "react-router": "^5.2.0",
-    "react-router-config": "^5.1.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.0",
-    "react-transition-group": "^4.4.1",
-    "redux": "^4.0.5",
-    "reselect": "^4.0.0"
+    "http-proxy-middleware": "1.0.6",
+    "localforage": "1.9.0",
+    "mapbox-gl": "2.2.0",
+    "moment": "2.29.1",
+    "polylabel": "1.1.0",
+    "rc-tree": "4.1.5",
+    "rc-trigger": "5.2.5",
+    "react": "17.0.1",
+    "react-custom-scrollbars": "4.2.1",
+    "react-dom": "17.0.1",
+    "react-double-marquee": "1.0.6",
+    "react-hook-form": "7.2.1",
+    "react-redux": "7.2.2",
+    "react-router": "5.2.0",
+    "react-router-config": "5.1.1",
+    "react-router-dom": "5.2.0",
+    "react-scripts": "4.0.0",
+    "react-transition-group": "4.4.1",
+    "redux": "4.0.5",
+    "reselect": "4.0.0"
   },
   "scripts": {
     "start": "craco start",

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>