zhyq/bigScreen.git

			@@ -1,25 +1,241 @@
			<!--
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2023-03-13 14:54:26
			* @Date: 2023-03-10 15:27:59
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2023-03-13 15:00:55
			* @FilePath: \forest-fire\src\views\statistics\components\box\dataContent.vue
			* @LastEditTime: 2024-11-27 14:49:05
			* @FilePath: \bigScreen\src\views\pac\components\box\dataContent.vue
			* @Description:
			*
			* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
			-->
			<script setup>
			import publicContent from './publicContent.vue'
			import { getList } from "@/api/space/space"
			import { onUnmounted, reactive } from 'vue'

			import { usePointStore } from 'store/usepoint'
			import EventBus from 'utils/bus'

			const { VITE_APP_BASE } = import.meta.env
			const pointStore = usePointStore()

			const resData = reactive({
			data: [{
			label: '一级防控',
			value: '1',
			type: 1,
			// remark: '防火提及配套设置、装置围堰、罐区围堰'
			}, {
			label: '二级防控',
			value: '2',
			type: 2,
			// remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀'
			},
			{
			label: '三级防控',
			value: '3',
			type: 3,
			// remark: '事故应急池、雨水收集池'
			}
			]
			})


			const curSelect = ref('1')
			let addTileLayers = {}
			const handleCheckChange = (row) => {
			EventBus.emit('flyToyqfw', 'flyToyqfw')
			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])
			const typeList = [
			{
			type: 1,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png',
			className: 'yjc-box',
			},
			{
			type: 2,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png',
			className: 'ysf-box',
			},
			{
			type: 5,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/sk.png',
			className: 'sk-box',
			},
			{
			type: 6,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjb.png',
			className: 'yjb-box',
			},
			{
			type: 7,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/xfs.png',
			className: 'xfs-box',
			},
			{
			type: 8,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/gouqu.png',
			className: 'xfs-box',
			},
			{
			type: 9,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsclc.png',
			className: 'xfs-box',
			},
			{
			type: 10,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/psk.png',
			className: 'xfs-box',
			},
			{
			type: 11,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/wsc.png',
			className: 'xfs-box',
			}
			]

			getList({
			size: 1000,
			preLevel: 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 = ''
			let divclassName = ''
			let flag = typeList.find(l => l.type == i.type)
			if (flag) {
			divclassName = flag.className
			if (flag.backgroundIcon) {
			iconEl = `
			<div class="map-name">${i[i.showParams] \|\| i.name}</div>
			<div class="map-icon">
			<img src="${flag.backgroundIcon}">
			</div>
			`
			}
			let divIcon = new DC.DivIcon(
			new DC.Position(i.lng, i.lat, i.ele \|\| 64),
			`<div class="public-map-popup ${divclassName}">
			${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
			}
			}
			})

			if (row.type == 2) {
			EventBus.emit('restHandleCheckChange', `3-3-2`)
			EventBus.emit('restHandleCheckChange', `3-3-4`)
			EventBus.emit('restHandleCheckChange', `3-9`)
			} else {
			EventBus.emit('restHandleDelChange', `3-3-2`)
			EventBus.emit('restHandleDelChange', `3-3-4`)
			EventBus.emit('restHandleDelChange', `3-9`)
			}

			if (row.type == 3) {
			EventBus.emit('restHandleCheckChange', `3-3-2`)
			EventBus.emit('restHandleCheckChange', `3-3-4`)
			EventBus.emit('restHandleCheckChange', `3-8`)
			} else {
			EventBus.emit('restHandleDelChange', `3-3-2`)
			EventBus.emit('restHandleDelChange', `3-3-4`)
			EventBus.emit('restHandleDelChange', `3-8`)
			}
			}

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


			const showOn = computed(() => (item) => {
			if (curSelect.value == item.value) {
			return true
			}
			return false
			})

			onMounted(() => {
			curSelect.value = '1'
			pointStore.updateSharedData(1)
			tabClick(resData.data[0])
			EventBus.emit('flyToyqfw', 'flyToyqfw')
			})

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

			<template>
			<public-content>
			<template #content>
			<div>

			</div>
			</template>
			</public-content>
			<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>
			</template>

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

			.tablist {
			pointer-events: all;


			&>div {
			margin-top: 86px;
			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;
			box-shadow: inset 0 0 100px #2a8ef1;
			}
			}
			}
			}
			</style>