指挥调度

src/views/routineCommandMap/PositionMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog type="sm" :title="!!id ? '修改灾害信息' : '请选择事发地点'" draggable customShow @close="handleClose" @confirm="submit">
+  <Dialog type="sm" :title="!!id ? '修改灾害信息' : '请选择事发地点'" draggable custom-show @close="handleClose" @confirm="submit">
     <el-form ref="queryFormRef" :model="form">
       <div class="form">
         <div class="line">
@@ -26,8 +26,8 @@
         <div class="line">
           <div class="form-item" style="margin-right: 20px">
             <div class="text">详细地址</div>
-            <el-input v-model="form.address" class="custom-input" placeholder="请输入" />
-            <div v-if="searchPop" class="scroll_box">
+            <el-input v-model="form.address" class="custom-input" placeholder="请输入" @input="handleInput" />
+            <div v-if="searchPop" class="scroll_box" style="width: 1350px; height: 700px">
               <div style="height: 60px; line-height: 60px">
                 <span style="font-weight: bold">搜索结果列表</span>
                 <i class="el-icon-close" style="float: right; font-size: 20px; cursor: pointer" @click="closeSearchList()" />
@@ -51,6 +51,7 @@
               </el-scrollbar>
 
               <el-pagination
+                class="custom-pagination-popper"
                 background
                 small
                 :hide-on-single-page="true"
@@ -58,7 +59,7 @@
                 :total="total"
                 :page-size="pageSize"
                 :current-page="pageNum"
-                style="margin-top: 10px"
+                style="margin-top: -40px; margin-left: 600px"
                 @current-change="handleChangePage"
               >
               </el-pagination>
@@ -101,6 +102,7 @@ import { useRouter } from 'vue-router';
 import { addEvent } from '@/api/emergencyCommandMap/JointDuty';
 import { showErrorMsg, showSuccessMsg } from '@/utils/notification';
 import { editEvent, getEventDetail } from '@/api/duty/eventing';
+import { debounce } from '@/utils/index';
 
 const props = defineProps({
   id: {
@@ -197,49 +199,54 @@ onUnmounted(() => {
   }
   window.removeEventListener('resize', handleResize);
 });
-function handleInput(flag) {
-  if (!form.value.address) return;
+const handleInput = debounce(
+  function (flag) {
+    if (!form.value.address) return;
 
-  if (!flag) {
-    //搜索
-    total.value = 0;
-    pageNum.value = 1;
-  }
-
-  if (!placeSearch) {
-    placeSearch = new amap.PlaceSearch({
-      pageSize: pageSize.value, // 每页条数，默认10，范围1-50
-      pageIndex: pageNum.value, // 页码
-      extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
-    });
-  }
+    if (!flag) {
+      //搜索
+      total.value = 0;
+      pageNum.value = 1;
+    }
 
-  searchPop.value = true;
-  placeSearch.setPageIndex(pageNum.value);
-  placeSearch.search(form.value.address, (status, result) => {
-    // console.log(result.poiList.pois, 'result')
-    if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
-      let arr = [];
-      const pois = result.poiList.pois;
-      total.value = result.poiList ? result.poiList.count : 0;
-      arr = pois.map((item) => {
-        return {
-          name: item.name,
-          address: item.address,
-          img: item.photos[0]?.url,
-          lnglat: [item.location.lng, item.location.lat]
-        };
+    if (!placeSearch) {
+      placeSearch = new amap.PlaceSearch({
+        pageSize: pageSize.value, // 每页条数，默认10，范围1-50
+        pageIndex: pageNum.value, // 页码
+        extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
       });
-      searchList.value = arr;
-    } else {
-      total.value = 0;
-      searchList.value = [];
     }
-  });
-}
+    searchPop.value = true;
+    placeSearch.setPageIndex(pageNum.value);
+    placeSearch.search(form.value.address, (status, result) => {
+      // console.log(result.poiList.pois, 'result')
+      if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
+        let arr = [];
+        const pois = result.poiList.pois;
+        total.value = result.poiList ? result.poiList.count : 0;
+        arr = pois.map((item) => {
+          return {
+            name: item.name,
+            address: item.address,
+            img: item.photos[0]?.url,
+            lnglat: [item.location.lng, item.location.lat]
+          };
+        });
+        searchList.value = arr;
+      } else {
+        total.value = 0;
+        searchList.value = [];
+      }
+    });
+  },
+  500,
+  false
+);
+
 function handleChangePage(newNum) {
   if (!searchPop.value) return;
   pageNum.value = newNum;
+  debugger;
   handleInput(1);
 }
 function closeSearchList() {
@@ -563,4 +570,11 @@ function submit() {
     }
   }
 }
+:deep(.dialog-content) {
+  overflow: unset !important;
+}
+.custom-pagination-popper {
+  z-index: 9999 !important;
+  position: relative;
+}
 </style>