出入管理-test

css/accessMge/accessMge.css

@@ -143,6 +143,47 @@ body {
 	flex-direction: row;
 }
 
+.layui-carousel {
+	background-color: transparent;
+}
+
+.layui-carousel>[carousel-item]>* {
+	background-color: transparent;
+}
+
+.layui-carousel>[carousel-item]:before {
+	display: none;
+}
+
+.pageCapacity {
+	width: 100% !important;
+	height: 100% !important;
+	display: flex !important;
+}
+
+.none-data {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 16px;
+}
+
+.capacityItem {
+	width: 200px;
+	height: 130px;
+	margin-right: 10px;
+	background-color: transparent;
+	flex-direction: column;
+	justify-content: space-around;
+}
+
+.capacityItem img {
+	width: 180px;
+	height: 100px;
+}
+
 .abnormalAlarmImg {
 	width: 20%;
 	height: 100%;

js/pages/accessMge/accessMge.js

@@ -1,11 +1,12 @@
-let layer, table, form, laydate;
+let layer, table, form, laydate, carousel;
+let scheduledTask = false;
 const bidCode = parent.$('#bidPro').val();
 layui.use(['layer', 'table', 'form', 'laydate'], function () {
 	layer = layui.layer;
 	table = layui.table;
 	form = layui.form;
 	laydate = layui.laydate;
-
+	carousel = layui.carousel;
 	//时间范围设置
 	laydate.render({
 		elem: '#date1',
@@ -43,8 +44,23 @@ layui.use(['layer', 'table', 'form', 'laydate'], function () {
 
 	// //今日、当月人员出入场统计列表
 	getPerStatisticsList(bidCode);
+
+	timedRefresh();
 });
 
+// 出入管理定时刷新
+function timedRefresh() {
+	if (scheduledTask) {
+		getPerStatistics();
+		getPerStatisticsPhoto("1", "1");
+		getPerStatisticsList(bidCode);
+	} else {
+		scheduledTask = true;
+	}
+	// 两分钟定时刷新一次
+	setTimeout(timedRefresh, 1000 * 60 * 2);
+}
+
 function getVehicleStatistics() {
 	let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
 	let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
@@ -220,7 +236,6 @@ function getVehicleStatisticsList(bidCode) {
 			});
 		},
 		done: function (res, curr, count, origin) {
-			console.log(res);
 		}
 	})
 }
@@ -282,57 +297,133 @@ function getStatisticsPer(data) {
 	document.getElementById("threescPer").textContent = dycNums[2];
 	document.getElementById("fourscPer").textContent = dycNums[3];
 
-	var s = "../../img/video/voi_photo4.png";
+	// var s = "../../img/video/voi_photo4.png";
-	var htmls = '<img src ="' + s + '" alt="" style="height:100%;width:100%; margin-top:5%" />';
+	// var htmls = '<img src ="' + s + '" alt="" style="height:100%;width:100%; margin-top:5%" />';
-	$('#photos').empty().append(htmls);
+	// $('#photos').empty().append(htmls);
 }
 
+/* 人员出入统计-异常告警 */
 function getPerStatisticsPhoto(accessType, timeType) {
 	let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '&accessType=' + accessType + '&timeType=' + timeType;
 	let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
-	const url = commonUrl + "screen/largeScreen/accessMge/getPerStatisticsPhoto?params=" + montageParam; // url
+	const url = commonUrl + "screen/largeScreen/accessMge/getPerStatisticsPhoto?params=" + montageParam;
 	ajaxRequestGet(url, "GET", true, function () {
 	}, function (result) {
-		let html = '';
 		if (result.code === 200) {
-			if (result.data && result.data.length > 0) {
+			console.log(result.data);
-				var s = "https://unpkg.com/outeres/demo/carousel/720x360-1.jpg";
+			if (result.data.warnList && result.data.warnList.length > 0) {
-				var a = "sss";
+				let html = '';
-				$.each(result.data, function (index, item) {
+				let list = result.data.warnList;
-					html += '<div class="abnormalAlarmImg">';
+				let zs = Math.floor(list.length / 5);
-					html += '<img src ="' + s + '" alt="" style="height:95%;width:100%; margin-top:5%" />';
+				let xs = Math.floor(list.length % 5);
-					html += '<span>' + a + '</span>';
+				if (zs > 0) {
-					html += '</div>';
+					for (let i = 1; i <= zs; i++) {
-				})
+						html += '<div>'
+							+ '<div class="pageCapacity">'
+							+ handleData(5, i, list)
+							+ '</div>'
+							+ '</div>'
+					}
+					if (xs > 0) {
+						html += '<div>'
+							+ '<div class="pageCapacity">'
+							+ handleData2(5, zs, xs, list)
+							+ '</div>'
+							+ '</div>'
+					}
 				} else {
-				// html += '<div style="color:#71757B;">无数据</div>'
+					html += '<div>'
-				html += '<div class="abnormalAlarmImg">';
+						+ '<div class="pageCapacity">'
-				html += '<img src ="../../img/video/voi_photo.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
+						+ handleData3(xs, list)
-				html += '<span>告警1</span>';
+						+ '</div>'
-				html += '</div>';
+						+ '</div>'
-
+				}
-				html += '<div class="abnormalAlarmImg">';
+				$('#img-carousel').empty().append(html);
-				html += '<img src ="../../img/video/voi_photo2.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
+				carousel.render({
-				html += '<span>告警2</span>';
+					elem: '#ID-carousel-demo-image',
-				html += '</div>';
+					width: '1000px',
-
+					height: '160px',
-				html += '<div class="abnormalAlarmImg">';
+					interval: 5000,
-				html += '<img src ="../../img/video/voi_photo3.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
+					// indicator:'none'
-				html += '<span>告警3</span>';
+				});
-				html += '</div>';
+			} else {
-
+				$('#abnormalAlarms').empty().append('<div class="none-data"><p>暂无数据</p></div>');
-				html += '<div class="abnormalAlarmImg">';
+			}
-				html += '<img src ="../../img/video/voi_photo4.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
+			if (result.data.noWarnList && result.data.noWarnList.length > 0) {
-				html += '<span>告警4</span>';
+				let html = '';
-				html += '</div>';
+				let list = result.data.noWarnList;
+				let zs = Math.floor(list.length / 2);
+				let xs = Math.floor(list.length % 2);
+				if (zs > 0) {
+					for (let i = 1; i <= zs; i++) {
+						html += '<div>'
+							+ '<div class="pageCapacity">'
+							+ handleData(2, i, list)
+							+ '</div>'
+							+ '</div>'
+					}
+					if (xs > 0) {
+						html += '<div>'
+							+ '<div class="pageCapacity">'
+							+ handleData2(2, zs, xs, list)
+							+ '</div>'
+							+ '</div>'
+					}
+				} else {
+					html += '<div>'
+						+ '<div class="pageCapacity">'
+						+ handleData3(xs, list)
+						+ '</div>'
+						+ '</div>'
+				}
+				$('#img-carousel2').empty().append(html);
+				carousel.render({
+					elem: '#ID-carousel-demo-image2',
+					width: '380px',
+					height: '160px',
+					interval: 5000,
+					// indicator:'none'
+				});
+			} else {
+				$('#photos').empty().append('<div class="none-data"><p>暂无数据</p></div>');
 			}
 		} else if (result.code === 500) {
 			layer.msg(result.msg, { icon: 2 });
 		}
-		$('#abnormalAlarms').empty().append(html);
 	}, function (xhr, status, error) {
-		error(xhr, status, error)
+		errorFn(xhr, status, error)
 	}, aqEnnable);
+
+	function handleData(num, index, list) {
+		let cent = '';
+		for (var i = num; i >= 1; i--) {
+			cent += '<div class="capacityItem layout">'
+				+ '<img src="' + list[index * num - i].base64 + '">'
+				+ '<p>' + list[index * num - i].personName + '</p>'
+				+ '</div>';
+		}
+		return cent;
+	}
+	function handleData2(num, zs, xs, list) {
+		let cent = '';
+		for (var i = zs * num; i < zs * num + xs; i++) {
+			cent += '<div class="capacityItem layout">'
+				+ '<img src="' + list[i].base64 + '">'
+				+ '<p>' + list[i].personName + '</p>'
+				+ '</div>';
+		}
+		return cent;
+	}
+	function handleData3(index, list) {
+		let cent = '';
+		for (var i = 0; i < index; i++) {
+			cent += '<div class="capacityItem layout">'
+				+ '<img src="' + list[i].base64 + '">'
+				+ '<p>' + list[i].personName + '</p>'
+				+ '</div>';
+		}
+		return cent;
+	}
 }
 
 function getPerStatisticsList(bidCode) {
@@ -355,9 +446,9 @@ function getPerStatisticsList(bidCode) {
 		},
 		cols: [[
 			{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
-			{ field: 'proName', title: '工程名称', align: 'center', width: '20%' },
+			{ field: 'proName', title: '工程名称', align: 'center', width: '25%' },
-			{ field: 'userName', title: '姓名', align: 'center', width: '10%' },
+			{ field: 'userName', title: '姓名', align: 'center', width: '15%' },
-			{ field: 'phone', title: '电话', align: 'center', width: '20%' },
+			{ field: 'phone', title: '电话', align: 'center', width: '10%' },
 			{ field: 'accessType', title: '状态', align: 'center', width: '10%' },
 			{ field: 'accesssTime', title: '时间', align: 'center', width: '30%' }
 		]],
@@ -370,7 +461,6 @@ function getPerStatisticsList(bidCode) {
 			});
 		},
 		done: function (res, curr, count, origin) {
-			console.log(res);
 		}
 	})
 }

pages/accessMge/accessMge.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,6 +16,7 @@
 	<script src="../../js/publics/aescbc.js"></script>
 	<title>出入管理</title>
 </head>
+
 <body>
 	<div class="layout main-box">
 		<div class="top-box">
@@ -123,8 +125,8 @@
 								<div class="layui-inline">
 									<label class="layui-form-label" style="width: 60px;">时间：</label>
 									<div class="layui-input-inline">
-										<input type="text" id="date1" placeholder="请选择时间" readonly style="cursor: pointer;width: 190px;"
+										<input type="text" id="date1" placeholder="请选择时间" readonly
-											class="layui-input">
+											style="cursor: pointer;width: 190px;" class="layui-input">
 									</div>
 								</div>
 
@@ -220,14 +222,20 @@
 						</div>
 						<div class="top-box-left-top-bot">
 							<div class="img-style" id="photos">
-								
+								<div class="layui-carousel" id="ID-carousel-demo-image2">
+									<div id="img-carousel2" carousel-item>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
 					<div class="top-box-left-bot">
 						<div style="color: #fff;letter-spacing:1px;font-size: 16px;">异常告警</div>
 						<div class="abnormalAlarm" id="abnormalAlarms">
-							
+							<div class="layui-carousel" id="ID-carousel-demo-image">
+								<div id="img-carousel" carousel-item>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -248,7 +256,7 @@
 								<div class="layui-inline">
 									<label class="layui-form-label">姓名：</label>
 									<div class="layui-input-inline">
-										<input type="text" id="userName" placeholder="请输入司机姓名" autocomplete="off"
+										<input type="text" id="userName" placeholder="请输入姓名" autocomplete="off"
 											class="layui-input">
 									</div>
 								</div>
@@ -256,8 +264,8 @@
 								<div class="layui-inline">
 									<label class="layui-form-label" style="width: 60px;">时间：</label>
 									<div class="layui-input-inline">
-										<input type="text" id="date2" placeholder="请选择时间" autocomplete="off" readonly style="cursor: pointer;width: 190px;"
+										<input type="text" id="date2" placeholder="请选择时间" autocomplete="off" readonly
-											class="layui-input">
+											style="cursor: pointer;width: 190px;" class="layui-input">
 									</div>
 								</div>
 
@@ -285,4 +293,5 @@
 	</div>
 </body>
 <script src="../../js/pages/accessMge/accessMge.js" type="text/javascript"></script>
+
 </html>