From 22ce519ef18e789923d6306c746d4ff93780bb84 Mon Sep 17 00:00:00 2001
From: zrj <646384940@qq.com>
Date: Sat, 22 Jun 2024 11:58:53 +0800
Subject: [PATCH] 大搜搜索新增分页
---
src/components/mapSearchBox/index.vue | 537 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 300 insertions(+), 237 deletions(-)
diff --git a/src/components/mapSearchBox/index.vue b/src/components/mapSearchBox/index.vue
index 4f6c9f7..aba65df 100644
--- a/src/components/mapSearchBox/index.vue
+++ b/src/components/mapSearchBox/index.vue
@@ -1,270 +1,333 @@
<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>
+ <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 { getSearchExtensively } from '@/api/dept/index.js'
+import { getSearchExtensivelyPage } from "@/api/dept/index.js";
+// import { getNinePage } from "@/api/site/index.js";
export default {
- name: 'mapSearchBox',
+ name: "mapSearchBox",
- data () {
- return {
- searchExtensivelyValue: '',
- isShowClearBtn: false,
- searchExtensivelyValBoxShow: false,
- searchExtensivelyArray: [],
- isClickValBox: false,
+ 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,
+ },
+ });
+ }
},
- watch: {
- searchExtensivelyValue: {
- handler (newText, oldText) {
+ clearSearchValue() {
+ this.$store.commit("SET_MAPSEARCHPOPUP", false);
-
- 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)
- }
-
- }
- }
+ this.$EventBus.$emit("mapRemoveLayer", {
+ layerName: "searchLayer",
+ type: "VectorLayer",
+ });
+ this.searchExtensivelyValue = "";
+ this.searchExtensivelyChange();
},
- 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'
- },
- })
- },
+ searchExtensivelyChange(e) {
+ // console.log(e)
},
- destroyed () {
- this.$store.commit('SET_MAPSEARCHPOPUP', false)
+ searchExtensivelyFocus() {
+ this.searchExtensivelyValBoxShow = true;
+ this.getSearchExtensively(
+ "ebf48ecaa1fd436fa3d40c4600aa051f",
+ "361100",
+ this.searchExtensivelyValue
+ );
+ },
- this.$EventBus.$emit('mapRemoveLayer', {
- layerName: 'searchLayer',
- type: 'VectorLayer'
- })
- }
-}
+ // 大搜
+ 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;
- position: fixed;
- z-index: 99;
- left: 760px;
- top: 40px;
- width: 460px;
- height: 36px;
+ top: 0;
+ right: 70px;
+ cursor: pointer;
- 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;
+ img {
+ width: 16px;
+ height: 16px;
+ margin-top: 10px;
}
+ }
- input:focus {
- outline: none;
- }
+ 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;
+ }
- 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);
- }
+ 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;
+ 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 {
+ height: 100%;
+ overflow-y: auto;
- div {
- padding: 0 10px;
- line-height: 36px;
- cursor: pointer;
- }
+ div {
+ padding: 0 10px;
+ line-height: 36px;
+ cursor: pointer;
}
+ }
}
-</style>
\ No newline at end of file
+
+.dropdown-menu {
+ max-height: 300px;
+ overflow-y: auto;
+}
+.dropdown-menu li.active {
+ background-color: highlight;
+}
+</style>
--
Gitblit v1.9.3