zhyq/bigScreen.git

			@@ -1,139 +1,164 @@
			<!--
			* @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-12 18:10:32
			* @FilePath: \bigScreen\src\views\space\components\leftContainer.vue
			* @Description:
			*
			* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
			-->
			<script setup>
			import publicContent from './publicContent.vue'
			import { getFacilityList } from "@/api/facility"
			import { onUnmounted, reactive } from 'vue'
			const { VITE_APP_BASE } = import.meta.env
			const resData = reactive({
			data: [{
			label: '防线一',
			value: '1',
			type: 1,
			remark: '防火提及配套设置、装置围堰、罐区围堰',
			showPanel: false,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/wy.png'
			}, {
			label: '防线二',
			value: '2',
			type: 2,
			remark: '雨污水排口一体化闸阀、车间收集池、雨污管阀',
			showPanel: false,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/ysf.png'
			},
			{
			label: '防线三',
			value: '3',
			type: 3,
			remark: '事故应急池、雨水收集池',
			showPanel: false,
			backgroundIcon: VITE_APP_BASE + 'img/mapicon/yjc.png'
			}
			]
			})
			const curSelect = ref('1')
			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])
			getFacilityList({
			firmId: companyInfo.id,
			size: 1000,
			facLevel: item.type
			}).then(res => {
			let data = res.data.data
			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> </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>`
			)

			const fxy = () => {
			if (state.layer) {
			console.log("***************************")
			window.$viewer.removeLayer(state.layer)
			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 layer = new DC.VectorLayer(`${row.id}`)
			state.layer = layer
			window.$viewer.addLayer(layer)
			let material = new DC.PolylineDashMaterialProperty({
			color: DC.Color.ORANGE
			})
			let item = new DC.Position(row.lng, row.lat, 100)
			let label = new DC.CustomLabel(
			item,
			row.name
			)
			label.setStyle({
			fillColor: DC.Color.YELLOW,
			font: '12px',
			pixelOffset: { x: 0, y: -10 },
			})
			label.setVLine({
			width: 2,
			material
			})
			layer.addOverlay(label)
			})
			}

			const fxe = () => {
			if (state.layer) {
			console.log("***************************")
			window.$viewer.removeLayer(state.layer)
			}
			let layer = new DC.VectorLayer(`${row.id}`)
			state.layer = layer
			window.$viewer.addLayer(layer)
			let material = new DC.PolylineDashMaterialProperty({
			color: DC.Color.ORANGE
			})
			let item = new DC.Position(row.lng, row.lat, 100)
			let label = new DC.CustomLabel(
			item,
			row.name
			)
			label.setStyle({
			fillColor: DC.Color.YELLOW,
			font: '12px',
			pixelOffset: { x: 0, y: -10 },
			})
			label.setVLine({
			width: 2,
			material
			})
			layer.addOverlay(label)
			const tabClick = (item) => {
			handleCheckChange(item)
			curSelect.value = item.value
			}


			const fxs = () => {
			if (state.layer) {
			console.log("***************************")
			window.$viewer.removeLayer(state.layer)
			}
			let layer = new DC.VectorLayer(`${row.id}`)
			state.layer = layer
			window.$viewer.addLayer(layer)
			let material = new DC.PolylineDashMaterialProperty({
			color: DC.Color.ORANGE
			})
			let item = new DC.Position(row.lng, row.lat, 100)
			let label = new DC.CustomLabel(
			item,
			row.name
			)
			label.setStyle({
			fillColor: DC.Color.YELLOW,
			font: '12px',
			pixelOffset: { x: 0, y: -10 },
			})
			label.setVLine({
			width: 2,
			material
			})
			layer.addOverlay(label)
			}
			const showOn = computed(() => (item) => {
			if (curSelect.value == item.value) {
			return true
			}
			return false
			})

			onMounted(() => {
			tabClick(resData.data[0])
			})



			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
			})
			</script>

			<template>
			<public-content>
			<template #content>
			<div class="data-content">
			<ul>
			<li @click="fxy">防线一</li>
			<li @click="fxe">防线二</li>
			<li @click="fxs">防线三</li>
			</ul>
			</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>
			.data-content {
			color: #fff;
			}
			.cur-container {
			background: transparent;
			pointer-events: none;

			.data-content>ul {
			margin-top: 90px;
			margin-left: 90px;
			}
			.tablist {
			pointer-events: all;

			.data-content>ul>li {
			display: block;
			color: #000;
			margin-top: 160px;
			background-color: #fff;
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			border-radius: 50%;

			&>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>