From 66aebd3a86d3b13f9f9025b58957d6081a80fae4 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Wed, 15 Nov 2023 18:22:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goverment/frontLargeScreen/index.vue      | 253 +++++++++++------
 src/views/goverment/largeScreen/index.vue     | 255 ++++++++++++------
 2 files changed, 349 insertions(+), 159 deletions(-)

diff --git a/src/views/goverment/frontLargeScreen/index.vue b/src/views/goverment/frontLargeScreen/index.vue
index ba496e8..400fd33 100644
--- a/src/views/goverment/frontLargeScreen/index.vue
+++ b/src/views/goverment/frontLargeScreen/index.vue
@@ -79,7 +79,7 @@
 		<!-- 图层添加 -->
 		<div class="layer-add" v-if="layersShow">
 			<div class="layer-add-title">
-				<span>图层</span>
+				<span>图层1</span>
 				<el-icon size="16" color="#fff" @click="layersShow = false"><Close /></el-icon>
 			</div>
 			<div class="layer-add-tree">
@@ -90,7 +90,7 @@
 					:props="props"
 					show-checkbox
 					node-key="id"
-					@check-change="handleCheckChange"
+					@check="handleCheckChange"
 				/>
 			</div>
 		</div>
@@ -111,18 +111,18 @@
 		<!-- 分屏对比弹框 -->
 		<div class="screen-layer-add" v-if="screenComparisonShow" v-draggable>
 			<div class="screen-layer-add-title">
-				<span>图层</span>
+				<span>图层2</span>
 				<el-icon size="16" color="#fff" @click="clearScreenComparison"><Close /></el-icon>
 			</div>
 			<div class="screen-layer-add-tree">
 				<el-tree
-					:default-expanded-keys="expandedKeys"
-					:default-checked-keys="checkedKeys"
-					:data="treeData"
+					:default-expanded-keys="splitScreenExpandedKeys"
+					:default-checked-keys="splitScreenCheckedKeys"
+					:data="splitScreenTreeData"
 					:props="props"
 					show-checkbox
 					node-key="id"
-					@check-change="handleCheckChange"
+					@check="handleCheckChangeMapSplitScreen"
 				/>
 			</div>
 		</div>
@@ -325,8 +325,12 @@ const skyProperty = ref({
 });
 const checkedKeys = ref<any[]>([]);
 const expandedKeys = ref<any>([]);
+const splitScreenCheckedKeys = ref<any[]>([]);
+const splitScreenExpandedKeys = ref<any>([]);
 const layersObj: any = {};
+const splitScreenLayersObj: any = {};
 const treeData = ref<any>([]);
+const splitScreenTreeData = ref<any>([]);
 const props = {
 	label: "title",
 	children: "children"
@@ -1033,88 +1037,122 @@ const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
 	});
 	graphicLayer.addGraphic(graphicImg);
 };
-// const handleCheckChange = (e: any, isCheck: any) => {
-// 	const layer = layersObj[e.key];
-// 	if (layer) {
-// 		if (!layer.isAdded) {
-// 			map.addLayer(layer);
-// 		}
-// 		// 处理子节点
-// 		if (e.children && e.children.length) {
-// 			renderChildNode(isCheck, e.children);
-// 		}
-
-// 		if (isCheck) {
-// 			layer.show = true;
-// 			layer.flyTo();
-// 		} else {
-// 			layer.show = false;
-// 		}
-// 	}
-// };
-const handleCheckChange = (e: any, isCheck: any, haveChildCheck: any) => {
+const handleCheckChange = (e: any, obj: any) => {
+	console.log(e);
 	const layer = layersObj[e.key];
-	const isChildern = e.children;
-	console.log("node", e);
-	console.log(layer);
-	console.log(isCheck);
-	console.log(haveChildCheck);
+	const keys = obj.checkedKeys;
+	if (layer) {
+		if (!layer.isAdded) {
+			map.addLayer(layer);
+		}
 
-	if (layer && !isChildern && isCheck) {
-		setTimeout(function () {
-			// 修改白膜的偏移位置
-			let findItem: any = albugineaList.value.find(item => item.id == e.key);
-			console.log(findItem);
-			let initCenter: any;
-			initCenter = {
-				lng: layer.orginCenterPoint.lng,
-				lat: layer.orginCenterPoint.lat,
-				alt: layer.orginCenterPoint.alt
-			};
-			layer.position = {
-				lng: initCenter.lng + +findItem.lng,
-				lat: initCenter.lat + +findItem.lat,
-				alt: initCenter.alt + +findItem.alt
-			};
-			console.log(layer.position);
-		}, 200);
-		layer.show = true;
-		layer.flyTo();
-	} else {
-		layer.show = false;
-	}
+		// 处理子节点
+		if (e.children && e.children.length) {
+			renderChildNode(keys, e.children);
+		}
 
-	// 增添模型
-	if (isChildern && isChildern.length === 0 && !e.checked) {
-		map.addLayer(layer);
-	}
-
-	// 处理子节点
-	if (e.children && e.children.length) {
-		renderChildNode(isCheck, e.children, e.key);
-	}
-
-	// 删除模型
-	if (isChildern && isChildern.length === 0 && e.checked) {
-		layer.show = false;
+		if (keys.indexOf(e.key) !== -1) {
+			setTimeout(function () {
+				// 修改白膜的偏移位置
+				let findItem: any = albugineaList.value.find(item => item.id == e.key);
+				console.log(findItem);
+				if (!findItem) return;
+				let initCenter: any;
+				initCenter = {
+					lng: layer.orginCenterPoint.lng,
+					lat: layer.orginCenterPoint.lat,
+					alt: layer.orginCenterPoint.alt
+				};
+				layer.position = {
+					lng: initCenter.lng + +findItem.lng,
+					lat: initCenter.lat + +findItem.lat,
+					alt: initCenter.alt + +findItem.alt
+				};
+				console.log(layer.position);
+			}, 200);
+			layer.show = true;
+			layer.flyTo();
+		} else {
+			layer.show = false;
+		}
 	}
 };
-const renderChildNode = (isCheck: any, children: any[], key: any) => {
+const renderChildNode = (keys: string[], children: any[]) => {
 	children.forEach(child => {
 		const layer = layersObj[child.key];
 		if (layer) {
 			if (!layer.isAdded) {
 				map.addLayer(layer);
 			}
-			if (child.key == key) {
-				if (isCheck && key == child.key) {
-					layer.show = true;
-				} else {
-					layer.show = false;
-				}
-				if (child.children) {
-					renderChildNode(isCheck, child.children, child.key);
-				}
+
+			if (keys.indexOf(child.key) !== -1) {
+				layer.show = true;
+			} else {
+				layer.show = false;
+			}
+			if (child.children) {
+				renderChildNode(keys, child.children);
+			}
+		}
+	});
+};
+// 修改分屏地图
+const handleCheckChangeMapSplitScreen = (e: any, obj: any) => {
+	console.log(e);
+	const layer = layersObj[e.key];
+	const keys = obj.checkedKeys;
+	if (layer) {
+		if (!layer.isAdded) {
+			mapScreenSplit.mapEx.addLayer(layer);
+		}
+
+		// 处理子节点
+		if (e.children && e.children.length) {
+			renderChildNodeMapSplitScreen(keys, e.children);
+		}
+
+		if (keys.indexOf(e.key) !== -1) {
+			setTimeout(function () {
+				// 修改白膜的偏移位置
+				let findItem: any = albugineaList.value.find(item => item.id == e.key);
+				console.log(findItem);
+				if (!findItem) return;
+				let initCenter: any;
+				initCenter = {
+					lng: layer.orginCenterPoint.lng,
+					lat: layer.orginCenterPoint.lat,
+					alt: layer.orginCenterPoint.alt
+				};
+				layer.position = {
+					lng: initCenter.lng + +findItem.lng,
+					lat: initCenter.lat + +findItem.lat,
+					alt: initCenter.alt + +findItem.alt
+				};
+				console.log(layer.position);
+			}, 200);
+			layer.show = true;
+			layer.flyTo();
+		} else {
+			layer.show = false;
+		}
+	}
+};
+// 处理分屏子节点
+const renderChildNodeMapSplitScreen = (keys: string[], children: any[]) => {
+	children.forEach(child => {
+		const layer = layersObj[child.key];
+		if (layer) {
+			if (!layer.isAdded) {
+				mapScreenSplit.mapEx.addLayer(layer);
+			}
+
+			if (keys.indexOf(child.key) !== -1) {
+				layer.show = true;
+			} else {
+				layer.show = false;
+			}
+			if (child.children) {
+				renderChildNodeMapSplitScreen(keys, child.children);
 			}
 		}
 	});
@@ -1168,7 +1206,57 @@ const findChild = (parent: any, list: any[]) => {
 			return node;
 		});
 };
+// 初始化分屏对比的树结构
+const initSplitScreenTree = () => {
+	const layers = map.getLayers({
+		basemaps: false, // 是否取config.json中的basempas
+		layers: true // 是否取config.json中的layers
+	});
+	console.log(layers);
+	// 遍历出config.json中所有的basempas和layers
+	for (let i = layers.length - 1; i >= 0; i--) {
+		const layer = layers[i];
 
+		if (layer && layer.pid === -1) {
+			const node: any = {
+				title: layer.name,
+				key: layer.id,
+				id: layer.id,
+				pId: layer.pid,
+				group: layer.type === "group"
+			};
+			node.children = splitScreenFindChild(node, layers);
+			splitScreenTreeData.value.push(node);
+			splitScreenLayersObj[layer.id] = layer;
+			splitScreenExpandedKeys.value.push(node.key);
+		}
+	}
+};
+const splitScreenFindChild = (parent: any, list: any[]) => {
+	console.log(list, "11122233344455666");
+	console.log(parent, "23121314488888772226699");
+	return list
+		.filter((item: any) => item.pid === parent.id)
+		.map((item: any) => {
+			const node: any = {
+				title: item.name,
+				key: item.id,
+				id: item.id,
+				pId: item.pid,
+				group: item.type === "group"
+			};
+			splitScreenLayersObj[item.id] = item;
+			splitScreenExpandedKeys.value.push(node.key);
+
+			if (item.hasEmptyGroup || item.hasChildLayer) {
+				node.children = splitScreenFindChild(node, list);
+			}
+			if (item.isAdded && item.show) {
+				splitScreenCheckedKeys.value.push(node.key);
+			}
+			return node;
+		});
+};
 // 雨天气操作
 const yuOperate = (e: any, label: any) => {
 	console.log(e, label);
@@ -1883,8 +1971,13 @@ onUnmounted(() => {
 	.cesium-cesiumInspector {
 		background-color: rgba(23, 49, 71, 0.8);
 	}
-
-	/**覆盖mars3d内部控件的颜色等样式*/
+	// 导航球
+	.mars3d-compass {
+		bottom: calc(50% - 35px) !important;
+		left: 5px !important;
+		top: auto !important;
+		right: auto !important;
+	}
 	.mars3d-compass .mars3d-compass-outer {
 		fill: rgba(23, 49, 71, 0.8);
 	}
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index e8fffc2..6b23311 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -79,7 +79,7 @@
 		<!-- 图层添加 -->
 		<div class="layer-add" v-if="layersShow">
 			<div class="layer-add-title">
-				<span>图层</span>
+				<span>图层1</span>
 				<el-icon size="16" color="#fff" @click="layersShow = false"><Close /></el-icon>
 			</div>
 			<div class="layer-add-tree">
@@ -90,7 +90,7 @@
 					:props="props"
 					show-checkbox
 					node-key="id"
-					@check-change="handleCheckChange"
+					@check="handleCheckChange"
 				/>
 			</div>
 		</div>
@@ -111,18 +111,18 @@
 		<!-- 分屏对比弹框 -->
 		<div class="screen-layer-add" v-if="screenComparisonShow" v-draggable>
 			<div class="screen-layer-add-title">
-				<span>图层</span>
+				<span>图层2</span>
 				<el-icon size="16" color="#fff" @click="clearScreenComparison"><Close /></el-icon>
 			</div>
 			<div class="screen-layer-add-tree">
 				<el-tree
-					:default-expanded-keys="expandedKeys"
-					:default-checked-keys="checkedKeys"
-					:data="treeData"
+					:default-expanded-keys="splitScreenExpandedKeys"
+					:default-checked-keys="splitScreenCheckedKeys"
+					:data="splitScreenTreeData"
 					:props="props"
 					show-checkbox
 					node-key="id"
-					@check-change="handleCheckChange"
+					@check="handleCheckChangeMapSplitScreen"
 				/>
 			</div>
 		</div>
@@ -325,8 +325,12 @@ const skyProperty = ref({
 });
 const checkedKeys = ref<any[]>([]);
 const expandedKeys = ref<any>([]);
+const splitScreenCheckedKeys = ref<any[]>([]);
+const splitScreenExpandedKeys = ref<any>([]);
 const layersObj: any = {};
+const splitScreenLayersObj: any = {};
 const treeData = ref<any>([]);
+const splitScreenTreeData = ref<any>([]);
 const props = {
 	label: "title",
 	children: "children"
@@ -633,6 +637,8 @@ const clickMenu = (name: any) => {
 		screenComparisonShow.value = true;
 		// 分屏对比
 		screenComparison();
+		// 初始化树
+		initSplitScreenTree();
 	}
 	toolListShow.value = false;
 };
@@ -1035,88 +1041,122 @@ const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
 	});
 	graphicLayer.addGraphic(graphicImg);
 };
-// const handleCheckChange = (e: any, isCheck: any) => {
-// 	const layer = layersObj[e.key];
-// 	if (layer) {
-// 		if (!layer.isAdded) {
-// 			map.addLayer(layer);
-// 		}
-// 		// 处理子节点
-// 		if (e.children && e.children.length) {
-// 			renderChildNode(isCheck, e.children);
-// 		}
-
-// 		if (isCheck) {
-// 			layer.show = true;
-// 			layer.flyTo();
-// 		} else {
-// 			layer.show = false;
-// 		}
-// 	}
-// };
-const handleCheckChange = (e: any, isCheck: any, haveChildCheck: any) => {
+// 修改分屏地图
+const handleCheckChangeMapSplitScreen = (e: any, obj: any) => {
+	console.log(e);
 	const layer = layersObj[e.key];
-	const isChildern = e.children;
-	console.log("node", e);
-	console.log(layer);
-	console.log(isCheck);
-	console.log(haveChildCheck);
+	const keys = obj.checkedKeys;
+	if (layer) {
+		if (!layer.isAdded) {
+			mapScreenSplit.mapEx.addLayer(layer);
+		}
 
-	if (layer && !isChildern && isCheck) {
-		setTimeout(function () {
-			// 修改白膜的偏移位置
-			let findItem: any = albugineaList.value.find(item => item.id == e.key);
-			console.log(findItem);
-			let initCenter: any;
-			initCenter = {
-				lng: layer.orginCenterPoint.lng,
-				lat: layer.orginCenterPoint.lat,
-				alt: layer.orginCenterPoint.alt
-			};
-			layer.position = {
-				lng: initCenter.lng + +findItem.lng,
-				lat: initCenter.lat + +findItem.lat,
-				alt: initCenter.alt + +findItem.alt
-			};
-			console.log(layer.position);
-		}, 200);
-		layer.show = true;
-		layer.flyTo();
-	} else {
-		layer.show = false;
-	}
+		// 处理子节点
+		if (e.children && e.children.length) {
+			renderChildNodeMapSplitScreen(keys, e.children);
+		}
 
-	// 增添模型
-	if (isChildern && isChildern.length === 0 && !e.checked) {
-		map.addLayer(layer);
-	}
-
-	// 处理子节点
-	if (e.children && e.children.length) {
-		renderChildNode(isCheck, e.children, e.key);
-	}
-
-	// 删除模型
-	if (isChildern && isChildern.length === 0 && e.checked) {
-		layer.show = false;
+		if (keys.indexOf(e.key) !== -1) {
+			setTimeout(function () {
+				// 修改白膜的偏移位置
+				let findItem: any = albugineaList.value.find(item => item.id == e.key);
+				console.log(findItem);
+				if (!findItem) return;
+				let initCenter: any;
+				initCenter = {
+					lng: layer.orginCenterPoint.lng,
+					lat: layer.orginCenterPoint.lat,
+					alt: layer.orginCenterPoint.alt
+				};
+				layer.position = {
+					lng: initCenter.lng + +findItem.lng,
+					lat: initCenter.lat + +findItem.lat,
+					alt: initCenter.alt + +findItem.alt
+				};
+				console.log(layer.position);
+			}, 200);
+			layer.show = true;
+			layer.flyTo();
+		} else {
+			layer.show = false;
+		}
 	}
 };
-const renderChildNode = (isCheck: any, children: any[], key: any) => {
+// 处理分屏子节点
+const renderChildNodeMapSplitScreen = (keys: string[], children: any[]) => {
+	children.forEach(child => {
+		const layer = layersObj[child.key];
+		if (layer) {
+			if (!layer.isAdded) {
+				mapScreenSplit.mapEx.addLayer(layer);
+			}
+
+			if (keys.indexOf(child.key) !== -1) {
+				layer.show = true;
+			} else {
+				layer.show = false;
+			}
+			if (child.children) {
+				renderChildNodeMapSplitScreen(keys, child.children);
+			}
+		}
+	});
+};
+const handleCheckChange = (e: any, obj: any) => {
+	console.log(e);
+	const layer = layersObj[e.key];
+	const keys = obj.checkedKeys;
+	if (layer) {
+		if (!layer.isAdded) {
+			map.addLayer(layer);
+		}
+
+		// 处理子节点
+		if (e.children && e.children.length) {
+			renderChildNode(keys, e.children);
+		}
+
+		if (keys.indexOf(e.key) !== -1) {
+			setTimeout(function () {
+				// 修改白膜的偏移位置
+				let findItem: any = albugineaList.value.find(item => item.id == e.key);
+				console.log(findItem);
+				if (!findItem) return;
+				let initCenter: any;
+				initCenter = {
+					lng: layer.orginCenterPoint.lng,
+					lat: layer.orginCenterPoint.lat,
+					alt: layer.orginCenterPoint.alt
+				};
+				layer.position = {
+					lng: initCenter.lng + +findItem.lng,
+					lat: initCenter.lat + +findItem.lat,
+					alt: initCenter.alt + +findItem.alt
+				};
+				console.log(layer.position);
+			}, 200);
+			layer.show = true;
+			layer.flyTo();
+		} else {
+			layer.show = false;
+		}
+	}
+};
+const renderChildNode = (keys: string[], children: any[]) => {
 	children.forEach(child => {
 		const layer = layersObj[child.key];
 		if (layer) {
 			if (!layer.isAdded) {
 				map.addLayer(layer);
 			}
-			if (child.key == key) {
-				if (isCheck && key == child.key) {
-					layer.show = true;
-				} else {
-					layer.show = false;
-				}
-				if (child.children) {
-					renderChildNode(isCheck, child.children, child.key);
-				}
+
+			if (keys.indexOf(child.key) !== -1) {
+				layer.show = true;
+			} else {
+				layer.show = false;
+			}
+			if (child.children) {
+				renderChildNode(keys, child.children);
 			}
 		}
 	});
@@ -1147,6 +1187,57 @@ const initTree = () => {
 		}
 	}
 };
+// 初始化分屏对比的树结构
+const initSplitScreenTree = () => {
+	const layers = map.getLayers({
+		basemaps: false, // 是否取config.json中的basempas
+		layers: true // 是否取config.json中的layers
+	});
+	console.log(layers);
+	// 遍历出config.json中所有的basempas和layers
+	for (let i = layers.length - 1; i >= 0; i--) {
+		const layer = layers[i];
+
+		if (layer && layer.pid === -1) {
+			const node: any = {
+				title: layer.name,
+				key: layer.id,
+				id: layer.id,
+				pId: layer.pid,
+				group: layer.type === "group"
+			};
+			node.children = splitScreenFindChild(node, layers);
+			splitScreenTreeData.value.push(node);
+			splitScreenLayersObj[layer.id] = layer;
+			splitScreenExpandedKeys.value.push(node.key);
+		}
+	}
+};
+const splitScreenFindChild = (parent: any, list: any[]) => {
+	console.log(list, "11122233344455666");
+	console.log(parent, "23121314488888772226699");
+	return list
+		.filter((item: any) => item.pid === parent.id)
+		.map((item: any) => {
+			const node: any = {
+				title: item.name,
+				key: item.id,
+				id: item.id,
+				pId: item.pid,
+				group: item.type === "group"
+			};
+			splitScreenLayersObj[item.id] = item;
+			splitScreenExpandedKeys.value.push(node.key);
+
+			if (item.hasEmptyGroup || item.hasChildLayer) {
+				node.children = splitScreenFindChild(node, list);
+			}
+			if (item.isAdded && item.show) {
+				splitScreenCheckedKeys.value.push(node.key);
+			}
+			return node;
+		});
+};
 const findChild = (parent: any, list: any[]) => {
 	return list
 		.filter((item: any) => item.pid === parent.id)
@@ -1886,7 +1977,13 @@ onUnmounted(() => {
 		background-color: rgba(23, 49, 71, 0.8);
 	}
 
-	/**覆盖mars3d内部控件的颜色等样式*/
+	// 导航球
+	.mars3d-compass {
+		bottom: calc(50% - 35px) !important;
+		left: 5px !important;
+		top: auto !important;
+		right: auto !important;
+	}
 	.mars3d-compass .mars3d-compass-outer {
 		fill: rgba(23, 49, 71, 0.8);
 	}