智慧园区前端大屏
linwe
2024-11-19 940222bec16446d4b933fb7682ca4933fb520b4a
src/views/companyInfo/components/box/unitContent.vue
@@ -20,99 +20,93 @@
const curSelect = ref('')
let addTileLayers = {}
const handleCheckChange = (row) => {
onMounted(() => {
    handleCheckChange()
})
const handleCheckChange = () => {
    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">
    // 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 iconEl = ''
                {
                    iconEl = `<div class="marsBlueGradientPnl">
                  <div>${i.name}</div>
                </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(i.lng, i.lat, 0),
                    `<div class="public-map-popup">
                    ${iconEl}
                  </div>`
                        )
                )
                        divIcon.attrParams = i
                divIcon.attrParams = i
                        let incident = () => { }
                let incident = () => { }
                        if (item.incident) incident = item.incident
                // if (item.incident) incident = item.incident
                        divIcon.on(DC.MouseEventType.CLICK, 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
            }
        }
    })
                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
            }
        })
// 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])
    })
}
//         tabClick(resData.data[0])
//     })
// }
const tabClick = (item) => {
    handleCheckChange(item)
    curSelect.value = item.value
}
// const tabClick = (item) => {
//     handleCheckChange(item)
//     // curSelect.value = item.value
// }
const showOn = computed(() => (item) => {
    if (curSelect.value == item.value) {
        return true
    }
    return false
})
// const showOn = computed(() => (item) => {
//     if (curSelect.value == item.value) {
//         return true
//     }
//     return false
// })
getDictData("emergency_space_type")
// getDictData("emergency_space_type")
onUnmounted(() => {
    console.log('leftContainer unmounted***********************')
    let arr = Object.keys(addTileLayers)
    arr.forEach(i => {
        addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i])
@@ -122,14 +116,14 @@
<template>
    <div class="left-container cur-container">
        <div class="tablist h100">
        <!-- <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>
</template>