From 711221e4b28157efc1762508e73e07311aa57a1e Mon Sep 17 00:00:00 2001
From: sgj <1442489573@qq.com>
Date: 星期三, 17 十二月 2025 15:49:38 +0800
Subject: [PATCH] AI事件管理修改
---
fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html | 173 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 130 insertions(+), 43 deletions(-)
diff --git a/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html b/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
index b16c4bb..d91d35c 100644
--- a/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
+++ b/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
@@ -16,6 +16,12 @@
height: 100%;
overflow-y: hidden;
}
+ /* 椤甸潰鍩虹閲嶇疆 */
+ body {
+ margin: 0;
+ padding: 0;
+ background-color: #000;
+ }
.layui-fluid {
position: relative;
@@ -91,63 +97,138 @@
color: #fff;
cursor: pointer;
}
-
+ .sp-table {
+ overflow: auto;
+ }
+ .sp-table::-webkit-scrollbar {
+ display: none; /* 闅愯棌婊氬姩鏉� */
+ }
.fenping_icon {
position: absolute;
right: 30px;
top: 16px;
}
-
+ .div1 {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+ gap: 1px; /* 涓棿1px鐧借壊鍒嗛殧绾� */
+ background-color: #777; /* gap鍜宲adding鐨勯鑹�=鐧借壊鍒嗛殧绾� */
+ padding: 1px; /* 鍛ㄧ晫1px鐧借壊鍒嗛殧绾� */
+ box-sizing: border-box;
+ overflow: hidden;
+ }
.div_v1 {
- width: 99.8%;
- height: 760px;
- float: left;
background-color: #333;
-
- text-align: center;
- color: #FFF;
- font-size: 20px;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
}
-
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .div_v1.active::after {
+ content: '';
+ position: absolute;
+ /* 绾㈡鑼冨洿锛氳秴鍑鸿嚜韬紝鍒氬ソ瑕嗙洊鍛ㄨ竟1px鐧界嚎 */
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ border: 2px solid red; /* 绾㈡瀹藉害鍙皟鏁� */
+ z-index: 2; /* 楂樹簬鑷韩锛岃鐩栫櫧绾匡紱浣庝簬鍏朵粬椤圭殑鍩虹灞傜骇锛屼笉閬尅鍏朵粬鐧界嚎 */
+ box-sizing: border-box;
+ transition: all 0.2s ease;
+ }
+ .div4 {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 1px; /* 涓棿1px鐧借壊鍒嗛殧绾� */
+ background-color: #777; /* gap鍜宲adding鐨勯鑹�=鐧借壊鍒嗛殧绾� */
+ padding: 1px; /* 鍛ㄧ晫1px鐧借壊鍒嗛殧绾� */
+ box-sizing: border-box;
+ overflow: hidden;
+ }
.div_v4 {
- width: 49.88%;
- height: 379.5px;
- float: left;
background-color: #333;
-
- text-align: center;
- color: #FFF;
- font-size: 20px;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
}
-
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .div_v4.active::after {
+ content: '';
+ position: absolute;
+ /* 绾㈡鑼冨洿锛氳秴鍑鸿嚜韬紝鍒氬ソ瑕嗙洊鍛ㄨ竟1px鐧界嚎 */
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ border: 2px solid red; /* 绾㈡瀹藉害鍙皟鏁� */
+ z-index: 2; /* 楂樹簬鑷韩锛岃鐩栫櫧绾匡紱浣庝簬鍏朵粬椤圭殑鍩虹灞傜骇锛屼笉閬尅鍏朵粬鐧界嚎 */
+ box-sizing: border-box;
+ transition: all 0.2s ease;
+ }
+ .div9 {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: 1px; /* 涓棿1px鐧借壊鍒嗛殧绾� */
+ background-color: #777; /* gap鍜宲adding鐨勯鑹�=鐧借壊鍒嗛殧绾� */
+ padding: 1px; /* 鍛ㄧ晫1px鐧借壊鍒嗛殧绾� */
+ box-sizing: border-box;
+ overflow: hidden;
+ }
.div_v9 {
- width: 33.22%;
- height: 252.6px;
- float: left;
background-color: #333;
-
- text-align: center;
- color: #FFF;
- font-size: 20px;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
}
- .bor_t_l {
- border-top: 1px solid #777;
- border-left: 1px solid #777;
- }
-
- .bor_b {
- border-bottom: 1px solid #777;
- }
-
- .bor_r {
- border-right: 1px solid #777;
- }
- .selectWin {
- border: 1px solid #a52222;
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .div_v9.active::after {
+ content: '';
+ position: absolute;
+ /* 绾㈡鑼冨洿锛氳秴鍑鸿嚜韬紝鍒氬ソ瑕嗙洊鍛ㄨ竟1px鐧界嚎 */
+ top: -1px;
+ left: -1px;
+ right: -1px;
+ bottom: -1px;
+ border: 2px solid red; /* 绾㈡瀹藉害鍙皟鏁� */
+ z-index: 2; /* 楂樹簬鑷韩锛岃鐩栫櫧绾匡紱浣庝簬鍏朵粬椤圭殑鍩虹灞傜骇锛屼笉閬尅鍏朵粬鐧界嚎 */
+ box-sizing: border-box;
+ transition: all 0.2s ease;
}
.video {
width: 100%;
height: 100%;
+ }
+ .dept{
+ margin-left: 150px;
+ font-size: 16px;
+ color: #FFFFFF;
+ width: 400px;
+ padding-top: 8px;
}
</style>
</head>
@@ -164,6 +245,10 @@
<h3>
<i></i>瑙嗛瀹炴椂棰勮
</h3>
+ <div id="deptList" class="dept" onclick="showDepotAreaSelect()">
+ <img style="width: 18px" th:src="@{/img/web/security/qh.png}"/>
+ [[${#strings.defaultString(dept.deptName, '-')}]]
+ </div>
<div class="fenping_icon">
<img onclick="fenping(1)" id="f_1" style="width: 30px" th:src="@{/img/web/group/fp_1_active.png}"/>
<img onclick="fenping(4)" id="f_4" style="width: 30px" th:src="@{/img/web/group/fp_4.png}"/>
@@ -171,16 +256,16 @@
</div>
</div>
- <div class="sp-tab-db" style="padding: 5px 10px 15px 10px;">
+ <div class="sp-tab-db" style="padding: 5px 10px 15px 10px;height: 765px;">
<!--涓�鍒嗗睆 榛樿鏄剧ず-->
- <div id="video_1" class="right-videoWrap">
+ <div id="video_1" class="div1">
<div id="f1_d1" onclick="selectWin(1,1)" class="div_v1 bor_t_l bor_b bor_r">
<video class="video" id="video1_1" autoplay="" muted="" playsinline=""></video>
</div>
</div>
<!--鍥涘垎灞� 榛樿鏄剧ず-->
- <div id="video_4" class="right-videoWrap" style="display: none;">
+ <div id="video_4" class="div4" style="display: none;">
<div id="f4_d1" onclick="selectWin(4,1)" class="div_v4 bor_t_l">
<video class="video" id="video4_1" autoplay="" muted="" playsinline=""></video>
</div>
@@ -196,7 +281,7 @@
</div>
<!--涔濆垎灞� 榛樿闅愯棌-->
- <div id="video_9" class="right-videoWrap" style="display: none;">
+ <div id="video_9" class="div9" style="display: none;">
<div id="f9_d1" onclick="selectWin(9,1)" class="div_v9 bor_t_l">
<video class="video" id="video9_1" autoplay="" muted="" playsinline=""></video>
</div>
@@ -345,6 +430,8 @@
<script th:inline="javascript">
var listCamera = [[${listCamera}]];
+ var showDeptList = [[${showDeptList}]];
+ var type = [[${type}]];
</script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
--
Gitblit v1.9.3