Explorar el Código

状态监控页总览Tab地图交互优化
- 鼠标移入地图标记点显示路口小弹窗,移出自动关闭
- 单击地图标记点直接打开路口大详情弹窗(CrossingDetailPanel)
- 修改地图组件传递路口滑入滑出事件

画安 hace 3 semanas
padre
commit
791188b422
Se han modificado 2 ficheros con 38 adiciones y 2 borrados
  1. 9 1
      src/components/TongzhouTrafficMap.vue
  2. 29 1
      src/views/StatusMonitoring.vue

+ 9 - 1
src/components/TongzhouTrafficMap.vue

@@ -715,12 +715,20 @@ export default {
           if (this.isHomePage) return;
           this.cancelCloseInfoWindow();
           this.openLightInfo(e.target.getExtData(), e.lnglat);
+
+          // 获取像素坐标
+          const pixel = this.map.lngLatToContainer(e.lnglat);
+          // 传递路口鼠标滑入事件
+          this.$emit('map-crossing-mouseover', e.target.getExtData(), e.lnglat, pixel);
         });
 
-        marker.on('mouseout', () => {
+        marker.on('mouseout', (e) => {
           if (this.isComponentDestroyed) return;
           if (this.isHomePage) return;
           this.scheduleCloseInfoWindow();
+
+          // 传递路口鼠标滑出事件
+          this.$emit('map-crossing-mouseout', e.target.getExtData());
         });
 
         return marker;

+ 29 - 1
src/views/StatusMonitoring.vue

@@ -19,6 +19,9 @@
                 securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
                 @map-crossing-click="handleMapCrossingClick"
+                @map-crossing-mouseover="handleMapCrossingMouseover"
+                @map-crossing-mouseout="handleMapCrossingMouseout"
+
             />
         </template>
 
@@ -196,6 +199,31 @@ export default {
 
     },
     methods: {
+        // 处理地图鼠标滑入事件
+        handleMapCrossingMouseover(mapData, lnglat, pixel) {
+            console.log('父组件接收到了地图路口鼠标滑入事件:', mapData);
+            // 组装模拟数据
+            const scale = window.innerWidth / 1920;
+            let nodeData = {
+                id: mapData.position[0] + mapData.position[1],
+                label: mapData.road,
+                // 反算为设计稿坐标(SmartDialog 内部会再乘 scale)
+                pixelX: pixel ? Math.round(pixel.x / scale) : 950,
+                pixelY: pixel ? Math.round(pixel.y / scale) : 430,
+            }
+            console.log(nodeData);
+            if (this.activeLeftTab === 'overview') { // 总览
+                this.showOverviewDalogs(nodeData);
+            }
+        },
+        // 处理地图鼠标滑出事件
+        handleMapCrossingMouseout(mapData) {
+            console.log('父组件接收到了地图路口鼠标滑出事件:', mapData);
+            if (this.activeLeftTab === 'overview' && mapData) { // 总览
+                const id = mapData.position[0] + mapData.position[1];
+                this.$refs.layout.handleDialogClose('crossing3_' + id);
+            }
+        },
         // 处理地图点击事件
         handleMapCrossingClick(mapData, lnglat, pixel) {
             console.log('父组件接收到了地图路口点击事件:', mapData);
@@ -212,7 +240,7 @@ export default {
             }
             console.log(nodeData);
             if (this.activeLeftTab === 'overview') { // 总览
-                this.showOverviewDalogs(nodeData);
+                this.showCrossingDetailDialogs(nodeData);
             } else if (this.activeLeftTab === 'crossing') { // 路口
                 this.showCrossingDalogs(nodeData);
             } else if (this.activeLeftTab === 'trunkLine') { // 干线