<template> <div class="inputSearch" v-show="Show && number == 4"> <el-select v-model="selectmodel" placeholder="输入关键字搜索" style="width: 180px" filterable :filter-method="filterMethod" clearable @change="selectchange" > <el-option v-for="(item, index) in filterList" :key="item.id + index + item.id" :label="item.name" :value="item.geometry" > <el-popover v-if="item.name.length >= 15" placement="top-start" width="300" trigger="hover" popper-class="popperclass" > <span>{{ item.name }}</span> <template #reference> {{ item.name.slice(0, 15) + "..." }} </template> </el-popover> <span v-else>{{ item.name }}</span> <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px" > {{ item.pointTypeName }} </span> </el-option> </el-select> </div> </template> <script setup> import bus from "@/bus/"; import useUserStore from "@/store/modules/user"; const appStore = useUserStore(); const { proxy } = getCurrentInstance(); const Show = ref(true); const props = defineProps({ diabox: { type: Object, }, }); const number = ref(1); const SelectList = ref(1); const filterList = ref([]); const selectmodel = ref(""); const getItem = ref({}); watch( () => appStore.MapData, (newValue, oldValue) => { if (appStore.MapData && appStore.MapData.length) { if (number.value === 1) { GetSearchList(); number.value = 4; } } // 示例调用 }, { deep: true, once: true } ); function GetSearchList() { SelectList.value = []; appStore.MapData.map((item) => { SelectList.value = SelectList.value.concat(item.data); }); // console.log('MapData', appStore.MapData, SelectList.value); filterList.value = JSON.parse(JSON.stringify(SelectList.value)); // debugger; } // 值改变后的操作 function selectchange(value) { if(value){ let arr = SelectList.value.filter(item => { return item.geometry == value; }); if (arr && arr[0]) { getItem.value = arr[0]; } selectmodel.value = getItem.value.name; let feature = turf.feature(Terraformer.WKT.parse(value),_.cloneDeep(getItem.value)); bus.emit('setHighlight',feature); newfiberMap.map.easeTo({center:turf.getCoords(turf.center(feature)),zoom:15}); bus.emit('setGeoJSON', { json: turf.featureCollection([feature]), key: 'temporary' }); } /* if (value) { // 选中的操作 let arr = SelectList.value.filter(item => { return item.geometry == value; }); if (arr && arr[0]) { getItem.value = arr[0]; } console.log('选中change', getItem.value); } else { // 清除的操作 console.log('清除change', getItem.value); }*/ } const filterMethod = _.debounce((value) => { if (value) { filterList.value = SelectList.value.filter((item) => item.name.includes(value)); if (filterList.value.length == 0) bus.emit("geoRegeo", { name: value, callback: (results) => { filterList.value = results.geocodes.map((i, idx) => ({ id: idx, name: i.formatted_address, geometry: `POINT(${gcoord .transform(i.location.split(","), gcoord.AMap, gcoord.WGS84) .join(" ")})`, pointTypeName: "地理位置", })); }, }); } else { filterList.value = SelectList.value; } // bus.emit('removeMapDatas',['temporary']); },500) onMounted(() => { bus.on("YQ_head", (val) => { console.log("appStore.MapData", appStore.MapData); if (val == false) { Show.value = false; } else { Show.value = true; } }); }); onBeforeUnmount(() => { bus.off("YQ_head"); }); </script> <style lang="scss" scoped> .inputSearch { position: fixed; right: 155px; top: 19px; z-index: 999; } :deep(.el-input__wrapper) { background: #032d79 !important; } :deep(.el-input__inner) { color: #fff; } .popperclass { z-index: 10000 !important; } </style>