From 910b287cedeee75527d80971ac74eee3c08ad57d Mon Sep 17 00:00:00 2001
From: Vce <daisy_vce@yeah.net>
Date: Sat, 30 Mar 2024 11:18:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=89=E5=85=A8=E5=B8=BD?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../smartSafeHat/index.vue                    | 312 +++++++++++++++---
 1 file changed, 265 insertions(+), 47 deletions(-)

diff --git a/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue b/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
index 7f0723a..dda6cf8 100644
--- a/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
+++ b/src/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue
@@ -113,9 +113,11 @@
 						</div>
 						<el-scrollbar class="list-box">
 							<div v-for="(item, index) in fenceList" class="list-style" :key="item.id">
-								<div style="width: 50%">{{ item.fenceName }}</div>
-								<div style="width: 50%">{{ item.workerNum }}</div>
-							</div>
+                <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;" @click="openDetail(item)">
+                  <div style="width: 50%">{{ item.fenceName }}</div>
+                  <div style="width: 50%">{{ item.workerNum }}</div>
+                </div>
+              </div>
 							<div class="not-data" style="top: 20%" v-if="fenceList.length == 0">
 								<img src="@/assets/images/noData.png" alt="" />
 								<p>暂无数据</p>
@@ -126,6 +128,42 @@
 			</div>
 		</div>
 
+		<!-- 围栏信息详情 -->
+    <div id="welanMaskContainer" class="welanMask" v-show="isOpenDetail">
+      <div class="weilanDetail">
+        <div class="detailTitle">
+          <div class="leftTitle">
+            <img src="@/assets/images/titleIcon.png" />围栏中的人员
+          </div>
+          <div class="rightTitle">
+            <div class="closeDetail" @click="closeDetail">
+              <el-icon :size="25" :color="'#657280'">
+                <Close />
+              </el-icon>
+            </div>
+          </div>
+        </div>
+        <div class="detailContent">
+          <div class="tab-list">
+            <div style="width: 33%">序号</div>
+            <div style="width: 33%">人员名称</div>
+            <div style="width: 33%">身份证号</div>
+          </div>
+          <el-scrollbar class="list-box">
+            <div v-for="(item, index) in workerListInFence" class="list-style" :key="item.id">
+              <div style="width: 33%">{{ index + 1 }}</div>
+              <div style="width: 33%">{{ item.workerName }}</div>
+              <div style="width: 33%">{{ item.idCard }}</div>
+            </div>
+            <div class="not-data" v-if="workerListInFence.length == 0">
+              <img src="@/assets/images/noData.png" alt="" />
+              <p>暂无数据</p>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </div>
+
 		<div class="right-data">
 			<div class="map-top">
 				<Card title="定位地图" style="width: 100%">
@@ -279,7 +317,7 @@
 			</div>
 			<!-- **********报警数据*********** -->
 			<div class="right-bottom">
-				<div class="hat-bottom">
+				<!-- <div class="hat-bottom">
 					<Card title="帽子总数">
 						<div class="hat-container">
 							<div class="hat-image">
@@ -290,7 +328,7 @@
 							</div>
 						</div>
 					</Card>
-				</div>
+				</div> -->
 				<div class="week-bottom">
 					<Card title="近七天报警数据">
 						<div id="weekAlarmLine" ref="weekAlarmLine" style="width: 100%; height: 100%"></div>
@@ -502,6 +540,23 @@ onMounted(async () => {
 	getWeekAlarmData();
 
 	// clearFn();
+	resetMapSize();
+	window.addEventListener("resize", e => {
+		resetMapSize();
+	});
+});
+const resetMapSize = () => {
+	console.log(666);
+	setTimeout(() => {
+		let mapContent: any = document.getElementById("mapContainer");
+		console.log(mapContent);
+		mapContent.style.transform = `scale(${1 / store.globalScale})`;
+	}, 200);
+};
+onBeforeMount(() => {
+	window.removeEventListener("resize", e => {
+		resetMapSize();
+	});
 });
 
 watch(dayValue, newVal => {
@@ -521,6 +576,33 @@ watch(choiceMonth, newVal => {
 	}
 });
 
+let isOpenDetail = ref(false);
+let workerListInFence = ref([]);
+function openDetail(item) {
+	// let data = {
+	// 	id: fenceId,
+	// 	projectSn: store.sn
+	// };
+	// getFencePersonApi(data).then(res => {
+	// 	if (res.success) {
+	// 		workerListInFence.value = res.result.workerListInFence
+	// 	}
+	// });
+	let welanBox = document.getElementById('welanMaskContainer')
+	if(welanBox){
+		welanBox.style.zIndex= '999'
+	}
+	workerListInFence.value = item.workerListInFence;
+	isOpenDetail.value = true;
+}
+function closeDetail() {
+	let welanBox = document.getElementById('welanMaskContainer')
+	if(welanBox){
+		welanBox.style.zIndex= '-1'
+	}
+	isOpenDetail.value = false;
+}
+
 function handleCancel() {
 	fenceCreateShow.value = false;
 	clearFn();
@@ -604,7 +686,8 @@ function deleteFence() {
 function deleteFenceInfo(idGroups) {
 	console.log("删除id", idGroups);
 	let data = {
-		ids: idGroups
+		ids: idGroups,
+		projectSn: store.sn
 	};
 	deleteSafehatFence(data).then(res => {
 		if (res.success) {
@@ -863,7 +946,8 @@ function getTodayTrack(day) {
 	let data = {
 		devSn: queryInfo.value.devSn,
 		createTime_begin: day,
-		createTime_end: day
+		createTime_end: day,
+		projectSn: store.sn
 	};
 
 	getRealtimeDataApi(data).then((res: any) => {
@@ -1057,8 +1141,8 @@ function getCrewListData() {
 		onlineType = laborType.value;
 	}
 	let data = {
-		online: onlineType
-		// projectSn: store.sn
+		online: onlineType,
+		projectSn: store.sn
 	};
 	console.log("👇智能安全帽--分类查询设备列表--查询参数");
 	console.log(data);
@@ -1340,22 +1424,25 @@ function trackMapInit(path: any, item: any) {
 	});
 
 	function createMarkerAndInfoWindow() {
-		marker = new AMap.Marker({
-			map: map,
-			position: path[0],
-			// icon: "https://webapi.amap.com/images/car.png",
-			// icon: "src/assets/images/smartSafeHat.png", // 自定义图标
-			icon: smartSafeHat, // 自定义图标
-			// icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标
-			// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
-			offset: new AMap.Pixel(-26, -13),
-			autoRotation: true,
-			angle: -90
-		});
-		marker.on("click", markerClick);
-		marker.emit("click", { target: marker });
-		marker.on("moving", function (e) {
-			passedPolyline.setPath(e.passedPath);
+		AMap.plugin("AMap.MoveAnimation", function () {
+
+			marker = new AMap.Marker({
+				map: map,
+				position: path[0],
+				// icon: "https://webapi.amap.com/images/car.png",
+				// icon: "src/assets/images/smartSafeHat.png", // 自定义图标
+				icon: smartSafeHat, // 自定义图标
+				// icon: "@/assets/images/carPosition/carIcon.png", // 自定义图标
+				// icon: "src/assets/images/carPosition/carIcon.png", // 自定义图标
+				offset: new AMap.Pixel(-26, -13),
+				autoRotation: true,
+				angle: 90
+			});
+			marker.on("click", markerClick);
+			marker.emit("click", { target: marker });
+			marker.on("moving", function (e) {
+				passedPolyline.setPath(e.passedPath);
+			});
 		});
 	}
 
@@ -1383,12 +1470,12 @@ function trackMapInit(path: any, item: any) {
 		// console.log(e);
 		let info = [];
 
-		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
-		// info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
-		info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
-		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
-		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
-		// info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
+		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
 		var infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(30, -30),
 			content: info.join("") //使用默认信息窗体框样式，显示信息内容
@@ -1399,7 +1486,9 @@ function trackMapInit(path: any, item: any) {
 	map.setFitView();
 }
 function startAnimation() {
-	marker.moveAlong(lineArr, 200);
+	marker.moveAlong(lineArr, {
+		duration: 500
+	});
 }
 
 var placeSearch = ref();
@@ -1526,8 +1615,8 @@ function addMarker() {
 	var marker = new AMap.Marker({
 		icon: startIcon,
 		position: [locationList.value[0].longitude, locationList.value[0].latitude],
-		size: new AMap.Size(25, 34)
-		// offset: new AMap.Pixel(-13, -30)
+		size: new AMap.Size(25, 34),
+		offset: new AMap.Pixel(-12, -29)
 	});
 	marker.setMap(map);
 }
@@ -1720,10 +1809,12 @@ function echoCarMarker(item) {
 		// console.log(e)
 		let info = [];
 
-		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
-		info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
-		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
-		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
+		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
 
 		let infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(30, -30),
@@ -1777,12 +1868,12 @@ function echoPersonMarker(item) {
 		console.log(e);
 		let info = [];
 
-		info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
-		// info.push('<p style="padding:7px;">车辆/人员名称: ' + item.personName + "</p>");
-		info.push('<p style="padding:7px;">人员名称: ' + item.workerName + "</p>");
-		info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
-		info.push('<p style="padding:7px;">位置: ' + address + "</p>");
-		info.push('<p style="padding:7px;">经纬度: ' + item.longitude + "|" + item.latitude + "</p>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">设备序号:</text> ' + item.devSn + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">人员名称:</text> ' + item.workerName + "</div>");
+		// info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.updateTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">最后更新时间:</text> ' + item.uploadTime + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">经纬度:</text> ' + item.longitude.toFixed(6) + "|" + item.latitude.toFixed(6) + "</div>");
+		info.push('<div style="padding:0 7px;"><text style="font-weight:bold">位置:</text> ' + address + "</div>");
 
 		var infoWindow = new AMap.InfoWindow({
 			offset: new AMap.Pixel(10, -30),
@@ -1811,9 +1902,136 @@ function echoPersonMarker(item) {
 </style>
 
 <style lang="scss" scoped>
+:deep(.h-card .content) {
+	overflow: hidden;
+}
 // :deep(.h-card .content) {
 // 	background: none;
 // }
+.welanMask {
+	position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
+  z-index: -1; /* 确保遮罩层位于其他内容上方 */
+
+	// position: absolute;
+	// width: 99%;
+	// height: 120%;
+	// background: rgba(0, 0, 0, 0.9);
+	// z-index: -1;
+	// transform: transformY(-100%);
+	.weilanDetail {
+		position: absolute;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		// background: black;
+		background-size: 100% 100%;
+		box-sizing: border-box;
+		width: 35%;
+		top: 20%;
+		left: 32.5%;
+		height: 65%;
+		padding: 0 1%;
+		.detailTitle {
+			width: 100%;
+			height: 10%;
+			display: flex;
+			justify-content: space-between;
+			.leftTitle {
+				width: auto;
+				height: 100%;
+				// background-color: #fff;
+				display: flex;
+				justify-content: start;
+				align-items: center;
+				color: #fff;
+				font-size: 26px;
+				font-family: OPPOSansH;
+				font-style: italic;
+				letter-spacing: 2px;
+			}
+			.rightTitle {
+				width: 20%;
+				height: 100%;
+				// background-color: black;
+				display: flex;
+				justify-content: end;
+				align-items: center;
+				.closeDetail {
+					cursor: pointer;
+				}
+			}
+		}
+		.detailContent {
+			height: 90%;
+			width: 100%;
+			.tab-list {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 5%;
+				background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+				background-size: 100% 100%;
+				// position: absolute;
+				left: 75.5%;
+				top: 75%;
+				// color: #ccc;
+				color: #fff;
+				font-size: calc(100vw * 16 / 1920);
+				line-height: 30px;
+				div {
+					text-align: center;
+					width: 24%;
+				}
+			}
+			.list-box {
+				height: 90%;
+				.list-style:nth-child(even) {
+					background: rgba(39, 88, 192, 0.06);
+				}
+				.list-style {
+					display: flex;
+					align-items: center;
+					color: #fff;
+					line-height: 24px;
+					font-size: 16px;
+					div {
+						text-align: center;
+						width: 24%;
+						white-space: nowrap;
+					}
+				}
+				.list-style:hover {
+					background: #091f3f;
+				}
+				.not-data {
+					top: -10%;
+					width: 100%;
+					height: 100%;
+					// left: 20%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					position: absolute;
+					img {
+						width: 20%;
+						margin: 5% 30%;
+					}
+					p {
+						color: #fff;
+						font-size: calc(100vw * 14 / 1920);
+						margin: -1% 37%;
+					}
+				}
+			}
+		}
+	}
+}
 // 多边形表单
 .fence-shape {
 	display: flex;
@@ -2426,12 +2644,12 @@ function echoPersonMarker(item) {
 				}
 			}
 			.week-bottom {
-				width: 25%;
+				width: 48.75%;
 				margin-top: 20px;
 				height: 100%;
-				position: relative;
+				// position: relative;
 				:deep(.content) {
-						margin-top: 4.2% !important;
+					margin-top: 2.1% !important;
 				}
 				div {
 				}