Procházet zdrojové kódy

feat: 添加showSpecialRoutes属性控制干线协调和勤务路线的显示/隐藏

sequoia tungfang před 1 měsícem
rodič
revize
0cdb6a6ece

+ 21 - 2
src/components/TongzhouTrafficMap.vue

@@ -12,7 +12,8 @@
         </div>
 
         <div v-for="item in legendConfig" class="legend-item" @click="toggleRouteVisible(item.name)" :key="item.name"
-          :class="{ 'is-inactive': !activeLegends.includes(item.name) }">
+          :class="{ 'is-inactive': !activeLegends.includes(item.name) }"
+          v-if="showSpecialRoutes || !['干线协调', '勤务路线'].includes(item.name)"> 
 
           <div class="legend-dot"
             :style="{ backgroundColor: ['离线', '降级', '故障'].includes(item.name) ? 'transparent' : item.color }"
@@ -41,7 +42,8 @@ export default {
   name: "TrafficMap",
   props: {
     amapKey: { type: String, default: '您的Key' },
-    securityJsCode: { type: String, default: '您的安全密钥' }
+    securityJsCode: { type: String, default: '您的安全密钥' },
+    showSpecialRoutes: { type: Boolean, default: true }
   },
   data() {
     return {
@@ -71,6 +73,18 @@ export default {
     };
   },
   mounted() {
+    // 根据props调整activeLegends数组
+    if (!this.showSpecialRoutes) {
+      const trunkCoordinationIndex = this.activeLegends.indexOf('干线协调');
+      if (trunkCoordinationIndex > -1) {
+        this.activeLegends.splice(trunkCoordinationIndex, 1);
+      }
+      const serviceRouteIndex = this.activeLegends.indexOf('勤务路线');
+      if (serviceRouteIndex > -1) {
+        this.activeLegends.splice(serviceRouteIndex, 1);
+      }
+    }
+    
     this.initAMap();
 
     // 自定义首页地图搜索和图例位置样式
@@ -138,6 +152,11 @@ export default {
       const AMap = this.AMap;
 
       this.legendConfig.forEach((config, index) => {
+        // 当showSpecialRoutes为false时,跳过干线协调和勤务路线
+        if (!this.showSpecialRoutes && ['干线协调', '勤务路线'].includes(config.name)) {
+          return;
+        }
+        
         setTimeout(() => {
           const driving = new AMap.Driving({
             map: null,

+ 6 - 2
src/views/StatusMonitoring.vue

@@ -10,8 +10,12 @@
 
         <template #map>
             <!-- 地图 -->
-            <TongzhouTrafficMap amapKey="db2da7e3e248c3b2077d53fc809be63f"
-                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6" @map-crossing-click="handleMapCrossingClick" />
+            <TongzhouTrafficMap
+                amapKey="db2da7e3e248c3b2077d53fc809be63f"
+                securityJsCode="a7413c674852c5eaf01d90813c5b7ef6"
+                :showSpecialRoutes="false"
+                @map-crossing-click="handleMapCrossingClick"
+            />
         </template>
 
         <template #left>