修改一级菜单栏和二三级菜单的联动

ruoyi-ui/src/router/index.js

@@ -67,7 +67,7 @@ export const constantRoutes = [
         path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '首页', icon: 'Setting', affix: true }
       }
     ]
   },
@@ -79,10 +79,17 @@ export const constantRoutes = [
       {
         path: '/YuJing/shouye/index',
         component: () => import('@/views/YuJing/shouye/index.vue'),
+        meta: { title: '首页', icon: 'Setting', affix: true }
       },
       {
         path: '/YuJing/transaction/dutyRecord',
         component: () => import('@/views/YuJing/transaction/dutyRecord.vue'),
+        meta: { title: '值班管理', icon: 'Setting', affix: true }
+      },
+      {
+        path: '/YuJing/water/monitorAlert',
+        component: () => import('@/views/YuJing/water/monitorAlert.vue'),
+        meta: { title: '水功能区', icon: 'Setting', affix: true }
       },
     ]
   },

ruoyi-ui/src/views/YuJing/index.vue

@@ -4,9 +4,9 @@
       <div class="title">预警系统-水资源保护系统</div>
       <div class="menu">
         <div
-          class="menuItem"
           v-for="(item, index) in menuList"
           :key="index"
+          :class="{'menuItem-deactive':menuLeftValue!=item.name,'menuItem-active':menuLeftValue==item.name}"
           @click="menuValueFn(item)"
         >
           {{ item.name }}
@@ -31,17 +31,19 @@
       </div>
     </div>
     <div class="yjContent">
-      <div class="contentLeft" :class="{ collapsed: !leftItem}" v-show="showLeftMenu">
+      <div class="contentLeft" :class="{ collapsed: !leftItem}" v-show="$route.path != '/YuJing/shouye/index'">
         <div class="leftMenu">
           <el-menu
-            :default-active="currentRoute"
-            class="el-menu-vertical-demo"
+            :default-active="$route.path"
+            background-color="rgb(74, 147, 245)"
+            text-color="#fff"
+            :unique-opened="true"
             :collapse="isCollapse"
             @select="handleMenuSelect"
             :router="true"
           >
             <div class="leftTitle">
-              <template v-if="leftItem">{{ menuLeftValue }}
+              <template v-if="leftItem">{{ $route.meta.title }}
                 <img
                   src="/src/assets/images/left.png"
                   alt=""
@@ -55,21 +57,22 @@
                   @click="imgLeftFn"/>
               </template>
             </div>
-            <template v-for="item in menuData[menuLeftValue]" :key="item.index">
-              <el-sub-menu v-if="item.children" :index="item.index">
+            <template v-for="item in menuData[menuLeftValue]" :key="item.path">
+              <el-sub-menu v-if="item.children" :index="item.path">
                 <template #title>
                   <el-icon><component :is="item.icon" /></el-icon>
                   <span>{{ item.title }}</span>
                 </template>
                 <el-menu-item
                   v-for="child in item.children"
-                  :key="child.index"
-                  :index="child.index"
+                  :key="child.path"
+                  :index="child.path"
                 >
-                  {{ child.title }}
+                  <el-icon><component :is="child.icon" /></el-icon>
+                  <span>{{ child.title }}</span>
                 </el-menu-item>
               </el-sub-menu>
-              <el-menu-item v-else :index="item.index">
+              <el-menu-item v-else :index="item.path">
                 <el-icon><component :is="item.icon" /></el-icon>
                 <template #title>{{ item.title }}</template>
               </el-menu-item>
@@ -97,14 +100,13 @@ import { ElMessageBox } from 'element-plus'
 
 const routerInstance = useRouter();
 const userStore = useUserStore();
-const menuLeftValue = ref("首页");
+const route = useRoute()
+const menuLeftValue = ref("");
 const leftItem = ref(true);
-const currentRoute = ref('/');
-const showLeftMenu = ref(false);
 const menuList = ref([
   { name: "首页", path: "/YuJing/shouye/index" },
   { name: "值班管理",path: "/YuJing/transaction/dutyRecord" },
-  { name: "水功能区"}
+  { name: "水功能区",path: "/YuJing/water/monitorAlert" }
 ]);
 const menuData = reactive({
   "值班管理": [
@@ -127,21 +129,23 @@ const menuData = reactive({
       index: "5",
       title: "监视告警",
       icon: markRaw(Setting),
+      path: "/YuJing/water/monitorAlert" 
     },
   ]
 });
 const isCollapse = ref(false);
+
+onMounted(() => {
+  menuLeftValue.value = route.meta.title;
+});
 function imgLeftFn() {
   isCollapse.value = !isCollapse.value;
   leftItem.value = !leftItem.value;
 }
-const menuValueFn = (val) => {
+const menuValueFn = (val:any) => {
   menuLeftValue.value = val.name;
-  // 点击首页时隐藏左侧菜单
-  showLeftMenu.value = val.name === "首页" ? false : true;
   if (val.path) {
     routerInstance.push(val.path);
-    currentRoute.value = val.path;
   };
 };   
 function handleMenuSelect(index) {
@@ -163,7 +167,6 @@ function handleMenuSelect(index) {
     };
   };
   routerInstance.push(path);
-  currentRoute.value = path;
 };
 function handleCommand(command) {
   switch (command) {
@@ -210,22 +213,40 @@ function setLayout() {
     display: flex;
 
     .title {
-      width: 30%;
+      width: 27%;
       margin-left: 20px;
       font-size: 26px;
       line-height: 76px;
       color: #fff;
     }
     .menu {
-      margin-top: 40px;
-      width: 60%;
+      margin-top: 10px;
+      line-height: 45px;
+      width: 62%;
       display: flex;
+      align-items: center; /* 水平居中 */
       font-size: 20px;
       color: #1890ff;
-      .menuItem {
-        width: 100px;
+      .menuItem-deactive {
+        margin-right: 5px;
+        width: 8%;
+        height: 60%;
+        text-align: center;
+        border-radius: 15px 15px 15px 15px;
         cursor: pointer;
       }
+      .menuItem-active {
+        margin-right: 5px;
+        width: 8%;
+        height: 60%;
+        text-align: center;
+        border-radius: 15px 15px 15px 15px;
+        background: rgba(93, 171, 255,0.3);
+        cursor: pointer;
+      }
+      .menuItem-deactive:hover{
+        background: rgba(93, 171, 255,0.3);
+      }
     .avatar-dropdown{
       position: absolute;
       right: 10px;
@@ -314,21 +335,21 @@ function setLayout() {
 }
 </style>
 <style>
-.contentLeft .el-menu {
+ .contentLeft .el-menu {
   height: 100%;
-  background: rgb(74, 147, 245);
-}
-.contentLeft .el-sub-menu__title,
-.contentLeft .el-menu-item {
-  color: #fff;
+  /* background: rgb(74, 147, 245); */
 }
 .contentLeft .el-menu-item.is-active {
   background-color: rgb(93, 171, 255) !important;
   color: #fff !important;
 }
+/*.contentLeft .el-sub-menu__title,
+.contentLeft .el-menu-item {
+  color: #fff;
+}*/
 
 .contentLeft .el-menu .el-menu-item:hover,
 .contentLeft .el-menu .el-sub-menu__title:hover {
   background-color: rgb(93, 171, 255) !important;
-}
+} 
 </style>

ruoyi-ui/src/views/YuJing/water/monitorAlert.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>监视告警</div>
+</template>