From d0fa69584866a1ea703f370aec7eea266ba85b94 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 11 Nov 2025 12:27:26 +0800
Subject: [PATCH] 首页相关调整
---
src/components/mapSearchBox/index.vue | 437 +++++++++++++++++++++++++++---------------------------
1 files changed, 219 insertions(+), 218 deletions(-)
diff --git a/src/components/mapSearchBox/index.vue b/src/components/mapSearchBox/index.vue
index 3b28e2e..6fb88cf 100644
--- a/src/components/mapSearchBox/index.vue
+++ b/src/components/mapSearchBox/index.vue
@@ -1,260 +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 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 class="search-content">
+ <el-input size="small" ref="searchTreeInput" clearable v-model="searchExtensivelyValue"
+ @input="searchInputTree" placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
</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.name }}
+ </div>
+ </div>
+ </div>
</div>
- </div>
</template>
<script>
import { getSearchExtensivelyPage } from "@/api/dept/index.js"
export default {
- name: "mapSearchBox",
+ 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)
- })
+ data () {
+ return {
+ searchExtensivelyValue: "",
+ isShowClearBtn: false,
+ searchExtensivelyValBoxShow: false,
+ searchExtensivelyArray: [],
+ isClickValBox: false,
+ pageIndex: 1,
+ pageSize: 10,
+ pages: 1
}
- })
},
- searchExtensivelyVlaClick (item) {
- this.$store.commit("SET_MAPSEARCHPOPUP", false)
- this.searchExtensivelyValBoxShow = false
- this.isClickValBox = true
+ watch: {
+ },
- 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",
+ 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",
+ "361121",
+ this.searchExtensivelyValue
+ )
+ }
+ },
},
- searchInputTree (newText) {
- this.searchExtensivelyArray = []
+ destroyed () {
+ this.$store.commit("SET_MAPSEARCHPOPUP", false)
- 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", {
+ this.$EventBus.$emit("mapRemoveLayer", {
layerName: "searchLayer",
type: "VectorLayer",
- })
- }
- this.isShowClearBtn = true
- this.getSearchExtensively(
- "81503dad589f42bf9a9e5ea5e017f329",
- "361121",
- 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;
+ position: fixed;
+ z-index: 99;
+ left: 770px;
+ top: 40px;
+ width: 380px;
+ height: 36px;
display: flex;
- input {
- flex: 1;
- font-size: 14px;
+ ::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;
+ 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 {
+ 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