<template>
|
<div>
|
<div class="search-content">
|
<el-input size="small" ref="searchTreeInput" clearable v-model="searchExtensivelyValue" @input="searchInputTree"
|
placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
|
</div>
|
<div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
|
<div class="dropdown-menu" @scroll="handleScroll">
|
<div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getSearchExtensivelyPage } from "@/api/dept/index.js"
|
export default {
|
name: "mapSearchBox",
|
|
data () {
|
return {
|
searchExtensivelyValue: "",
|
isShowClearBtn: false,
|
searchExtensivelyValBoxShow: false,
|
searchExtensivelyArray: [],
|
isClickValBox: false,
|
pageIndex: 1,
|
pageSize: 10,
|
pages: 1
|
}
|
},
|
|
watch: {
|
},
|
|
methods: {
|
handleScroll (event) {
|
const isScrollingDown = this.pageIndex <= this.pages
|
console.log(isScrollingDown)
|
if (isScrollingDown == true) {
|
this.pageIndex++
|
this.searchExtensivelyFocus()
|
}
|
},
|
searchExtensivelyClick () {
|
this.getSearchExtensively(
|
"81503dad589f42bf9a9e5ea5e017f329",
|
"361102",
|
this.searchExtensivelyValue
|
)
|
this.searchExtensivelyValBoxShow = false
|
|
if (this.searchExtensivelyArray.length > 0) {
|
this.$EventBus.$emit("toPosition", {
|
siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
|
siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
|
siteGd: 200,
|
})
|
|
this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
|
|
this.$EventBus.$emit("mapClearLayer", {
|
layerName: "searchLayer",
|
type: "VectorLayer",
|
})
|
|
this.$EventBus.$emit("layerPointAdd", {
|
layerName: "searchLayer",
|
type: "label",
|
params: {
|
lng: `${this.searchExtensivelyArray[0].location.lng}`,
|
lat: `${this.searchExtensivelyArray[0].location.lat}`,
|
alt: 1,
|
text: this.searchExtensivelyArray[0].name,
|
},
|
})
|
}
|
},
|
|
clearSearchValue () {
|
this.$store.commit("SET_MAPSEARCHPOPUP", false)
|
|
this.$EventBus.$emit("mapRemoveLayer", {
|
layerName: "searchLayer",
|
type: "VectorLayer",
|
})
|
this.searchExtensivelyValue = ""
|
this.searchExtensivelyChange()
|
},
|
|
searchExtensivelyChange (e) {
|
// console.log(e)
|
},
|
|
searchExtensivelyFocus () {
|
this.searchExtensivelyValBoxShow = true
|
this.getSearchExtensively(
|
"81503dad589f42bf9a9e5ea5e017f329",
|
"361102",
|
this.searchExtensivelyValue
|
)
|
},
|
|
// 大搜
|
getSearchExtensively (ak, region, query) {
|
getSearchExtensivelyPage(ak, region, query, this.pageIndex, this.pageSize).then(res => {
|
const data = res.data.result
|
if (data) {
|
data.forEach(element => {
|
this.searchExtensivelyArray.push(element)
|
})
|
}
|
})
|
},
|
|
searchExtensivelyVlaClick (item) {
|
this.$store.commit("SET_MAPSEARCHPOPUP", false)
|
this.searchExtensivelyValBoxShow = false
|
this.isClickValBox = true
|
|
this.searchExtensivelyValue = item.name
|
this.$EventBus.$emit("toPosition", {
|
siteJd: `${item.location.lng}`,
|
siteWd: `${item.location.lat}`,
|
siteGd: 1000,
|
})
|
this.$EventBus.$emit("mapClearLayer", {
|
layerName: "searchLayer",
|
type: "VectorLayer",
|
})
|
|
this.$store.commit("SET_MAPSEARCHPOPUP", true)
|
|
this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
|
...item,
|
})
|
|
var popup = new global.DC.DivForms(global.viewer, {
|
domId: "mapSearchPopup",
|
position: [
|
global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(item.location.lng),
|
Number(item.location.lat),
|
0
|
)
|
),
|
],
|
})
|
|
this.$EventBus.$emit("layerPointAdd", {
|
layerName: "searchLayer",
|
type: "billboard",
|
params: {
|
lng: `${item.location.lng}`,
|
lat: `${item.location.lat}`,
|
alt: 1,
|
url: "/img/icon/location.png",
|
},
|
})
|
},
|
|
searchInputTree (newText) {
|
this.searchExtensivelyArray = []
|
|
if (newText == "") {
|
this.searchExtensivelyValBoxShow = false
|
this.isShowClearBtn = false
|
} else {
|
this.searchExtensivelyValBoxShow = true
|
|
if (this.isClickValBox) {
|
this.searchExtensivelyValBoxShow = false
|
this.isClickValBox = false
|
} else {
|
this.$EventBus.$emit("mapClearLayer", {
|
layerName: "searchLayer",
|
type: "VectorLayer",
|
})
|
}
|
this.isShowClearBtn = true
|
this.getSearchExtensively(
|
"81503dad589f42bf9a9e5ea5e017f329",
|
"361102",
|
this.searchExtensivelyValue
|
)
|
}
|
},
|
},
|
|
destroyed () {
|
this.$store.commit("SET_MAPSEARCHPOPUP", false)
|
|
this.$EventBus.$emit("mapRemoveLayer", {
|
layerName: "searchLayer",
|
type: "VectorLayer",
|
})
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.search-content {
|
position: fixed;
|
z-index: 99;
|
left: 770px;
|
top: 40px;
|
width: 380px;
|
height: 36px;
|
display: flex;
|
|
::v-deep(.el-input) {
|
flex: 1;
|
display: flex;
|
|
input {
|
flex: 1;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.searchExtensively-val-box {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 80px;
|
left: 770px;
|
width: 380px;
|
max-height: 160px;
|
text-align: left;
|
color: #fff;
|
background: $el-dialog-bg-color;
|
z-index: 1111;
|
border-radius: 10px;
|
overflow: hidden;
|
|
&>div {
|
height: 100%;
|
overflow-y: auto;
|
|
div {
|
padding: 0 10px;
|
line-height: 36px;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.dropdown-menu {
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
|
.dropdown-menu li.active {
|
background-color: highlight;
|
}
|
</style>
|
