Просмотр исходного кода

MenuItem 支持 folder 标题文字单独点击事件;总览 tab 菜单 folder 点击联动地图

  1. MenuItem.vue — 拆分点击行为
  - 标题文字包裹 span.node-label-span,加 @click.stop="handleLabelClick" 阻止冒泡
  - folder 标题文字点击 → 只触发 folder-click 事件,不展开/折叠
  - folder 其他区域(箭头、padding)点击 → 只展开/折叠,不触发事件
  - 叶子节点任意位置点击 → 触发 node-click(行为不变)
  - 子组件 MenuItem 监听 @folder-click="passFolderClickUp" 实现事件逐层冒泡
  - 新增 .node-label-span:hover 样式,hover 时显示青色高亮

  2. StatusMonitoring.vue — 总览 tab folder 点击联动地图
  - 总览 tab 的 MenuItem 新增 @folder-click="handleFolderClick" 监听
  - handleFolderClick 通过 localStorage 中存储的坐标调用 trafficMapRef.focusByLocation
  实现地图定位(临时逻辑,待真实接口替换)
画安 недель назад: 3
Родитель
Сommit
25e100640a
2 измененных файлов с 39 добавлено и 9 удалено
  1. 28 7
      src/components/ui/MenuItem.vue
  2. 11 2
      src/views/StatusMonitoring.vue

+ 28 - 7
src/components/ui/MenuItem.vue

@@ -18,9 +18,11 @@
       <i v-if="node.icon" :class="node.icon" class="node-icon"></i>
       
       <span class="node-label">
-        <slot name="label" :node="node">
-          {{ node.label }}
-        </slot>
+        <span @click.stop="handleLabelClick" class="node-label-span">
+          <slot name="label" :node="node">
+              {{ node.label }}
+          </slot>
+        </span>
       </span>
       
       <span 
@@ -39,7 +41,8 @@
         :node="child" 
         :level="level + 1"
         :theme="theme" 
-        @node-click="passEventUp" 
+        @node-click="passEventUp"
+        @folder-click="passFolderClickUp"
       >
         <template #label="{ node: innerNode }">
           <slot name="label" :node="innerNode"></slot>
@@ -80,9 +83,21 @@ export default {
   methods: {
     handleClick() {
       if (this.hasChildren) {
-        this.isOpen = !this.isOpen;
-      } 
-      this.$emit('node-click', this.node);
+          this.isOpen = !this.isOpen;       // 只做展开/折叠
+      } else {
+          this.$emit('node-click', this.node);  // 叶子节点点击事件
+      }
+    },
+    // 点击标题文字
+    handleLabelClick() {
+        if (this.hasChildren) {
+            this.$emit('folder-click', this.node);
+        } else {
+            this.$emit('node-click', this.node);
+        }
+    },
+    passFolderClickUp(nodeData) {
+      this.$emit('folder-click', nodeData);
     },
     passEventUp(nodeData) {
       this.$emit('node-click', nodeData);
@@ -206,4 +221,10 @@ export default {
   color: #00e5ff; 
 }
 .theme-dark .menu-row.is-leaf:hover { color: #ffffff; }
+
+.node-label-span:hover {
+  cursor: pointer;
+  user-select: none;
+  color: #00e5ff;
+}
 </style>

+ 11 - 2
src/views/StatusMonitoring.vue

@@ -29,7 +29,7 @@
                 <TechTabs v-model="activeLeftTab" type="underline" @tab-click="handleTabClick">
                     <TechTabPane label="总览" name="overview" class="menu-scroll-view">
                         <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
-                            @node-click="handleMenuClick" />
+                            @node-click="handleMenuClick" @folder-click="handleFolderClick"/>
                     </TechTabPane>
                     <TechTabPane label="路口" name="crossing" class="menu-scroll-view">
                         <MenuItem theme="tech" v-for="item in menuData" :key="item.id" :node="item" :level="0"
@@ -255,6 +255,16 @@ export default {
             this.crossingSelections = [];
             this.showTopChartDalogs(); // 根据当前Tab显示对应的顶部常驻图表
         },
+        // 处理菜单folder标题点击
+        handleFolderClick(nodeData) {
+            console.log('父组件接收到了文件夹点击事件:', nodeData);
+            // 临时逻辑,有真实接口后可以删除
+            const index = Math.floor(Math.random() * 10);
+            const position = localStorage.getItem(`pos${index + 1}`).split(',');
+
+            // 地图联动
+            this.$refs.trafficMapRef.focusByLocation([Number(position[0]), Number(position[1])]);
+        },
         // 处理菜单点击
         handleMenuClick(nodeData) {
             console.log('父组件接收到了最底层路口点击事件:', nodeData);
@@ -281,7 +291,6 @@ export default {
             } else if (this.activeLeftTab === 'specialDuty') { // 特勤
                 this.showSpecialDutyDalogs(nodeData);
             }
-
         },
         // 处理弹窗双击展开(通过 onExpand 回调从 Layout 传入)
         handleDoubleClickExpend(nodeData) {