240 lines
12 KiB
HTML
240 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="../../css/font.css">
|
||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/dtree/dtree.css">
|
||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/dtree/font/dtreefont.css">
|
||
<link rel="stylesheet" href="../../css/video/video.css">
|
||
<link rel="stylesheet" href="../../plugin/toolTip/mTips.css">
|
||
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||
<script src="../../js/publics/public.js"></script>
|
||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||
<script src="../../plugin/toolTip/mTips.js"></script>
|
||
<script src="../../js/publics/aescbc.js"></script>
|
||
<script src="../../js/publics/aes.js"></script>
|
||
<script src="../../api/commonRequest.js" type="text/javascript"></script>
|
||
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||
<script src="../../plugin/watermark.js"></script>
|
||
<title>视频监控</title>
|
||
</head>
|
||
<script type="text/javascript">
|
||
let text = nickName +"\r\n"+ roleName +"\r\n" + '建设部';
|
||
watermark.load({ watermark_txt: text });
|
||
</script>
|
||
<body>
|
||
<div id="main-box" class="layout">
|
||
<div id="left-box" class="layout">
|
||
<!-- 云台控制 -->
|
||
<div id="left-top" class="layout">
|
||
<div id="left-top-one" class="layout">
|
||
<div id="one-child">
|
||
<div id="yclx" class="layout">
|
||
<!-- <button id="videoRemote" lay-active="videoRemote"></button> -->
|
||
<button id="videoLocal22" onclick="recordVideo2()"></button>
|
||
<p>远程录像</p>
|
||
</div>
|
||
<div id="bdlx" class="layout">
|
||
<!-- <button id="videoLocal"></button> -->
|
||
<button id="videoLocal" onclick="recordVideo()"></button>
|
||
<p>本地录像</p>
|
||
</div>
|
||
</div>
|
||
<div id="two-child" class="layout">
|
||
<div id="yt" class="layout">
|
||
<div id="yt-left" class="layout">
|
||
<button id="left" lay-event="control"></button>
|
||
</div>
|
||
<div id="yt-center" class="layout">
|
||
<button id="up" lay-event="control"></button>
|
||
<button id="down" lay-event="control"></button>
|
||
</div>
|
||
<div id="yt-right" class="layout">
|
||
<button id="right" lay-event="control"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="three-child">
|
||
<div id="yczp" class="layout">
|
||
<!-- <button id="photoRemote" lay-active="photoRemote"></button> -->
|
||
<button id="photoRemote" onclick="screenshot();"></button>
|
||
<p>远程抓拍</p>
|
||
</div>
|
||
<div id="bdzp" class="layout">
|
||
<button id="photoLocal" lay-active="photoLocal"></button>
|
||
<p>本地抓拍</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="left-top-two" class="layout">
|
||
<div id="jj-box" class="layout">
|
||
<div id="jj" class="layout">
|
||
<button id="nearFocus" lay-event="control"></button>
|
||
<button id="farFocus" lay-event="control"></button>
|
||
</div>
|
||
<p>聚焦</p>
|
||
</div>
|
||
<div id="sf-box" class="layout">
|
||
<div id="sf" class="layout">
|
||
<button id="amplify" lay-event="control"></button>
|
||
<button id="shrink" lay-event="control"></button>
|
||
</div>
|
||
<p>缩放</p>
|
||
</div>
|
||
<!-- <div id="gq-box" class="layout">
|
||
<div id="gq" class="layout">
|
||
<button id="apertureMinus" lay-event="control"></button>
|
||
<button id="apertureAdd" lay-event="control"></button>
|
||
</div>
|
||
<p>光圈</p>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- 球机列表 -->
|
||
<div id="left-bottom">
|
||
<div id="search-box">
|
||
<form class="layui-form layout" onsubmit="return false;">
|
||
<input class="layui-input" autocomplete="off" id="keyWord" placeholder="请输入关键字">
|
||
<img src="../../img/video/search.png" id="search-img" alt="搜索" onclick="loadVideoTree()">
|
||
</form>
|
||
</div>
|
||
<div id="device-online-box" class="layout">
|
||
<div class="device-status layout">全部（0）</div>
|
||
<div class="device-status layout">在线（0）</div>
|
||
<div class="device-status layout">离线（0）</div>
|
||
</div>
|
||
<div id="device-tree">
|
||
<ul id="video-tree" class="dtree" style="height: 100%;overflow: auto;margin: 0 2%;" data-id="-1">
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="center-box">
|
||
<div id="video-box">
|
||
<div id="balla" class="split split-horizontal">
|
||
|
||
<div class="layout" id="videoBox">
|
||
<div id="windowbox1" class="ballsplit " ondblclick="ballScreenBig('1')"
|
||
style="width: 100%;height: 100%; pointer-events:auto;">
|
||
<video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted
|
||
controls="controls"></video>
|
||
</div>
|
||
<div id="windowbox2" class="ballsplit " ondblclick="ballScreenBig('1')"
|
||
style="width: 100%;height: 100%; pointer-events:auto;display: none;">
|
||
<video id="videoPlayer2" class="ball-content" autoplay="autoplay" loop="loop" muted
|
||
controls="controls"></video>
|
||
</div>
|
||
<div id="windowbox3" class="ballsplit " ondblclick="ballScreenBig('1')"
|
||
style="width: 100%;height: 100%; pointer-events:auto;display: none;">
|
||
<video id="videoPlayer3" class="ball-content" autoplay="autoplay" loop="loop" muted
|
||
controls="controls"></video>
|
||
</div>
|
||
<div id="windowbox4" class="ballsplit " ondblclick="ballScreenBig('1')"
|
||
style="width: 100%;height: 100%; pointer-events:auto;display: none;">
|
||
<video id="videoPlayer4" class="ball-content" autoplay="autoplay" loop="loop" muted
|
||
controls="controls"></video>
|
||
</div>
|
||
</div>
|
||
<div class="toggle-btn layout" style="height: 7%;">
|
||
<button onclick="oneVideo(this)" class="checkBtn">1</button>
|
||
<button onclick="fourVideo(this)" class="nocheckBtn">4</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="right-box" style="display: none">
|
||
<div id="voi-photo-box">
|
||
<div id="voi-null"></div>
|
||
<div id="voi-photo">
|
||
<div class="voi-item">
|
||
<img src="../../img/testImg/3.jpg">
|
||
<div class="voi-info layout">
|
||
<div class="voi-time layout">
|
||
<img src="../../img/video/alarm.png" alt="告警">
|
||
<p>2024-03-30 12:00:00</p>
|
||
</div>
|
||
<div class="voi-content layout">
|
||
<p>施工机械</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="voi-item">
|
||
<img src="../../img/testImg/1.jpg">
|
||
<div class="voi-info layout">
|
||
<div class="voi-time layout">
|
||
<img src="../../img/video/alarm.png" alt="告警">
|
||
<p>2024-04-22 12:50:55</p>
|
||
</div>
|
||
<div class="voi-content layout">
|
||
<p>施工机械-斗臂车</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="voi-item">
|
||
<img src="../../img/testImg/6.jpg">
|
||
<div class="voi-info layout">
|
||
<div class="voi-time layout">
|
||
<img src="../../img/video/alarm.png" alt="告警">
|
||
<p>2024-04-22 13:24:25</p>
|
||
</div>
|
||
<div class="voi-content layout">
|
||
<p>施工机械</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="voi-item">
|
||
<img src="../../img/testImg/7.jpg">
|
||
<div class="voi-info layout">
|
||
<div class="voi-time layout">
|
||
<img src="../../img/video/alarm.png" alt="告警">
|
||
<p>2024-04-22 13:28:37</p>
|
||
</div>
|
||
<div class="voi-content layout">
|
||
<p>未戴安全帽</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="voi-item">
|
||
<img src="../../img/testImg/5.jpg">
|
||
<div class="voi-info layout">
|
||
<div class="voi-time layout">
|
||
<img src="../../img/video/alarm.png" alt="告警">
|
||
<p>2024-04-22 13:47:18</p>
|
||
</div>
|
||
<div class="voi-content layout">
|
||
<p>未戴安全帽</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="voi-item">
|
||
<img src="../../img/testImg/4.jpg">
|
||
<div class="voi-info layout">
|
||
<div class="voi-time layout">
|
||
<img src="../../img/video/alarm.png" alt="告警">
|
||
<p>2024-04-22 13:50:42</p>
|
||
</div>
|
||
<div class="voi-content layout">
|
||
<p>未戴安全帽</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<canvas id="canvas" style="display:none;" width="640" height="360"></canvas>
|
||
<script type="text/javascript" src="../../js/pages/video/qx/conf.js"></script>
|
||
<script type="text/javascript" src="../../js/pages/video/qx/flv.min.js"></script>
|
||
<script type="text/javascript" src="../../js/pages/video/qx/FileSaver.min.js"></script>
|
||
<script type="text/javascript" src="../../js/pages/video/videoConnect.js"></script>
|
||
|
||
<script src="../../js/pages/video/video.js" type="text/javascript"></script>
|
||
<script src="../../js/pages/video/videoAjax.js" type="text/javascript"></script>
|
||
</html>
|