fix: BUG修改

src/components/layoutTop/index.vue

@@ -3,20 +3,20 @@
 		<el-header>
 			<div class="header-lf">
 				<div @click="goHome" class="logo flx-center">
-					<img
+					<!-- <img
 						:src="globalStore.systemConfigLogo ? globalStore.systemConfigLogo : 'src/assets/images/login/china.png'"
 						alt="logo"
-					/>
+					/> -->
-					<span>Mars3D综合态势展示系统</span>
+					<span>佳信捷3D综合态势展示系统</span>
 				</div>
 			</div>
 			<div class="header-menu">
 				<div @click="backCenter">
-					<img src="@/assets/images/icon/fire.png" alt="" srcset="" />
+					<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
 					<span>首页</span>
 				</div>
 				<div @click="router.push('/config')">
-					<img src="@/assets/images/icon/fire.png" alt="" srcset="" />
+					<!-- <img src="@/assets/images/icon/fire.png" alt="" srcset="" /> -->
 					<span>信息展示</span>
 				</div>
 			</div>

src/components/testMap/index.vue

@@ -145,7 +145,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, onBeforeUnmount, watch } from "vue";
 //引入cesium基础库
 import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
 import * as Cesium from "mars3d-cesium";
@@ -258,70 +258,76 @@ const editBaseMapsConfig = async () => {
 const modelOperate = (e: any, label: any) => {
 	console.log(e);
 	console.log(formData.value);
-	let graphic = graphicLayer.getGraphicById(formData.value.id);
+	if (graphicLayer) {
-	// console.log(graphic);
+		let graphic = graphicLayer.getGraphicById(formData.value.id);
-	let loadJson = {
+		let loadJson = {
-		scale: formData.value.scale,
+			scale: formData.value.scale,
-		heading: formData.value.heading,
+			heading: formData.value.heading,
-		pitch: formData.value.pitch,
+			pitch: formData.value.pitch,
-		roll: formData.value.roll,
+			roll: formData.value.roll,
-		silhouette: formData.value.silhouette,
+			silhouette: formData.value.silhouette,
-		silhouetteColor: formData.value.silhouetteColor,
+			silhouetteColor: formData.value.silhouetteColor,
-		silhouetteSize: formData.value.silhouetteSize,
+			silhouetteSize: formData.value.silhouetteSize,
-		hasShadows: formData.value.hasShadows,
+			hasShadows: formData.value.hasShadows,
-		clampToGround: formData.value.clampToGround
+			clampToGround: formData.value.clampToGround
-	};
+		};
-	graphic.setStyle(loadJson);
+		graphic.setStyle(loadJson);
-	// layer.style = loadJson;
+		// layer.style = loadJson;
+	}
 };
 // 线效果操作
 const lineEffectOperate = (e: any, label: any) => {
 	console.log(e);
 	console.log(formData.value.width);
-	let graphic = graphicLayer.getGraphicById(formData.value.id);
+	console.log(graphicLayer);
-	console.log(graphic);
+	if (graphicLayer) {
-	let loadJson = {
+		let graphic = graphicLayer.getGraphicById(formData.value.id);
-		width: formData.value.width,
+		console.log(graphic);
-		materialType: mars3d.MaterialType[formData.value.type],
+		let loadJson = {
-		materialOptions: {
+			width: formData.value.width,
-			color: formData.value.color,
+			materialType: mars3d.MaterialType[formData.value.type],
-			speed: formData.value.speed,
+			materialOptions: {
-			startTime: random(1000, 3000),
+				color: formData.value.color,
-			percent: 0.1,
+				speed: formData.value.speed,
-			alpha: 0.01
+				startTime: random(1000, 3000),
+				percent: 0.1,
+				alpha: 0.01
+			}
+		};
+		if (formData.value.type == "ODLine") {
+			loadJson.materialOptions.bgColor = formData.value.bgColor;
 		}
-	};
+		// graphic.redraw(loadJson);
-	if (formData.value.type == "ODLine") {
+		graphic.setStyle(loadJson);
-		loadJson.materialOptions.bgColor = formData.value.bgColor;
 	}
-	// graphic.redraw(loadJson);
-	graphic.setStyle(loadJson);
 };
 // 点坐标效果操作
 const pointPositionOperate = (e: any, label: any) => {
 	console.log(formData.value);
-	let graphic = graphicLayer.getGraphicById(formData.value.id);
+	if (graphicLayer) {
-	console.log(graphic);
+		let graphic = graphicLayer.getGraphicById(formData.value.id);
-	let _rotation = Math.random();
+		console.log(graphic);
-	let loadJson = {
+		let _rotation = Math.random();
-		radius: formData.value.radius,
+		let loadJson = {
-		materialType: mars3d.MaterialType[formData.value.type],
+			radius: formData.value.radius,
-		materialOptions: {
+			materialType: mars3d.MaterialType[formData.value.type],
-			// 扫描材质
+			materialOptions: {
-			image: formData.value.type == "CircleScan" ? formData.value.image : "",
+				// 扫描材质
-			color: formData.value.color,
+				image: formData.value.type == "CircleScan" ? formData.value.image : "",
-			speed: formData.value.speed
+				color: formData.value.color,
-		},
+				speed: formData.value.speed
-		clampToGround: true // 是否贴地
+			},
-	};
+			clampToGround: true // 是否贴地
-	if (formData.value.type == "CircleScan") {
+		};
-		loadJson.stRotation = new Cesium.CallbackProperty(function (e) {
+		if (formData.value.type == "CircleScan") {
-			_rotation += 0.1;
+			loadJson.stRotation = new Cesium.CallbackProperty(function (e) {
-			return _rotation;
+				_rotation += 0.1;
-		}, false);
+				return _rotation;
-		loadJson.classificationType = Cesium.ClassificationType.BOTH;
+			}, false);
+			loadJson.classificationType = Cesium.ClassificationType.BOTH;
+		}
+		graphic.setStyle(loadJson);
 	}
-	graphic.setStyle(loadJson);
 };
 let initCenter: any; // 初始中心经纬度
 let requestNum: number = 0; // 请求中心点次数
@@ -669,6 +675,19 @@ const initMars3d = (option: any) => {
 		}, 200);
 	}
 };
+onBeforeUnmount(async () => {
+	// if (props.type == "底图") {
+	// 	await getBaseMapsInfo();
+	// } else if (props.type == "白膜") {
+	// 	await getAlbugineaInfo();
+	// } else if (props.type == "点坐标效果") {
+	// 	await getPointPositionInfo();
+	// } else if (props.type == "线效果") {
+	// 	await getLineEffectInfo();
+	// } else if (props.type == "模型") {
+	// 	await getModelInfo();
+	// }
+});
 onMounted(async () => {
 	if (props.type == "底图") {
 		await getBaseMapsInfo();

src/layouts/LayoutClassic/index.vue

@@ -4,11 +4,11 @@
 		<el-header>
 			<div class="header-lf">
 				<div @click="goHome" class="logo flx-center">
-					<img
+					<!-- <img
 						:src="globalStore.systemConfigLogo ? globalStore.systemConfigLogo : 'src/assets/images/login/china.png'"
 						alt="logo"
-					/>
+					/> -->
-					<span>Mars3D综合态势展示系统</span>
+					<span>佳信捷3D综合态势展示系统</span>
 				</div>
 			</div>
 			<ToolBarRight />

src/views/goverment/largeScreen/components/coordinatePicking.vue

@@ -246,6 +246,14 @@ const closeDiv = () => {
 };
 onMounted(() => {
 	console.log(map, "66666");
+	const point = map.getCenter();
+	point.format();
+	currJD = point.lng;
+	currWD = point.lat;
+	currGD = point.alt;
+	allProperty.value.jd = marsUtilFormtNum(currJD, 6);
+	allProperty.value.wd = marsUtilFormtNum(currWD, 6);
+	allProperty.value.alt = marsUtilFormtNum(currGD, 6);
 });
 onUnmounted(() => {
 	map = null;

src/views/goverment/largeScreen/components/spaceAnalysis.vue

@@ -26,7 +26,7 @@
 					</div>
 					<div class="item-classify-item">
 						<span>时间选择：</span>
-						<el-slider v-model="allProperty.timeVal" :min="0" :max="1440" :step="1" @change="timeChange" />
+						<el-slider v-model="allProperty.timeVal" :min="0" :max="1440" :step="1" @input="timeChange" />
 					</div>
 					<div class="item-classify-item">
 						<span>当前时间：</span>
@@ -48,19 +48,19 @@
 				<div class="item-classify">
 					<div class="item-classify-item">
 						<span>四周方向：</span>
-						<el-slider v-model="allProperty.heading" :max="360" @change="e => viewShedOperate(e, 'heading')" />
+						<el-slider v-model="allProperty.heading" :max="360" @input="e => viewShedOperate(e, 'heading')" />
 					</div>
 					<div class="item-classify-item">
 						<span>视角距离：</span>
-						<el-slider v-model="allProperty.distance" :step="10" :max="5000" @change="e => viewShedOperate(e, 'distance')" />
+						<el-slider v-model="allProperty.distance" :step="10" :max="5000" @input="e => viewShedOperate(e, 'distance')" />
 					</div>
 					<div class="item-classify-item">
 						<span>透明度：</span>
-						<el-slider v-model="allProperty.opacity" :step="0.1" :max="1" @change="e => viewShedOperate(e, 'opacity')" />
+						<el-slider v-model="allProperty.opacity" :step="0.1" :max="1" @input="e => viewShedOperate(e, 'opacity')" />
 					</div>
 					<div class="item-classify-item">
 						<span>视椎线框：</span>
-						<el-switch v-model="allProperty.showFrustum" @change="e => viewShedOperate(e, 'showFrustum')" />
+						<el-switch v-model="allProperty.showFrustum" @input="e => viewShedOperate(e, 'showFrustum')" />
 					</div>
 				</div>
 				<div class="sunshing-play">
@@ -79,6 +79,7 @@
 					<div class="item-classify-item">
 						<span>基准面高(米)：</span>
 						<el-input-number v-model="allProperty.height" controls-position="right" @change="e => volumeOperate(e, 'height')" />
+						<el-button v-if="allProperty.height != 0" type="primary" @click="selectHeight">点选高度</el-button>
 					</div>
 					<div class="item-classify-item">
 						<span>围墙底高(米)：</span>
@@ -101,7 +102,6 @@
 				</div>
 				<div class="volume-operate">
 					<el-button type="primary" @click="addVolume">绘制区域</el-button>
-					<el-button type="primary" @click="selectHeight">点选高度</el-button>
 				</div>
 			</div>
 			<!-- 地形开挖 -->
@@ -145,7 +145,7 @@
 					</div>
 					<div class="item-classify-item">
 						<span>透明度：</span>
-						<el-slider v-model="allProperty.alpha" :step="0.1" :max="1" @change="e => surfaceOpacityOperate(e, 'alpha')" />
+						<el-slider v-model="allProperty.alpha" :step="0.1" :max="1" @input="e => surfaceOpacityOperate(e, 'alpha')" />
 					</div>
 				</div>
 			</div>
@@ -264,7 +264,7 @@
 					</div> -->
 					<div class="item-classify-item">
 						<span>限制高度：</span>
-						<el-slider v-model="allProperty.limitHeight" :max="1000" @change="limitHeightOperate" />
+						<el-slider v-model="allProperty.limitHeight" :max="1000" @input="limitHeightOperate" />
 					</div>
 					<div class="item-classify-item">
 						<span>当前高度：</span>
@@ -354,6 +354,18 @@ const hours = computed(() => Math.floor(allProperty.value.timeVal / 60));
 const minutes = computed(() => Math.floor(allProperty.value.timeVal / 60));
 onMounted(() => {
 	console.log(map, "66666");
+	graphicLayer = new mars3d.layer.GraphicLayer();
+	map.addLayer(graphicLayer);
+	map.scene.globe.depthTestAgainstTerrain = true; // 不加无法投射到地形上
+	// 地形开挖
+	terrainClip = new mars3d.thing.TerrainClip({
+		diffHeight: allProperty.value.diffHeight, // 井的深度
+		image: "src/assets/images/Mars3DImg/textures/poly-stone.jpg",
+		imageBottom: "src/assets/images/Mars3DImg/textures/poly-soil.jpg",
+		splitNum: 80, // 井边界插值数
+		enabled: true
+	});
+	map.addThing(terrainClip);
 	measure = new mars3d.thing.Measure({
 		label: {
 			color: "#ffffff",
@@ -371,53 +383,6 @@ onMounted(() => {
 	measure.on(mars3d.EventType.end, function (e: any) {
 		console.log(e);
 	});
-	// 日照分析
-	shadows = new mars3d.thing.Shadows({
-		multiplier: 1600
-	});
-	map.addThing(shadows);
-	shadows.on(mars3d.EventType.change, function (e: any) {
-		allProperty.value.timeVal = shadows.time.getHours() * 60 + shadows.time.getMinutes();
-	});
-	// 可视域分析
-	map.scene.globe.depthTestAgainstTerrain = true; // 不加无法投射到地形上
-	graphicLayer = new mars3d.layer.GraphicLayer();
-	map.addLayer(graphicLayer);
-	// 地形开挖
-	terrainClip = new mars3d.thing.TerrainClip({
-		diffHeight: allProperty.value.diffHeight, // 井的深度
-		image: "images/Mars3DImg/textures/poly-stone.jpg",
-		imageBottom: "images/Mars3DImg/textures/poly-soil.jpg",
-		splitNum: 80 // 井边界插值数
-	});
-	map.addThing(terrainClip);
-	// 地下透明
-	map.scene.contextOptions = { webgl: { alpha: true } };
-	underground = new mars3d.thing.Underground({
-		alpha: 0.5
-	});
-	map.addThing(underground);
-	// 坡度坡向
-	slope = new mars3d.thing.Slope({
-		arrow: {
-			scale: 0.3, // 箭头长度的比例（范围0.1-0.9）
-			color: Cesium.Color.YELLOW,
-			width: 15, // 箭头宽度
-			// materialType: mars3d.MaterialType.LineFlow,
-			// materialOptions: {
-			//   color: "#1a9850",
-			//   image: "img/textures/line-arrow-right.png",
-			//   speed: 10
-			// },
-			// clampToGround: true,
-			show: true
-		},
-		tooltip: function (event) {
-			const attr = event.graphic?.attr;
-			return `坡度: ${attr.slopeStr1}  (${attr.slopeStr2})<br />坡向: ${attr.direction}°`;
-		}
-	});
-	map.addThing(slope);
 	// 渲染效果
 	contourLine = new mars3d.thing.ContourLine({
 		contourShow: false, // 是否显示等高线
@@ -425,41 +390,6 @@ onMounted(() => {
 		shadingAlpha: 0.6 /// 地表渲染的透明度
 	});
 	map.addThing(contourLine);
-	// 模型剖切
-	map.scene.center = { lat: 31.841619, lng: 117.140395, alt: 1259, heading: 90, pitch: -51 };
-	// 加模型
-	const graphic = new mars3d.graphic.ModelPrimitive({
-		position: [117.150365, 31.841954, 50.26],
-		style: {
-			url: "//data.mars3d.cn/gltf/mars/dikuai/d1.gltf",
-			scale: 1
-		}
-	});
-	graphicLayer.addGraphic(graphic);
-	modelPlanClip = new mars3d.thing.ModelPlanClip({
-		graphic: graphic,
-		height: 1, // 开挖的深度
-		clipOutSide: false,
-		edgeColor: Cesium.Color.GREY,
-		edgeWidth: 2.0
-	});
-	map.addThing(modelPlanClip);
-	// 限高分析
-	map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
-	// 限高分析类
-	limitHeight = new mars3d.thing.LimitHeight({
-		color: "rgba(255,0,0,0.5)",
-		height: 80, // 限高
-		bottomHeight: 32, // 模型地面的海拔高度（单位：米）
-		positions: [
-			[117.210446, 31.829032, 0],
-			[117.226334, 31.826662, 0],
-			[117.226694, 31.807882, 0],
-			[117.209776, 31.808359, 0],
-			[117.209778, 31.808341, 0]
-		]
-	});
-	map.addThing(limitHeight);
 });
 // 限定高度--绘制面
 const drawheightLimitPoly = () => {
@@ -668,7 +598,9 @@ const slopeAspectOperate = (e: any, label: any) => {
 };
 // 绘制多边形坡向坡度
 const btnSlopeAspectDraw = () => {
-	map.graphicLayer.startDraw({
+	slope.clear();
+	contourLine.clear();
+	graphicLayer.startDraw({
 		type: "polygon",
 		style: {
 			color: "#29cf34",
@@ -695,7 +627,9 @@ const btnSlopeAspectDraw = () => {
 };
 // 绘制矩形坡向坡度
 const btnSlopeAspectDrawExtent = () => {
-	map.graphicLayer.startDraw({
+	slope.clear();
+	contourLine.clear();
+	graphicLayer.startDraw({
 		type: "rectangle",
 		style: {
 			color: "#007be6",
@@ -723,18 +657,19 @@ const surfaceOpacityOperate = (e: any, label: any) => {
 };
 // 地形开挖---多边形
 const btnDraw = () => {
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "polygon",
 		style: {
 			color: "#007be6",
-			opacity: 0.8
+			opacity: 0.5,
+			outline: false
 		},
 		success: (graphic: any) => {
 			const positions = graphic.positionsShow;
 			map.graphicLayer.clear();
 
 			console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
-
+			console.log(positions);
 			// 挖地区域
 			const areaItem = terrainClip.addArea(positions);
 		}
@@ -746,12 +681,11 @@ const btnDrawExtent = () => {
 		type: "rectangle",
 		style: {
 			color: "#007be6",
-			opacity: 0.5,
+			opacity: 0.8
-			outline: false
 		},
 		success: (graphic: any) => {
 			const positions = graphic.getOutlinePositions(false);
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 
 			console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
 
@@ -833,17 +767,23 @@ const volumeOperate = (e: any, label: any) => {
 };
 // 清楚地图指定效果
 const clearShow = () => {
+	console.log(selectedName.value);
 	if (selectedName.value == "可视域") {
 		graphicLayer.clear();
 	} else if (selectedName.value == "方量分析") {
 		measure.clear();
 		measureVolume = null;
-	} else if (selectedName.value == "坡向坡度") {
+	} else if (selectedName.value == "地形开挖") {
+		terrainClip.clear();
+	} else if (selectedName.value == "坡度坡向") {
 		slope.clear();
 		contourLine.clear();
+	} else if (selectedName.value == "模型压平") {
+		console.log(tilesetLayer);
+		tilesetLayer && tilesetLayer.remove(true);
 	} else if (selectedName.value == "限高分析") {
 		limitHeight.clear();
-		map.graphicLayer.clear();
+		graphicLayer.clear();
 	}
 };
 // 添加可视域
@@ -871,6 +811,21 @@ const viewShedOperate = (e: any, label: any) => {
 };
 // 返回主菜单
 const backMainMenu = () => {
+	const name = selectedName.value;
+	console.log(name);
+	if (name == "日照分析") {
+		shadows.remove(true);
+	} else if (name == "可视域") {
+	} else if (name == "方量分析") {
+	} else if (name == "地形开挖") {
+		terrainClip.clear(); // 清除挖地区域
+	} else if (name == "地表透明") {
+	} else if (name == "坡度坡向") {
+	} else if (name == "模型剖切") {
+	} else if (name == "模型压平") {
+		tilesetLayer && tilesetLayer.remove(true);
+	} else if (name == "限高分析") {
+	}
 	mainMenuShow.value = true;
 	subMenuShow.value = false;
 };
@@ -902,15 +857,83 @@ const closeDiv = () => {
 const mapOperate = (name: any) => {
 	console.log(name);
 	selectedName.value = name;
-	if (name == "空间距离") {
+	if (name == "日照分析") {
-	} else if (name == "贴地距离") {
+		shadows = new mars3d.thing.Shadows({
-	} else if (name == "剖面") {
+			multiplier: 1600
-	} else if (name == "水平面积") {
+		});
-	} else if (name == "贴地面积") {
+		map.addThing(shadows);
-	} else if (name == "角度") {
+		shadows.on(mars3d.EventType.change, function (e: any) {
-	} else if (name == "三角测量") {
+			allProperty.value.timeVal = shadows.time.getHours() * 60 + shadows.time.getMinutes();
-	} else if (name == "坐标测量") {
+		});
-	} else if (name == "高度差") {
+	} else if (name == "可视域") {
+		map.addLayer(graphicLayer);
+	} else if (name == "方量分析") {
+	} else if (name == "地形开挖") {
+	} else if (name == "地表透明") {
+		// 地下透明
+		map.scene.contextOptions = { webgl: { alpha: true } };
+		underground = new mars3d.thing.Underground({
+			enabled: false
+		});
+		map.addThing(underground);
+	} else if (name == "坡度坡向") {
+		slope = new mars3d.thing.Slope({
+			arrow: {
+				scale: 0.3, // 箭头长度的比例（范围0.1-0.9）
+				color: Cesium.Color.YELLOW,
+				width: 15, // 箭头宽度
+				// materialType: mars3d.MaterialType.LineFlow,
+				// materialOptions: {
+				//   color: "#1a9850",
+				//   image: "img/textures/line-arrow-right.png",
+				//   speed: 10
+				// },
+				// clampToGround: true,
+				show: true
+			},
+			tooltip: function (event) {
+				const attr = event.graphic?.attr;
+				return `坡度: ${attr.slopeStr1}  (${attr.slopeStr2})<br />坡向: ${attr.direction}°`;
+			}
+		});
+		map.addThing(slope);
+	} else if (name == "模型剖切") {
+		map.scene.center = { lat: 31.841619, lng: 117.140395, alt: 1259, heading: 90, pitch: -51 };
+		// 加模型
+		const graphic = new mars3d.graphic.ModelPrimitive({
+			position: [117.150365, 31.841954, 50.26],
+			style: {
+				url: "//data.mars3d.cn/gltf/mars/dikuai/d1.gltf",
+				scale: 1
+			}
+		});
+		graphicLayer.addGraphic(graphic);
+		modelPlanClip = new mars3d.thing.ModelPlanClip({
+			graphic: graphic,
+			height: 1, // 开挖的深度
+			clipOutSide: false,
+			edgeColor: Cesium.Color.GREY,
+			edgeWidth: 2.0
+		});
+		map.addThing(modelPlanClip);
+	} else if (name == "模型压平") {
+	} else if (name == "限高分析") {
+		// 限高分析
+		map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
+		// 限高分析类
+		limitHeight = new mars3d.thing.LimitHeight({
+			color: "rgba(255,0,0,0.5)",
+			height: 80, // 限高
+			bottomHeight: 32, // 模型地面的海拔高度（单位：米）
+			positions: [
+				[117.210446, 31.829032, 0],
+				[117.226334, 31.826662, 0],
+				[117.226694, 31.807882, 0],
+				[117.209776, 31.808359, 0],
+				[117.209778, 31.808341, 0]
+			]
+		});
+		map.addThing(limitHeight);
 	}
 	mainMenuShow.value = false;
 	subMenuShow.value = true;
@@ -949,7 +972,7 @@ onUnmounted(() => {
 	border: 1px solid #008aff70;
 	border-radius: 2px !important;
 	background-color: rgba(23, 49, 71, 0.8);
-	width: 300px;
+	// min-width: 300px;
 	min-height: 370px;
 	box-shadow: 0 4px 15px 1px #02213bb3;
 	animation: fadeIn 1s;
@@ -971,9 +994,11 @@ onUnmounted(() => {
 		}
 	}
 	&-menu {
-		width: 90%;
+		width: 300px;
 		height: max-content;
-		margin: 0 auto;
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
 		overflow-y: scroll;
 		.menu-item {
 			display: inline-block;
@@ -996,6 +1021,7 @@ onUnmounted(() => {
 		width: 100%;
 		height: calc(100% - 40px);
 		> div {
+			width: 300px;
 			padding: 10px;
 			.title {
 				color: #fff;
@@ -1067,6 +1093,9 @@ onUnmounted(() => {
 				}
 			}
 		}
+		.volumeAnalysis {
+			width: 400px;
+		}
 	}
 }
 </style>

src/views/goverment/largeScreen/index.vue

@@ -17,25 +17,33 @@
 		<!-- 菜单操作 -->
 		<div class="menu-operate">
 			<div class="menu-operate-item" v-for="(item, i) in data" :key="i">
-				<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.name)">
+				<div class="toolbar-item" @click="showWidget(item.name)">
-					<el-icon size="18" color="#fff" v-if="i == 0"><PictureRounded /></el-icon>
+					<img :src="item.icon" alt="" srcset="" style="width: 16px; height: 16px" />
-					<el-icon size="18" color="#fff" v-else-if="i == 1"><DocumentCopy /></el-icon>
 					<span class="title">{{ item.name }}</span>
+					<el-icon size="14" v-if="item.children" color="#fff"><ArrowDown /></el-icon>
 				</div>
-				<el-dropdown v-if="item.children && !item.widget" trigger="click">
+				<!-- <el-dropdown v-if="item.children" trigger="click" popper-class="dropdown-style">
 					<div class="toolbar-item">
-						<el-icon size="18" color="#fff"><Operation /></el-icon>
+						<img :src="item.icon" alt="" srcset="" style="width: 16px; height: 16px" />
 						<span class="title">{{ item.name }}</span>
 						<el-icon size="14" color="#fff"><ArrowDown /></el-icon>
 					</div>
 					<template #dropdown>
 						<el-dropdown-menu class="dropdown">
-							<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)"
+							<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)">
-								><el-icon size="16"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
+								<img :src="child.icon" alt="" srcset="" style="width: 14px; height: 14px" />
+								<span>{{ child.name }}</span></el-dropdown-item
 							>
 						</el-dropdown-menu>
 					</template>
-				</el-dropdown>
+				</el-dropdown> -->
+			</div>
+		</div>
+		<!-- 工具菜单操作 -->
+		<div class="tool-menu-operate" v-if="toolListShow">
+			<div class="tool-item" v-for="(item, index) in data[2].children" :key="index" @click="clickMenu(item.name)">
+				<img :src="item.icon" alt="" srcset="" style="width: 14px; height: 14px" />
+				<span>{{ item.name }}</span>
 			</div>
 		</div>
 		<!-- 底图菜单操作页面 -->
@@ -253,6 +261,7 @@ import {
 	polylineCombineList,
 	gltfModelList
 } from "@/api/modules/mapCommon";
+const toolListShow = ref(false);
 const configJson = ref<any>({});
 const screenComparisonShow = ref(false); // 分屏对比弹框
 const leftRollerList = ref<any>([]);
@@ -456,25 +465,24 @@ const lantianSkybox = new mars3d.GroundSkyBox({
 	}
 });
 const data = [
-	{ name: "底图", icon: "PictureRounded", widget: "manage-basemap" },
+	{ name: "底图", icon: new URL("@/assets/images/Mars3DIcon/dt.png", import.meta.url).href },
-	{ name: "图层", icon: "PictureRounded", widget: "manage-layers" },
+	{ name: "图层", icon: new URL("@/assets/images/Mars3DIcon/tc.png", import.meta.url).href },
 	{
 		name: "工具",
-		icon: "tool",
+		icon: new URL("@/assets/images/Mars3DIcon/gj.png", import.meta.url).href,
 		children: [
-			{ name: "图上量算", icon: "ruler", widget: "measure" },
+			{ name: "图上量算", icon: new URL("@/assets/images/Mars3DIcon/tsls.png", import.meta.url).href },
-			{ name: "空间分析", icon: "analysis", widget: "analysis" },
+			{ name: "空间分析", icon: new URL("@/assets/images/Mars3DIcon/kjfx.png", import.meta.url).href },
-			{ name: "坐标定位", icon: "local", widget: "location-point" },
+			{ name: "坐标定位", icon: new URL("@/assets/images/Mars3DIcon/zbdw.png", import.meta.url).href },
-			{ name: "地区导航", icon: "navigation", widget: "location-region" },
+			{ name: "地区导航", icon: new URL("@/assets/images/Mars3DIcon/dqdh.png", import.meta.url).href },
-			{ name: "我的标记", icon: "mark", widget: "addmarker" },
+			{ name: "我的标记", icon: new URL("@/assets/images/Mars3DIcon/wdbj.png", import.meta.url).href },
-			{ name: "视角书签", icon: "bookmark", widget: "bookmark" },
+			{ name: "视角书签", icon: new URL("@/assets/images/Mars3DIcon/sjsq.png", import.meta.url).href },
-			{ name: "地图打印", icon: "printer", widget: "print" },
+			{ name: "地图打印", icon: new URL("@/assets/images/Mars3DIcon/dtdy.png", import.meta.url).href },
-			{ name: "飞行漫游", icon: "take-off", widget: "roamLine-list" },
+			{ name: "飞行漫游", icon: new URL("@/assets/images/Mars3DIcon/fxmy.png", import.meta.url).href },
-			{ name: "图上标绘", icon: "hand-painted-plate", widget: "plot" },
+			{ name: "图上标绘", icon: new URL("@/assets/images/Mars3DIcon/tsbh.png", import.meta.url).href },
-			{ name: "路线导航", icon: "connection", widget: "query-route" },
+			{ name: "路线导航", icon: new URL("@/assets/images/Mars3DIcon/lxdh.png", import.meta.url).href },
-			{ name: "卷帘对比", icon: "switch-contrast", widget: "map-split" },
+			{ name: "卷帘对比", icon: new URL("@/assets/images/Mars3DIcon/jldb.png", import.meta.url).href },
-			{ name: "分屏对比", icon: "full-screen-play", widget: "map-compare" }
+			{ name: "分屏对比", icon: new URL("@/assets/images/Mars3DIcon/fpdb.png", import.meta.url).href }
-			// { name: "百度街景", icon: h(City, { theme: "outline", size: "18" }), widget: "street-view" }
 		]
 	}
 ];
@@ -578,6 +586,8 @@ const showWidget = (name: string) => {
 	} else if (name == "图层") {
 		basicMapShow.value = false;
 		layersShow.value = true;
+	} else if (name == "工具") {
+		toolListShow.value = !toolListShow.value;
 	}
 	console.log(666);
 };
@@ -613,6 +623,7 @@ const clickMenu = (name: any) => {
 		// 分屏对比
 		screenComparison();
 	}
+	toolListShow.value = false;
 };
 // 获取Canvas对象
 const getCanvas = (text: any) => {
@@ -1283,9 +1294,9 @@ onUnmounted(() => {
 		background-image: none !important;
 		border: 1px solid #008aff70;
 		border-radius: 2px !important;
-		background-color: rgba(23, 49, 71, 0.8);
+		background: rgba(28, 44, 84, 0.6);
 		height: 40px;
-		box-shadow: 0 4px 15px 1px #02213bb3;
+		// box-shadow: 0 4px 15px 1px #02213bb3;
 		z-index: 10;
 		&-item {
 			.toolbar-item {
@@ -1299,7 +1310,7 @@ onUnmounted(() => {
 					margin-left: 5px;
 				}
 				&:hover {
-					background-color: rgba(0, 138, 255, 0.5);
+					background-color: rgba(51, 89, 181, 0.6);
 				}
 			}
 		}
@@ -1315,6 +1326,47 @@ onUnmounted(() => {
 			transform: none;
 		}
 	}
+	.tool-menu-operate {
+		@include flex;
+		position: absolute;
+		top: 56px;
+		right: 10px;
+		padding: 10px;
+		border: 1px solid #008aff70;
+		width: 110px;
+		background: rgba(11, 22, 51, 0.6);
+		border-radius: 0px;
+		opacity: 1;
+		border: 1px solid #3b60a7;
+		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		.tool-item:not(:last-child) {
+			margin-bottom: 12px;
+		}
+		.tool-item {
+			width: 90px;
+			height: 26px;
+			@include flex;
+			justify-content: center;
+			cursor: pointer;
+			img {
+				width: 14px;
+				width: 14px;
+				margin-right: 8px;
+			}
+			span {
+				font-size: 13px;
+				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+				font-weight: 400;
+				color: #ffffff;
+				margin-bottom: 2px;
+			}
+		}
+		.tool-item:hover {
+			background: rgba(51, 89, 181, 0.6);
+		}
+	}
 	.basic-map {
 		position: absolute;
 		top: 60px;
@@ -1522,18 +1574,6 @@ onUnmounted(() => {
 		}
 	}
 }
-// .dropdown {
-// 	background-color: rgba(23, 49, 71, 0.8) !important;
-// 	// border: 1px solid rgba(23, 49, 71, 0.8) !important;
-// 	:deep() {
-// 		.el-dropdown-menu__item {
-// 			color: white;
-// 		}
-// 		.el-dropdown-menu__item:not(.is-disabled):hover {
-// 			background-color: rgba(0, 138, 255, 0.5);
-// 		}
-// 	}
-// }
 .option-list {
 	width: 200px;
 	height: 350px;

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="login-container">
 		<img src="@/assets/images/login/login-bg-earth.png" alt="" srcset="" />
-		<div class="login-title">Mars3D综合态势展示系统</div>
+		<div class="login-title">佳信捷3D综合态势展示系统</div>
 		<div class="login-pannel">
 			<p class="login-pannel_text">欢迎登录！</p>
 			<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">