地图调整

src/views/routineCommandMap/MiddleSection.vue

@@ -4,7 +4,7 @@
       <el-button type="primary" @click="handleQuery1" :disabled="true">备战防御</el-button>
       <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
     </div>
-    <PositionMap id="positionMap" v-if="mapDialogVisible" v-model:visible="mapDialogVisible" @change="handleMapChange" />
+    <PositionMap v-if="mapDialogVisible" v-model:visible="mapDialogVisible" @change="handleMapChange" />
     <GlobalMap is-component width="3894" height="2140" />
   </div>
 </template>

src/views/routineCommandMap/PositionMap.vue

@@ -1,73 +1,69 @@
 <template>
-  <div>
-    <div class="dialog-wrap">
-      <div class="dialog" ref="containerRef" :style="{ width: width, height: height }">
-        <div class="dialog-header">
-          <div class="dialog-title">{{ title }}</div>
-          <div class="icon-close" @click="handleClose">
-            <el-icon size="40px"><Close /></el-icon>
-          </div>
-        </div>
-        <div class="dialog-content">
-          <el-form ref="queryFormRef" :model="form" :rules="rules" :inline="true">
-            <el-form-item label="详细地址" prop="address">
-              <el-input v-model="form.address" placeholder="请输入" clearable />
-            </el-form-item>
-            <el-form-item label="经度" prop="longitude">
-              <el-input v-model="form.longitude" placeholder="请输入" />
-            </el-form-item>
-            <el-form-item label="纬度" prop="latitude">
-              <el-input v-model="form.latitude" placeholder="请输入" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" size="large" @click="submit">确定</el-button>
-            </el-form-item>
-          </el-form>
-          <div class="map_box">
-            <div id="map" class="map"></div>
-            <div class="search">
-              <!-- @input="handleInput(0)" -->
-              <el-input v-model="location" placeholder="请输入地址" />
-              <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>
-            </div>
+  <div class="dialog">
+    <div class="dialog-header">
+      <div class="dialog-title">{{ title }}</div>
+      <div class="icon-close" @click="handleClose">
+        <el-icon size="40px"><Close /></el-icon>
+      </div>
+    </div>
+    <div class="dialog-content">
+      <el-form ref="queryFormRef" :model="form" :rules="rules" :inline="true">
+        <el-form-item label="详细地址" prop="address">
+          <el-input v-model="form.address" placeholder="请输入" clearable />
+        </el-form-item>
+        <el-form-item label="经度" prop="longitude">
+          <el-input v-model="form.longitude" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="纬度" prop="latitude">
+          <el-input v-model="form.latitude" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="large" @click="submit">确定</el-button>
+        </el-form-item>
+      </el-form>
+      <div id="positionMap" class="map_box" :style="{ width: width, height: height }">
+        <div id="map" class="map"></div>
+        <!--            <div class="search">-->
+        <!--              &lt;!&ndash; @input="handleInput(0)" &ndash;&gt;-->
+        <!--              <el-input v-model="location" placeholder="请输入地址" />-->
+        <!--              <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>-->
+        <!--            </div>-->
 
-            <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: 20px; cursor: pointer" @click="closeSearchList()" />
-              </div>
+        <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: 20px; cursor: pointer" @click="closeSearchList()" />
+          </div>
 
-              <el-scrollbar class="scroll" style="height: 250px">
-                <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" style="height: 250px">
+            <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>
-                </div>
-                <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>
+                </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>
+
+          <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>
@@ -147,6 +143,9 @@ watch(
         initMap();
       });
     }
+  },
+  {
+    immediate: true
   }
 );
 onMounted(() => {
@@ -291,8 +290,8 @@ function handleClose() {
 let queryFormRef = ref();
 let containerRef = ref();
 function handleResize() {
-  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
-  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
+  const containerWidth = 2980 * (document.body.clientWidth / 8960);
+  const containerHeight = 980 * (document.body.clientHeight / 2520);
   width.value = containerWidth + 'px';
   height.value = containerHeight + 'px';
   nextTick(() => {
@@ -405,26 +404,21 @@ function submit() {
 .empty {
   margin: 20px 0;
 }
-.dialog-wrap {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  .dialog {
-    width: 4000px;
-    height: 2000px;
-    margin: 0 auto;
-    background-color: #fff;
-    border-radius: 10px;
-  }
-}
 .dialog {
+  position: absolute;
+  //top: 0px;
+  //left: 1530px;
+  //width: 1569px;
+  //height: 1262px;
+  top: 90px;
+  left: 900px;
+  width: 3000px;
+  height: 2000px;
+  z-index: 2000;
+  font-size: 36px;
   padding: 0 20px;
+  background-color: #fff;
+  border-radius: 10px;
   .dialog-header {
     width: 100%;
     height: 70px;
@@ -441,8 +435,6 @@ function submit() {
   .dialog-content {
     padding: 10px 0;
     .map_box {
-      width: calc(4000px - 50px) !important;
-      height: calc(2000px - 200px) !important;
       overflow: hidden;
     }
   }