fix: 地图key更改

src/components/AMap/AMap.ts

@@ -1,14 +1,14 @@
 import AMapLoader from "@amap/amap-jsapi-loader";
 import "@amap/amap-jsapi-types";
 import { ElMessage } from "element-plus";
-import { AMAP_MAP_KEY } from "@/config/config";
+import { AMAP_MAP_KEY, AMAP_MAP_KEY_SECURITY } from "@/config/config";
 
 // FIXME: 插件需要配合密钥使用，官方推荐 key 搭配代理服务器并携带安全密钥转发使用
 // see: https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare
 window._AMapSecurityConfig = {
 	// securityJsCode: "df19aa4c9f83a52f7ef66843449f438e" // 密钥
 	// securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b" // 密钥
-	securityJsCode: "1ed9eb78a441d1c9f2534fe4530980fb"
+	securityJsCode: AMAP_MAP_KEY_SECURITY
 };
 
 const amap = (async function (Loader, AMAP_MAP_KEY) {

src/config/config.ts

@@ -16,7 +16,9 @@ export const ROUTER_WHITE_LIST: string[] = ["/500", "/projectlogon", "/compLogon
 
 // * 高德地图 key
 // export const AMAP_MAP_KEY: string = "142e51d55274a0140e838245345cf9ad";
-export const AMAP_MAP_KEY: string = "021caa57125045d16a41f131ba0e7973	";
+export const AMAP_MAP_KEY: string = "021caa57125045d16a41f131ba0e7973";
+
+export const AMAP_MAP_KEY_SECURITY: string = "1ed9eb78a441d1c9f2534fe4530980fb";
 
 // * 百度地图 key
 export const BAIDU_MAP_KEY: string = "";

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

@@ -35,7 +35,7 @@ const getWeather = () => {
 	let url = "https://restapi.amap.com/v3/weather/weatherInfo?city=440000&key=ad31e514e7e740179d6d8f182720bcf5";
 	axios({ method: "get", url }).then(({ data: res }) => {
 		console.log(res);
-		weatherInfo.value = res.lives[0];
+		weatherInfo.value = res.lives?.[0] || {};
 	});
 };
 const router = useRouter();
@@ -51,19 +51,21 @@ const goBack = () => {
 	position: absolute;
 	top: 0%;
 	left: 0;
+	z-index: 100;
 	width: 100%;
 	height: 100%;
 	background: url("@/assets/images/screenImg/topBorder.png") no-repeat;
 	background-size: 100%;
-	z-index: 100;
 	.bigTitle {
 		position: absolute;
 		top: 36px;
 		left: 42.2%;
 		font-family: title;
 		font-size: 35px;
+
 		// font-family: PangMenZhengDao-Regular, PangMenZhengDao;
 		color: white;
+
 		// text-shadow: 4px 4px 4px rgba($color: white, $alpha: 40%);
 		letter-spacing: 1px;
 	}
@@ -73,8 +75,9 @@ const goBack = () => {
 		padding: 10px 10px 0;
 		font-family: SourceHanSansCNR;
 		font-size: 12px;
-		background-image: -webkit-linear-gradient(bottom, #4b5e84, #ffffff);
 		color: #d5d8df;
+		background-image: -webkit-linear-gradient(bottom, #4b5e84, #ffffff);
+
 		// background-clip: text;
 		// -webkit-text-fill-color: transparent;
 	}

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

@@ -13,6 +13,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 import { ref, onMounted } from "vue";
 import { getMapProject } from "@/api/modules/largeSreen";
 
+import { AMAP_MAP_KEY, AMAP_MAP_KEY_SECURITY } from "@/config/config";
+
 onMounted(() => {
 	getProjectList();
 });
@@ -79,10 +81,11 @@ function getImageUrl(name: string) {
 }
 const initMap = () => {
 	window._AMapSecurityConfig = {
-		securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b"
+		// securityJsCode: "6caf6429e4b98cf7f39db9bf7014a78b"
+		securityJsCode: AMAP_MAP_KEY_SECURITY
 	};
 	AMapLoader.load({
-		key: "ee87cfd8354d3ff2a898036bacc4b8a2", // 申请好的Web端开发者Key，首次调用 load 时必填
+		key: AMAP_MAP_KEY, // "ee87cfd8354d3ff2a898036bacc4b8a2", // 申请好的Web端开发者Key，首次调用 load 时必填
 		version: "1.4.15" // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 		// plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
 	})
@@ -232,138 +235,154 @@ const initMap = () => {
 }
 .info-window {
 	width: 300px;
+	font-family: SourceHanSansCNR;
+	color: white;
+
 	// 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);
+	background-color: rgb(36 46 62 / 90%);
-	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);
+	font-size: 13px;
+	border-bottom: 3px solid rgb(40 53 88);
 }
 .bottom-center .amap-info-sharp {
-	border-top: 8px solid rgba(36, 46, 62, 0.9);
+	border-top: 8px solid rgb(36 46 62 / 90%);
 }
 .amap-info-close {
 	width: 0;
 }
 .constructionningBorder {
 	display: flex;
-	border-top: 3px solid rgb(133, 181, 252);
+
 	// font-size: 17px;
 	padding: 6px 0 0 10px;
+	border-top: 3px solid rgb(133 181 252);
 	.leftSan {
-		padding: 0;
-		margin: 2px 5px 0 0;
 		width: 0;
 		height: 0.1px;
-		border-left: 9px solid rgb(133, 181, 252);
+		padding: 0;
+		margin: 2px 5px 0 0;
+
 		// border-right: 8px solid red;
 		border-top: 9px solid transparent;
 		border-bottom: 9px solid transparent;
+		border-left: 9px solid rgb(133 181 252);
 	}
 }
 .notStartedBorder {
 	display: flex;
-	border-top: 3px solid rgb(223, 189, 83);
+
 	// font-size: 17px;
 	padding: 6px 0 0 10px;
+	border-top: 3px solid rgb(223 189 83);
 	.leftSan {
-		padding: 0;
-		margin: 2px 5px 0 0;
 		width: 0;
 		height: 0.1px;
-		border-left: 9px solid rgb(223, 189, 83);
+		padding: 0;
+		margin: 2px 5px 0 0;
+
 		// border-right: 8px solid red;
 		border-top: 9px solid transparent;
 		border-bottom: 9px solid transparent;
+		border-left: 9px solid rgb(223 189 83);
 	}
 }
 .finishedBorder {
 	display: flex;
-	border-top: 3px solid rgb(241, 241, 241);
+
 	// font-size: 17px;
 	padding: 6px 0 0 10px;
+	border-top: 3px solid rgb(241 241 241);
 	.leftSan {
-		padding: 0;
-		margin: 2px 5px 0 0;
 		width: 0;
 		height: 0.1px;
-		border-left: 9px solid rgb(241, 241, 241);
+		padding: 0;
+		margin: 2px 5px 0 0;
+
 		// border-right: 8px solid red;
 		border-top: 9px solid transparent;
 		border-bottom: 9px solid transparent;
+		border-left: 9px solid rgb(241 241 241);
 	}
 }
 .ordinaryBorder {
 	display: flex;
-	border-top: 3px solid rgb(252, 165, 59);
+
 	// font-size: 17px;
 	padding: 6px 0 0 10px;
+	border-top: 3px solid rgb(252 165 59);
 	.leftSan {
-		padding: 0;
-		margin: 2px 5px 0 0;
 		width: 0;
 		height: 0.1px;
-		border-left: 9px solid rgb(252, 165, 59);
+		padding: 0;
+		margin: 2px 5px 0 0;
+
 		// border-right: 8px solid red;
 		border-top: 9px solid transparent;
 		border-bottom: 9px solid transparent;
+		border-left: 9px solid rgb(252 165 59);
 	}
 }
 .completedBorder {
 	display: flex;
-	border-top: 3px solid rgb(84, 222, 169);
+
 	// font-size: 17px;
 	padding: 6px 0 0 10px;
+	border-top: 3px solid rgb(84 222 169);
 	.leftSan {
-		padding: 0;
-		margin: 2px 5px 0 0;
 		width: 0;
 		height: 0.1px;
-		border-left: 9px solid rgb(84, 222, 169);
+		padding: 0;
+		margin: 2px 5px 0 0;
+
 		// border-right: 8px solid red;
 		border-top: 9px solid transparent;
 		border-bottom: 9px solid transparent;
+		border-left: 9px solid rgb(84 222 169);
 	}
 }
 .completeeingBorder {
 	display: flex;
-	border-top: 3px solid rgb(171, 254, 222);
+
 	// font-size: 17px;
 	padding: 6px 0 0 10px;
+	border-top: 3px solid rgb(171 254 222);
 	.leftSan {
-		padding: 0;
-		margin: 2px 5px 0 0;
 		width: 0;
 		height: 0.1px;
-		border-left: 9px solid rgb(171, 254, 222);
+		padding: 0;
+		margin: 2px 5px 0 0;
+
 		// border-right: 8px solid red;
 		border-top: 9px solid transparent;
 		border-bottom: 9px solid transparent;
+		border-left: 9px solid rgb(171 254 222);
 	}
 }
 .punishBorder {
 	display: flex;
-	border-top: 3px solid rgb(214, 75, 31);
+
 	// font-size: 17px;
 	padding: 6px 0 0 10px;
+	border-top: 3px solid rgb(214 75 31);
 	.leftSan {
-		padding: 0;
-		margin: 2px 5px 0 0;
 		width: 0;
 		height: 0.1px;
-		border-left: 9px solid rgb(214, 75, 31);
+		padding: 0;
+		margin: 2px 5px 0 0;
+
 		// border-right: 8px solid red;
 		border-top: 9px solid transparent;
 		border-bottom: 9px solid transparent;
+		border-left: 9px solid rgb(214 75 31);
 	}
 }
 </style>