项目管理页增加水利信息化类

RuoYi-Vue3/src/views/front/ProjectManagement.vue

@@ -6,7 +6,7 @@
     <main class="main-content">
   <!-- 左侧垂直菜单 -->
   <aside class="left-sidebar">
-    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#f8f9fa" text-color="#303133" active-text-color="#409eff" style="height: 100%; margin: 0;" @open="handleOpen" @close="handleClose" @select="(key) => handleMenuSelect(key)">
+    <el-menu :model-value="activeMenu" class="el-menu-vertical-demo" background-color="#f8f9fa" text-color="#303133" active-text-color="#409eff" style="height: 100%; margin: 0;" @open="handleOpen" @close="handleClose" @select="(key) => handleMenuSelect(key)">
       <el-menu-item-group>
         <template #title><span style="font-size: 1.45rem; font-weight: 600; color: #303133;">项目分类</span></template>
         
@@ -20,6 +20,15 @@
           <el-menu-item index="1-2">数字孪生水文站</el-menu-item>
           <el-menu-item index="1-3">数字孪生灌区</el-menu-item>
         </el-sub-menu>
+        
+        <!-- 水利信息化分类 -->
+        <el-sub-menu index="2">
+          <template #title>
+            <el-icon><Menu /></el-icon>
+            <span>水利信息化</span>
+          </template>
+          <el-menu-item index="2-1">流域数据采集</el-menu-item>
+        </el-sub-menu>
       </el-menu-item-group>
     </el-menu>
   </aside>
@@ -68,6 +77,16 @@ const handleOpen = (key, keyPath) => {
     if (shuiliGongchengRef.value) {
       shuiliGongchengRef.value.selectCategory('数字孪生')
     }
+  } else if (key === '2') {
+    activeMenu.value = key
+    activeMenuName.value = '水利信息化'
+    activeComponent.value = ShuiliGongchengRaw
+    console.log('Set active component to ShuiliGongcheng')
+    
+    // 当打开水利信息化大类时，显示所有水利信息化项目
+    if (shuiliGongchengRef.value) {
+      shuiliGongchengRef.value.selectCategory('水利信息化')
+    }
   }
 }
 
@@ -112,6 +131,22 @@ const handleMenuSelect = (key) => {
     if (shuiliGongchengRef.value) {
       shuiliGongchengRef.value.selectCategory('数字孪生灌区')
     }
+  } else if (key === '2') {
+    activeMenuName.value = '水利信息化'
+    activeComponent.value = ShuiliGongchengRaw
+    
+    // 当选择水利信息化大类时，显示所有水利信息化项目
+    if (shuiliGongchengRef.value) {
+      shuiliGongchengRef.value.selectCategory('水利信息化')
+    }
+  } else if (key === '2-1') {
+    activeMenuName.value = '流域数据采集'
+    activeComponent.value = ShuiliGongchengRaw
+    
+    // 当选择流域数据采集子类时，显示对应的项目
+    if (shuiliGongchengRef.value) {
+      shuiliGongchengRef.value.selectCategory('流域数据采集')
+    }
   } else {
     activeMenuName.value = '数字孪生'
     activeComponent.value = ShuiliGongchengRaw
@@ -184,18 +219,77 @@ const handleMenuSelect = (key) => {
   font-weight: 600 !important;
 }
 
-/* 大类选中时的样式增强 */
-.el-menu-vertical-demo .el-sub-menu.is-active > .el-sub-menu__title {
+/* 大类选中时的样式增强 - 匹配所有可能的激活状态 */
+.el-menu-vertical-demo .el-sub-menu.is-active > .el-sub-menu__title,
+.el-menu-vertical-demo .el-sub-menu.is-opened > .el-sub-menu__title,
+.el-menu-vertical-demo .el-sub-menu[class*="is-active"] > .el-sub-menu__title,
+.el-menu-vertical-demo .el-sub-menu[class*="is-opened"] > .el-sub-menu__title,
+.el-menu-vertical-demo .el-sub-menu:has(.is-active) > .el-sub-menu__title,
+.el-menu-vertical-demo .el-sub-menu:has(.is-opened) > .el-sub-menu__title {
+  background-color: rgba(64, 158, 255, 0.25) !important;
+  border-left: 4px solid #409eff !important;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2) !important;
+  color: #409eff !important;
+  font-weight: 600 !important;
+  padding-left: 19px !important;
+  transition: all 0.3s ease !important;
+}
+
+/* 确保激活状态样式优先级更高 */
+.el-menu-vertical-demo > .el-menu-item-group > .el-sub-menu.is-active > .el-sub-menu__title,
+.el-menu-vertical-demo > .el-menu-item-group > .el-sub-menu.is-opened > .el-sub-menu__title,
+.el-menu-vertical-demo > .el-menu-item-group > .el-sub-menu:has(.is-active) > .el-sub-menu__title,
+.el-menu-vertical-demo > .el-menu-item-group > .el-sub-menu:has(.is-opened) > .el-sub-menu__title {
+  background-color: rgba(64, 158, 255, 0.3) !important;
+  border-left: 4px solid #409eff !important;
+  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.25) !important;
+  font-weight: 700 !important;
+}
+
+/* 直接点击大类标题时的样式 */
+.el-menu-vertical-demo .el-sub-menu > .el-sub-menu__title:hover,
+.el-menu-vertical-demo .el-sub-menu > .el-sub-menu__title:focus {
+  background-color: rgba(64, 158, 255, 0.2) !important;
+  border-left: 4px solid #409eff !important;
+  color: #409eff !important;
+  font-weight: 600 !important;
+}
+
+/* 为了确保样式能被正确应用，添加更直接的选择器 */
+.el-menu-vertical-demo > .el-menu-item-group > .el-sub-menu > .el-sub-menu__title {
+  position: relative;
+  z-index: 10;
+}
+
+/* 当子菜单被选中时，父级大类也显示高亮 */
+.el-menu-vertical-demo .el-sub-menu .el-menu-item.is-active {
   background-color: rgba(64, 158, 255, 0.1) !important;
-  border-left: 3px solid #409eff !important;
+  color: #409eff !important;
+  font-weight: 600 !important;
+}
+
+/* 大类鼠标悬停效果 */
+.el-menu-vertical-demo .el-sub-menu > .el-sub-menu__title:hover {
+  background-color: rgba(64, 158, 255, 0.15) !important;
+  border-left: 3px solid rgba(64, 158, 255, 0.8) !important;
+  transition: all 0.3s ease !important;
 }
 
-/* 确保大类在打开时也保持选中状态 */
-.el-menu-vertical-demo .el-sub-menu.is-opened > .el-sub-menu__title {
+/* 直接为大类标题添加更通用的样式，确保选中时有视觉反馈 */
+.el-menu-vertical-demo > .el-menu-item-group > .el-sub-menu > .el-sub-menu__title {
+  padding: 12px 20px !important;
+  margin: 5px 0 !important;
+  border-radius: 4px !important;
+  transition: all 0.3s ease !important;
+}
+
+/* 增强选中状态的样式，使用更通用的选择器 */
+.el-menu-vertical-demo .el-sub-menu.is-active > .el-sub-menu__title {
+  background-color: rgba(64, 158, 255, 0.25) !important;
+  border-left: 4px solid #409eff !important;
   color: #409eff !important;
   font-weight: 600 !important;
-  background-color: rgba(64, 158, 255, 0.1) !important;
-  border-left: 3px solid #409eff !important;
+  padding-left: 19px !important;
 }
 
 .menu-title-text {

RuoYi-Vue3/src/views/front/content/ShuiliGongcheng.vue

@@ -375,7 +375,7 @@ const mockProjectData = ref([
     format: 'OBJ',
     status: '正常',
     createTime: '2024-03-15',
-    category: '流域数据采集',
+    category: '数字孪生水文站',
     description: '全流域水文数据采集与传输系统，支持多源数据融合与标准化管理',
     tags: ['数据采集', '传感器', '通信']
   },