搜索栏调整

shuishen

2024-12-10 dd0c5dbd31d6da481697866998a1333ab9d3933b

搜索栏调整

 src/components/mapSearchBox/index.vue

@@ -1,30 +1,15 @@
<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>
      <el-input size="small" ref="searchTreeInput" clearable v-model="searchExtensivelyValue" @input="searchInputTree"
        placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
      <!-- <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 @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
          <!-- {{ item.name }} -->
          {{ item.placeName }}
        </div>
      </div>
    </div>
@@ -32,85 +17,57 @@
</template>

<script>
import { getSearchExtensivelyPage } from "@/api/dept/index.js";
import { getSearchExtensivelyPage } from "@/api/dept/index.js"
// import { getNinePage } from "@/api/site/index.js";

export default {
  name: "mapSearchBox",

  data() {
  data () {
    return {
      searchExtensivelyValue: "",
      isShowClearBtn: false,
      searchExtensivelyValBoxShow: false,
      searchExtensivelyArray: [],
      isClickValBox: false,
      pageIndex:1,
      pageSize:10,
      pages:1
    };
      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;
    handleScroll (event) {
      const isScrollingDown = this.pageIndex <= this.pages
      console.log(isScrollingDown)
      if (isScrollingDown==true) {
        this.pageIndex++;
        this.searchExtensivelyFocus();
      if (isScrollingDown == true) {
        this.pageIndex++
        this.searchExtensivelyFocus()
      }
    },
    searchExtensivelyClick() {
    searchExtensivelyClick () {
      this.getSearchExtensively(
        "ebf48ecaa1fd436fa3d40c4600aa051f",
        "361100",
        this.searchExtensivelyValue
      );
      this.searchExtensivelyValBoxShow = false;
      )
      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.searchExtensivelyValue = this.searchExtensivelyArray[0].name

        this.$EventBus.$emit("mapClearLayer", {
          layerName: "searchLayer",
          type: "VectorLayer",
        });
        })

        this.$EventBus.$emit("layerPointAdd", {
          layerName: "searchLayer",
@@ -121,81 +78,81 @@
            alt: 1,
            text: this.searchExtensivelyArray[0].name,
          },
        });
        })
      }
    },

    clearSearchValue() {
      this.$store.commit("SET_MAPSEARCHPOPUP", false);
    clearSearchValue () {
      this.$store.commit("SET_MAPSEARCHPOPUP", false)

      this.$EventBus.$emit("mapRemoveLayer", {
        layerName: "searchLayer",
        type: "VectorLayer",
      });
      this.searchExtensivelyValue = "";
      this.searchExtensivelyChange();
      })
      this.searchExtensivelyValue = ""
      this.searchExtensivelyChange()
    },

    searchExtensivelyChange(e) {
    searchExtensivelyChange (e) {
      // console.log(e)
    },

    searchExtensivelyFocus() {
      this.searchExtensivelyValBoxShow = true;
    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)
            });
          }
    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
    //   });

      //   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;
    searchExtensivelyVlaClick (item) {
      this.$store.commit("SET_MAPSEARCHPOPUP", false)
      this.searchExtensivelyValBoxShow = false
      this.isClickValBox = true

      this.searchExtensivelyValue = item.name;
      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_MAPSEARCHPOPUP", true)

      this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
        ...item,
      });
      })

      var popup = new global.DC.DivForms(global.viewer, {
        domId: "mapSearchPopup",
@@ -208,7 +165,7 @@
            )
          ),
        ],
      });
      })

      this.$EventBus.$emit("layerPointAdd", {
        layerName: "searchLayer",
@@ -219,80 +176,65 @@
          alt: 1,
          url: "/img/icon/location.png",
        },
      });
      })
    },

    searchInputTree (newText) {
      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
        )
      }
    },
  },

  destroyed() {
    this.$store.commit("SET_MAPSEARCHPOPUP", false);
  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;
  left: 770px;
  top: 40px;
  width: 460px;
  width: 380px;
  height: 36px;
  display: flex;

  input {
  ::v-deep(.el-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;
  }
    display: flex;

  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;
    input {
      flex: 1;
      font-size: 14px;
    }
  }

  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);
  }
}

@@ -301,7 +243,7 @@
  flex-direction: column;
  position: absolute;
  top: 80px;
  left: 760px;
  left: 770px;
  width: 380px;
  max-height: 160px;
  text-align: left;
@@ -311,7 +253,7 @@
  border-radius: 10px;
  overflow: hidden;

  & > div {
  &>div {
    height: 100%;
    overflow-y: auto;

@@ -327,6 +269,7 @@
  max-height: 300px;
  overflow-y: auto;
}

.dropdown-menu li.active {
  background-color: highlight;
}

 src/styles/media/index.scss

Diff too large