feat: 添加mode属性实现路口、干线、特勤三种模式

src/components/TongzhouTrafficMap.vue

@@ -2,10 +2,10 @@
   <div class="map-wrapper">
     <div ref="mapContainer" class="map-container"></div>
 
-    <div class="map-legend" :style="privateStyle.legend" v-if="showLegend">
+    <div class="map-legend" :style="privateStyle.legend" v-if="mode === '路口'">
       <div class="legend-title">图例</div>
       <div class="legend-list">
-        <div class="legend-item all-select" @click="toggleAll" v-if="!displayRoute">
+        <div class="legend-item all-select" @click="toggleAll">
           <div class="legend-dot"
             :style="{ backgroundColor: isAllSelected ? '#fff' : 'transparent', border: '1px solid #fff' }"></div>
           <div class="legend-label" style="font-weight: bold;">全选</div>
@@ -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="(displayRoute && item.name === displayRoute) || (!displayRoute && activeLegends.includes(item.name))"> 
+          v-if="activeLegends.includes(item.name)"> 
 
           <div class="legend-dot"
             :style="{ backgroundColor: ['离线', '降级', '故障'].includes(item.name) ? 'transparent' : item.color }"
@@ -43,8 +43,7 @@ export default {
   props: {
     amapKey: { type: String, default: '您的Key' },
     securityJsCode: { type: String, default: '您的安全密钥' },
-    displayRoute: { type: String, default: '', validator: (value) => ['', '干线协调', '勤务路线'].includes(value) },
-    showLegend: { type: Boolean, default: false }
+    mode: { type: String, default: '路口', validator: (value) => ['路口', '干线', '特勤'].includes(value) }
   },
   data() {
     return {
@@ -74,13 +73,23 @@ export default {
     };
   },
   mounted() {
-    // 根据props调整activeLegends数组
-    if (this.displayRoute) {
-      // 如果指定了要显示的路线，只保留该路线
-      this.activeLegends = [this.displayRoute];
-    } else {
-      // 如果没有指定，显示所有路线
-      this.activeLegends = ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
+    // 根据mode调整activeLegends数组
+    switch (this.mode) {
+      case '路口':
+        // 显示所有路线但去掉'干线协调'和'勤务路线'
+        this.activeLegends = ["中心计划", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
+        break;
+      case '干线':
+        // 只显示'干线协调'路线
+        this.activeLegends = ["干线协调"];
+        break;
+      case '特勤':
+        // 只显示'勤务路线'
+        this.activeLegends = ["勤务路线"];
+        break;
+      default:
+        // 默认显示所有路线
+        this.activeLegends = ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"];
     }
     
     this.initAMap();
@@ -150,9 +159,26 @@ export default {
       const AMap = this.AMap;
 
       this.legendConfig.forEach((config, index) => {
-        // 如果指定了要显示的路线，只处理该路线
-        if (this.displayRoute && config.name !== this.displayRoute) {
-          return;
+        // 根据mode过滤路线
+        switch (this.mode) {
+          case '路口':
+            // 路口模式：去掉'干线协调'和'勤务路线'
+            if (['干线协调', '勤务路线'].includes(config.name)) {
+              return;
+            }
+            break;
+          case '干线':
+            // 干线模式：只处理'干线协调'
+            if (config.name !== '干线协调') {
+              return;
+            }
+            break;
+          case '特勤':
+            // 特勤模式：只处理'勤务路线'
+            if (config.name !== '勤务路线') {
+              return;
+            }
+            break;
         }
         
         setTimeout(() => {