cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

出入管理-test

This commit is contained in:
cwchen 2024-06-13 17:23:19 +08:00
parent 730a6dc84a
commit d4b9168dd0
3 changed files with 271 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
css/accessMge/accessMge.css
View File

@ -1,70 +1,70 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: 'Alibaba PuHuiTi R';
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: 'Alibaba PuHuiTi R';
}
.layout {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.main-box {
width: 100%;
height: 100%;
justify-content: space-evenly;
width: 100%;
height: 100%;
justify-content: space-evenly;
flex-direction: column;
}
.top-box {
width: 100%;
height: 47%;
width: 100%;
height: 47%;
display: flex;
justify-content: space-around;
}
.bot-box {
width: 100%;
height: 47%;
display: flex;
width: 100%;
height: 47%;
display: flex;
justify-content: space-around;
}
.top-box-left{
.top-box-left {
margin-top: 2%;
margin-left: 1%;
width: 49%;
height: 80%;
}
.top-box-left-top{
.top-box-left-top {
width: 100%;
height: 48%;
display: flex;
}
.top-box-left-top-left{
.top-box-left-top-left {
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
}
.today-font{
.today-font {
color: #01E8DB;
letter-spacing:1px;
letter-spacing: 1px;
font-size: 16px;
font-weight: 500;
height: 5%;
width: 100%;
}
.direction{
.direction {
display: flex;
flex-direction: row;
height: 30%;
@ -72,22 +72,22 @@ body {
margin-top: 6%;
}
.imgs{
.imgs {
width: 60%;
height: 70%;
margin: 5% 5%;
text-align: center;
}
.today-img{
.today-img {
padding: 5% 2% 2% 2%;
background: url("../../img/accessMge/today.png") no-repeat 0 0 / 100% 100%;
display: flex;
justify-content: center;
align-items:center;
align-items: center;
}
.font-style{
.font-style {
font-family: 'zcoolqingkehuangyouti';
color: #fff;
font-size: 28px;
@ -96,13 +96,13 @@ body {
justify-content: center;
}
.span-style{
.span-style {
color: #fff;
display: flex;
flex-direction: column-reverse;
}
.top-box-left-top-center{
.top-box-left-top-center {
margin-left: 5%;
width: 35%;
height: 100%;
@ -110,16 +110,16 @@ body {
flex-direction: column;
}
.cumulative-font{
.cumulative-font {
color: #01E7BE;
letter-spacing:1px;
letter-spacing: 1px;
font-size: 16px;
font-weight: 500;
height: 5%;
width: 100%;
}
.cumulative-img{
.cumulative-img {
padding: 0.5% 0% 0% 0%;
width: 12%;
height: 100%;
@ -131,52 +131,93 @@ body {
}
.top-box-left-top-bot{
.top-box-left-top-bot {
width: 40%;
height: 100%;
}
.abnormalAlarm{
.abnormalAlarm {
height: 90%;
width: 100%;
display: flex;
flex-direction: row;
}
.abnormalAlarmImg{
.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%;
margin-left: 1%;
}
.top-box-left-bot{
.top-box-left-bot {
margin-top: 2%;
width: 100%;
height: 48%;
}
.top-box-right{
.top-box-right {
margin-top: 2%;
margin-left: 1%;
width: 49%;
height: 80%;
}
.bot-box-left{
.bot-box-left {
margin-left: 1%;
width: 38.5%;
height: 100%;
}
.bot-box-right{
.bot-box-right {
margin-right: 1%;
width: 58.5%;
height: 100%;
}
.img-style{
.img-style {
width: 100%;
height: 100%;
box-sizing: border-box;
@ -184,29 +225,29 @@ body {
}
.vehicle {
background: url("../../img/accessMge/vehicle.png") no-repeat 0 0 / 100% 100%;
background: url("../../img/accessMge/vehicle.png") no-repeat 0 0 / 100% 100%;
display: flex;
}
.personnel {
background: url("../../img/accessMge/personnel.png") no-repeat 0 0 / 100% 100%;
background: url("../../img/accessMge/personnel.png") no-repeat 0 0 / 100% 100%;
display: flex;
}
.layui-form-item .layui-inline{
.layui-form-item .layui-inline {
margin-right: 0px
}
.layui-form-label{
.layui-form-label {
padding-left: 1px;
padding-right: 1px
}
.layui-form-item .layui-input-inline{
.layui-form-item .layui-input-inline {
width: 150px;
}
.layui-table-cell {
height: auto;
white-space: normal;
height: auto;
white-space: normal;
}

176
js/pages/accessMge/accessMge.js
View File

@ -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 htmls = '<img src ="' + s + '" alt="" style="height:100%;width:100%; margin-top:5%" />';
$('#photos').empty().append(htmls);
// var s = "../../img/video/voi_photo4.png";
// var htmls = '<img src ="' + s + '" alt="" style="height:100%;width:100%; margin-top:5%" />';
// $('#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) {
var s = "https://unpkg.com/outeres/demo/carousel/720x360-1.jpg";
var a = "sss";
$.each(result.data, function (index, item) {
html += '<div class="abnormalAlarmImg">';
html += '<img src ="' + s + '" alt="" style="height:95%;width:100%; margin-top:5%" />';
html += '<span>' + a + '</span>';
html += '</div>';
})
console.log(result.data);
if (result.data.warnList && result.data.warnList.length > 0) {
let html = '';
let list = result.data.warnList;
let zs = Math.floor(list.length / 5);
let xs = Math.floor(list.length % 5);
if (zs > 0) {
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>'
+ '<div class="pageCapacity">'
+ handleData3(xs, list)
+ '</div>'
+ '</div>'
}
$('#img-carousel').empty().append(html);
carousel.render({
elem: '#ID-carousel-demo-image',
width: '1000px',
height: '160px',
interval: 5000,
// indicator:'none'
});
} else {
// html += '<div style="color:#71757B;">无数据</div>'
html += '<div class="abnormalAlarmImg">';
html += '<img src ="../../img/video/voi_photo.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
html += '<span>告警1</span>';
html += '</div>';
html += '<div class="abnormalAlarmImg">';
html += '<img src ="../../img/video/voi_photo2.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
html += '<span>告警2</span>';
html += '</div>';
html += '<div class="abnormalAlarmImg">';
html += '<img src ="../../img/video/voi_photo3.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
html += '<span>告警3</span>';
html += '</div>';
html += '<div class="abnormalAlarmImg">';
html += '<img src ="../../img/video/voi_photo4.png" alt="" style="height:85%;width:100%; margin-top:5%" />';
html += '<span>告警4</span>';
html += '</div>';
$('#abnormalAlarms').empty().append('<div class="none-data"><p>暂无数据</p></div>');
}
if (result.data.noWarnList && result.data.noWarnList.length > 0) {
let html = '';
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: 'userName', title: '姓名', align: 'center', width: '10%' },
{ field: 'phone', title: '电话', align: 'center', width: '20%' },
{ field: 'proName', title: '工程名称', align: 'center', width: '25%' },
{ field: 'userName', title: '姓名', align: 'center', width: '15%' },
{ 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);
}
})
}

91
pages/accessMge/accessMge.html
View File

@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/coreTable.css"/>
<link rel="stylesheet" href="../../css/coreTable.css" />
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
<link rel="stylesheet" href="../../plugin/toolTip/mTips.css">
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
@ -13,12 +14,13 @@
<script src="../../js/publics/public.js" type="text/javascript"></script>
<script src="../../api/commonRequest.js" type="text/javascript"></script>
<script src="../../js/publics/aescbc.js"></script>
<title>出入管理</title>
<title>出入管理</title>
</head>
<body>
<div class="layout main-box">
<div class="layout main-box">
<div class="top-box">
<div class="img-style vehicle">
<div class="img-style vehicle">
<div class="top-box-left">
<div class="top-box-left-top">
<div class="top-box-left-top-left">
@ -46,7 +48,7 @@
<div class="imgs today-img">
<span class="font-style" id="threec"></span>
</div>
<span class="span-style" >辆</span>
<span class="span-style">辆</span>
</div>
</div>
<div class="top-box-left-top-center">
@ -87,14 +89,14 @@
</div>
<div class="top-box-left-top-bot">
<div class="img-style" id="photo">
</div>
</div>
</div>
<div class="top-box-left-bot">
<div style="color: #fff;letter-spacing:1px;font-size: 16px;">异常告警</div>
<div class="abnormalAlarm" id="abnormalAlarm">
</div>
</div>
</div>
@ -102,7 +104,7 @@
<div style=" width: 100%;height: 100%;">
<form class="layui-form " onsubmit="return false">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">工程名称：</label>
<div class="layui-input-inline">
@ -110,8 +112,8 @@
class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">车牌号：</label>
<div class="layui-input-inline">
@ -119,40 +121,40 @@
class="layui-input">
</div>
</div>
<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;"
class="layui-input">
<input type="text" id="date1" placeholder="请选择时间" readonly
style="cursor: pointer;width: 190px;" class="layui-input">
</div>
</div>
<div class="layui-inline" style="margin-left: 36px;">
<div class="layui-col-xs12">
<button class="layui-btn" onclick="getQueryList(1)">查询</button>
<button class="layui-btn" onclick="getQueryList(1)">查询</button>
</div>
</div>
<div class="layui-inline" style="margin-left: 10px;">
<div class="layui-col-xs12">
<button class="layui-btn" onclick="exportVehicleData()">导出</button>
<button class="layui-btn" onclick="exportVehicleData()">导出</button>
</div>
</div>
</div>
</form>
<div class="right-down-right">
<table id="demo1" lay-filter="test"></table>
<table id="demo1" lay-filter="test"></table>
</div>
</div>
</div>
</div>
</div>
<div class="bot-box">
<div class="img-style personnel">
<div class="top-box-left">
<div class="img-style personnel">
<div class="top-box-left">
<div class="top-box-left-top">
<div class="top-box-left-top-left">
<div class="today-font">今日累计入场</div>
@ -179,7 +181,7 @@
<div class="imgs today-img">
<span class="font-style" id="threecPer"></span>
</div>
<span class="span-style" >人</span>
<span class="span-style">人</span>
</div>
</div>
<div class="top-box-left-top-center">
@ -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>
@ -235,7 +243,7 @@
<div style=" width: 100%;height: 100%;">
<form class="layui-form " onsubmit="return false">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">工程名称：</label>
<div class="layui-input-inline">
@ -243,46 +251,47 @@
class="layui-input">
</div>
</div>
<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>
<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;"
class="layui-input">
<input type="text" id="date2" placeholder="请选择时间" autocomplete="off" readonly
style="cursor: pointer;width: 190px;" class="layui-input">
</div>
</div>
<div class="layui-inline" style="margin-left: 36px;">
<div class="layui-col-xs12">
<button class="layui-btn" onclick="getQueryList(2)">查询</button>
<button class="layui-btn" onclick="getQueryList(2)">查询</button>
</div>
</div>
<div class="layui-inline" style="margin-left: 10px;">
<div class="layui-col-xs12">
<button class="layui-btn" onclick="exportPerData()">导出</button>
<button class="layui-btn" onclick="exportPerData()">导出</button>
</div>
</div>
</div>
</form>
<div class="right-down-right">
<table id="demo2" lay-filter="test"></table>
<table id="demo2" lay-filter="test"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../js/pages/accessMge/accessMge.js" type="text/javascript"></script>
<script src="../../js/pages/accessMge/accessMge.js" type="text/javascript"></script>
</html>