From 7cb918571b7bc7a5e9d9002292fd749ed1b95c95 Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Wed, 12 Nov 2025 23:08:08 +0800
Subject: [PATCH] 经开分局优化
---
src/components/mapAddressSearchBox/index.vue | 433 +++++++++++++++++++++++++++---------------------------
1 files changed, 216 insertions(+), 217 deletions(-)
diff --git a/src/components/mapAddressSearchBox/index.vue b/src/components/mapAddressSearchBox/index.vue
index da69a87..78e890c 100644
--- a/src/components/mapAddressSearchBox/index.vue
+++ b/src/components/mapAddressSearchBox/index.vue
@@ -1,262 +1,261 @@
<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 class="search-content">
+ <el-input size="small" ref="searchTreeInput" clearable v-model="searchExtensivelyValue" @input="searchInputTree"
+ placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
- <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.address }}
- </div>
- </div>
- </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.address }}
+ </div>
</div>
+ </div>
</div>
+ </div>
</template>
<script>
import { getRealEstatePage } from "@/api/home/index.js"
export default {
- name: "mapAddressSearchBox",
+ name: "mapAddressSearchBox",
- data () {
- return {
- searchExtensivelyValue: "",
- isShowClearBtn: false,
- searchExtensivelyValBoxShow: false,
- searchExtensivelyArray: [],
- isClickValBox: false,
- pageIndex: 1,
- pageSize: 10,
- pages: 1
+ 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(
+ this.searchExtensivelyValue
+ )
+ },
+
+ // 大搜
+ getSearchExtensively (address) {
+ getRealEstatePage({ address: address, size: 1000 }).then(res => {
+ const data = res.data.data.records
+ if (data) {
+ data.forEach(element => {
+ this.searchExtensivelyArray.push(element)
+ })
}
+ })
},
- watch: {
- },
+ searchExtensivelyVlaClick (item) {
+ const { x2000: lng, y2000: lat } = item
- 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.$store.commit("SET_MAPSEARCHPOPUP", false)
+ this.searchExtensivelyValBoxShow = false
+ this.isClickValBox = true
+
+ this.searchExtensivelyValue = item.name
+ this.$EventBus.$emit("toPosition", {
+ siteJd: `${lng}`,
+ siteWd: `${lat}`,
+ siteGd: 1000,
+ })
+ this.$EventBus.$emit("mapClearLayer", {
+ layerName: "searchLayer",
+ type: "VectorLayer",
+ })
+
+ this.$store.commit("SET_MAPSEARCHPOPUP", true)
+
+ this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
+ ...item,
+ name: item.address
+ })
+
+ var popup = new global.DC.DivForms(global.viewer, {
+ domId: "mapSearchPopup",
+ position: [
+ global.DC.Transform.transformWGS84ToCartesian(
+ new global.DC.Position(
+ Number(lng),
+ Number(lat),
+ 0
)
- 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,
- },
- })
- }
+ this.$EventBus.$emit("layerPointAdd", {
+ layerName: "searchLayer",
+ type: "billboard",
+ params: {
+ lng: `${lng}`,
+ lat: `${lat}`,
+ alt: 1,
+ url: "/img/icon/location.png",
},
-
- 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(
- this.searchExtensivelyValue
- )
- },
-
- // 大搜
- getSearchExtensively (address) {
- getRealEstatePage({ address: address, size: 1000 }).then(res => {
- const data = res.data.data.records
- if (data) {
- data.forEach(element => {
- this.searchExtensivelyArray.push(element)
- })
- }
- })
- },
-
- searchExtensivelyVlaClick (item) {
- const { x2000: lng, y2000: lat } = item
-
- this.$store.commit("SET_MAPSEARCHPOPUP", false)
- this.searchExtensivelyValBoxShow = false
- this.isClickValBox = true
-
- this.searchExtensivelyValue = item.name
- this.$EventBus.$emit("toPosition", {
- siteJd: `${lng}`,
- siteWd: `${lat}`,
- siteGd: 1000,
- })
- this.$EventBus.$emit("mapClearLayer", {
- layerName: "searchLayer",
- type: "VectorLayer",
- })
-
- this.$store.commit("SET_MAPSEARCHPOPUP", true)
-
- this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
- ...item,
- name: item.address
- })
-
- var popup = new global.DC.DivForms(global.viewer, {
- domId: "mapSearchPopup",
- position: [
- global.DC.Transform.transformWGS84ToCartesian(
- new global.DC.Position(
- Number(lng),
- Number(lat),
- 0
- )
- ),
- ],
- })
-
- this.$EventBus.$emit("layerPointAdd", {
- layerName: "searchLayer",
- type: "billboard",
- params: {
- lng: `${lng}`,
- lat: `${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(
- this.searchExtensivelyValue
- )
- }
- },
+ })
},
- destroyed () {
- this.$store.commit("SET_MAPSEARCHPOPUP", false)
+ searchInputTree (newText) {
+ this.searchExtensivelyArray = []
- this.$EventBus.$emit("mapRemoveLayer", {
+ 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(
+ 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: 140px;
- width: 380px;
- height: 36px;
+ position: fixed;
+ z-index: 9;
+ left: 770px;
+ top: 140px;
+ width: 380px;
+ height: 36px;
+ display: flex;
+
+ ::v-deep(.el-input) {
+ flex: 1;
display: flex;
- ::v-deep(.el-input) {
- flex: 1;
- display: flex;
-
- input {
- flex: 1;
- font-size: 14px;
- }
+ input {
+ flex: 1;
+ font-size: 14px;
}
+ }
}
.searchExtensively-val-box {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 60px;
- left: 50%;
- width: 380px;
- max-height: 160px;
- text-align: left;
- color: #fff;
- background: $el-dialog-bg-color;
- z-index: 1111;
- border-radius: 10px;
- overflow: hidden;
- transform: translate(-50%, 0);
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 60px;
+ left: 50%;
+ width: 380px;
+ max-height: 160px;
+ text-align: left;
+ color: #fff;
+ background: $el-dialog-bg-color;
+ z-index: 1111;
+ border-radius: 10px;
+ overflow: hidden;
+ transform: translate(-50%, 0);
- &>div {
- height: 100%;
- overflow-y: auto;
+ &>div {
+ height: 100%;
+ overflow-y: auto;
- div {
- padding: 0 10px;
- line-height: 36px;
- cursor: pointer;
- }
+ div {
+ padding: 0 10px;
+ line-height: 36px;
+ cursor: pointer;
}
+ }
}
.dropdown-menu {
- max-height: 300px;
- overflow-y: auto;
+ max-height: 300px;
+ overflow-y: auto;
}
.dropdown-menu li.active {
- background-color: highlight;
+ background-color: highlight;
}
</style>
--
Gitblit v1.9.3