|
|
@@ -1,5 +1,25 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <div class="search-wrap">
|
|
|
+ <el-autocomplete
|
|
|
+ v-model="searchWord"
|
|
|
+ :fetch-suggestions="querySearch"
|
|
|
+ placeholder="搜索用户昵称/手机号"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ @select="handleSelect"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <template #default="{ item }">
|
|
|
+ <div class="map-search-item">
|
|
|
+ <el-avatar :size="26" :src="item.icon" />
|
|
|
+ <div class="name">{{ item.userNickName || item.makeName }}</div>
|
|
|
+ <div class="tel">{{ item.tel || item.makeTel }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </div>
|
|
|
<div id="map" ref="areaRef" class="area-map"></div>
|
|
|
<album-carousel></album-carousel>
|
|
|
</div>
|
|
|
@@ -23,6 +43,7 @@ import { onMounted, ref } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
|
import { unByKey } from "ol/Observable";
|
|
|
import { deepClone } from "@/common/commonFun";
|
|
|
+import { Search } from '@element-plus/icons-vue';
|
|
|
|
|
|
const store = useStore();
|
|
|
const areaRef = ref(null);
|
|
|
@@ -433,6 +454,82 @@ const resetCurrentTree = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+// 搜索
|
|
|
+// 搜索相关代码
|
|
|
+const searchWord = ref('')
|
|
|
+const searchResults = ref([])
|
|
|
+
|
|
|
+
|
|
|
+// 搜索方法
|
|
|
+const querySearch = (queryString, cb) => {
|
|
|
+ if (!queryString || !mapPoint.value?.length) {
|
|
|
+ cb([])
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const results = mapPoint.value.filter(item => {
|
|
|
+ const searchFields = [
|
|
|
+ item.tel,
|
|
|
+ item.userNickName,
|
|
|
+ item.makeTel,
|
|
|
+ item.makeName
|
|
|
+ ].filter(Boolean).map(f => f.toString().toLowerCase())
|
|
|
+ return searchFields.some(field =>
|
|
|
+ field.includes(queryString.toLowerCase())
|
|
|
+ )
|
|
|
+ })
|
|
|
+ console.log('results', results, mapPoint.value);
|
|
|
+
|
|
|
+ // 格式化结果供el-autocomplete使用
|
|
|
+ const formattedResults = results.map(item => ({
|
|
|
+ ...item,
|
|
|
+ value: item.userNickName || item.makeName || '未命名点位'
|
|
|
+ }))
|
|
|
+
|
|
|
+ cb(formattedResults)
|
|
|
+}
|
|
|
+
|
|
|
+// 选中搜索结果项
|
|
|
+const handleSelect = (item) => {
|
|
|
+ if (!item || !item.geom) return
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 定位到选中的点位
|
|
|
+ const coordinate = util.wktCastGeom(item.geom).getFirstCoordinate()
|
|
|
+ kmap.getView().animate({
|
|
|
+ center: coordinate,
|
|
|
+ zoom: 22,
|
|
|
+ duration: 500
|
|
|
+ })
|
|
|
+
|
|
|
+ // 高亮显示选中的点位
|
|
|
+ // if (treeClusterLayer) {
|
|
|
+ // treeClusterLayer.layer.getSource().getSource().getFeatures().forEach(feature => {
|
|
|
+ // if (feature.get('sampleId') === item.sampleId) {
|
|
|
+ // feature.set('highlight', true)
|
|
|
+ // refreshClusterStyle()
|
|
|
+
|
|
|
+ // // 3秒后取消高亮
|
|
|
+ // setTimeout(() => {
|
|
|
+ // feature.set('highlight', false)
|
|
|
+ // refreshClusterStyle()
|
|
|
+ // }, 3000)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ eventBus.emit("click:point", {
|
|
|
+ farmId: currentFarmId,
|
|
|
+ sampleId: item.sampleId,
|
|
|
+ data: item
|
|
|
+ });
|
|
|
+ }, 1000)
|
|
|
+ } catch (e) {
|
|
|
+ console.error('定位失败:', e)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
// 初始化区域地图
|
|
|
const initAreaMap = (arr) => {
|
|
|
regionLayer?.initData(arr);
|
|
|
@@ -457,4 +554,49 @@ const emit = defineEmits(["update:selectedTree"]);
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+// .search-wrap {
|
|
|
+// position: absolute;
|
|
|
+// top: 10px;
|
|
|
+// right: 410px;
|
|
|
+// z-index: 10;
|
|
|
+// ::v-deep {
|
|
|
+// .el-input__wrapper {
|
|
|
+// background: rgba(255, 255, 255, 0.8);
|
|
|
+// box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.88) inset;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+.search-wrap {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 410px;
|
|
|
+ z-index: 10;
|
|
|
+ width: 300px;
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.88) inset;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.map-search-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px 0;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tel {
|
|
|
+ color: #888;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
