diff --git a/css/accessMge/accessMge.css b/css/accessMge/accessMge.css index d58ea48..4e56265 100644 --- a/css/accessMge/accessMge.css +++ b/css/accessMge/accessMge.css @@ -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; } \ No newline at end of file diff --git a/js/pages/accessMge/accessMge.js b/js/pages/accessMge/accessMge.js index 4129f70..d6e9109 100644 --- a/js/pages/accessMge/accessMge.js +++ b/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 htmls = ''; - $('#photos').empty().append(htmls); + // var s = "../../img/video/voi_photo4.png"; + // var 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) { - var s = "https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"; - var a = "sss"; - $.each(result.data, function (index, item) { - html += '
'; - html += ''; - html += '' + a + ''; - html += '
'; - }) + 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 += '
' + + '
' + + handleData(5, i, list) + + '
' + + '
' + } + if (xs > 0) { + html += '
' + + '
' + + handleData2(5, zs, xs, list) + + '
' + + '
' + } + } else { + html += '
' + + '
' + + handleData3(xs, list) + + '
' + + '
' + } + $('#img-carousel').empty().append(html); + carousel.render({ + elem: '#ID-carousel-demo-image', + width: '1000px', + height: '160px', + interval: 5000, + // indicator:'none' + }); } else { - // html += '
无数据
' - html += '
'; - html += ''; - html += '告警1'; - html += '
'; - - html += '
'; - html += ''; - html += '告警2'; - html += '
'; - - html += '
'; - html += ''; - html += '告警3'; - html += '
'; - - html += '
'; - html += ''; - html += '告警4'; - html += '
'; + $('#abnormalAlarms').empty().append('

暂无数据

'); + } + 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 += '
' + + '
' + + handleData(2, i, list) + + '
' + + '
' + } + if (xs > 0) { + html += '
' + + '
' + + handleData2(2, zs, xs, list) + + '
' + + '
' + } + } else { + html += '
' + + '
' + + handleData3(xs, list) + + '
' + + '
' + } + $('#img-carousel2').empty().append(html); + carousel.render({ + elem: '#ID-carousel-demo-image2', + width: '380px', + height: '160px', + interval: 5000, + // indicator:'none' + }); + } else { + $('#photos').empty().append('

暂无数据

'); } } 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 += '
' + + '' + + '

' + list[index * num - i].personName + '

' + + '
'; + } + return cent; + } + function handleData2(num, zs, xs, list) { + let cent = ''; + for (var i = zs * num; i < zs * num + xs; i++) { + cent += '
' + + '' + + '

' + list[i].personName + '

' + + '
'; + } + return cent; + } + function handleData3(index, list) { + let cent = ''; + for (var i = 0; i < index; i++) { + cent += '
' + + '' + + '

' + list[i].personName + '

' + + '
'; + } + 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); } }) } diff --git a/pages/accessMge/accessMge.html b/pages/accessMge/accessMge.html index 9a1657d..7d0cd2d 100644 --- a/pages/accessMge/accessMge.html +++ b/pages/accessMge/accessMge.html @@ -1,11 +1,12 @@ + - - + + - + @@ -13,12 +14,13 @@ - 出入管理 + 出入管理 + -
+
-
+
@@ -46,7 +48,7 @@
- +
@@ -87,14 +89,14 @@
- +
异常告警
- +
@@ -102,7 +104,7 @@
- +
@@ -110,8 +112,8 @@ class="layui-input">
- - + +
@@ -119,40 +121,40 @@ class="layui-input">
- +
- +
- +
- +
- +
- +
- +
-
+
- +
-
-
+
+
今日累计入场
@@ -179,7 +181,7 @@
- +
@@ -220,14 +222,20 @@
- +
异常告警
- +
@@ -235,7 +243,7 @@
- +
@@ -243,46 +251,47 @@ class="layui-input">
- - + +
-
- +
- +
- +
- +
- +
- +
-
+
- +
- + + \ No newline at end of file