修复地图加载异常问题

src/views/routineCommandMap/PositionMap.vue

@@ -1,86 +1,88 @@
 <template>
   <Dialog type="md" title="请选择事发地点" draggable height="780px" customShow @close="handleClose" @confirm="submit">
-    <el-form ref="queryFormRef" :model="form" :rules="rules">
-      <div class="form">
-        <div class="line">
-          <div class="form-item" style="margin-right: 20px">
-            <div class="text">灾害事件</div>
-            <el-input v-model="form.event_title" class="custom-input" placeholder="请输入" />
+    <div class="custom-dialog">
+      <el-form ref="queryFormRef" :model="form" :rules="rules">
+        <div class="form">
+          <div class="line">
+            <div class="form-item" style="margin-right: 20px">
+              <div class="text">灾害事件</div>
+              <el-input v-model="form.event_title" class="custom-input" placeholder="请输入" />
+            </div>
           </div>
-        </div>
-        <div class="line">
-          <div class="form-item" style="margin-right: 20px">
-            <div class="text">灾害级别</div>
-            <el-select
-              v-model="form.event_level"
-              placeholder="请选择"
-              class="custom-select"
-              popper-class="custom-select-popper"
-              :teleported="false"
-              clearable
-            >
-              <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
+          <div class="line">
+            <div class="form-item" style="margin-right: 20px">
+              <div class="text">灾害级别</div>
+              <el-select
+                v-model="form.event_level"
+                placeholder="请选择"
+                class="custom-select"
+                popper-class="custom-select-popper"
+                :teleported="false"
+                clearable
+              >
+                <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
           </div>
-        </div>
-        <div class="line">
-          <div class="form-item" style="margin-right: 10px">
-            <div class="text">详细地址</div>
-            <el-input v-model="form.address" class="custom-input" placeholder="请输入" />
-            <div v-if="searchPop" class="scroll_box">
-              <div style="height: 30px; line-height: 30px">
-                <span style="font-weight: bold">搜索结果列表</span>
-                <i class="el-icon-close" style="float: right; font-size: 12px; cursor: pointer" @click="closeSearchList()" />
-              </div>
+          <div class="line">
+            <div class="form-item" style="margin-right: 10px">
+              <div class="text">详细地址</div>
+              <el-input v-model="form.address" class="custom-input" placeholder="请输入" />
+              <div v-if="searchPop" class="scroll_box">
+                <div style="height: 30px; line-height: 30px">
+                  <span style="font-weight: bold">搜索结果列表</span>
+                  <i class="el-icon-close" style="float: right; font-size: 12px; cursor: pointer" @click="closeSearchList()" />
+                </div>
 
-              <el-scrollbar class="scroll">
-                <div v-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
-                  <el-image class="img" :src="item.img" :alt="item.name" lazy>
-                    <template #error>
-                      <div class="image-slot">
-                        <i class="el-icon-picture-outline"></i>
-                      </div>
-                    </template>
-                  </el-image>
-                  <div>
-                    <div class="text">{{ item.name }}</div>
-                    <div>{{ item.address }}</div>
+                <el-scrollbar class="scroll">
+                  <div v-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
+                    <el-image class="img" :src="item.img" :alt="item.name" lazy>
+                      <template #error>
+                        <div class="image-slot">
+                          <i class="el-icon-picture-outline"></i>
+                        </div>
+                      </template>
+                    </el-image>
+                    <div>
+                      <div class="text">{{ item.name }}</div>
+                      <div>{{ item.address }}</div>
+                    </div>
                   </div>
-                </div>
-                <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
-              </el-scrollbar>
+                  <div v-show="!searchList.length" class="empty" style="text-align: center">没有搜索到内容</div>
+                </el-scrollbar>
 
-              <el-pagination
-                background
-                small
-                :hide-on-single-page="true"
-                layout="prev, pager, next"
-                :total="total"
-                :page-size="pageSize"
-                :current-page="pageNum"
-                style="margin-top: 10px"
-                @current-change="handleChangePage"
-              >
-              </el-pagination>
+                <el-pagination
+                  background
+                  small
+                  :hide-on-single-page="true"
+                  layout="prev, pager, next"
+                  :total="total"
+                  :page-size="pageSize"
+                  :current-page="pageNum"
+                  style="margin-top: 10px"
+                  @current-change="handleChangePage"
+                >
+                </el-pagination>
+              </div>
             </div>
+            <div class="common-btn-primary" @click="handleInput(0)">搜索</div>
           </div>
-          <div class="common-btn-primary" @click="handleInput(0)">搜索</div>
-        </div>
-        <div class="line">
-          <div class="form-item">
-            <div class="text" style="width: 72px; text-align: right">经度</div>
-            <el-input v-model="form.longitude" class="custom-input" placeholder="请输入" />
-          </div>
-          <div class="form-item">
-            <div class="text" style="width: 72px; text-align: right">纬度</div>
-            <el-input v-model="form.latitude" class="custom-input" placeholder="请输入" />
+          <div class="line">
+            <div class="form-item">
+              <div class="text" style="width: 72px; text-align: right">经度</div>
+              <el-input v-model="form.longitude" class="custom-input" placeholder="请输入" />
+            </div>
+            <div class="form-item">
+              <div class="text" style="width: 72px; text-align: right">纬度</div>
+              <el-input v-model="form.latitude" class="custom-input" placeholder="请输入" />
+            </div>
           </div>
         </div>
-      </div>
-    </el-form>
-    <div ref="containerRef" class="map_box">
-      <div id="positionMap">
-        <div id="map" class="map" :style="{ width: width, height: height }"></div>
+      </el-form>
+      <div ref="containerRef" class="map_box">
+        <div id="positionMap">
+          <div id="map" class="map" :style="{ width: width, height: height }"></div>
+        </div>
       </div>
     </div>
   </Dialog>
@@ -100,7 +102,7 @@ const props = defineProps({
   }
 });
 const proxy = getCurrentInstance()?.proxy;
-const { mm_event_level } = toRefs(proxy?.useDict( 'mm_event_level'));
+const { mm_event_level } = toRefs(proxy?.useDict('mm_event_level'));
 const router = useRouter();
 const emits = defineEmits(['update:visible']);
 // 地图对象
@@ -318,6 +320,7 @@ function handleClose() {
 let queryFormRef = ref();
 let containerRef = ref();
 function handleResize() {
+  debugger
   const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 1920);
   const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 1080);
   width.value = containerWidth + 'px';
@@ -481,8 +484,8 @@ function submit() {
 .empty {
   margin: 20px 0;
 }
-:deep(.dialog-content) {
-  flex: 1;
+.custom-dialog {
+  height: 100%;
   padding: 10px 0;
   display: flex;
   flex-direction: column;
@@ -490,6 +493,7 @@ function submit() {
     overflow: hidden;
   }
 }
+
 .form {
   .line {
     width: 100%;