大搜搜索新增分页

zrj

2024-06-22 22ce519ef18e789923d6306c746d4ff93780bb84

大搜搜索新增分页

 src/api/dept/index.js

@@ -140,6 +140,27 @@
}

/**
 * 大搜查询--分页
 * @param {*} adcode
 * @returns
 */
export const getSearchExtensivelyPage = (ak, region, query,page_num,page_size) => {
    return request({
        url: '/zhs/bs/search',
        // url: '/data/jingzuo.json',
        method: 'get',
        requestBaseUrl: 'fengtDS',
        params: {
            ak,
            region,
            query,
            page_num,
            page_size
        }
    })
}

/**
 * 大搜-搜索停车场、出入口、商场
 * @param {*} adcode
 * @returns

 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>

.dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
}
.dropdown-menu li.active {
  background-color: highlight;
}
</style>