From f5d5544b90443e86aa4d26988e6fe5ddd220acb7 Mon Sep 17 00:00:00 2001
From: vce <daisy_vce@yeah.net>
Date: Sat, 2 Mar 2024 20:57:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E5=85=A8=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../safeRisk/riskManage/left.vue              |   4 +-
 .../safeRisk/riskManage/middle.vue            | 636 +++++++++---------
 2 files changed, 321 insertions(+), 319 deletions(-)

diff --git a/src/views/sevenLargeScreen/safeRisk/riskManage/left.vue b/src/views/sevenLargeScreen/safeRisk/riskManage/left.vue
index 9496185..9c3afdd 100644
--- a/src/views/sevenLargeScreen/safeRisk/riskManage/left.vue
+++ b/src/views/sevenLargeScreen/safeRisk/riskManage/left.vue
@@ -105,7 +105,7 @@
     let illegalPersonList = ref([] as any);
     const getIllegalPersonList = async () => {
     	const res: any = await getIllegalPerson({ projectSn: store.sn });
-    	console.log("获取严重违章成员模拟数据", res);
+    	console.log("获取严重违章成员列表数据", res);
     	if (res.result.length > 0) {
 			illegalPersonList.value = res.result
     	} else {
@@ -117,7 +117,7 @@
     let workTicketCount = ref({} as any);
     const getWorkTicketCount = async () => {
     	const res: any = await getWorkTicket({ projectSn: store.sn });
-    	console.log("获取严重违章成员模拟数据", res);
+    	console.log("获取工作票数据", res);
     	if (res.result !== null) {
 			workTicketCount.value = res.result
     	} else {
diff --git a/src/views/sevenLargeScreen/safeRisk/riskManage/middle.vue b/src/views/sevenLargeScreen/safeRisk/riskManage/middle.vue
index c82d880..77f8b99 100644
--- a/src/views/sevenLargeScreen/safeRisk/riskManage/middle.vue
+++ b/src/views/sevenLargeScreen/safeRisk/riskManage/middle.vue
@@ -1,10 +1,12 @@
 <template>
-    <div class="middle-container">
-        <div class="middle-top">
-            <Card title="实时检测">
-                <div class="ai-center-bottom">
+	<div class="middle-container">
+		<div class="middle-top">
+			<Card title="实时检测">
+				<div class="ai-center-bottom">
 					<div class="today-warn">
-						<i>今日告警: <span style="padding-left: 1%">{{ realTimeTotal.todayAlarmNum || 0 }}</span></i>
+						<i
+							>今日告警: <span style="padding-left: 1%">{{ realTimeTotal.todayAlarmNum || 0 }}</span></i
+						>
 					</div>
 					<div class="icon"></div>
 					<div class="week-warn">
@@ -16,39 +18,39 @@
 						<div class="num">{{ realTimeTotal.allAlarmNum || 0 }}</div>
 					</div>
 				</div>
-            </Card>
-        </div>
-        <div class="middle-bottom">
-            <Card title="今日报警统计">
-                <div class="today-warning-list">
-			        <div class="list-content">
-			        	<div class="tab-list">
-			        		<div>序号</div>
-			        		<div>抓拍照片</div>
-			        		<div>违章人员</div>
-			        		<div>告警类型</div>
-			        		<div>告警时间</div>
-			        	</div>
-			        	<el-scrollbar class="list-box">
-			        		<div v-for="(item, index) in alarmList" class="list-style" :key="item.id">
-			        			<div>{{ index + 1 }}</div>
-			        			<div class="list-img">
-			        				<div class="img-style" @click="openDetailDialog(item)">
-			        					<img :src="BASEURL + '/image/' + item.imageUrl" />
-			        				</div>
-			        			</div>
-                                <div>违章人员{{  }}</div>
-			        			<!-- <div>{{ item.alarmType ? getWarnName(item.alarmType) : "" }}</div> -->
-			        			<div>{{ item.alarmTypeName }}</div>
-			        			<div>{{ item.createTime }}</div>
-			        		</div>
-			        		<div class="not-data" v-if="alarmList.length == 0">   
-			        			<img src="@/assets/images/noData.png" />
-			        			<p>暂无数据</p>  			
-			        		</div>							
-			        	</el-scrollbar>
-			        </div>
-		        </div>
+			</Card>
+		</div>
+		<div class="middle-bottom">
+			<Card title="今日报警统计">
+				<div class="today-warning-list">
+					<div class="list-content">
+						<div class="tab-list">
+							<div>序号</div>
+							<div>抓拍照片</div>
+							<div>违章人员</div>
+							<div>告警类型</div>
+							<div>告警时间</div>
+						</div>
+						<el-scrollbar class="list-box">
+							<div v-for="(item, index) in alarmList" class="list-style" :key="item.id">
+								<div>{{ index + 1 }}</div>
+								<div class="list-img">
+									<div class="img-style" @click="openDetailDialog(item)">
+										<img :src="BASEURL + '/image/' + item.imageUrl" />
+									</div>
+								</div>
+								<div>{{ item.realName }}</div>
+								<!-- <div>{{ item.alarmType ? getWarnName(item.alarmType) : "" }}</div> -->
+								<div>{{ item.alarmTypeName }}</div>
+								<div>{{ item.createTime }}</div>
+							</div>
+							<div class="not-data" v-if="alarmList.length == 0">
+								<img src="@/assets/images/noData.png" />
+								<p>暂无数据</p>
+							</div>
+						</el-scrollbar>
+					</div>
+				</div>
 				<div class="list-detail" v-show="showDialog" @click="handleClick">
 					<div class="dialog-content">
 						<div class="dialog-icon"><img src="@/assets/images/titleIcon.png" /></div>
@@ -61,304 +63,304 @@
 						</div>
 					</div>
 				</div>
-            </Card>
-        </div>
-    </div>
+			</Card>
+		</div>
+	</div>
 </template>
 <script lang="ts" setup>
-    import Card from "@/components/card.vue";
-    import { ref, onMounted, computed } from "vue";
-    import { getRealTimeTotal, getAlarmList } from "@/api/modules/securityManagement";
-    import { GlobalStore } from "@/stores";
-    
-    // 当前环境
-    const BASEURL = import.meta.env.VITE_API_URL;
-    const store = GlobalStore();
+import Card from "@/components/card.vue";
+import { ref, onMounted, computed } from "vue";
+import { getRealTimeTotal, getAlarmList } from "@/api/modules/securityManagement";
+import { GlobalStore } from "@/stores";
 
-	//弹窗
-    let showDialog = ref(false as any);
-    function handleClick(event: any) {
-    	// console.log("点击", event.target.className);
-    	if (event.target.className == "list-detail") {
-    		closeDialog();
-    	}
-    }
-	const realTimeTotal = ref({} as any);
-	//获取实时监测
-	const getMemberCareList = async () => {
-		const res: any = await getRealTimeTotal({ projectSn: store.sn });
-		console.log("获取实时监测", res);
-		if (res.success) {
-			realTimeTotal.value = res.result;
-		}
-	};
+// 当前环境
+const BASEURL = import.meta.env.VITE_API_URL;
+const store = GlobalStore();
 
-	//获取今日报警记录列表
-    let alarmList = ref([] as any);
-	let detailData = ref({} as any);
-    const getAlarmListInfo = async () => {
-    	const res: any = await getAlarmList({ projectSn: store.sn });
-    	console.log("获取今日报警记录列表", res);
-    	if (res.result.length > 0) {
-			alarmList.value = res.result
-    	} else {
-    		alarmList.value = [];
-    	}
-    };
+//弹窗
+let showDialog = ref(false as any);
+function handleClick(event: any) {
+	// console.log("点击", event.target.className);
+	if (event.target.className == "list-detail") {
+		closeDialog();
+	}
+}
+const realTimeTotal = ref({} as any);
+//获取实时监测
+const getMemberCareList = async () => {
+	const res: any = await getRealTimeTotal({ projectSn: store.sn });
+	console.log("获取实时监测", res);
+	if (res.success) {
+		realTimeTotal.value = res.result;
+	}
+};
 
-    // 打开详情弹窗
-    function openDetailDialog(item: any) {
-    	// console.log(item, "当前行数据");
-    	detailData.value = item;
-    	showDialog.value = true;
-    }
-    // 关闭详情弹窗
-    function closeDialog() {
-    	showDialog.value = false;
-    	detailData.value = {};
-    }
+//获取今日报警记录列表
+let alarmList = ref([] as any);
+let detailData = ref({} as any);
+const getAlarmListInfo = async () => {
+	const res: any = await getAlarmList({ projectSn: store.sn });
+	console.log("获取今日报警记录列表", res);
+	if (res.result.length > 0) {
+		alarmList.value = res.result;
+	} else {
+		alarmList.value = [];
+	}
+};
 
-    onMounted(async () => {
-		getMemberCareList();
-		getAlarmListInfo();
-    });
+// 打开详情弹窗
+function openDetailDialog(item: any) {
+	// console.log(item, "当前行数据");
+	detailData.value = item;
+	showDialog.value = true;
+}
+// 关闭详情弹窗
+function closeDialog() {
+	showDialog.value = false;
+	detailData.value = {};
+}
+
+onMounted(async () => {
+	getMemberCareList();
+	getAlarmListInfo();
+});
 </script>
 <style lang="scss">
-    .middle-container {
-        width: 100%;
-        height: 100%;
-        .middle-top{
-            width: 100%;
-            height: 29%;
-			.ai-center-bottom {
-				width: 100%;
-				height: 100%;
-				position: relative;
-				.today-warn {
+.middle-container {
+	width: 100%;
+	height: 100%;
+	.middle-top {
+		width: 100%;
+		height: 29%;
+		.ai-center-bottom {
+			width: 100%;
+			height: 100%;
+			position: relative;
+			.today-warn {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 20px;
+				font-family: OPPOSansH;
+				color: #ffffff;
+				top: 10%;
+				left: 20%;
+				position: absolute;
+				width: 30%;
+				height: 36px;
+				background: url("@/assets/images/aIEarlyWarning/todayWarn.png") no-repeat;
+				background-size: 100% 100%;
+				white-space: nowrap;
+			}
+			.week-warn {
+				right: 8%;
+				top: 10%;
+				text-align: center;
+				position: absolute;
+				width: 20%;
+				height: 40%;
+				background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
+				background-size: 100% 100%;
+
+				.text {
+					margin-top: 10%;
+					font-size: 16px;
+					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+					font-weight: 500;
+					color: #65d7f9;
+				}
+				.num {
+					margin-top: 10%;
+					font-weight: bold;
+					font-family: sadigitalNumber;
+					font-size: 24px;
+					background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+				}
+			}
+			.month-warn {
+				right: 8%;
+				bottom: 8%;
+				text-align: center;
+				position: absolute;
+				width: 20%;
+				height: 40%;
+				background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
+				background-size: 100% 100%;
+				.text {
+					margin-top: 10%;
+					font-size: 16px;
+					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+					font-weight: 500;
+					color: rgba(255, 255, 255, 0.85);
+				}
+				.num {
+					margin-top: 10%;
+					font-family: sadigitalNumber;
+					font-weight: bold;
+					font-size: 24px;
+					background-image: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
+					background-clip: text;
+					-webkit-text-fill-color: transparent;
+				}
+			}
+			.icon {
+				left: 17%;
+				bottom: 5%;
+				position: absolute;
+				width: 35%;
+				height: 90%;
+				background: url("@/assets/images/aIEarlyWarning/warnMonitor.png") no-repeat;
+				background-size: 100% 100%;
+			}
+		}
+	}
+	.middle-bottom {
+		margin-top: 7.5%;
+		width: 100%;
+		height: 68%;
+		// background-color: #fff;
+	}
+}
+.today-warning-list {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 2%;
+	.list-content {
+		height: 94%;
+		width: 100%;
+		// background: url("@/assets/images/cardImg.png") no-repeat;
+		// background-size: 100% 100%;
+		.tab-list {
+			display: flex;
+			width: 100%;
+			height: 10%;
+			background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
+			background-size: 100% 100%;
+			// position: absolute;
+			left: 75.5%;
+			top: 75%;
+			color: #ccc;
+			font-size: 20px;
+			// line-height: 55px;
+			div {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				text-align: center;
+				width: 19%;
+			}
+		}
+		.list-box {
+			height: 98%;
+			.list-style:nth-child(even) {
+				background: rgba(39, 88, 192, 0.06);
+			}
+			.list-style {
+				display: flex;
+				align-items: center;
+				color: #fff;
+				height: 10%;
+				font-size: 16px;
+				.list-img {
+					// width: 4%;
 					display: flex;
 					justify-content: center;
 					align-items: center;
-					font-size: 20px;
-					font-family: OPPOSansH;
-					color: #ffffff;
-					top: 10%;
-					left: 20%;
-					position: absolute;
-					width: 30%;
-					height: 36px;
-					background: url("@/assets/images/aIEarlyWarning/todayWarn.png") no-repeat;
-					background-size: 100% 100%;
+					.img-style {
+						width: 60px;
+						height: 80px;
+						img {
+							width: 100%;
+							height: 100%;
+							object-fit: contain;
+						}
+					}
+				}
+				div {
+					text-align: center;
+					width: 19%;
 					white-space: nowrap;
 				}
-				.week-warn {
-					right: 8%;
-					top: 10%;
-					text-align: center;
-					position: absolute;
-					width: 20%;
-					height: 40%;
-					background: url("@/assets/images/aIEarlyWarning/monthWarn.png") no-repeat;
-					background-size: 100% 100%;
-
-					.text {
-						margin-top: 10%;
-						font-size: 16px;
-						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
-						font-weight: 500;
-						color: #65d7f9;
-					}
-					.num {
-						margin-top: 10%;
-						font-weight: bold;
-						font-family: sadigitalNumber;
-						font-size: 24px;
-						background: linear-gradient(180deg, #65d7f9 0%, #ffffff 100%);
-						-webkit-background-clip: text;
-						-webkit-text-fill-color: transparent;
-					}
-				}
-				.month-warn {
-					right: 8%;
-					bottom: 8%;
-					text-align: center;
-					position: absolute;
-					width: 20%;
-					height: 40%;
-					background: url("@/assets/images/aIEarlyWarning/weekWarn.png") no-repeat;
-					background-size: 100% 100%;
-					.text {
-						margin-top: 10%;
-						font-size: 16px;
-						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
-						font-weight: 500;
-						color: rgba(255, 255, 255, 0.85);
-					}
-					.num {
-						margin-top: 10%;
-						font-family: sadigitalNumber;
-						font-weight: bold;
-						font-size: 24px;
-						background-image: linear-gradient(180deg, #dad8b4 0%, #f4d065 100%);
-						background-clip: text;
-						-webkit-text-fill-color: transparent;
-					}
-				}
-				.icon {
-					left: 17%;
-					bottom: 5%;
-					position: absolute;
-					width: 35%;
-					height: 90%;
-					background: url("@/assets/images/aIEarlyWarning/warnMonitor.png") no-repeat;
-					background-size: 100% 100%;
-				}
 			}
-        }
-        .middle-bottom{
-            margin-top: 7.5%;
-            width: 100%;
-            height: 68%;
-            // background-color: #fff;
-        }
-    }
-    .today-warning-list {
-	    width: 100%;
-	    height: 100%;
-	    box-sizing: border-box;
-	    padding: 2%;
-	    .list-content {
-	    	height: 94%;
-	    	width: 100%;
-	    	// background: url("@/assets/images/cardImg.png") no-repeat;
-	    	// background-size: 100% 100%;
-	    	.tab-list {
-	    		display: flex;
-	    		width: 100%;
-	    		height: 10%;
-	    		background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
-	    		background-size: 100% 100%;
-	    		// position: absolute;
-	    		left: 75.5%;
-	    		top: 75%;
-	    		color: #ccc;
-	    		font-size: 20px;
-	    		// line-height: 55px;
-	    		div {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-	    			text-align: center;
-	    			width: 19%;
-	    		}
-	    	}
-	    	.list-box {
-	    		height: 98%;
-	    		.list-style:nth-child(even) {
-	    			background: rgba(39, 88, 192, 0.06);
-	    		}
-	    		.list-style {
-	    			display: flex;
-	    			align-items: center;
-	    			color: #fff;
-	    			height: 10%;
-	    			font-size: 16px;
-	    			.list-img {
-	    				// width: 4%;
-	    				display: flex;
-	    				justify-content: center;
-	    				align-items: center;
-	    				.img-style {
-	    					width: 60px;
-	    					height: 80px;
-	    					img {
-	    						width: 100%;
-	    						height: 100%;
-	    						object-fit: contain;
-	    					}
-	    				}
-	    			}
-	    			div {
-	    				text-align: center;
-	    				width: 19%;
-	    				white-space: nowrap;
-	    			}
-	    		}
-	    		.list-style:hover {
-	    			background: #091f3f;
-	    		}
-	    	}
-	    }
-    }
-	.list-detail {
+			.list-style:hover {
+				background: #091f3f;
+			}
+		}
+	}
+}
+.list-detail {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0%;
+	left: 0%;
+	background: rgba(7, 28, 49, 0.5);
+	z-index: 20;
+	.dialog-content {
 		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0%;
-		left: 0%;
-		background: rgba(7, 28, 49, 0.5);
-		z-index: 20;
-		.dialog-content {
+		box-sizing: border-box;
+		padding: 1%;
+		left: 30%;
+		top: 30%;
+		width: 40%;
+		height: 50%;
+		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
+		background-size: 100% 100%;
+		z-index: 21;
+		.dialog-icon {
 			position: absolute;
-			box-sizing: border-box;
-			padding: 1%;
-			left: 30%;
-			top: 30%;
-			width: 40%;
-			height: 50%;
-			background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
-			background-size: 100% 100%;
-			z-index: 21;
-			.dialog-icon {
-				position: absolute;
-				left: 3%;
-				top: 3%;
-				width: 7%;
-				height: 7%;
-				img {
-					width: 100%;
-					height: 100%;
-				}
-			}
-			.dialog-title {
-				color: #ffffff;
-				font-weight: bold;
-				margin-left: 8%;
-				font-size: 18px;
-				font-family: "OPPOSans-Bold";
-			}
-			.big-pic {
+			left: 3%;
+			top: 3%;
+			width: 7%;
+			height: 7%;
+			img {
 				width: 100%;
-				height: 85%;
-				margin-top: 3%;
-				img {
-					width: 100%;
-					height: 100%;
-				}
-			}
-			.close-icon {
-				position: absolute;
-				right: 3%;
-				top: 3%;
-				cursor: pointer;
-				color: #ffffff;
-				font-size: 18px;
+				height: 100%;
 			}
 		}
-	}
-	.not-data {
-		top: 35%;
-		width: 30%;
-		left: 35%;
-		position: absolute;
-		text-align: center;
-		img {
-			width: 60%;
-			margin: 5% ;
+		.dialog-title {
+			color: #ffffff;
+			font-weight: bold;
+			margin-left: 8%;
+			font-size: 18px;
+			font-family: "OPPOSans-Bold";
 		}
-		p {
-			color: #fff;
-			font-size: 14px;
-			margin: -6% 37%;
+		.big-pic {
+			width: 100%;
+			height: 85%;
+			margin-top: 3%;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.close-icon {
+			position: absolute;
+			right: 3%;
+			top: 3%;
+			cursor: pointer;
+			color: #ffffff;
+			font-size: 18px;
 		}
 	}
-</style>
\ No newline at end of file
+}
+.not-data {
+	top: 35%;
+	width: 30%;
+	left: 35%;
+	position: absolute;
+	text-align: center;
+	img {
+		width: 60%;
+		margin: 5%;
+	}
+	p {
+		color: #fff;
+		font-size: 14px;
+		margin: -6% 37%;
+	}
+}
+</style>