feat: 统一三个页面的TongzhouTrafficMap组件引用和使用方式

src/views/DataAnalysis.vue

@@ -14,6 +14,8 @@
             <TongzhouTrafficMap
             amapKey="db2da7e3e248c3b2077d53fc809be63f"
             securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
+            :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
+            @map-crossing-click="handleMapCrossingClick"
             />
         </template>
 
@@ -215,6 +217,25 @@ export default {
             // 这里可以根据 nodeData 的经纬度来控制地图组件的视角
             this.testOpenSecurityRoute(nodeData);
         },
+        // 处理地图点击事件
+        handleMapCrossingClick(mapData, lnglat) {
+            console.log('父组件接收到了地图路口点击事件:', mapData, lnglat);
+            // 组装模拟数据
+            let nodeData = {
+                id: Math.random(1, 100),
+                label: mapData.road,
+            }
+            console.log(nodeData);
+            if (this.activeLeftTab === 'overview') { // 总览
+                this.testOpenSecurityRoute(nodeData);
+            } else if (this.activeLeftTab === 'crossing') { // 路口
+                this.testOpenSecurityRoute(nodeData);
+            } else if (this.activeLeftTab === 'trunkLine') { // 干线
+                this.testOpenSecurityRoute(nodeData);
+            } else if (this.activeLeftTab === 'specialDuty') { // 特勤
+                this.testOpenSecurityRoute(nodeData);
+            }
+        },
         // ================= 测试用例：模拟各种点击行为 =================
 
         // 模拟 1：打开特勤安保路线面板

src/views/SpecialSituationMonitoring.vue

@@ -14,6 +14,8 @@
             <TongzhouTrafficMap
             amapKey="db2da7e3e248c3b2077d53fc809be63f"
             securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
+            :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
+            @map-crossing-click="handleMapCrossingClick"
             />
         </template>
 
@@ -214,6 +216,29 @@ export default {
             this.testOpenSecurityRoute();
             this.testOpenSecurityRoute2();
         },
+        // 处理地图点击事件
+        handleMapCrossingClick(mapData, lnglat) {
+            console.log('父组件接收到了地图路口点击事件:', mapData, lnglat);
+            // 组装模拟数据
+            let nodeData = {
+                id: Math.random(1, 100),
+                label: mapData.road,
+            }
+            console.log(nodeData);
+            if (this.activeLeftTab === 'overview') { // 总览
+                this.testOpenSecurityRoute();
+                this.testOpenSecurityRoute2();
+            } else if (this.activeLeftTab === 'crossing') { // 路口
+                this.testOpenSecurityRoute();
+                this.testOpenSecurityRoute2();
+            } else if (this.activeLeftTab === 'trunkLine') { // 干线
+                this.testOpenSecurityRoute();
+                this.testOpenSecurityRoute2();
+            } else if (this.activeLeftTab === 'specialDuty') { // 特勤
+                this.testOpenSecurityRoute();
+                this.testOpenSecurityRoute2();
+            }
+        },
         // ================= 测试用例：模拟各种点击行为 =================
 
         // 模拟 1：打开特勤安保路线面板