矩形范围

wujingjing

2025-02-19 cc43f08bbbc5e501c63844516ae41a15358c6ce5

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Search.vue

@@ -1,32 +1,46 @@
<template>
   <div>
      <div class="search flex-items-center">
         <el-input class="w-[320px]" v-model="searchText" clearable placeholder="查找对象" @input="searchInput" @clear="clearSearch">
            <template #prefix>
               <el-switch v-model="isSearchObj" inline-prompt active-text="对象" inactive-text="道路" @change="changeSearchType" />
            </template>
         </el-input>
         <div
            class="bg-blue-400 flex-center px-4 h-[32px] search-btn cursor-pointer hover:bg-blue-500 active:bg-blue-400"
            @click="searchClick(searchText)"
         >
            <span class="ywifont ywicon-sousuo text-white"></span>
   <div class="h-full">
      <AdvanceSearch v-if="isAdvanceSearch" class="h-full" :ol-map="olMap" @close="advanceSearchClose" :propertyMap="propertyMap" :propertyConfigMap="propertyConfigMap" />
      <div v-else class="simple-search mt-3">
         <div class="search flex-items-center">
            <el-input class="w-[320px]" v-model="searchText" clearable placeholder="查找对象" @input="searchInput" @clear="clearSearch">
               <template #prefix>
                  <el-switch v-model="isSearchObj" inline-prompt active-text="对象" inactive-text="道路" @change="changeSearchType" />

                  <el-button
                     class="bg-white flex-center px-2 cursor-pointer hover:bg-[#f5f5f5] active:bg-[#f5f5f5]"
                     text
                     title="高级搜索"
                     @click="handleAdvanceSearchClick"
                  >
                     <span class="ywifont ywicon-liebiao text-black !text-[22px]"></span>
                  </el-button>
               </template>
            </el-input>

            <div
               class="bg-blue-400 flex-center px-4 h-[32px] search-btn cursor-pointer hover:bg-blue-500 active:bg-blue-400"
               @click="searchClick(searchText)"
            >
               <span v-if="isLoading" class="ywifont ywicon-loading1 text-white animate-spin"></span>
               <span v-else class="ywifont ywicon-sousuo text-white"></span>
            </div>
         </div>
      </div>

      <div class="search-result w-[320px] bg-white text-sm">
         <div
            class="flex-items-center gap-2 hover:bg-[#ebebeb] cursor-pointer text-gray-500 w-full py-2 px-2"
            v-for="item in searchResultList"
            @click="searchResultClick(item)"
            :key="item.name"
         >
            <span class="ywifont ywicon-sousuo text-gray-400 !text-[12px]"></span>
            <span class="over-ellipsis"
               >{{ item.name }}
         <div class="search-result w-[320px] bg-white text-sm">
            <div
               class="flex-items-center gap-2 hover:bg-[#ebebeb] cursor-pointer text-gray-500 w-full py-2 px-2"
               v-for="item in searchResultList"
               @click="searchResultClick(item)"
               :key="item.name"
            >
               <span class="ywifont ywicon-sousuo text-gray-400 !text-[12px]"></span>
               <span class="over-ellipsis"
                  >{{ item.name }}

               <span class="text-gray-400 text-[12px]">{{ item.cityname }} {{ item.adname }}</span>
            </span>
                  <span class="text-gray-400 text-[12px]">{{ item.cityname }} {{ item.adname }}</span>
               </span>
            </div>
         </div>
      </div>
   </div>
@@ -42,11 +56,20 @@
import { getSearchMapElement } from '/@/api/map';
import type { OLMap } from '/@/model/map/OLMap';
import { formatDate } from '/@/utils/formatTime';
import AdvanceSearch from './advanceSearch/index.vue';
const props = defineProps({
   olMap: {
      type: Object as PropType<OLMap>,
   },
   propertyMap: {
      type: Object as PropType<Record<string, any>>,
   },
   propertyConfigMap: {
      type: Object as PropType<Record<string, any>>,
   },
});

const isLoading = ref(false);
const searchText = ref('');
const isSearchObj = ref(true);
const searchInput = (e) => {
@@ -77,48 +100,64 @@
      clearSearch(isSearchObj.value);
      return;
   }
   if (isSearchObj.value) {
      const res = await getSearchMapElement({
         search_text: text,
         max_count: 10,
         time: formatDate(new Date()),
      });
      searchResultList.value = (res?.values ?? []).map((item) => {
         return {
            name: item.ONAME,
            model: item,
            isSearchObj: true,
            // address: item.ADDRESS,
         };
      });
      // props.olMap.displaySearchResult(res?.values ?? []);
   } else {
      const result = await props.olMap.gaodeAddressSearch(text);
      const pois = result?.pois ?? [];
      searchResultList.value =
         pois
            .map((item) => {
               return {
                  name: item.name,
                  // address: item.address,
                  cityname: item.cityname,
                  adname: item.adname,
                  model: item,
                  isSearchObj: false,
                  location: item.location,
               };
            })
            ?.slice(0, 5) ?? [];

   try {
      isLoading.value = true;
      if (isSearchObj.value) {
         const res = await getSearchMapElement({
            search_text: text,
            max_count: 10,
            time: formatDate(new Date()),
         });
         searchResultList.value = (res?.values ?? []).map((item) => {
            return {
               name: item.ONAME,
               model: item,
               isSearchObj: true,
               // address: item.ADDRESS,
            };
         });
         // props.olMap.displaySearchResult(res?.values ?? []);
      } else {
         const result = await props.olMap.gaodeAddressSearch(text);
         const pois = result?.pois ?? [];
         searchResultList.value =
            pois
               .map((item) => {
                  return {
                     name: item.name,
                     // address: item.address,
                     cityname: item.cityname,
                     adname: item.adname,
                     model: item,
                     isSearchObj: false,
                     location: item.location,
                  };
               })
               ?.slice(0, 5) ?? [];
      }
   } finally {
      isLoading.value = false;
   }
};
const clearSearch = (isSearchObj = true) => {
   searchResultList.value = [];
   if (isSearchObj) {
      props.olMap.clearObjectSearch();
   }else{
   } else {
      props.olMap.clearObjectSearch();
   }
};

//#region ====================== 高级搜索 ======================
const isAdvanceSearch = ref(false);
const handleAdvanceSearchClick = () => {
   isAdvanceSearch.value = true;
};
const advanceSearchClose = () => {
   isAdvanceSearch.value = false;
};
//#endregion
</script>
<style scoped lang="scss">
.search {