Przeglądaj źródła

地图搜索框:改为 showSearch prop 显式开启,按页面布局调整位置

    - TongzhouTrafficMap 新增 showSearch prop(默认 false),搜索框
      v-if="showSearch";4 个 view 各自显式开启
    - Home:用默认 right:490 / top:110,适配其 400px 右侧栏
    - StatusMonitoring / SpecialSituationMonitoring / TrunkCoordination:
      显式传 :search-offset-right="100" :search-offset-top="120",
      将搜索框定位到 480px 右侧栏内的右上角,避免覆盖中间地图区域
画安 1 miesiąc temu
rodzic
commit
16b0a65157

+ 4 - 3
src/components/TongzhouTrafficMap.vue

@@ -40,7 +40,7 @@
       <div class="legend-show-icon">☰</div>
     </div>
 
-    <div class="map-search-wrap" :style="searchBoxStyle">
+    <div v-if="showSearch" class="map-search-wrap" :style="searchBoxStyle">
       <MapSearchBox :data-source="intersectionData" @select="onSearchSelect" />
     </div>
   </div>
@@ -58,8 +58,9 @@ export default {
     amapKey: { type: String, default: () => process.env.VUE_APP_AMAP_KEY || 'db2da7e3e248c3b2077d53fc809be63f' },
     securityJsCode: { type: String, default: () => process.env.VUE_APP_AMAP_SECURITY_CODE || 'a7413c674852c5eaf01d90813c5b7ef6' },
     mode: { type: String, default: '', validator: (value) => ['', '路口', '干线', '特勤'].includes(value) },
-    // 搜索框相对屏幕右侧的偏移;默认 490px 适配 400px 右侧栏(Home),
-    // special-situation-monitoring 布局右侧栏 480px,需传 570。
+    // 是否渲染地图搜索框。默认关闭,仅 Home 显式开启。
+    showSearch: { type: Boolean, default: false },
+    // 搜索框相对屏幕右侧的偏移;默认 490px 适配 Home 的 400px 右侧栏。
     searchOffsetRight: { type: Number, default: 490 },
     searchOffsetTop: { type: Number, default: 110 },
   },

+ 1 - 0
src/views/Home.vue

@@ -13,6 +13,7 @@
     <template #map>
       <TongzhouTrafficMap
         ref="trafficMapRef"
+        :show-search="true"
       />
     </template>
 

+ 3 - 1
src/views/SpecialSituationMonitoring.vue

@@ -16,11 +16,13 @@
             <!-- 地图 -->
             <TongzhouTrafficMap v-else ref="trafficMapRef"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
-                :search-offset-right="570"
                 @map-crossing-click="handleMapCrossingClick"
                 @map-crossing-mouseover="handleMapCrossingMouseover"
                 @map-crossing-mouseout="handleMapCrossingMouseout"
                 @bindTrunkMenuTree="handleTrunkMenuUpdate"
+                :show-search="true"
+                :search-offset-right="100"
+                :search-offset-top="120"
             />
         </template>
 

+ 3 - 1
src/views/StatusMonitoring.vue

@@ -16,11 +16,13 @@
             <!-- 地图 -->
             <TongzhouTrafficMap v-else ref="trafficMapRef"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
-                :search-offset-right="570"
                 @map-crossing-click="handleMapCrossingClick"
                 @map-crossing-mouseover="handleMapCrossingMouseover"
                 @map-crossing-mouseout="handleMapCrossingMouseout"
                 @bindTrunkMenuTree="handleTrunkMenuUpdate"
+                :show-search="true"
+                :search-offset-right="100"
+                :search-offset-top="120"
             />
         </template>
 

+ 3 - 1
src/views/TrunkCoordination.vue

@@ -16,11 +16,13 @@
             <!-- 地图 -->
             <TongzhouTrafficMap v-else ref="trafficMapRef"
                 :mode="activeLeftTab === 'crossing' ? '路口' : activeLeftTab === 'trunkLine' ? '干线' : activeLeftTab === 'specialDuty' ? '特勤' : ''"
-                :search-offset-right="570"
                 @map-crossing-click="handleMapCrossingClick"
                 @map-crossing-mouseover="handleMapCrossingMouseover"
                 @map-crossing-mouseout="handleMapCrossingMouseout"
                 @bindTrunkMenuTree="handleTrunkMenuUpdate"
+                :show-search="true"
+                :search-offset-right="100"
+                :search-offset-top="120"
             />
         </template>