地图点击弹窗定位到点击位置右侧；左侧菜单联动代码预留

  1. TongzhouTrafficMap.vue
  - marker click 事件中通过 map.lngLatToContainer 获取像素坐标，emit map-crossing-click 时新增第三个参数 pixel
  - 新增公开方法 lngLatToPixel(lng, lat)，供父组件将经纬度转为像素坐标

  2. StatusMonitoring.vue
  - 地图组件添加 ref="trafficMapRef"
  - handleMapCrossingClick 接收 pixel 参数，反算为设计稿坐标存入 nodeData.pixelX/pixelY，id 改用 mapData.position
  拼接替代随机数
  - showOverviewDalogs 的 position 改为动态值 { x: pixelX + 20, y: pixelY }，弹窗显示在点击点右侧
  - handleMenuClick 中预留了地图联动代码（已注释），因菜单数据和地图数据的经纬度不一致暂无法生效，待数据源统一或改用 ID
  匹配后启用

src/components/TongzhouTrafficMap.vue

@@ -705,7 +705,9 @@ export default {
             this.cancelCloseInfoWindow();
             this.openLightInfo(extData, e.lnglat);
           }
-          this.$emit('map-crossing-click', extData, e.lnglat);
+          // 获取像素坐标
+          const pixel = this.map.lngLatToContainer(e.lnglat);
+          this.$emit('map-crossing-click', extData, e.lnglat, pixel);
         });
 
         marker.on('mouseover', (e) => {
@@ -939,6 +941,11 @@ export default {
       });
 
       console.log('状态坐标已存储到localStorage');
+    },
+    // 公开方法：将经纬度转换为像素坐标
+    lngLatToPixel(lng, lat) {
+        if (!this.map) return null;
+        return this.map.lngLatToContainer([lng, lat]);
     }
   }
 };

src/views/StatusMonitoring.vue

@@ -14,7 +14,7 @@
                 <CrossingListPanel :onViewDetail="handleCrossingViewDetail"/>
             </div>
             <!-- 地图 -->
-            <TongzhouTrafficMap v-else
+            <TongzhouTrafficMap v-else ref="trafficMapRef"
                 amapKey="db2da7e3e248c3b2077d53fc809be63f"
                 securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
@@ -197,12 +197,18 @@ export default {
     },
     methods: {
         // 处理地图点击事件
-        handleMapCrossingClick(mapData, lnglat) {
-            console.log('父组件接收到了地图路口点击事件:', mapData, lnglat);
+        handleMapCrossingClick(mapData, lnglat, pixel) {
+            console.log('父组件接收到了地图路口点击事件:', mapData);
+            console.log('父组件接收到了地图路口点击事件:', lnglat);
+            console.log('父组件接收到了地图路口点击事件:', pixel);
             // 组装模拟数据
+            const scale = window.innerWidth / 1920;
             let nodeData = {
-                id: Math.floor(Math.random()*5)+1,
+                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') { // 总览
@@ -252,6 +258,19 @@ export default {
         // 处理菜单点击
         handleMenuClick(nodeData) {
             console.log('父组件接收到了最底层路口点击事件:', nodeData);
+            // 通过地图组件获取像素坐标（如果有经纬度的话）
+            // if (nodeData.lng && nodeData.lat && this.$refs.trafficMapRef) {
+            //     // 地图联动
+            //     this.$refs.trafficMapRef.focusByLocation([nodeData.lng, nodeData.lat]);
+
+            //     const pixel = this.$refs.trafficMapRef.lngLatToPixel(nodeData.lng, nodeData.lat);
+            //     if (pixel) {
+            //         const scale = window.innerWidth / 1920;
+            //         nodeData.pixelX = Math.round(pixel.x / scale) + 20;
+            //         nodeData.pixelY = Math.round(pixel.y / scale);
+            //     }
+            // }
+
             // 根据Tab来显示不同的弹窗内容
             if (this.activeLeftTab === 'overview') { // 总览
                 this.showOverviewDalogs(nodeData);
@@ -289,7 +308,7 @@ export default {
                 height: 260,
                 center: false,
                 showClose: true,
-                position: { x: 950, y: 430 },
+                position: { x: (nodeData.pixelX || 950) + 20, y: nodeData.pixelY || 430 },
                 noPadding: false,
                 data: {
                     ...nodeData,