|
|
|
@ -3,63 +3,113 @@ |
|
|
|
<span class="map-search-icon"> |
|
|
|
<iconpark-icon name="search" size="16" fill="#fff"></iconpark-icon> |
|
|
|
</span> |
|
|
|
<el-popover |
|
|
|
placement="bottom" |
|
|
|
:width="280" |
|
|
|
trigger="click" |
|
|
|
popper-class="map-search-popper" |
|
|
|
> |
|
|
|
<template #reference> |
|
|
|
<el-input |
|
|
|
class="map-search-input" |
|
|
|
placeholder="输入水库名称、水库编码" |
|
|
|
v-model="searchValue" |
|
|
|
@change="changeInputValue" |
|
|
|
></el-input> |
|
|
|
</template> |
|
|
|
<template #default> |
|
|
|
<div class="map-search-result"> |
|
|
|
<div class="map-search-result-title"> |
|
|
|
共搜索到<span>{{ searchResultList.length }}</span |
|
|
|
>条结果 |
|
|
|
</div> |
|
|
|
<div class="map-search-result-list"> |
|
|
|
<div v-click-outside="onClickOutside"> |
|
|
|
<el-popover |
|
|
|
placement="bottom" |
|
|
|
:width="280" |
|
|
|
:visible="popoverVisible" |
|
|
|
popper-class="map-search-popper" |
|
|
|
> |
|
|
|
<template #reference> |
|
|
|
<el-input |
|
|
|
class="map-search-input" |
|
|
|
placeholder="输入水库名称、水库编码" |
|
|
|
v-model="searchValue" |
|
|
|
@input="changeInputValue" |
|
|
|
></el-input> |
|
|
|
</template> |
|
|
|
<template #default> |
|
|
|
<div class="map-search-result"> |
|
|
|
<div class="map-search-result-title"> |
|
|
|
共搜索到<span>{{ searchResultList.length }}</span |
|
|
|
>条结果 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="map-search-result-list-item" |
|
|
|
v-for="(item, index) in searchResultList" |
|
|
|
:key="index" |
|
|
|
v-if="searchResultList.length > 0" |
|
|
|
class="map-search-result-list" |
|
|
|
> |
|
|
|
<div class="title"> |
|
|
|
<span class="name">{{ item.name }}</span> |
|
|
|
<span class="tag">{{ item.level }}级</span> |
|
|
|
<div |
|
|
|
class="map-search-result-list-item" |
|
|
|
v-for="(item, index) in searchResultList" |
|
|
|
:key="index" |
|
|
|
@click.stop="flyTo(item)" |
|
|
|
> |
|
|
|
<div class="title"> |
|
|
|
<span class="name">{{ item?.properties?.RES_NAME }}</span> |
|
|
|
<span class="tag">{{ item?.properties?.ENG_SCAL }}级</span> |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<i></i>工程代码：{{ item?.properties?.RES_CODE }} |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<i></i>工程类型：{{ item?.properties?.RES_TYPE }} |
|
|
|
</div> |
|
|
|
<div class="item"> |
|
|
|
<i></i>工程地址：{{ item?.properties?.RES_LOC }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="item"><i></i>工程代码：{{ item.code }}</div> |
|
|
|
<div class="item"><i></i>工程类型：{{ item.type }}</div> |
|
|
|
<div class="item"><i></i>工程地址：{{ item.address }}</div> |
|
|
|
</div> |
|
|
|
<div v-else class="map-search-result-list no-data"> |
|
|
|
<img src="@/assets/card/no-data.png" /> |
|
|
|
<span>暂无结果</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-popover> |
|
|
|
</template> |
|
|
|
</el-popover> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref } from "vue"; |
|
|
|
import { ref, computed } from "vue"; |
|
|
|
import { getReservoirList } from "@/api/map"; |
|
|
|
import { useProjectStore } from "@/store/modules/project"; |
|
|
|
import { ClickOutside as vClickOutside } from "element-plus"; |
|
|
|
import * as SyCim from "sy-cesium-sdk"; |
|
|
|
defineOptions({ |
|
|
|
name: "MapSearch", |
|
|
|
}); |
|
|
|
const Cesium = SyCim.Cesium; |
|
|
|
const projectStore = useProjectStore(); |
|
|
|
const popoverVisible = ref(false); |
|
|
|
const showPopover = () => { |
|
|
|
popoverVisible.value = true; |
|
|
|
}; |
|
|
|
const onClickOutside = () => { |
|
|
|
popoverVisible.value = false; |
|
|
|
}; |
|
|
|
const searchValue = ref(""); |
|
|
|
const searchResultList = ref( |
|
|
|
new Array(10).fill({ |
|
|
|
name: "白头岗水库", |
|
|
|
level: 1, |
|
|
|
code: "12300000000000", |
|
|
|
address: "广州市增城区新塘县", |
|
|
|
type: "xxx", |
|
|
|
}) |
|
|
|
const searchResultList = ref<any[]>([]); |
|
|
|
const layerData = computed(() => |
|
|
|
projectStore.selectedLayers.find((f: any) => f.nameCn === "水库点") |
|
|
|
); |
|
|
|
const changeInputValue = (value: string) => {}; |
|
|
|
const changeInputValue = async (value: string) => { |
|
|
|
const searchStr = (value ?? "").trim(); |
|
|
|
if (!layerData.value) return; |
|
|
|
if (!searchStr) { |
|
|
|
searchResultList.value = []; |
|
|
|
return; |
|
|
|
} |
|
|
|
showPopover(); |
|
|
|
const data = await getReservoirList(layerData.value, searchStr); |
|
|
|
searchResultList.value = data?.features ?? []; |
|
|
|
}; |
|
|
|
const flyTo = (item: any) => { |
|
|
|
const coordinates = item?.geometry?.coordinates; |
|
|
|
if (!coordinates) return; |
|
|
|
const center = SyCim.Parse.parsePosition( |
|
|
|
`${coordinates[0]},${coordinates[1]},10` |
|
|
|
).toCartesian3(); |
|
|
|
const boundingSphere = new Cesium.BoundingSphere(center, 100); |
|
|
|
viewer.camera.flyToBoundingSphere(boundingSphere, { |
|
|
|
offset: new Cesium.HeadingPitchRange( |
|
|
|
viewer.camera.heading, |
|
|
|
viewer.camera.pitch, |
|
|
|
500 |
|
|
|
), |
|
|
|
duration: 2, |
|
|
|
}); |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
|
邱伟洋
1 month ago
