feat: 修改地图弹窗样式

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

@@ -28,6 +28,45 @@ const projectStatusEnum = ref({
 	6: "已验收未备案",
 	7: "已竣工验收备案"
 });
+const projectStatusImg = ref({
+	1: {
+		icon: getImageUrl("notStartedIcon"),
+		bg: "notStartedBorder"
+	},
+	2: {
+		icon: getImageUrl("constructionningIcon"),
+		bg: "constructionningBorder"
+	},
+	3: {
+		icon: getImageUrl("ordinaryIcon"),
+		bg: "ordinaryBorder"
+	},
+	4: {
+		icon: getImageUrl("punishIcon"),
+		bg: "punishBorder"
+	},
+	5: {
+		icon: getImageUrl("finishedIcon"),
+		bg: "finishedBorder"
+	},
+	6: {
+		icon: getImageUrl("completeeingIcon"),
+		bg: "completeeingBorder"
+	},
+	7: {
+		icon: getImageUrl("completedIcon"),
+		bg: "completedBorder"
+	}
+});
+const projectStatus = ref({
+	1: "末开工",
+	2: "在建",
+	3: "普通停工",
+	4: "处罚停工",
+	5: "完工",
+	6: "待竣工",
+	7: "竣工"
+});
 const mapProjectList = ref([]);
 const getProjectList = async () => {
 	const { result } = await getMapProject();
@@ -97,7 +136,7 @@ const initMap = () => {
 			// 第二种 直接写死 position 的经纬度值
 			mapProjectList.value.forEach((item, index, array) => {
 				const marker = new AMap.Marker({
-					icon: getImageUrl("dian"),
+					icon: `${projectStatusImg.value[item.state].icon}`,
 					position: [`${item.longitude}`, `${item.latitude}`],
 					// 通过设置 offset 来添加偏移量
 					offset: new AMap.Pixel(-26, -24)
@@ -106,66 +145,39 @@ const initMap = () => {
 				const infoWindow = new window.AMap.InfoWindow({
 					offset: new window.AMap.Pixel(0, -31)
 				});
-
-				// // 图标-项目延期
-				// const postponeImage = require("@/assets/images/screenImg/mapImg/iconPostpone.png");
-				// // 图标-停工整改
-				// const shutdownRectificationImage = require("@/assets/images/screenImg/mapImg/iconShutdownRectification.png");
-				// // 图标-项目停滞
-				// const stagnateImage = require("@/assets/images/screenImg/mapImg/iconStagnate.png");
-				// // 图标-竣工验收
-				// const completedImage = require("@/assets/images/screenImg/mapImg/iconCompleted.png");
-				// // 图标-正常施工
-				// const normalConstruction = require("@/assets/images/screenImg/mapImg/iconNormalConstruction.png");
-
-				// const statusIcons = {
-				// 	projectDelay: createIcon(postponeImage), // 项目延期
-				// 	suspensionandrectification: createIcon(shutdownRectificationImage), // 停工整改
-				// 	projectStagnation: createIcon(stagnateImage), // 项目停滞
-				// 	completionAcceptance: createIcon(completedImage), // 竣工验收
-				// 	normalConstruction: createIcon(normalConstruction) // 竣工验收
-				// };
-				// /**
-				//  * 创建地图图标
-				//  * @param {string} image icon图片
-				//  */
-				// function createIcon(image) {
-				// 	return new window.AMap.Icon({
-				// 		size: new window.AMap.Size(28, 40), // 图标尺寸
-				// 		image, // 图标的取图地址
-				// 		imageSize: new window.AMap.Size(28, 40), // 图标所用图片大小
-				// 		imageOffset: new window.AMap.Pixel(0, 0) // 图标取图偏移量
-				// 	});
-				// }
-				marker.content = `<div class="info-window" style="font-size: 14px">
+				marker.content = `<div class="info-window">
+					<div class="${projectStatusImg.value[item.state].bg}">
+						<div class="leftSan"></div>
+			      <div>${projectStatus.value[item.state]}</div>
+			    </div>
 			    <div class="info">
-			      <span class="label" style="font-weight: 600">项目名称：</span>
+			      <span class="label">项目名称：</span>
 			      <span class="value">${item.engineering_name}</span>
 			    </div>
 			    <div class="info">
-			      <span class="label" style="font-weight: 600">项目状态：</span>
+			      <span class="label">项目状态：</span>
 			      <span class="value">${projectStatusEnum.value[item.state] ? projectStatusEnum.value[item.state] : "暂无"}</span>
 			    </div>
 			    <div class="info">
-			      <span class="label" style="font-weight: 600">项目造价：</span>
+			      <span class="label">项目造价：</span>
 			      <span class="value">${item.engineering_cost || 0}万元</span>
 			    </div>
 			    <div class="info">
-			      <span class="label" style="font-weight: 600">工程面积：</span>
+			      <span class="label">工程面积：</span>
 			      <span class="value">${item.engineering_area || 0}m²</span>
 			    </div>
 			    <div class="info">
-			      <span class="label" style="font-weight: 600">建设单位：</span>
+			      <span class="label">建设单位：</span>
 			      <span class="value">${item.enterprise_name || "暂无"}</span>
 			    </div>
-			    <span class="info">
-			      <span class="label" style="font-weight: 600">项目地址：</span>
+			    <div class="info">
+			      <span class="label">项目地址：</span>
 			      <span class="value">${item.province + item.city + item.district + item.address || "暂无"}</span>
 			    </div>
 			  </div>`;
 				marker.on("mousemove", markerMousemove);
 				// 鼠标移出事件
-				marker.on("mouseout", markerMouseout);
+				// marker.on("mouseout", markerMouseout);
 				// 鼠标移入事件df
 				function markerMousemove(e) {
 					infoWindow.setContent(e.target.content);
@@ -173,10 +185,10 @@ const initMap = () => {
 				}
 
 				// 鼠标移出事件
-				function markerMouseout(e) {
-					infoWindow.setContent(e.target.content);
-					infoWindow.close(map, e.target.getPosition());
-				}
+				// function markerMouseout(e) {
+				// 	infoWindow.setContent(e.target.content);
+				// 	infoWindow.close(map, e.target.getPosition());
+				// }
 				marker.setMap(map);
 			});
 			// 鼠标移入事件
@@ -208,7 +220,7 @@ const initMap = () => {
 };
 </script>
 
-<style>
+<style lang="scss">
 .app-container {
 	width: 100%;
 	height: 100%;
@@ -217,4 +229,140 @@ const initMap = () => {
 	width: 100%;
 	height: 100%;
 }
+.info-window {
+	width: 300px;
+	// height: 189px;
+	/* background: url("@/assets/images/screenImg/mapImg/completeeingBorder.png") no-repeat center center;
+	background-size: 100% 100%; */
+	background-color: rgba(36, 46, 62, 0.9);
+	color: white;
+	font-family: SourceHanSansCNR;
+}
+.amap-info-content {
+	padding: 0;
+	background: transparent;
+}
+.info {
+	font-size: 13px;
+	padding: 8px 0 5px 10px;
+	border-bottom: 3px solid rgb(40, 53, 88);
+}
+.bottom-center .amap-info-sharp {
+	border-top: 8px solid rgba(36, 46, 62, 0.9);
+}
+.amap-info-close {
+	width: 0;
+}
+.constructionningBorder {
+	display: flex;
+	border-top: 3px solid rgb(133, 181, 252);
+	// font-size: 17px;
+	padding: 6px 0 0 10px;
+	.leftSan {
+		padding: 0;
+		margin: 2px 5px 0 0;
+		width: 0;
+		height: 0.1px;
+		border-left: 9px solid rgb(133, 181, 252);
+		// border-right: 8px solid red;
+		border-top: 9px solid transparent;
+		border-bottom: 9px solid transparent;
+	}
+}
+.notStartedBorder {
+	display: flex;
+	border-top: 3px solid rgb(223, 189, 83);
+	// font-size: 17px;
+	padding: 6px 0 0 10px;
+	.leftSan {
+		padding: 0;
+		margin: 2px 5px 0 0;
+		width: 0;
+		height: 0.1px;
+		border-left: 9px solid rgb(223, 189, 83);
+		// border-right: 8px solid red;
+		border-top: 9px solid transparent;
+		border-bottom: 9px solid transparent;
+	}
+}
+.finishedBorder {
+	display: flex;
+	border-top: 3px solid rgb(241, 241, 241);
+	// font-size: 17px;
+	padding: 6px 0 0 10px;
+	.leftSan {
+		padding: 0;
+		margin: 2px 5px 0 0;
+		width: 0;
+		height: 0.1px;
+		border-left: 9px solid rgb(241, 241, 241);
+		// border-right: 8px solid red;
+		border-top: 9px solid transparent;
+		border-bottom: 9px solid transparent;
+	}
+}
+.ordinaryBorder {
+	display: flex;
+	border-top: 3px solid rgb(252, 165, 59);
+	// font-size: 17px;
+	padding: 6px 0 0 10px;
+	.leftSan {
+		padding: 0;
+		margin: 2px 5px 0 0;
+		width: 0;
+		height: 0.1px;
+		border-left: 9px solid rgb(252, 165, 59);
+		// border-right: 8px solid red;
+		border-top: 9px solid transparent;
+		border-bottom: 9px solid transparent;
+	}
+}
+.completedBorder {
+	display: flex;
+	border-top: 3px solid rgb(84, 222, 169);
+	// font-size: 17px;
+	padding: 6px 0 0 10px;
+	.leftSan {
+		padding: 0;
+		margin: 2px 5px 0 0;
+		width: 0;
+		height: 0.1px;
+		border-left: 9px solid rgb(84, 222, 169);
+		// border-right: 8px solid red;
+		border-top: 9px solid transparent;
+		border-bottom: 9px solid transparent;
+	}
+}
+.completeeingBorder {
+	display: flex;
+	border-top: 3px solid rgb(171, 254, 222);
+	// font-size: 17px;
+	padding: 6px 0 0 10px;
+	.leftSan {
+		padding: 0;
+		margin: 2px 5px 0 0;
+		width: 0;
+		height: 0.1px;
+		border-left: 9px solid rgb(171, 254, 222);
+		// border-right: 8px solid red;
+		border-top: 9px solid transparent;
+		border-bottom: 9px solid transparent;
+	}
+}
+.punishBorder {
+	display: flex;
+	border-top: 3px solid rgb(214, 75, 31);
+	// font-size: 17px;
+	padding: 6px 0 0 10px;
+	.leftSan {
+		padding: 0;
+		margin: 2px 5px 0 0;
+		width: 0;
+		height: 0.1px;
+		border-left: 9px solid rgb(214, 75, 31);
+		// border-right: 8px solid red;
+		border-top: 9px solid transparent;
+		border-bottom: 9px solid transparent;
+	}
+}
 </style>

src/views/goverment/naturalResources/index.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="outside">
+		<layoutTop></layoutTop>
+		<iframe
+			:src="`http://192.168.34.121:8081?token=${token}`"
+			style="width: 100%; height: 100%; border: medium none"
+			frameborder="1"
+		></iframe>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onBeforeMount } from "vue";
+import layoutTop from "@/components/layoutTop/index.vue";
+import { GlobalStore } from "@/stores";
+onBeforeMount(() => {
+	getToken();
+});
+const token = ref("");
+const getToken = () => {
+	const globalstore = GlobalStore();
+	token.value = globalstore.token;
+};
+</script>
+
+<style>
+.outside {
+	margin: 0;
+	padding: 0;
+	height: 90vh;
+	width: 100vw;
+	box-sizing: border-box;
+}
+</style>