fix: 乳山BUG修改

2023-08-26 18:34:29 +08:00 · 2023-08-26 18:34:29 +08:00 · f195782e0a
commit f195782e0a
parent 23002473e7
5 changed files with 104 additions and 44 deletions
--- a/src/views/goverment/dustManagement/index.vue
+++ b/src/views/goverment/dustManagement/index.vue
@ -180,9 +180,14 @@ const onSearch = async (params: ResAiEngineerPage | ResAiProjectPage) => {
 		active.value === 0 ? item.projectSn === params.projectSn : item.engineeringSn === params.engineeringSn
 	);
 	monitorList.value = monitorList.value.map(item => (item === curr ? { ...curr, showGif: true } : { ...item, showGif: false }));
-	params.longitude !== "" && params.longitude !== null
-		? map.value?.setCenter([params.longitude, +params.latitude])
-		: map.value?.setCenter([116.481181, 39.90923]);
+	if (params.longitude && params.latitude) {
+		console.log(111);
+		map.value?.setCenter([+params.longitude, +params.latitude]);
+		showInfoPage(curr);
+	}
+	// params.longitude !== "" && params.longitude !== null
+	// 	? map.value?.setCenter([params.longitude, +params.latitude])
+	// 	: map.value?.setCenter([116.481181, 39.90923]);
 };

 // 页面的搜索按钮
@ -231,7 +236,62 @@ const onCurChange = async (params: number) => {

 	// pages.value.total = +res.result.total;
 };
+// 展示信息窗口
+const showInfoPage = async (obj: any) => {
+	const createMarkerImage = (state: string) => new URL(`../../../assets/images/AIwaring/${state}`, import.meta.url).href;

+	// 创建一个 选中的Icon
+	let selectIcon = getIcon(
+		"selected",
+		obj.environAlarmFlag === false ? createMarkerImage("clouding.gif") : createMarkerImage("warnclouding.gif")
+	);
+
+	// 将 icon 传入 marker
+	let startMarker = new AMapRef.value.Marker({
+		position: new AMapRef.value.LngLat(Number(obj.longitude) || 113, Number(obj.latitude) || 21),
+		icon: selectIcon,
+		offset: new AMapRef.value.Pixel(-13, -30)
+	});
+	map.value?.add([startMarker]);
+	monitorList.value = monitorList.value.map(val =>
+		val.latitude == obj.latitude && val.longitude == obj.longitude
+			? { ...obj, showGif: true }
+			: { ...val, showGif: false, showInfo: false }
+	);
+	const curr = monitorList.value.find(item => item.showGif);
+	curr.showInfo = !curr.showInfo;
+	// addMarker();
+
+	environAlarmFlag.value = obj.environAlarmFlag;
+
+	// e.target.setIcon(selectIcon);
+
+	if (active.value === 0) {
+		infoName.value = obj.projectName;
+		const res = await getproDetail({ projectId: obj.projectId });
+		// @ts-expect-error
+		infoWindowData.value = res.result;
+	} else {
+		infoName.value = obj.engineeringName;
+		const res = await getengDetail({ id: obj.id });
+		// @ts-expect-error
+		infoWindowData.value = res.result;
+	}
+
+	if (curr.showInfo) {
+		infoShow.value = true;
+		const infowindow = new AMapRef.value.InfoWindow({
+			isCustom: true, //使用自定义窗体
+			content: infoWindowPage.value,
+			offset: new AMap.Pixel(16, -45)
+		});
+
+		infowindow.open(map.value, startMarker.getPosition());
+	} else {
+		infoShow.value = false;
+		onClose();
+	}
+};
 // 地图增加坐标点
 const addMarker = () => {
 	const createMarkerImage = (state: string) => new URL(`../../../assets/images/AIwaring/${state}`, import.meta.url).href;
@ -302,7 +362,7 @@ const addMarker = () => {
 const mapData = async () => {
 	const AMap = await initAMap();
 	AMapRef.value = AMap;
-	map.value = new AMap.Map("map-container", { zoom: 10, center: [116.481181, 39.90923], viewMode: "2D", resizeEnable: true });
+	map.value = new AMap.Map("map-container", { zoom: 7, center: [116.481181, 39.90923], viewMode: "2D", resizeEnable: true });
 	// map.value?.on("click", function (e) {
 	// 	map.value?.clearInfoWindow();
 	// });
--- a/src/views/login/index-hc.scss
+++ b/src/views/login/index-hc.scss
@ -1,29 +1,19 @@
-.flx-center {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-}
 .login-container {
 	height: 100%;
 	min-height: 550px;
-	background: url("@/assets/images/login/bglogin_rushan.png") center center no-repeat;
-	background-size: 100% 65%;
-	.login-title {
-		color: #2a314b;
-		font-weight: 600;
-		font-size: 22px;
-		> span {
-			margin-left: 30px;
-		}
-	}
+	background: url("@/assets/images/login/loginBackground.jpg") center center no-repeat;
+	background-color: #eeeeee;
+	background-size: 100% 100%;
+	background-size: cover;
 	.login-box {
 		position: relative;
 		box-sizing: border-box;
 		display: flex;
 		align-items: center;
-		justify-content: flex-end;
+		justify-content: center;
 		width: 96%;
-		height: 75%;
+		height: 94%;
+		padding: 0 50px;

 		// background-color: hsl(0deg 0% 100% / 80%);
 		border-radius: 10px;
@ -56,7 +46,7 @@
 			height: 377px;
 			padding: 50px 40px 45px;
 			background-color: #ffffff;
-			margin-right: 120px;
+
 			// border-radius: 10px;
 			box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
 			.login-logo {
--- a/src/views/login/index-hc.vue
+++ b/src/views/login/index-hc.vue
@ -1,15 +1,12 @@
 <template>
 	<div class="login-container flx-center">
-		<div class="login-title">
-			<span>{{ globalStore.systemNameConfig }}</span>
-		</div>
 		<div class="login-box">
-			<!-- <SwitchDark class="dark" /> -->
-			<!-- <div class="login-left">
-				<img src="@/assets/images/login_left.png" alt="login" />
+			<div class="login-left">
+				<!-- <img src="@/assets/images/login_left.png" alt="login" /> -->
 				<img src="@/assets/images/login/computerIcon.png" alt="" /><br />
-				<span>数字化政务监管平台</span>
-			</div> -->
+				<!-- 数字化政务监管平台 -->
+				<span>{{ globalStore.systemNameConfig }}</span>
+			</div>
 			<div class="login-form">
 				<div class="login-logo">
 					<!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
@ -22,7 +19,6 @@
 </template>

 <script setup lang="ts" name="login">
-import SwitchDark from "@/components/SwitchDark/index.vue";
 import LoginForm from "./components/LoginForm.vue";
 import { GlobalStore } from "@/stores";
 const globalStore = GlobalStore();
--- a/src/views/login/index.scss
+++ b/src/views/login/index.scss
@ -1,19 +1,29 @@
+.flx-center {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
 .login-container {
 	height: 100%;
 	min-height: 550px;
-	background: url("@/assets/images/login/loginBackground.jpg") center center no-repeat;
-	background-color: #eeeeee;
-	background-size: 100% 100%;
-	background-size: cover;
+	background: url("@/assets/images/login/bglogin_rushan.png") center center no-repeat;
+	background-size: 100% 65%;
+	.login-title {
+		color: #2a314b;
+		font-weight: 600;
+		font-size: 22px;
+		> span {
+			margin-left: 30px;
+		}
+	}
 	.login-box {
 		position: relative;
 		box-sizing: border-box;
 		display: flex;
 		align-items: center;
-		justify-content: center;
+		justify-content: flex-end;
 		width: 96%;
-		height: 94%;
-		padding: 0 50px;
+		height: 75%;

 		// background-color: hsl(0deg 0% 100% / 80%);
 		border-radius: 10px;
@ -46,7 +56,7 @@
 			height: 377px;
 			padding: 50px 40px 45px;
 			background-color: #ffffff;
-
+			margin-right: 120px;
 			// border-radius: 10px;
 			box-shadow: 2px 3px 7px rgb(0 0 0 / 20%);
 			.login-logo {
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -1,12 +1,15 @@
 <template>
 	<div class="login-container flx-center">
+		<div class="login-title">
+			<span>{{ globalStore.systemNameConfig }}</span>
+		</div>
 		<div class="login-box">
-			<div class="login-left">
-				<!-- <img src="@/assets/images/login_left.png" alt="login" /> -->
+			<!-- <SwitchDark class="dark" /> -->
+			<!-- <div class="login-left">
+				<img src="@/assets/images/login_left.png" alt="login" />
 				<img src="@/assets/images/login/computerIcon.png" alt="" /><br />
-				<!-- 数字化政务监管平台 -->
-				<span>{{ globalStore.systemNameConfig }}</span>
-			</div>
+				<span>数字化政务监管平台</span>
+			</div> -->
 			<div class="login-form">
 				<div class="login-logo">
 					<!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
@ -19,6 +22,7 @@
 </template>

 <script setup lang="ts" name="login">
+import SwitchDark from "@/components/SwitchDark/index.vue";
 import LoginForm from "./components/LoginForm.vue";
 import { GlobalStore } from "@/stores";
 const globalStore = GlobalStore();