feat:对接首页搜索条件

chenyao

2025-04-15 11cab0f0f363b7d4b13b2fdee4e478cea21ad141

feat:对接首页搜索条件

 src/api/home/common.js

@@ -25,3 +25,18 @@
        params,
    })
}
// 机巢搜索
export const searchByKeyword = params => {
    return request({
        url: `/drone-device-core/map/amap/searchByKeyword?keyword=${params}`,
        method: 'get',
    })
}
// 地址搜索
export const selectDeviceList = params => {
    return request({
        url: `/drone-device-core/manage/api/v1/devices/selectDeviceList`,
        method: 'post',
        params,
    })
}

 src/views/Home/SearchBox.vue

@@ -1,7 +1,7 @@
<template>
  <div class="searchBox">
  <div class="searchBox" ref="searchBoxRef">
    <div class="searchInput">
      <el-select v-model="value" placeholder="请选择查询">
      <el-select v-model="optionsValue" @change="optionChange" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
@@ -10,9 +10,9 @@
        />
      </el-select>

      <el-input v-model="input3" placeholder="请输入搜索关键字"></el-input>
      <el-input v-model="searchKey"  @focus="handleFocus" placeholder="请输入搜索关键字"></el-input>
    </div>
    <div class="searchBtn"></div>
    <div class="searchBtn" @click="searchClick"></div>
    <div class="region">
      <el-tree-select
        v-model="treeValue"
@@ -25,20 +25,30 @@
      />
    </div>
  </div>
  <div class="select-down-list" ref="selectDownRef" v-show="isSelectDown">
    <div class="item" v-for="item in downList" @click="selectedValue(item)">{{ item.nickname || item.name }}</div>
  </div>
</template>
<script setup>
import { getRegion } from '@/api/home';
import { searchByKeyword, selectDeviceList } from '@/api/home/common';
import { useStore } from 'vuex';
import cesiumOperation from '@/utils/cesium-tsa'

const { flyTo } = cesiumOperation()

const store = useStore();
const input3 = ref('');
const searchKey = ref('');
const userAreaCode = computed(() => store.state.user.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
const value = ref('Option1');
const areaValue = ref('江西省');
const treeValue = ref(userAreaCode.value);
let first = true;
const searchBoxRef = ref(null);
const selectDownRef = ref(null);

function treeChange(value) {
function treeChange(value, node) {
  areaValue.value = node.label;
  store.commit('setSelectedAreaCode', value);
}

@@ -62,20 +72,123 @@
  });
};

const optionsValue = ref('1');
const options = [
  {
    value: 'Option1',
    value: '1',
    label: '机巢',
  },
  {
    value: 'Optio44n1',
    value: '2',
    label: '地址',
  },
];

onMounted(() => {});
const isSelectDown = ref(false);
// 下拉数据列表
const machineNestList = ref([]);
// 地址搜索结果
const downList = ref([]);
const position = ref({});

// 获取机巢搜索结果
const getDeviceList = async () => {
  const res = await selectDeviceList({
    keyword: searchKey.value,
  });
  if (res.data.code !== 0) return;
  machineNestList.value = res?.data?.data || [];
  downList.value = res?.data?.data || [];
};
// 获取地址搜索结果
const getAddressList = async () => {
  const res = await searchByKeyword(encodeURIComponent(`${areaValue.value}+${searchKey.value}`));
  if (res.data.code !== 0) return;
  downList.value = res?.data?.data.tips || [];
  if (downList.value.length > 0) {
    isSelectDown.value = true;
  }
};
// 搜索结果
const searchClick = () => {
    const longitude = Number(position.value.longitude)
    const latitude = Number(position.value.latitude)
    flyTo({ longitude, latitude }, 1, 1000)
};

// 地址和机巢的切换
const optionChange = () => {
  searchKey.value = '';
  downList.value = [];
};
// 输入框获取焦点
const handleFocus = () => {
  if (optionsValue.value === '1') {
    isSelectDown.value = true;
    downList.value = machineNestList.value;
  }
};
// 机巢下拉获取值
const selectedValue = item => {
  searchKey.value = item.nickname || item.name;
  if (optionsValue.value === '1') {
    position.value = item;
  } else {
    position.value = { longitude: item.location.split(',')[0], latitude: item.location.split(',')[1] };
  }
  
  isSelectDown.value = false;
};

// 监听搜索关键字变化
watch(searchKey, async (newVal) => {
  if (optionsValue.value === '2') {
    await getAddressList();
  }
}, { immediate: false });

onMounted(() => {
  getDeviceList();
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

const handleClickOutside = (event) => {
  if (!searchBoxRef.value?.contains(event.target) && !selectDownRef.value?.contains(event.target)) {
    isSelectDown.value = false;
  }
};
</script>
<style scoped lang="scss">
.select-down-list {
  position: absolute;
  top: 188px;
  left: 45%;
  transform: translateX(-45%);
  width: 220px;
  height: 256px;
  overflow-y: auto;
  background: linear-gradient( 180deg, #0D3556 0%, #012350 100%);
  border-radius: 0px 0px 8px 8px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1;
  &::-webkit-scrollbar {
    width: 0;
    display: none;
  }
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  .item {
    color: #FFFFFF;
    height: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
  }
}
.searchBox {
  width: 420px;
  height: 43px;