<template>
|
<div>
|
<div class="search-content">
|
<input v-model="searchExtensivelyValue" type="text" placeholder="请输入搜索条件" />
|
<div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
|
<img src="/img/icon/clear.png" alt />
|
</div>
|
<!-- <button @click="searchExtensivelyClick" class="el-icon-search"></button> -->
|
</div>
|
<div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
|
<div>
|
<div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
|
{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getSearchExtensively } from '@/api/dept/index.js'
|
|
export default {
|
name: 'mapSearchBox',
|
|
data () {
|
return {
|
searchExtensivelyValue: '',
|
isShowClearBtn: false,
|
searchExtensivelyValBoxShow: false,
|
searchExtensivelyArray: [],
|
isClickValBox: false,
|
}
|
},
|
|
watch: {
|
searchExtensivelyValue: {
|
handler (newText, oldText) {
|
|
|
if (newText == '') {
|
this.searchExtensivelyValBoxShow = false
|
this.isShowClearBtn = false
|
this.searchExtensivelyArray = []
|
} 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('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
|
}
|
|
}
|
}
|
},
|
|
methods: {
|
searchExtensivelyClick () {
|
this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', 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('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
|
},
|
|
// 大搜
|
getSearchExtensively (ak, region, query) {
|
getSearchExtensively(ak, region, query).then(res => {
|
this.searchExtensivelyArray = res.data.result
|
})
|
},
|
|
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'
|
},
|
})
|
},
|
},
|
|
destroyed () {
|
this.$store.commit('SET_MAPSEARCHPOPUP', false)
|
|
this.$EventBus.$emit('mapRemoveLayer', {
|
layerName: 'searchLayer',
|
type: 'VectorLayer'
|
})
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.search-content {
|
position: absolute;
|
position: fixed;
|
z-index: 99;
|
left: 760px;
|
top: 40px;
|
width: 460px;
|
height: 36px;
|
|
input {
|
flex: 1;
|
width: 440px;
|
height: 100%;
|
font-size: 18px;
|
text-indent: 1em;
|
color: #ffffff;
|
background-color: rgba(24, 79, 202, 0.75);
|
border: 1px solid rgb(0, 92, 169);
|
border-radius: 20px;
|
vertical-align: top;
|
}
|
|
input:focus {
|
outline: none;
|
}
|
|
input::-webkit-input-placeholder {
|
color: rgba(238, 238, 238, 0.7);
|
}
|
|
.clear {
|
position: absolute;
|
top: 0;
|
right: 70px;
|
cursor: pointer;
|
|
img {
|
width: 16px;
|
height: 16px;
|
margin-top: 10px;
|
}
|
}
|
|
button {
|
font-size: 24px;
|
font-weight: 700;
|
width: 60px;
|
height: 100%;
|
background-color: $table-body-tr-n-color;
|
color: #fff;
|
border: 1px solid rgb(0, 92, 169);
|
cursor: pointer;
|
border-radius: 0 20px 20px 0;
|
}
|
|
button:active {
|
background-color: $table-body-tr-2n-color;
|
border: 1px solid rgb(0, 92, 169);
|
}
|
}
|
|
.searchExtensively-val-box {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 80px;
|
left: 760px;
|
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;
|
}
|
}
|
}
|
</style>
|
