首页相关调整

shuishen

2025-11-11 d0fa69584866a1ea703f370aec7eea266ba85b94

 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>