From 97dfab42d2736e2e91035aad58ed01fc27ad3a7d Mon Sep 17 00:00:00 2001
From: czt <czt18638530771@163.com>
Date: 星期二, 06 一月 2026 11:30:30 +0800
Subject: [PATCH] 大屏视频逻辑调整
---
fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html | 208 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 166 insertions(+), 42 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..064fbd0 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
@@ -17,6 +17,13 @@
overflow-y: hidden;
}
+ /* 椤甸潰鍩虹閲嶇疆 */
+ body {
+ margin: 0;
+ padding: 0;
+ background-color: #000;
+ }
+
.layui-fluid {
position: relative;
margin: 0 auto;
@@ -92,62 +99,165 @@
cursor: pointer;
}
+ .sp-table {
+ overflow: auto;
+ }
+
+ .sp-table::-webkit-scrollbar {
+ display: none; /* 闅愯棌婊氬姩鏉� */
+ }
+
.fenping_icon {
position: absolute;
- right: 30px;
- top: 16px;
+ right: 20px;
+ top: 15px;
+ }
+
+ .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;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
+ }
- text-align: center;
- color: #FFF;
- font-size: 20px;
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .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;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
+ }
- text-align: center;
- color: #FFF;
- font-size: 20px;
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .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;
- }
- .bor_t_l {
- border-top: 1px solid #777;
- border-left: 1px solid #777;
+ font-size: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative; /* 涓虹孩妗嗕吉鍏冪礌瀹氫綅 */
+ box-sizing: border-box;
+ z-index: 1; /* 鍩虹灞傜骇 */
}
- .bor_b {
- border-bottom: 1px solid #777;
+ /* 閫変腑椤癸細绾㈣壊杈规锛堣鐩栬嚜韬懆杈圭殑鐧借壊鍒嗛殧绾匡級 */
+ .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;
}
- .bor_r {
- border-right: 1px solid #777;
- }
- .selectWin {
- border: 1px solid #a52222;
- }
.video {
width: 100%;
height: 100%;
+ }
+
+ .playList {
+ position: absolute;
+ right: 200px;
+ font-size: 16px;
+ width: 200px;
+ }
+ .layui-input {
+ background-color: #999;
+ border-color: #999;
+ }
+
+ /* 閬僵灞傦細瑕嗙洊鏁翠釜瀹瑰櫒锛岄�忔槑锛岀偣鍑绘椂瑙﹀彂鐖禿iv浜嬩欢 */
+ .mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ z-index: 1; /* 閬僵灞傚湪iframe涓婃柟 */
}
</style>
</head>
@@ -164,23 +274,34 @@
<h3>
<i></i>瑙嗛瀹炴椂棰勮
</h3>
+ <div class="playList">
+ <form class="layui-form">
+ <select id="playLan" lay-filter="select_play" class="form-control">
+ <option value="1">鍐呯綉鎾斁</option>
+ <option value="2">澶栫綉鎾斁</option>
+ </select>
+ </form>
+ </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}"/>
- <img onclick="fenping(9)" id="f_9" style="width: 30px" th:src="@{/img/web/group/fp_9.png}"/>
+ <img onclick="fenping(1)" id="f_1" style="width: 38px"
+ th:src="@{/img/web/group/fp_1_active.png}"/>
+ <img onclick="fenping(4)" id="f_4" style="width: 38px"
+ th:src="@{/img/web/group/fp_4.png}"/>
+ <img onclick="fenping(9)" id="f_9" style="width: 38px"
+ th:src="@{/img/web/group/fp_9.png}"/>
</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 +317,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>
@@ -292,11 +413,13 @@
</ul>
</div>
<div class="sp-bianbei fl">
- <button type="button" class="sp-sxBtn sp-czBtn" onmousedown="ptzControl(9)" onmouseup="zoomStop()">
+ <button type="button" class="sp-sxBtn sp-czBtn" onmousedown="ptzControl(9)"
+ onmouseup="zoomStop()">
<i>锛�</i>
</button>
<span>鍙樼劍</span>
- <button type="button" class="sp-fdBtn sp-czBtn" onmousedown="ptzControl(10)" onmouseup="zoomStop()">
+ <button type="button" class="sp-fdBtn sp-czBtn" onmousedown="ptzControl(10)"
+ onmouseup="zoomStop()">
<i>锛�</i>
</button>
</div>
@@ -345,6 +468,7 @@
<script th:inline="javascript">
var listCamera = [[${listCamera}]];
+ 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