From ca18c1315a7dcab0238893bcf68cd34f0ef5fe35 Mon Sep 17 00:00:00 2001
From: sgj <1442489573@qq.com>
Date: 星期三, 15 四月 2026 15:19:35 +0800
Subject: [PATCH] 视频监管添加库区AI事件展示
---
fzzy-igdss-web/src/main/resources/templates/group/video.html | 94 ++++++++++++++++--
fzzy-igdss-web/src/main/resources/static/group/video.css | 88 +++++++++++++++--
fzzy-igdss-web/src/main/resources/static/group/video.js | 112 +++++++++++++++++++++
3 files changed, 268 insertions(+), 26 deletions(-)
diff --git a/fzzy-igdss-web/src/main/resources/static/group/video.css b/fzzy-igdss-web/src/main/resources/static/group/video.css
index 240dbe7..e3a37c9 100644
--- a/fzzy-igdss-web/src/main/resources/static/group/video.css
+++ b/fzzy-igdss-web/src/main/resources/static/group/video.css
@@ -318,7 +318,7 @@
height: 255px;
background: url("../img/web/group/left-box1-monitor.png") no-repeat;
background-size: 100% 100%;
- margin-bottom: 30px;
+ margin-bottom: 18px;
padding: 36px 20px 8px 20px;
box-sizing: border-box;
}
@@ -362,13 +362,14 @@
}
.left-m2 {
+ background: url("../img/web/group/left-box2.png") no-repeat;
+ width: 100%;
+ height: 362px;
+ box-sizing: border-box;
+ margin-bottom: 18px;
position: relative;
- width: 430px;
- height: 610px;
- background: url("../img/web/group/left-box2-monitor.png") no-repeat;
background-size: 100% 100%;
padding: 56px 20px 20px 20px;
- box-sizing: border-box;
}
@@ -379,7 +380,7 @@
background: url("../img/web/group/left-m2-bg.png") no-repeat;
background-size: 100% 100%;
display: flex;
- font-size: 14px;
+ font-size: 3px;
color: #91ceff;
box-sizing: border-box;
}
@@ -392,7 +393,6 @@
.left-m2 .panel-content .panel-content-head .head-item {
flex: 1;
}
-
.left-m2 .panel-content .panel-content-body {
width: 100%;
@@ -418,18 +418,84 @@
height: 30px;
line-height: 30px;
display: flex;
+ margin-top: 6px;
+}
+
+.left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
+ flex: 1;
+ font-size: 3px;
+ color: #ffffff;
+}
+
+
+
+.left-m3 {
+ width: 100%;
+ height: 242px;
+ background: url("../img/web/group/left-box3.png") no-repeat;
+ box-sizing: border-box;
+ position: relative;
+ background-size: 100% 100%;
+ padding: 56px 20px 20px 20px;
+}
+
+
+.left-m3 .panel-content .panel-content-head {
+ width: 100%;
+ height: 31px;
+ line-height: 31px;
+ background: url("../img/web/group/left-m2-bg.png") no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ font-size: 14px;
+ color: #91ceff;
+ box-sizing: border-box;
+}
+
+.left-m3 .head-item,
+.left-m3 .body-item {
+ text-align: center;
+}
+
+.left-m3 .panel-content .panel-content-head .head-item {
+ flex: 1;
+}
+
+.left-m3 .panel-content .panel-content-body {
+ width: 100%;
+ height: calc(100% - 2vw);
+ box-sizing: border-box;
+ overflow: hidden;
+ overflow-y: auto;
+}
+
+.left-m3 .panel-content .panel-content-body::-webkit-scrollbar {
+ width: 6px;
+ background-color: rgba(51, 238, 255, 0.2);
+}
+
+.left-m3 .panel-content .panel-content-body::-webkit-scrollbar-thumb {
+ -webkit-box-shadow: inset 0 0 6px rgba(2, 160, 251, 0.3);
+ background-color: rgba(2, 158, 249, 0.5);
+ border-radius: 3px;
+}
+
+.left-m3 .panel-content .panel-content-body .panel-content-body-tr {
+ width: 100%;
+ height: 30px;
+ line-height: 30px;
+ display: flex;
padding-top: 6px;
padding-bottom: 5px;
border-bottom: 1px solid #4c5354c7;
}
-.left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
+.left-m3 .panel-content .panel-content-body .panel-content-body-tr .body-item {
flex: 1;
font-size: 14px;
color: #ffffff;
user-select: none;
}
-
.panel-box1-item{
width: 100%;
@@ -716,7 +782,7 @@
.data-top-btn:last-child{
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
-
+
}
.data-top-btn:first-child{
@@ -768,7 +834,7 @@
min-width: 100%;
height: 448px;
overflow: auto;
-
+
}
.data-tableBox::-webkit-scrollbar {
diff --git a/fzzy-igdss-web/src/main/resources/static/group/video.js b/fzzy-igdss-web/src/main/resources/static/group/video.js
index e66a7b2..1efce73 100644
--- a/fzzy-igdss-web/src/main/resources/static/group/video.js
+++ b/fzzy-igdss-web/src/main/resources/static/group/video.js
@@ -6,7 +6,11 @@
var cameraIndex = 0; //鐩戞帶涓嬫爣
var cameraTimer; // 搴撳尯瀹氭椂
var windowsNum = 1; //
-var gundongTimer; //鐩戞帶鍒楄〃婊氬姩瀹氭椂鍣�
+var gundongTimer; //AI浜嬩欢婊氬姩鍏�
+var gundongTimer1; //鐩戞帶鍒楄〃婊氬姩瀹氭椂鍣�
+
+
+var eventDeptList = null;
$(function () {
// 鍒濆鍖栭〉闈�
@@ -24,10 +28,15 @@
initDicSlogan();
//鐩戞帶鐐逛俊鎭�傚簲婊氬姩
- initScrollbar(60);
+ initScrollbar1(60);
+
//搴撳尯淇℃伅
renderDeptArea();
+
+ //璇锋眰鐩戠搴撳尯淇℃伅
+ ajaxDeptList();
+ initScrollbar(60);
}
// socket淇℃伅杩斿洖铏曠悊
@@ -38,6 +47,83 @@
dicSlogan = data;
initDicSlogan();
}
+}
+
+
+/**
+ * 璇锋眰鑾峰彇搴撳尯鐩稿叧淇℃伅
+ */
+function ajaxDeptList() {
+ deptList = null;
+ $.ajax({
+ type: "POST",
+ url: "/group/index-dept-list",
+ dataType: "json",
+ contentType: "application/json;charset=UTF-8",
+ data: JSON.stringify({
+ "companyId": companyId
+ }),
+ success: function (result) {
+ if (result.code == "0000") {
+ eventDeptList = result.data;
+ renderMsg();
+ }
+ },
+ error: function (error) {
+
+ }
+ });
+}
+
+/**
+ * 鏇存柊AI鍔ㄦ�佸垎鏋�
+ * @param data
+ */
+function renderMsg() {
+ var html = '';
+ var num1 = '';
+ var num7 = '';
+ var flag = false;
+ if (eventDeptList != null && eventDeptList.length > 0) {
+ $.each(eventDeptList, function (index, item) {
+ if (item.dailyTotal === 0) {
+ num1 = '褰撴棩涓�鍒囨甯�';
+ } else if (item.dailyTotal < 0) {
+ num1 = '鏈娴嬪埌缃戝叧';
+ } else {
+ num1 = '褰撴棩鏁伴噺' + item.dailyTotal + '涓�';
+ }
+ if (item.warnNum7 === 0) {
+ num7 = '杩戜竷澶╀竴鍒囨甯�';
+ } else {
+ num7 = '杩戜竷澶╂暟閲�' + item.warnNum7 + '涓�';
+ }
+ html += '<div class="panel-content-body-tr">';
+ if (item.dailyTotal > 0) {
+ flag = true;
+ }
+ // if (item.warnNum7 > 10) {
+ // flag = true;
+ // html += '<span class="body-item sp" style="color: #bc2032;flex: 1.5;">' + item.deptName + '</span>';
+ // html += '<span class="body-item sp" style="color: #bc2032;">' + num1 + '</span>';
+ // html += '<span class="body-item sp" style="color: #bc2032;">' + num7 + '</span>';
+ // } else if (item.warnNum7 > 1 && item.warnNum7 < 10) {
+ // flag = true;
+ // html += '<span class="body-item sp" style="color: #f37b3d;flex: 1.5;">' + item.deptName + '</span>';
+ // html += '<span class="body-item sp" style="color: #f37b3d;">' + num1+ '</span>';
+ // html += '<span class="body-item sp" style="color: #f37b3d;">' + num7 + '</span>';
+ // }else {
+ html += '<span class="body-item sp" style="flex: 1.5;">' + item.deptName + '</span>';
+ html += '<span class="body-item sp">' + num1 + '</span>';
+ html += '<span class="body-item sp">' + num7 + '</span>';
+ // }
+ html += '</div>';
+ })
+ }
+ if (flag) {
+ $("#panel-title").html('搴撳尯AI浜嬩欢淇℃伅 <i class="dot"></i>');
+ }
+ $("#inventoryInfo").html(html);
}
// 娓叉煋搴撳尯淇℃伅
@@ -103,7 +189,7 @@
html += '<span class="body-item" style="flex: 0.6"></span>';
html += '</div>';
}
- $("#inventoryInfo").html(html);
+ $("#inventoryInfo1").html(html);
cameraSwitch1();
}
@@ -337,6 +423,26 @@
return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
}
+//鐩戞帶鐐逛俊鎭粴鍔�
+function initScrollbar1(num) {
+ gundongTimer1 = setInterval(function () {
+ if (!hasScrollbar1()) {
+ document.getElementById('inventoryInfoBox1').scrollTop = 0;
+ } else {
+ if (document.getElementById('inventoryInfoBox1').scrollTop >= (document.getElementById('inventoryInfo1').clientHeight - document.getElementById('inventoryInfoBox1').clientHeight)) {
+ document.getElementById('inventoryInfoBox1').scrollTop = 0;
+ } else {
+ document.getElementById('inventoryInfoBox1').scrollTop++;
+ }
+ }
+ }, num);
+}
+
+//鍒ゆ柇搴曢儴鏄惁鍑虹幇婊氬姩鏉�
+function hasScrollbar1() {
+ return document.getElementById('inventoryInfo1').clientHeight > document.getElementById('inventoryInfoBox1').clientHeight;
+}
+
// 鍙充笅瑙掓彁閱掍俊鎭�
function showTip(msg) {
layer.msg(msg);
diff --git a/fzzy-igdss-web/src/main/resources/templates/group/video.html b/fzzy-igdss-web/src/main/resources/templates/group/video.html
index 6faf4e1..04404d4 100644
--- a/fzzy-igdss-web/src/main/resources/templates/group/video.html
+++ b/fzzy-igdss-web/src/main/resources/templates/group/video.html
@@ -108,26 +108,73 @@
width: unset;
}
.right-videoWrap {
- height: unset;
+ height: unset;
}
- .left-m2 .panel-content .panel-content-body .panel-content-body-tr {
- padding-top: unset;
- height: 40px;
+ /* ========== AI浜嬩欢鍒楄〃鏍稿績鏍峰紡 ========== */
+ .left-m2 .panel-content .panel-content-head {
line-height: 40px;
+ font-size: 18px;
+ display: flex; /* 琛ㄥごflex甯冨眬锛岀簿鍑嗗垎閰嶅垪瀹� */
+ width: 100%;
+ }
+ /* 琛ㄥご鍒楀绮惧噯鍒嗛厤锛氭墍灞炲簱鐐瑰崰姣旀渶楂橈紝杩戜竷澶╂暟閲忛鐣欒冻澶熷搴﹂槻鎹㈣ */
+ .left-m2 .panel-content .panel-content-head .head-item:nth-child(1) {
+ flex: 2; /* 鎵�灞炲簱鐐癸細瀹藉垪锛岄�傞厤闀垮悕绉� */
+ white-space: nowrap; /* 寮哄埗涓嶆崲琛� */
+ text-align: center;
+ }
+ .left-m2 .panel-content .panel-content-head .head-item:nth-child(2) {
+ flex: 1.2; /* 褰撴棩鍒嗘瀽锛氫腑绛夊搴� */
+ white-space: nowrap; /* 寮哄埗涓嶆崲琛� */
+ text-align: center;
+ }
+ .left-m2 .panel-content .panel-content-head .head-item:nth-child(3) {
+ flex: 1.2; /* 杩戜竷澶╂暟閲忥細鍔犲鍒楀锛屽己鍒朵笉鎹㈣ */
+ white-space: nowrap; /* 鏍稿績锛氱姝㈣〃澶存崲琛� */
+ text-align: center;
+ }
+ /* 鍒楄〃椤规牱寮忥細瀹屾暣灞曠ず鏂囧瓧锛岃嚜閫傚簲琛岄珮 */
+ .left-m2 .panel-content .panel-content-body .panel-content-body-tr {
+ padding-top: unset;
+ height: auto; /* 鑷�傚簲琛岄珮 */
+ line-height: 22px; /* 閫傞厤鎹㈣鍚庣殑琛岄棿璺� */
+ padding: 8px 2px;
+ display: flex; /* 鍜岃〃澶村垪瀹藉榻� */
+ width: 100%;
+ box-sizing: border-box;
}
.left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
- font-size: 18px;
+ font-size: 16px;
+ padding: 0 8px;
+ white-space: normal; /* 鍒楄〃椤瑰厑璁告崲琛岋紝瀹屾暣灞曠ず鍐呭 */
+ word-wrap: break-word; /* 闀挎枃鏈己鍒舵崲琛� */
+ text-align: center;
+ box-sizing: border-box;
}
- .left-m2 .panel-content .panel-content-head {
- line-height: unset;
- font-size: 18px;
+ /* 鍒楄〃椤瑰垪瀹藉拰琛ㄥご涓ユ牸瀵归綈 */
+ .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item:nth-child(1) {
+ flex: 2;
}
+ .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item:nth-child(2) {
+ flex: 1.2;
+ }
+ .left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item:nth-child(3) {
+ flex: 1.2;
+ }
+ /* ========== 鏍稿績鏍峰紡缁撴潫 ========== */
.text_select_play {
font-size: 16px;
}
.video {
width: 100%;
height: 100%;
+ }
+ /* 鍒楄〃瀹瑰櫒锛氬唴瀹硅繃澶氭椂婊氬姩锛屼笉鎸ゅ帇甯冨眬 */
+ #inventoryInfoBox {
+ width: 100%;
+ box-sizing: border-box;
+ overflow-y: auto;
+ max-height: 300px;
}
</style>
</head>
@@ -192,7 +239,29 @@
</div><!-- i-m1 end -->
<div class="left-m2">
<div>
- <div class="panel-title" id="panel-title">鐩戞帶鐐逛俊鎭�</div>
+ <div class="panel-title" id="panel-title">搴撳尯AI浜嬩欢淇℃伅</div>
+ </div>
+ <div class="panel-content">
+ <div class="panel-content-head">
+ <span class="head-item">鎵�灞炲簱鐐�</span>
+ <span class="head-item">褰撴棩鍒嗘瀽</span>
+ <span class="head-item">杩戜竷澶╂暟閲�</span> <!-- 淇琛ㄥご鏂囧瓧锛屽彇娑堟崲琛� -->
+ </div>
+
+ <div class="panel-content-body" id="inventoryInfoBox">
+ <div id="inventoryInfo">
+ <!-- <div class="panel-content-body-tr">-->
+ <!-- <span class="body-item">瀹夐槻-鍖楀洿澧�1</span>-->
+ <!-- <span class="body-item">鏋満</span>-->
+ <!-- <span class="body-item">12</span>-->
+ <!-- </div>-->
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="left-m3">
+ <div>
+ <div class="panel-title" id="panel-title1">鐩戞帶鐐逛俊鎭�</div>
</div>
<div class="panel-content">
<div class="panel-content-head">
@@ -200,8 +269,8 @@
<span class="head-item" style="flex: 0.6">鐩戞帶绫诲瀷</span>
</div>
- <div class="panel-content-body" id="inventoryInfoBox">
- <div id="inventoryInfo">
+ <div class="panel-content-body" id="inventoryInfoBox1">
+ <div id="inventoryInfo1">
<div class="panel-content-body-tr">
<span class="body-item" style="flex: 1.4">瀹夐槻-鍖楀洿澧�1</span>
<span class="body-item" style="flex: 0.6">鏋満</span>
@@ -409,6 +478,7 @@
var dicSlogan = [[${dicSlogan}]];
var deptList = [[${deptList}]];
+
//璁剧疆瀹氭椂鍒锋柊椤甸潰锛屼富瑕佷负浜嗛槻姝㈡帀绾�
var timer2;
window.onload = function () {
@@ -421,4 +491,4 @@
};
</script>
</body>
-</html>
+</html>
\ No newline at end of file
--
Gitblit v1.9.3