吉安感知网项目-前端
shuishen
2026-01-13 89afb4a7dde11292f4b34cb728bdc4f1860b1917
applications/mobile-web-view/src/appPages/Map/searchBar.vue
@@ -1,13 +1,3 @@
<!--
 * @Author       : yuan
 * @Date         : 2025-10-13 16:15:19
 * @LastEditors  : yuan
 * @LastEditTime : 2025-12-19 15:32:56
 * @FilePath     : \applications\mobile-web-view\src\appPages\Map\searchBar.vue
 * @Description  :
 * Copyright 2025 OBKoro1, All Rights Reserved.
 * 2025-10-13 16:15:19
-->
<template>
   <van-floating-panel v-model:height="height" :anchors="anchors">
      <template #header>
@@ -24,16 +14,9 @@
               :border="false"
            >
               <template #left-icon>
                  <div class="search-left-box" @click="onSelect">
                  <div class="search-left-box">
                     <van-image width="16" height="16" :src="switchoverIcon" />
                     <div class="search-type">{{ curSearchType === 0 ? '机巢' : '地址' }}</div>
                  </div>
               </template>
               <template #right-icon v-if="isWeb">
                  <div class="search-right-box" @click="scanCode">
                     <van-image width="20" height="20" :src="qrCodeIcon" />
                     <div class="search-type">地址</div>
                  </div>
               </template>
            </van-field>
@@ -48,29 +31,21 @@
      </div>
      <van-list v-else :finished="finished" :finished-text="finishedText">
         <van-cell v-show="curSearchType === 0" v-for="item in list" :key="item" @click="flyToDrone(item)">
            <template #title>{{ item.nickname }}</template>
         </van-cell>
         <van-cell v-show="curSearchType === 1" v-for="item in list" :key="item" @click="flyToAddress(item)">
         <van-cell v-for="item in list" :key="item" @click="flyToAddress(item)">
            <template #title>{{ item.name }}</template>
            <template #value>{{ item.district }}</template>
            <template #value>{{ item?.pname }}{{ item?.cityname }}{{ item?.adname }}</template>
         </van-cell>
      </van-list>
   </van-floating-panel>
</template>
<script setup>
import switchoverIcon from '@/appDataSource/leafletMapIcon/switchover-icon.svg'
import qrCodeIcon from '@/appDataSource/leafletMapIcon/qr-code.svg'
import switchoverIcon from '@/appDataSource/leafletMapIcon/addressSearch.svg'
import { showToast } from 'vant'
import _ from 'lodash'
import { searchWithPlugin } from '@/utils/util'
import { getPlace } from '@/api/map/address'
import { useStore } from 'vuex'
import { selectDeviceList } from '@/api/home/common'
import { selectDevicePageSimplify } from '@/api/home/machineNest.js'
import EventBus from '@/utils/eventBus'
import { gcj02ToWgs84 } from '@/utils/coordinateTransformation'
import { useRoute } from 'vue-router'
@@ -78,7 +53,6 @@
const isWeb = ref(true)
const store = useStore()
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
const searchVal = ref('')
const list = ref([])
const finished = ref(false)
@@ -87,28 +61,10 @@
const anchors = [70, Math.round(0.6 * window.innerHeight)]
const height = ref(anchors[0])
const actions = ref([{ text: '地址' }])
const curSearchType = ref(1) // 固定为地址搜索
const curSearchType = ref(0) // 0机巢 1地址
const onSelect = () => {
   searchVal.value = ''
   list.value = []
   finished.value = false
   curSearchType.value = curSearchType.value === 0 ? 1 : 0
   actions.value = [{ text: curSearchType.value === 0 ? '地址' : '机巢' }]
   EventBus.emit('mapClearMarker')
   EventBus.emit('mapOnlyShowDrone')
   if (curSearchType.value === 0) {
      getDeviceList() // 切换到机巢时展示全部机巢
   }
}
// 获取地址搜索结果
const getAddressList = () => {
// 使用插件搜索地址
const searchWithPluginAPI = () => {
   searchWithPlugin(searchVal.value, selectedAreaCode.value, (err, data) => {
      if (data && data.length > 0) {
         list.value = data
@@ -124,29 +80,34 @@
   })
}
// 获取机巢搜索结果
const getDeviceList = async () => {
   const params = {
      nickname: searchVal.value,
      current: 1,
      size: 999,
   }
   const res = await selectDevicePageSimplify(params)
// 使用新接口搜索地址
const searchWithNewAPI = () => {
   getPlace({ keyworld: searchVal.value }).then(res => {
      const data = res.data.data.pois || []
      if (data && data.length > 0) {
         list.value = data
         finishedText.value = ''
      } else {
         finishedText.value = '暂无数据'
      }
   if (res.data.code !== 0) return
      setTimeout(() => {
         finished.value = true
         loadingTest.value = false
      }, 800)
   }).catch(err => {
      console.error('地址搜索失败:', err)
      finishedText.value = '搜索失败'
      setTimeout(() => {
         finished.value = true
         loadingTest.value = false
      }, 800)
   })
}
   if (res?.data?.data?.records && res?.data?.data?.records.length > 0) {
      list.value = res?.data?.data?.records.filter(item => item.status !== 'OFFLINE') || []
      finishedText.value = list.value.length > 0 ? '' : '暂无数据'
   } else {
      finishedText.value = '暂无数据'
   }
   setTimeout(() => {
      finished.value = true
      loadingTest.value = false
   }, 800)
// 获取地址搜索结果
const getAddressList = () => {
   searchWithNewAPI()
}
const tooltipText = computed(() => {
@@ -154,7 +115,7 @@
      return ''
   }
   if (searchVal.value.trim() === '') {
      return curSearchType.value === 0 ? '' : `支持搜索${curSearchType.value === 0 ? '机巢' : '地址'}`
      return '支持搜索地址'
   }
   return finishedText.value || ''
})
@@ -167,24 +128,15 @@
   EventBus.emit('mapClearMarker')
   if (curSearchType.value === 1) {
      getAddressList()
   } else if (curSearchType.value === 0) {
      getDeviceList()
   }
   getAddressList()
}
// 输入框input事件
const handlerInput = _.debounce(() => {
   if (searchVal.value.trim() === '') {
      if (curSearchType.value === 0) {
         // 搜索机巢时,输入框为空展示全部机巢
         inputSelect()
      } else {
         loadingTest.value = false
         list.value = []
         finishedText.value = ''
      }
      loadingTest.value = false
      list.value = []
      finishedText.value = ''
      return
   }
   inputSelect()
@@ -196,35 +148,20 @@
   EventBus.emit('mapOnlyShowDrone')
}
// 飞到机巢位置
const flyToDrone = item => {
   height.value = anchors[0]
   searchVal.value = item.nickname
   inputSelect()
   EventBus.emit('mapOnlyShowDrone', { device_sn: item.device_sn })
   EventBus.emit('mapSetView', {
      lat: item.latitude,
      lng: item.longitude,
      zoom: 11,
   })
}
const flyToAddress = item => {
   if (!item.location) {
      showToast('当前地址无坐标信息')
      return
   }
   const [longitude, latitude] = gcj02ToWgs84(item.location.lng, item.location.lat)
   EventBus.emit('mapClearMarker')
   const location = typeof item.location === 'string'
      ? item.location.split(',').map(Number)
      : [item.location.lng, item.location.lat];
   const [longitude, latitude] = gcj02ToWgs84(location[0], location[1])
   height.value = anchors[0]
   searchVal.value = item.name
   inputSelect()
   EventBus.emit('mapAddMarker', {
      lat: latitude,
@@ -232,13 +169,6 @@
      name: searchVal.value,
      customClassName: 'address-marker',
   })
}
const scanCode = () => {
   const transmitData = { data: { type: 'scanCode' } }
   wx.miniProgram.navigateTo({ url: "/subPackages/qrCode/index" })
   wx.miniProgram.postMessage(transmitData)
   uni.postMessage(transmitData)
}
watch(
@@ -252,10 +182,6 @@
)
onMounted(() => {
   if (curSearchType.value === 0) {
      getDeviceList()
   }
   const hash = window.location.hash.slice(1)
   const [hashPath, hashParamsStr] = hash.split('?')
   if (hashParamsStr) {
@@ -307,7 +233,7 @@
            .search-type {
               margin: 0 4px;
               color: #1d6fe9;
               color: #282828;
            }
         }
      }
@@ -347,4 +273,4 @@
      color: #000;
   }
}
</style>
</style>