事件模拟更新

shuishen

2024-12-18 9a37c5e1b2190c3f6ec71483923922189091dd52

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

@@ -2,162 +2,168 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-12 18:10:32
 * @FilePath: \bigScreen\src\views\space\components\leftContainer.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 * @LastEditTime: 2024-11-28 19:29:15
 * @FilePath: \bigScreen\src\views\companyInfo\components\box\unitContent.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<script setup>
import EventBus from 'utils/bus'
import { nextTick } from 'vue'

import { getDictionary } from "@/api/dict/dict"
import { onUnmounted, reactive } from 'vue'
import { getList } from "@/api/space/space"
const { VITE_APP_BASE } = import.meta.env
let image = ref(
  [{ label: '阀', value: VITE_APP_BASE + 'img/mapicon/ysf.png' }
    , { label: '池', value: VITE_APP_BASE + 'img/mapicon/yjc.png' }
    , { label: '泵', value: VITE_APP_BASE + 'img/mapicon/yjb.png' }]
)

const resData = reactive({
    data: []
  data: []
})
const curSelect = ref('')

let addTileLayers = {}

const handleCheckChange = (row) => {
    let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    resData.data.forEach(item => {
        if (row.value == item.value) {
            if (!addTileLayers[item.label]) {
                addTileLayers[item.label] = new DC.HtmlLayer(item.label)
                window.$viewer.addLayer(addTileLayers[item.label])
                getList({
                    firmId: companyInfo.id,
                    size: 1000,
                    type: item.type,
                }).then(res => {
                    let data = res.data.data.records
                    data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
                        let iconEl = ''
                        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>
                  `
                            }
                        } else {
                            iconEl = `<div class="marsBlueGradientPnl">
                  <div>${i.name}</div>
let addPupoLayers = {}
onMounted(() => {
  handleCheckChange()
})
const handleCheckChange = () => {
  let companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
  // resData.data.forEach(item => {
  // if (row.value == item.value) {
  if (!addTileLayers[companyInfo.name]) {
    addTileLayers[companyInfo.name] = new DC.HtmlLayer(companyInfo.name)
    window.$viewer.addLayer(addTileLayers[companyInfo.name])
    getList({
      firmId: companyInfo.id,
      size: 1000,
      // type: item.type,
    }).then(res => {
      let data = res.data.data.records
      data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
        let img = image.value.filter(l => i.name.includes(l.label))
        img = img.length > 0 ? img : image.value
        let iconEl = `<div class="map-name">${i.name}</div>
                            <div class="map-icon"> <img src="${img[0].value}"> </div>`
        let divIcon = new DC.DivIcon(
          new DC.Position(i.lng, i.lat, i.ele || 64),
          `<div class="public-map-popup  ${'yjc-box'}"> ${iconEl}  </div>`
        )
        divIcon.attrParams = i
        let incident = (e) => {
          const { attrParams } = e.overlay
          // 删除
          destroy()
          if (!attrParams.imageUrl) {
            return
          }
          addPupoLayers[attrParams.name] = new DC.HtmlLayer(attrParams.name)
          window.$viewer.addLayer(addPupoLayers[attrParams.name])
          let iconEl = `<div class="marsBlueGradientPnl">
            <img src="${attrParams.imageUrl}" />
                </div>`
                        }

                        let divIcon = new DC.DivIcon(
                            new DC.Position(i.lng, i.lat, 0),
                            `<div class="public-map-popup">
          let divIcon = new DC.DivIcon(
            new DC.Position(attrParams.lng, attrParams.lat, attrParams.ele || 64),
            `<div class="public-map-popup-qy">
                    ${iconEl}
                  </div>`
                        )

                        divIcon.attrParams = i

                        let incident = () => { }

                        if (item.incident) incident = item.incident

                        divIcon.on(DC.MouseEventType.CLICK, incident)

                        addTileLayers[item.label].addOverlay(divIcon)
                    })
                })
            } else {
                addTileLayers[item.label].show = true
            }
        } else {
            if (addTileLayers[item.label]) {
                addTileLayers[item.label].show = false
            }
          )
          let incident = () => {
            destroy()
          }
          divIcon.on(DC.MouseEventType.CLICK, incident)
          addPupoLayers[attrParams.name].addOverlay(divIcon)
        }

        // if (item.incident) incident = item.incident

        divIcon.on(DC.MouseEventType.CLICK, incident)

        addTileLayers[companyInfo.name] && addTileLayers[companyInfo.name].addOverlay(divIcon)
      })
    })
  } else {
    addTileLayers[companyInfo.name].show = true
  }
  // } else {
  //     if (addTileLayers[item.label]) {
  //         addTileLayers[item.label].show = false
  //     }
  // }
  // })
}

// 获取下拉字典
const getDictData = (code) => {
    const param = {
        code: code,
    }
    getDictionary(param).then((res) => {
        resData.data = res.data.data.map(item => {
            return {
                type: item.sort,
                label: item.dictValue,
                value: item.dictKey
            }
        })

        tabClick(resData.data[0])
    })
// 销毁
function destroy () {
  let arr = Object.keys(addPupoLayers)
  arr.filter(i => i != 'hgyq').forEach(i => {
    addPupoLayers[i] && window.$viewer && window.$viewer.removeLayer(addPupoLayers[i])
    addPupoLayers[i] = null
    delete addPupoLayers[i]
  })
  addPupoLayers = {}
}

const tabClick = (item) => {
    handleCheckChange(item)
    curSelect.value = item.value
}

const showOn = computed(() => (item) => {
    if (curSelect.value == item.value) {
        return true
    }
    return false
nextTick(() => {
  EventBus.emit('restHandleCheckChange', `3-3-2`)
  EventBus.emit('restHandleCheckChange', `3-3-4`)
})

getDictData("emergency_space_type")

onUnmounted(() => {
    let arr = Object.keys(addTileLayers)
    arr.forEach(i => {
        addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
    })
  let arr = Object.keys(addTileLayers)
  arr.forEach(i => {
    addTileLayers[i] && window.$viewer && window.$viewer.removeLayer(addTileLayers[i])
    addTileLayers[i] = null
    delete addTileLayers[i]
  })
  destroy()
  addTileLayers = null
  addPupoLayers = null
  EventBus.emit('restHandleDelChange', `3-3-2`)
  EventBus.emit('restHandleDelChange', `3-3-4`)
})
</script>

<template>
    <div class="left-container cur-container">
        <div class="tablist h100">
  <div class="left-container cur-container">
    <!-- <div class="tablist h100">
            <div class="cursor-p" :class="{ on: showOn(item) }" v-for="item, index in resData.data" :key="index"
                @click="tabClick(item)">
                <div class="nowrap-ellipsis-hidden">
                    {{ item.label }}
                </div>
            </div>
        </div>
    </div>
        </div> -->
  </div>
</template>

<style lang="scss" scoped>
.cur-container {
    background: transparent;
    pointer-events: none;
  background: transparent;
  pointer-events: none;

    .tablist {
        pointer-events: all;
  .tablist {
    pointer-events: all;

        &>div {
            margin-top: 16px;
            padding: 10px;
            width: 64px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            border-radius: 50%;
            box-shadow: inset 0 0 40px #409eff;
            color: #fff;
            box-sizing: content-box;
    &>div {
      margin-top: 16px;
      padding: 10px;
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      border-radius: 50%;
      box-shadow: inset 0 0 40px #409eff;
      color: #fff;
      box-sizing: content-box;

            &.on {
                position: relative;
                color: #75b1ff;
            }
        }
      &.on {
        position: relative;
        color: #75b1ff;
      }
    }
  }
}
</style>
</style>