智慧园区前端大屏
linwe
2024-11-14 4b7d2c5f13c7c816746ecd7c64fc4d8bb7580e70
src/pages/layout/components/mainSearch.vue
@@ -22,17 +22,31 @@
</template>
<script setup>
import { fuzzyQuery } from '../../../api/firmInfo/firmInfo'
// 搜索栏相关
let isShowSearchSKValBox = false
let searchVal = ''
let searchSKValList = []
let searchVal = ref('')
let searchSKValList = ref([])
const onSearch = () => {
  if (searchVal == '') {
  if (searchVal.value == '') {
    isShowSearchSKValBox = false
    // 清空
    clearPoint()
  } else {
    isShowSearchSKValBox = true
    getFuzzyQuery()
  }
}
function getFuzzyQuery() {
  fuzzyQuery({
    name: searchVal.value
  }).then(res => {
    // console.log(res.data.data)
    searchSKValList.value = res.data.data
  })
}
const onFocus = () => {
@@ -41,7 +55,72 @@
const sKValItemClick = (item) => {
  isShowSearchSKValBox = false
  if (item.lat && item.lng) {
    handleCheckChange(item)
  } else {
    console.log('没有经纬度')
  }
}
let addTileLayers = {}
const handleCheckChange = (item) => {
  console.log(item)
  // 先清空,在添加
  clearPoint()
  if (!addTileLayers[item.name]) {
    addTileLayers[item.name] = new DC.HtmlLayer(item.name)
    window.$viewer.addLayer(addTileLayers[item.name])
    let iconEl = ''
    if ('showPanel' in item && item.showPanel == false) {
      if (item.backgroundIcon) {
        iconEl = `
                        <div class="map-name">${i[item.showParams] || item.name}</div>
                        <div class="map-icon">
                          <img src="${item.backgroundIcon}">
                        </div>
                        `
      }
    } else {
      iconEl = `<div class="marsBlueGradientPnl">
                               <div>${item.name}</div>  </div>`
    }
    let divIcon = new DC.DivIcon(
      new DC.Position(item.lng, item.lat, 0),
      `<div class="public-map-popup">
                  ${iconEl}
                </div>`
    )
    divIcon.attrParams = item
    let incident = () => { }
    if (item.incident) incident = item.incident
    divIcon.on(DC.MouseEventType.CLICK, incident)
    addTileLayers[item.name].addOverlay(divIcon)
    window.$viewer.flyToPosition(new DC.Position(item.lng, item.lat, 2000, 0, -90, 0))
  } else {
    console.log('已存在*******************************')
    window.$viewer.removeLayer(addTileLayers[item.name])
  }
}
function clearPoint() {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
  })
}
onUnmounted(() => {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
  })
})
</script>
<style lang="scss" scoped>
@@ -84,8 +163,10 @@
      color: #ffffff;
      cursor: pointer;
      height: 20px;
      margin: 3px;
      line-height: 20px;
      padding-left: 10px;
      overflow: hidden;
    }
    ul>li:hover {