监管视频逻辑调整

czt

2026-01-05 aad1f2dd7b10ec03d78d703bc2c31b9e679a82b6

 fzzy-igdss-web/src/main/resources/templates/security/video-list-dept.html

@@ -16,6 +16,7 @@
            height: 100%;
            overflow-y: hidden;
        }

        /* 页面基础重置 */
        body {
            margin: 0;
@@ -97,17 +98,21 @@
            color: #fff;
            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%;
@@ -120,6 +125,7 @@
            box-sizing: border-box;
            overflow: hidden;
        }

        .div_v1 {
            background-color: #333;
            font-size: 24px;
@@ -131,6 +137,7 @@
            box-sizing: border-box;
            z-index: 1; /* 基础层级 */
        }

        /* 选中项：红色边框（覆盖自身周边的白色分隔线） */
        .div_v1.active::after {
            content: '';
@@ -145,6 +152,7 @@
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        .div4 {
            width: 100%;
            height: 100%;
@@ -157,6 +165,7 @@
            box-sizing: border-box;
            overflow: hidden;
        }

        .div_v4 {
            background-color: #333;
            font-size: 24px;
@@ -168,6 +177,7 @@
            box-sizing: border-box;
            z-index: 1; /* 基础层级 */
        }

        /* 选中项：红色边框（覆盖自身周边的白色分隔线） */
        .div_v4.active::after {
            content: '';
@@ -182,6 +192,7 @@
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        .div9 {
            width: 100%;
            height: 100%;
@@ -194,6 +205,7 @@
            box-sizing: border-box;
            overflow: hidden;
        }

        .div_v9 {
            background-color: #333;
            font-size: 24px;
@@ -205,6 +217,7 @@
            box-sizing: border-box;
            z-index: 1; /* 基础层级 */
        }

        /* 选中项：红色边框（覆盖自身周边的白色分隔线） */
        .div_v9.active::after {
            content: '';
@@ -219,9 +232,32 @@
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        .video {
            width: 100%;
            height: 100%;
        }

        .playList {
            position: absolute;
            right: 200px;
            font-size: 16px;
            width: 200px;
        }
        .layui-input {
            background-color: #999;
            border-color: #999;
        }

        /* 遮罩层：覆盖整个容器，透明，点击时触发父div事件 */
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 1; /* 遮罩层在iframe上方 */
        }
    </style>
</head>
@@ -238,10 +274,21 @@
                            <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>

@@ -366,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>
@@ -419,11 +468,13 @@

<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>
<script th:src="@{/common/constant.js}"></script>
<script th:src="@{/security/video-list-dept.js}"></script>
<script th:src="@{/security/flv.min.js}"></script>
<script th:src="@{/security/video-control.js}"></script>
</body>
</html>