1

shuishen

2024-12-02 1dee40ea46601f2ee5d10aa0190625ebf03bdc4e

 src/pages/layout/components/mainSearch.vue

@@ -2,26 +2,31 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-10-26 16:09:35
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-10-28 11:04:58
 * @FilePath: \bigScreen\src\views\layout\components\mainSearch.vue
 * @LastEditTime: 2024-11-28 19:22:40
 * @FilePath: \bigScreen\src\pages\layout\components\mainSearch.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <div class="page-search">
    <el-input size="medium" placeholder="请输入内容" :suffix-icon="Search" @input="onSearch()" v-model="searchVal"
    <el-input placeholder="请输入内容" :suffix-icon="Search" @input="onSearch()" v-model="searchVal"
      @focus="onFocus"></el-input>
    <div class="page-search-value-box" v-show="isShowSearchSKValBox">
      <ul>
        <li v-for="(item, index) in searchSKValList" :key="index" @click="sKValItemClick(item)">{{ item.name }}
        <li v-if="searchSKValList.length > 0" v-for="(item, index) in searchSKValList" :key="index"
          @click="sKValItemClick(item)">{{ item.name }}
        </li>
        <!-- <li v-else>暂无数据</li> -->
        <span v-else>{{ showText }}</span>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'

import { fuzzyQuery } from '../../../api/firmInfo/firmInfo'

// 搜索栏相关
@@ -29,23 +34,30 @@
let searchVal = ref('')
let searchSKValList = ref([])

let showText = ref('暂无数据')

const onSearch = () => {
  if (searchVal.value == '') {
    isShowSearchSKValBox = false
    // 清空
    clearPoint()
  } else {
    showText.value = '搜索中...'
    searchSKValList.value = []
    isShowSearchSKValBox = true
    getFuzzyQuery()
  }
}

function getFuzzyQuery() {
function getFuzzyQuery () {
  fuzzyQuery({
    name: searchVal.value
  }).then(res => {
    // console.log(res.data.data)
    searchSKValList.value = res.data.data
    if (res.data.data.length > 0) {
      searchSKValList.value = res.data.data
    } else {
      showText.value = '暂无数据'
    }
  })
}

@@ -63,7 +75,6 @@
}
let addTileLayers = {}
const handleCheckChange = (item) => {
  console.log(item)
  // 先清空，在添加
  clearPoint()
  if (!addTileLayers[item.name]) {
@@ -102,24 +113,32 @@
    window.$viewer.flyToPosition(new DC.Position(item.lng, item.lat, 2000, 0, -90, 0))

  } else {
    console.log('已存在*******************************')
    window.$viewer.removeLayer(addTileLayers[item.name])
    addTileLayers[item.name] = null
    delete addTileLayers[item.name]
  }
}


function clearPoint() {
function clearPoint () {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] = null
    delete addTileLayers[i]
  })
  addTileLayers = {}
}

onUnmounted(() => {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] = null
    delete addTileLayers[i]
  })

  addTileLayers = null
})
</script>

@@ -170,10 +189,19 @@
    }

    ul>li:hover {
      background-color: #0e1a35;
      background-color: #949597;
    }
  }

  .page-search-value-box>ul>span {
    color: #fff;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }



  .page-search-value-box::-webkit-scrollbar {
    display: none
  }