From ed8b76fe5ffc8aa280c8621544bf760353c9944f Mon Sep 17 00:00:00 2001
From: zhangquan <2523589960@qq.com>
Date: Tue, 22 Jul 2025 14:55:17 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=B7=A5=E5=85=B7=E6=A0=8F=E7=9A=84=E6=9F=90?=
 =?UTF-8?q?=E4=B8=AA=E5=B7=A5=E5=85=B7=E5=A6=82=E6=9E=9C=E6=9C=89=E4=BA=8C?=
 =?UTF-8?q?=E7=BA=A7=E8=8F=9C=E5=8D=95=EF=BC=8C=E6=94=B9=E4=B8=BA=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87=E7=82=B9=E5=87=BB=E5=B7=A5=E5=85=B7=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E5=92=8C=E6=94=B6=E8=B5=B7=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../forestFire/Toolbar/Toolbar.vue            | 83 +++++++++++++------
 1 file changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue b/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue
index 019c695..c192993 100644
--- a/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue
+++ b/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue
@@ -11,16 +11,16 @@
         v-for="tool in options"
         :key="tool.id"
         class="tool-wrapper"
-        :class="{'open': isOpen}"
+        :class="{'open': isOpen, 'active': tool.expand}"
       >
         <!-- 主工具按钮 -->
-        <div class="tool-button" @click="tool.name && bus.emit(`toolbar_${tool.name}`, params)">
+        <div class="tool-button" @click="mainToolClick(tool)">
           <el-image class="tool-icon" :src="tool.icon" fit="contain" />
         </div>
         <!-- 主工具名称 (右侧淡入淡出) -->
         <div class="tool-name main-name">{{ tool.label }}</div>
         <!-- 二级工具菜单 (左侧淡入淡出) -->
-        <div v-if="tool.subtools && tool.subtools?.length > 0" class="toolbar submenu">
+        <div v-if="tool.subtools && tool.subtools?.length > 0" class="toolbar submenu" :class="{'active': tool.expand}">
           <!-- 遍历二级工具按钮 -->
           <div
             v-for="subtool in tool.subtools"
@@ -102,7 +102,6 @@ import toolbarWatersourceIcon from '@/assets/icons/toolbar_watersource.png';
 import toolbarRoadIcon from '@/assets/icons/toolbar_road.png';
 import toolbarKeyareaIcon from '@/assets/icons/toolbar_keyarea.png';
 // 气象效果图标
-import toolbarSunnyIcon from '@/assets/icons/toolbar_sunny.png';
 import toolbarRainIcon from '@/assets/icons/toolbar_rain.png';
 import toolbarSnowIcon from '@/assets/icons/toolbar_snow.png';
 import toolbarFogIcon from '@/assets/icons/toolbar_fog.png';
@@ -128,6 +127,7 @@ const options = ref([
     id: 1,
     icon: baseDrawIcon,
     label: '基础绘制',
+    expand: false,
     subtools: [
       {
         id: 11,
@@ -186,6 +186,7 @@ const options = ref([
     id: 2,
     icon: forestDrawIcon,
     label: '森防绘制',
+    expand: false,
     subtools: [
       {
         id: 21,
@@ -249,30 +250,28 @@ const options = ref([
     id: 3,
     icon: weatherIcon,
     label: '气象效果',
-    subtools: [ 
+    expand: false,
+    subtools: [
       {
         id: 31,
-        name: 'sunny',
-        label: '晴天',
-        icon: toolbarSunnyIcon
+        name: 'rain',
+        label: '下雨',
+        icon: toolbarRainIcon,
+        active: false
       },
       {
         id: 32,
-        name: 'rain',
-        label: '下雨',
-        icon: toolbarRainIcon
+        name: 'snow',
+        label: '下雪',
+        icon: toolbarSnowIcon,
+        active: false
       },
       {
         id: 33,
-        name: 'snow',
-        label: '下雪',
-        icon: toolbarSnowIcon
-      },
-      {
-        id: 34,
         name: 'fog',
         label: '起雾',
-        icon: toolbarFogIcon
+        icon: toolbarFogIcon,
+        active: false
       },
     ]
   },
@@ -311,6 +310,25 @@ const toolbarClear = () => {
   }
 };
 
+const mainToolClick = (tool) => {
+  // 触发工具事件
+  tool.name && bus.emit(`toolbar_${tool.name}`, params)
+
+  // 修改子工具栏的展开状态
+  if(tool.expand) {
+    tool.expand = false;
+  } else {
+    tool.expand = true;
+    options.value.forEach(item => {
+      if(item.id !== tool.id) {
+        item.expand = false;
+      }
+    });
+  }
+}
+
+
+
 watch(() => props.viewer, (v) => {
   if (v) {
     viewer = v;
@@ -445,7 +463,8 @@ watch(() => props.viewer, (v) => {
         border-radius: 0 0 16px 16px;
         padding-bottom: 5px;
       }
-      &:hover {
+      &:hover,
+      &.active {
         background-color: rgba($color: #FFD700, $alpha: .5);
       }
     }
@@ -466,6 +485,16 @@ watch(() => props.viewer, (v) => {
     right: 100%;
     pointer-events: none;
     transition: opacity 0.3s ease, transform 0.3s ease; /* 动画持续时间和缓动函数 */
+
+    &.active {
+      pointer-events: all;
+      transition-delay: 0.1s; /* 延迟 */
+
+      & > .tool-wrapper {
+        height: 40px;
+        opacity: 1;
+      }
+    }
   }
   /* 二级工具名称的定位 (左侧) */
   .sub-name {
@@ -473,15 +502,15 @@ watch(() => props.viewer, (v) => {
     transform: translateX(0); /* 初始位置 */
   }
   /* 当主 tool-wrapper 被 hover 且包含二级菜单时，显示二级菜单 */
-  .tool-wrapper:hover > .submenu {
-    pointer-events: all;
-    transition-delay: 0.1s; /* 延迟 */
+  // .tool-wrapper:hover > .submenu {
+  //   pointer-events: all;
+  //   transition-delay: 0.1s; /* 延迟 */
 
-    & > .tool-wrapper {
-      height: 40px;
-      opacity: 1;
-    }
-  }
+  //   & > .tool-wrapper {
+  //     height: 40px;
+  //     opacity: 1;
+  //   }
+  // }
 
   /* 当二级 tool-wrapper 被 hover 时，显示二级工具名称 */
   /* 注意这里的选择器，因为二级名称在二级 tool-wrapper 内部 */