<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 class="dropdown-menu" @scroll="handleScroll">
|
<div
|
@click="searchExtensivelyVlaClick(item)"
|
v-for="(item, index) in searchExtensivelyArray"
|
:key="index"
|
>
|
{{ item.name }}
|
<!-- {{ item.placeName }} -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getSearchExtensivelyPage } from "@/api/dept/index.js";
|
// import { getNinePage } from "@/api/site/index.js";
|
|
export default {
|
name: "mapSearchBox",
|
|
data() {
|
return {
|
searchExtensivelyValue: "",
|
isShowClearBtn: false,
|
searchExtensivelyValBoxShow: false,
|
searchExtensivelyArray: [],
|
isClickValBox: false,
|
pageIndex:1,
|
pageSize:10,
|
pages:1
|
};
|
},
|
|
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: {
|
handleScroll(event) {
|
const isScrollingDown = this.pageIndex <= this.pages;
|
console.log(isScrollingDown)
|
if (isScrollingDown==true) {
|
this.pageIndex++;
|
this.searchExtensivelyFocus();
|
}
|
},
|
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) {
|
getSearchExtensivelyPage(ak, region, query,this.pageIndex,this.pageSize).then(res => {
|
const data = res.data.result
|
if(data){
|
data.forEach(element => {
|
this.searchExtensivelyArray.push(element)
|
});
|
}
|
})
|
|
// getNinePage({
|
// current: this.pageIndex,
|
// size: this.pageSize,
|
// placeName: query,
|
// }).then((res) => {
|
// const data = res.data.data.records;
|
// if(data){
|
// data.forEach(element => {
|
// this.searchExtensivelyArray.push(element)
|
// });
|
// }
|
// this.pages = res.data.data.pages
|
// });
|
},
|
|
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;
|
}
|
}
|
}
|
|
.dropdown-menu {
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
.dropdown-menu li.active {
|
background-color: highlight;
|
}
|
</style>
|
