上图图标优化+搜索按钮优化

linwe

2024-11-20 5c5ad7b217e0a0da24f039b0b7b8829b3e2ca130

 src/views/companyInfo/components/box/fireTrend.vue

@@ -13,6 +13,11 @@
import { getList } from "@/api/emergencySupplies/emergencySupplies"
import { reactive } from "vue"

const { VITE_APP_BASE } = import.meta.env

let image = ref(VITE_APP_BASE + 'img/mapicon/yjwz.png')


const loading = ref(false)

const tableData = ref([])
@@ -104,9 +109,8 @@
let addTileLayers = {}
// 行点击
function rowClick(row) {
  // window.$viewer.flyToPosition(new DC.Position(row.lng, row.lat, 600, 0, -90, 0))

  // return
  // 销毁之前的
  destroy()
  if (!addTileLayers[row.name]) {
    addTileLayers[row.name] = new DC.HtmlLayer(row.name)
    window.$viewer.addLayer(addTileLayers[row.name])
@@ -119,23 +123,23 @@

    // if ('showPanel' in item && item.showPanel == false) {
    //   if (item.backgroundIcon) {
    //     iconEl = `
    //             <div class="map-name">${i[item.showParams] || i.name}</div>
    //             <div class="map-icon">
    //               <img src="${item.backgroundIcon}">
    //             </div>
    //             `
    iconEl = `
                <div class="map-name">${row.name}</div>
                <div class="map-icon">
                  <img src="${image.value}">
                </div>
                `
    //   }
    // } else 
    {
      iconEl = `<div class="marsBlueGradientPnl">
                  <div>${row.name}</div>
                </div>`
    }
    // {
    //   iconEl = `<div class="marsBlueGradientPnl">
    //               <div>${row.name}</div>
    //             </div>`
    // }

    let divIcon = new DC.DivIcon(
      new DC.Position(row.lng, row.lat, 64),
      `<div class="public-map-popup ${'sk-box'}">
      `<div class="public-map-popup ${'qyfb-box'}">
                    ${iconEl}
                  </div>`
    )
@@ -154,12 +158,17 @@
  }
}

onUnmounted(() => {
  console.log('销毁***************************')
// 销毁
function destroy() {
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
  })
}

onUnmounted(() => {
  console.log('销毁***************************')
  destroy()
})
</script>

@@ -177,10 +186,10 @@
    <div class="table-box">
      <el-table :data="tableData" empty-text="" style="width: 100%" :header-cell-style="headerCellStyle"
        :cell-style="tableCellStyle" element-loading-background="rgba(122, 122, 122, 0.1)">
        <el-table-column prop="name" label="名称" width="160" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="numUnit" label="数量" />
        <el-table-column prop="personInCha" label="负责人" />
        <el-table-column fixed="right" label="操作" width="80">
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" :disabled="scope.row.lng == ''"
              @click="rowClick(scope.row)">定位</el-button>