feat: 实现Tab切换时地图模式更新功能

src/components/TongzhouTrafficMap.vue

@@ -2,7 +2,7 @@
   <div class="map-wrapper">
     <div ref="mapContainer" class="map-container"></div>
 
-    <div class="map-legend" :style="privateStyle.legend" v-if="mode === '路口'">
+    <div class="map-legend" :style="privateStyle.legend" v-if="!mode || mode === '路口'">
       <div class="legend-title">图例</div>
       <div class="legend-list">
         <div class="legend-item all-select" @click="toggleAll">
@@ -13,7 +13,7 @@
 
         <div v-for="item in legendConfig" class="legend-item" @click="toggleRouteVisible(item.name)" :key="item.name"
           :class="{ 'is-inactive': !activeLegends.includes(item.name) }"
-          v-if="activeLegends.includes(item.name)"> 
+          v-if="!mode || (mode === '路口' && !['干线协调', '勤务路线'].includes(item.name))"> 
 
           <div class="legend-dot"
             :style="{ backgroundColor: ['离线', '降级', '故障'].includes(item.name) ? 'transparent' : item.color }"
@@ -43,7 +43,7 @@ export default {
   props: {
     amapKey: { type: String, default: '您的Key' },
     securityJsCode: { type: String, default: '您的安全密钥' },
-    mode: { type: String, default: '路口', validator: (value) => ['路口', '干线', '特勤'].includes(value) }
+    mode: { type: String, default: '', validator: (value) => ['', '路口', '干线', '特勤'].includes(value) }
   },
   data() {
     return {
@@ -73,24 +73,7 @@ export default {
     };
   },
   mounted() {
-    // 根据mode调整activeLegends数组
-    switch (this.mode) {
-      case '路口':
-        // 显示所有路线但去掉'干线协调'和'勤务路线'
-        this.activeLegends = ["中心计划", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
-        break;
-      case '干线':
-        // 只显示'干线协调'路线
-        this.activeLegends = ["干线协调"];
-        break;
-      case '特勤':
-        // 只显示'勤务路线'
-        this.activeLegends = ["勤务路线"];
-        break;
-      default:
-        // 默认显示所有路线
-        this.activeLegends = ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
-    }
+    this.updateMapByMode();
     
     this.initAMap();
 
@@ -99,6 +82,15 @@ export default {
       this.privateStyle.legend = { right: "25%" };
     }
   },
+  watch: {
+    mode: {
+      handler(newMode) {
+        this.updateMapByMode();
+        this.reDrawMap();
+      },
+      immediate: false
+    }
+  },
   beforeDestroy() {
     if (this.infoWindow) this.infoWindow.close();
 
@@ -135,6 +127,60 @@ export default {
     }
   },
   methods: {
+    updateMapByMode() {
+      // 根据mode调整activeLegends数组
+      switch (this.mode) {
+        case '路口':
+          // 显示所有路线但去掉'干线协调'和'勤务路线'
+          this.activeLegends = ["中心计划", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
+          break;
+        case '干线':
+          // 只显示'干线协调'路线
+          this.activeLegends = ["干线协调"];
+          break;
+        case '特勤':
+          // 只显示'勤务路线'
+          this.activeLegends = ["勤务路线"];
+          break;
+        default:
+          // 默认显示所有路线
+          this.activeLegends = ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
+      }
+    },
+    reDrawMap() {
+      // 清理旧的路线和标记
+      if (this.infoWindow) this.infoWindow.close();
+      
+      // 清理普通的 polylines 数组
+      this.polylines.forEach(p => {
+        if (p && typeof p.setMap === 'function') p.setMap(null);
+      });
+      
+      // 清理 routeGroups
+      Object.values(this.routeGroups).forEach(g => {
+        if (!g) return;
+        
+        if (Array.isArray(g)) {
+          // 如果是数组，遍历每个成员销毁
+          g.forEach(overlay => {
+            if (overlay && typeof overlay.setMap === 'function') {
+              overlay.setMap(null);
+            }
+          });
+        } else if (typeof g.setMap === 'function') {
+          // 如果是旧版的 OverlayGroup 或单个覆盖物
+          g.setMap(null);
+        }
+      });
+      
+      // 清空 routeGroups
+      this.routeGroups = {};
+      
+      // 重新绘制路线
+      if (this.map) {
+        this.drawStaticRoutes();
+      }
+    },
     // 修改后的 initAMap
     async initAMap() {
       window._AMapSecurityConfig = { securityJsCode: this.securityJsCode };
@@ -160,25 +206,27 @@ export default {
 
       this.legendConfig.forEach((config, index) => {
         // 根据mode过滤路线
-        switch (this.mode) {
-          case '路口':
-            // 路口模式：去掉'干线协调'和'勤务路线'
-            if (['干线协调', '勤务路线'].includes(config.name)) {
-              return;
-            }
-            break;
-          case '干线':
-            // 干线模式：只处理'干线协调'
-            if (config.name !== '干线协调') {
-              return;
-            }
-            break;
-          case '特勤':
-            // 特勤模式：只处理'勤务路线'
-            if (config.name !== '勤务路线') {
-              return;
-            }
-            break;
+        if (this.mode) {
+          switch (this.mode) {
+            case '路口':
+              // 路口模式：去掉'干线协调'和'勤务路线'
+              if (['干线协调', '勤务路线'].includes(config.name)) {
+                return;
+              }
+              break;
+            case '干线':
+              // 干线模式：只处理'干线协调'
+              if (config.name !== '干线协调') {
+                return;
+              }
+              break;
+            case '特勤':
+              // 特勤模式：只处理'勤务路线'
+              if (config.name !== '勤务路线') {
+                return;
+              }
+              break;
+          }
         }
         
         setTimeout(() => {

src/views/StatusMonitoring.vue

@@ -13,7 +13,7 @@
             <TongzhouTrafficMap
                 amapKey="db2da7e3e248c3b2077d53fc809be63f"
                 securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
-                :showSpecialRoutes="false"
+                :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
                 @map-crossing-click="handleMapCrossingClick"
             />
         </template>
@@ -662,4 +662,6 @@ export default {
 .mode-switch>div {
     width: 200px;
 }
+
+
 </style>