From 51faf3e9c3c613e7fb12db6c88356946f2429e0c Mon Sep 17 00:00:00 2001
From: czt <czt18638530771@163.com>
Date: 星期五, 12 十二月 2025 17:35:30 +0800
Subject: [PATCH] 调整安防视频页面及逻辑
---
fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html | 355 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 355 insertions(+), 0 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
new file mode 100644
index 0000000..b16c4bb
--- /dev/null
+++ b/fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html
@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="zh-cn" xmlns:th=http://www.thymeleaf.org>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="renderer" content="webkit">
+ <title>鏅烘収绮簱绠＄悊骞冲彴-鐩戞帶鍒楄〃</title>
+
+ <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/layui.css}"/>
+ <link rel="stylesheet" th:href="@{/security/video-list.css}">
+
+ <style>
+ html, body, .full {
+ width: 100%;
+ height: 100%;
+ overflow-y: hidden;
+ }
+
+ .layui-fluid {
+ position: relative;
+ margin: 0 auto;
+ padding: unset;
+ }
+
+ .layui-col-space20 {
+ margin: unset;
+ }
+
+ .layui-col-space20 > * {
+ padding: 10px 5px;
+ }
+
+ .sp-showItem2 {
+ height: 690px;
+ }
+
+ .sp-box {
+ height: 820px;
+ }
+
+ .sp-rl > span {
+ line-height: 50px;
+ color: #bbc3cd;
+ font-size: 20px;
+ }
+
+ .sp-table {
+ height: 355px;
+ }
+
+ .pdgxq-table1 {
+ background-color: transparent;
+ margin: 0;
+ }
+
+ .pdgxq-table1 thead tr th {
+ color: #ef344a;
+ font-size: 18px;
+ }
+
+ .pdgxq-table1 thead tr {
+ background: #141C25 !important;
+ border-bottom: 1px solid #ef344a;
+ }
+
+ .layui-table td, .layui-table th {
+ padding: 9px 5px;
+ }
+
+ .pdgxq-table1 th, .pdgxq-table1 td {
+ text-align: center;
+ min-height: 32px;
+ line-height: 32px;
+ font-size: 14px;
+ }
+
+ .pdgxq-table1 tbody tr:nth-child(odd) {
+ background-color: #262d33;
+ }
+
+ .pdgxq-table1 td em {
+ color: #ef344a;
+ }
+
+ .layui-table td, .layui-table th {
+ padding: 9px 5px;
+ }
+
+ .pdgxq-table1 td {
+ color: #fff;
+ cursor: pointer;
+ }
+
+ .fenping_icon {
+ position: absolute;
+ right: 30px;
+ top: 16px;
+ }
+
+ .div_v1 {
+ width: 99.8%;
+ height: 760px;
+ float: left;
+ background-color: #333;
+
+ text-align: center;
+ color: #FFF;
+ font-size: 20px;
+ }
+
+ .div_v4 {
+ width: 49.88%;
+ height: 379.5px;
+ float: left;
+ background-color: #333;
+
+ text-align: center;
+ color: #FFF;
+ font-size: 20px;
+ }
+
+ .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;
+ }
+
+ .bor_b {
+ border-bottom: 1px solid #777;
+ }
+
+ .bor_r {
+ border-right: 1px solid #777;
+ }
+ .selectWin {
+ border: 1px solid #a52222;
+ }
+ .video {
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+</head>
+
+<body class="pdgxq-body">
+<div class="i-container">
+ <div class="jmkt-main">
+ <div class="layui-fluid">
+ <div class="sp-boxWrap layui-row layui-col-space20">
+ <div class="layui-col-lg9 layui-col-md9">
+ <div class="pdgxq-m1-left sp-box">
+
+ <div class="pdgxq-H">
+ <h3>
+ <i></i>瑙嗛瀹炴椂棰勮
+ </h3>
+ <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}"/>
+ </div>
+ </div>
+
+ <div class="sp-tab-db" style="padding: 5px 10px 15px 10px;">
+ <!--涓�鍒嗗睆 榛樿鏄剧ず-->
+ <div id="video_1" class="right-videoWrap">
+ <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="f4_d1" onclick="selectWin(4,1)" class="div_v4 bor_t_l">
+ <video class="video" id="video4_1" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f4_d2" onclick="selectWin(4,2)" class="div_v4 bor_t_l bor_r">
+ <video class="video" id="video4_2" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f4_d3" onclick="selectWin(4,3)" class="div_v4 bor_t_l bor_b">
+ <video class="video" id="video4_3" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f4_d4" onclick="selectWin(4,4)" class="div_v4 bor_t_l bor_b bor_r">
+ <video class="video" id="video4_4" autoplay="" muted="" playsinline=""></video>
+ </div>
+ </div>
+
+ <!--涔濆垎灞� 榛樿闅愯棌-->
+ <div id="video_9" class="right-videoWrap" 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>
+ <div id="f9_d2" onclick="selectWin(9,2)" class="div_v9 bor_t_l">
+ <video class="video" id="video9_2" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f9_d3" onclick="selectWin(9,3)" class="div_v9 bor_t_l bor_r">
+ <video class="video" id="video9_3" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f9_d4" onclick="selectWin(9,4)" class="div_v9 bor_t_l">
+ <video class="video" id="video9_4" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f9_d5" onclick="selectWin(9,5)" class="div_v9 bor_t_l">
+ <video class="video" id="video9_5" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f9_d6" onclick="selectWin(9,6)" class="div_v9 bor_t_l bor_r">
+ <video class="video" id="video9_6" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f9_d7" onclick="selectWin(9,7)" class="div_v9 bor_t_l bor_b">
+ <video class="video" id="video9_7" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f9_d8" onclick="selectWin(9,8)" class="div_v9 bor_t_l bor_b">
+ <video class="video" id="video9_8" autoplay="" muted="" playsinline=""></video>
+ </div>
+ <div id="f9_d9" onclick="selectWin(9,9)" class="div_v9 bor_t_l bor_b bor_r">
+ <video class="video" id="video9_9" autoplay="" muted="" playsinline=""></video>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--pdgxq-m1-left end-->
+ <div class="layui-col-lg3 layui-col-md3">
+ <div class="pdgxq-m1-right sp-box" style="height: 400px">
+ <div class="pdgxq-H">
+ <h3>
+ <i></i>浜戝彴鎺у埗
+ </h3>
+ </div>
+ <div class="sp-cz-wrap">
+ <div class="sp-cz-box">
+ <ul>
+ <li class="sp-cz-l1">
+ <a href="javascript:;" onmousedown="ptzControl(5)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l2">
+ <a href="javascript:;" onmousedown="ptzControl(1)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l3">
+ <a href="javascript:;" onmousedown="ptzControl(7)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l4">
+ <a href="javascript:;" onmousedown="ptzControl(3)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l5">
+ <a href="javascript:;">
+ </a>
+ </li>
+ <li class="sp-cz-l6">
+ <a href="javascript:;" onmousedown="ptzControl(4)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l7">
+ <a href="javascript:;" onmousedown="ptzControl(6)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a>
+ </li>
+ <li class="sp-cz-l8">
+ <a href="javascript:;" onmousedown="ptzControl(2)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a></li>
+ <li class="sp-cz-l9">
+ <a href="javascript:;" onmousedown="ptzControl(8)"
+ onmouseup="moveStop()">
+ <img th:src="@{/img/web/security/sp-arrow.png}"/>
+ </a></li>
+ </ul>
+ </div>
+ <div class="sp-bianbei fl">
+ <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()">
+ <i>锛�</i>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div class="pdgxq-m1-right sp-box" style="height: 410px;margin-top: 10px">
+ <div class="pdgxq-H">
+ <h3>
+ <i></i>璁惧鍒楄〃
+ </h3>
+ </div>
+ <div class="sp-table-box">
+ <div class="sp-table">
+
+ <table class="layui-table pdgxq-table1" lay-skin="nob">
+ <colgroup>
+ <col width="70%">
+ <col width="15%">
+ <col width="15%">
+ </colgroup>
+ <thead>
+ <tr>
+ <th>鍚嶇О</th>
+ <th>绫诲瀷</th>
+ <th>鐘舵��</th>
+ </tr>
+ </thead>
+ <tbody id="cameraList">
+
+ </tbody>
+ </table>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <!--pdgxq-m1-left end-->
+ </div>
+ <!--sp-boxWrap end-->
+ </div>
+ </div>
+ <!--jmkt-main end-->
+</div>
+<!--i-container end-->
+
+
+<script th:inline="javascript">
+ var listCamera = [[${listCamera}]];
+</script>
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/ajax/libs/layui/layui.js}"></script>
+<script th:src="@{/common/constant.js}"></script>
+<script th:src="@{/security/video-list-dept.js}"></script>
+<script th:src="@{/security/video-control.js}"></script>
+</body>
+</html>
--
Gitblit v1.9.3