Просмотр исходного кода

fix(map): 修复地图遮挡侧边菜单的问题

- 为地图根容器建立独立层叠上下文
- 限制地图内部元素层级范围
Zimo 2 недель назад
Родитель
Сommit
970d52bd59
1 измененных файлов с 13 добавлено и 22 удалено
  1. 13 22
      src/views/pms/map/Map.vue

+ 13 - 22
src/views/pms/map/Map.vue

@@ -429,14 +429,12 @@ const handleClusterInit = (clusterer: any) => {
       :controls="mapControls"
       :min-zoom="3"
       @init="handleMapInit"
-      @zoomend="syncCurrentZoom"
-    >
+      @zoomend="syncCurrentZoom">
       <tdt-marker-clusterer
         :markers="clusterMarkers"
         :styles="clusterStyles"
         @click="handleMarkerClick"
-        @init="handleClusterInit"
-      />
+        @init="handleClusterInit" />
 
       <tdt-infowindow
         :target="infoWindowTarget"
@@ -445,8 +443,7 @@ const handleClusterInit = (clusterer: any) => {
         :offset="[0, -30]"
         :auto-pan="true"
         :close-on-click="true"
-        @update:target="handleInfoWindowTargetChange"
-      >
+        @update:target="handleInfoWindowTargetChange">
         <div v-if="activeDevice" class="device-infowindow">
           <div class="device-infowindow__list">
             <div class="device-infowindow__row">
@@ -501,8 +498,7 @@ const handleClusterInit = (clusterer: any) => {
           @touchstart.stop
           @touchmove.stop
           @touchend.stop
-          @wheel.stop
-        >
+          @wheel.stop>
           <div class="hero-panel__head">
             <div>
               <div class="hero-panel__kicker">PMS · TianDiTu</div>
@@ -513,22 +509,19 @@ const handleClusterInit = (clusterer: any) => {
             </div>
             <div
               class="hero-panel__map-mode -translate-y-1"
-              :class="mapMode === 'TMAP_SATELLITE_MAP' ? 'is-satellite' : 'is-map'"
-            >
+              :class="mapMode === 'TMAP_SATELLITE_MAP' ? 'is-satellite' : 'is-map'">
               <button
                 type="button"
                 class="mode-chip text-gray-6"
                 :class="{ 'is-active': mapMode === 'TMAP_NORMAL_MAP' }"
-                @click="switchMapMode('TMAP_NORMAL_MAP')"
-              >
+                @click="switchMapMode('TMAP_NORMAL_MAP')">
                 地图
               </button>
               <button
                 type="button"
                 class="mode-chip text-gray-6"
                 :class="{ 'is-active': mapMode === 'TMAP_SATELLITE_MAP' }"
-                @click="switchMapMode('TMAP_SATELLITE_MAP')"
-              >
+                @click="switchMapMode('TMAP_SATELLITE_MAP')">
                 卫星
               </button>
             </div>
@@ -569,8 +562,7 @@ const handleClusterInit = (clusterer: any) => {
           @touchstart.stop
           @touchmove.stop
           @touchend.stop
-          @wheel.stop
-        >
+          @wheel.stop>
           <el-form size="default" label-position="top">
             <el-form-item label="关键词">
               <el-input v-model="keyword" clearable placeholder="设备名称 / 编码 / 位置">
@@ -590,8 +582,7 @@ const handleClusterInit = (clusterer: any) => {
                 filterable
                 clearable
                 :placeholder="t('deviceForm.deptHolder')"
-                @change="handleDeptChange"
-              />
+                @change="handleDeptChange" />
             </el-form-item>
 
             <el-form-item label="设备状态">
@@ -602,8 +593,7 @@ const handleClusterInit = (clusterer: any) => {
                   type="button"
                   class="status-tab"
                   :class="{ 'is-active': statusFilter === item.value }"
-                  @click="statusFilter = item.value"
-                >
+                  @click="statusFilter = item.value">
                   {{ item.label }}
                 </button>
               </div>
@@ -663,8 +653,7 @@ const handleClusterInit = (clusterer: any) => {
       :ifLine="ifLine"
       :dept="dept"
       :deviceCode="deviceCode"
-      ref="showDrawer"
-    />
+      ref="showDrawer" />
   </div>
 </template>
 
@@ -683,8 +672,10 @@ const handleClusterInit = (clusterer: any) => {
   --slate: #334155;
 
   position: relative;
+  z-index: 0;
   height: var(--page-height);
   overflow: hidden;
+  isolation: isolate;
   border: 1px solid rgb(203 213 225 / 70%);
   border-radius: 20px;
   box-shadow: 0 24px 60px rgb(15 23 42 / 12%);