feat:模板

张含笑

2026-01-12 30c1b138d4c9c2daa3f3e67b62550eabaa9e6ca9

 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,11 +31,7 @@
      </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>
         </van-cell>
@@ -61,16 +40,11 @@
</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 { 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 +52,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,25 +60,7 @@

const anchors = [70, Math.round(0.6 * window.innerHeight)]
const height = ref(anchors[0])
const actions = ref([{ text: '地址' }])

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 curSearchType = ref(1) // 固定为地址搜索

// 获取地址搜索结果
const getAddressList = () => {
@@ -124,37 +79,12 @@
   })
}

// 获取机巢搜索结果
const getDeviceList = async () => {
   const params = {
      nickname: searchVal.value,
      current: 1,
      size: 999,
   }
   const res = await selectDevicePageSimplify(params)

   if (res.data.code !== 0) return

   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 tooltipText = computed(() => {
   if (loadingTest.value) {
      return ''
   }
   if (searchVal.value.trim() === '') {
      return curSearchType.value === 0 ? '' : `支持搜索${curSearchType.value === 0 ? '机巢' : '地址'}`
      return '支持搜索地址'
   }
   return finishedText.value || ''
})
@@ -167,24 +97,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,26 +117,9 @@
   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
   }

@@ -252,10 +156,6 @@
)

onMounted(() => {
   if (curSearchType.value === 0) {
      getDeviceList()
   }

   const hash = window.location.hash.slice(1)
   const [hashPath, hashParamsStr] = hash.split('?')
   if (hashParamsStr) {
@@ -307,7 +207,7 @@

            .search-type {
               margin: 0 4px;
               color: #1d6fe9;
               color: #282828;
            }
         }
      }
@@ -347,4 +247,4 @@
      color: #000;
   }
}
</style>
</style>