地图图标展示

wujingjing

2025-02-27 f996c7437b0a7d4e7bafeb7c71b7c86b7170c8bd

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

@@ -1,33 +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 v-if="isLoading" class="ywifont ywicon-loading1 text-white animate-spin"></span>
            <span v-else 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>
@@ -43,9 +56,17 @@
import { getSearchMapElement } from '/@/api/map';
import type { OLMap } from '/@/model/map/OLMap';
import { formatDate } from '/@/utils/formatTime';
import AdvanceSearch from './advanceSearch/index.vue';
import { systemGlobalConfig } from '/@/stores/global';
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>>,
   },
});

@@ -99,7 +120,7 @@
         });
         // props.olMap.displaySearchResult(res?.values ?? []);
      } else {
         const result = await props.olMap.gaodeAddressSearch(text);
         const result = await props.olMap.gaodeAddressSearch(text, systemGlobalConfig.value['ui.project_city']);
         const pois = result?.pois ?? [];
         searchResultList.value =
            pois
@@ -128,6 +149,16 @@
      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 {