cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视频监控

This commit is contained in:
cwchen 2024-03-30 17:39:43 +08:00
parent b0267a1994
commit 3f4f22058d
5 changed files with 478 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/index/index.css
View File

@ -23,6 +23,8 @@ body {
#left-box {
width: 49%;
height: 100%;
padding-top: 0.85%;
box-sizing: border-box;
}
#pro-introduct {
@ -58,6 +60,8 @@ body {
height: 100%;
flex-direction: column;
justify-content: space-between;
padding-top: 0.85%;
box-sizing: border-box;
}
#real-time-monitor {

322
css/video/video.css
View File

@ -14,4 +14,324 @@ body {
display: flex;
align-items: center;
justify-content: center;
}
}
#main-box {
width: 100%;
height: 100%;
justify-content: space-evenly;
}
/* 左侧样式 start */
#left-box,
#right-box {
width: 21.3%;
height: 100%;
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
padding-top: 0.85%;
}
#left-top {
width: 100%;
height: 39%;
background: url("../../img/video/ytkz.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
flex-direction: column;
justify-content: space-evenly;
}
#left-top p {
font-size: 14px;
margin-top: 5px;
}
#left-top-one {
width: 100%;
height: 70%;
justify-content: space-evenly;
}
#one-child,
#three-child {
width: 20%;
height: 100%;
}
#two-child {
width: 52%;
height: 100%;
padding-top: 10%;
box-sizing: border-box;
}
#yclx,
#bdlx,
#yczp,
#bdzp {
width: 100%;
height: 50%;
flex-direction: column;
padding-top: 50%;
box-sizing: border-box;
}
/* 远程录像 */
#yclx button {
width: 48px;
height: 48px;
background: url("../../img/video/ptz_nocheck/yclx_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
border: none;
cursor: pointer;
}
/* 本地录像 */
#bdlx button {
width: 48px;
height: 48px;
background: url("../../img/video/ptz_nocheck/bdlx_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
border: none;
cursor: pointer;
}
/* 远程抓拍 */
#yczp button {
width: 48px;
height: 48px;
background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
border: none;
cursor: pointer;
}
/* 本地抓拍 */
#bdzp button {
width: 48px;
height: 48px;
background: url("../../img/video/ptz_nocheck/bdzp_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
border: none;
cursor: pointer;
}
#yt {
width: 204px;
height: 204px;
background: url("../../img/video/ptz_nocheck/yt_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
border: none;
}
#yt-left,
#yt-center,
#yt-right {
width: 30%;
height: 100%;
}
#yt-center {
flex-direction: column;
justify-content: space-around;
}
#yt button,
#left-top-two button {
width: 48px;
height: 48px;
background-color: transparent;
cursor: pointer;
border: none;
}
#yt-center button:nth-child(1) {
margin-top: -31%;
}
#yt-center button:nth-child(2) {
margin-bottom: -31%;
}
#left-top-two {
width: 100%;
height: 26%;
justify-content: space-evenly;
}
#jj-box,
#sf-box,
#gq-box {
width: 30%;
height: 100%;
flex-direction: column;
}
#jj {
width: 98px;
height: 48px;
background: url("../../img/video/ptz_nocheck/jj_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
}
#sf {
width: 98px;
height: 48px;
background: url("../../img/video/ptz_nocheck/sf_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
}
#gq {
width: 98px;
height: 48px;
background: url("../../img/video/ptz_nocheck/gq_nocheck.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
}
#left-bottom {
width: 100%;
height: 57.8%;
background: url("../../img/video/ball_list.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
}
#search-box {
width: 100%;
height: 50px;
margin-top: 12%;
}
.layui-form .layui-input {
width: 80%;
margin: 0 10% 0 10%;
}
#search-img {
position: relative;
left: -17%;
cursor: pointer;
}
#device-online-box {
width: 100%;
height: 32px;
justify-content: space-evenly;
}
#device-online-box .device-status {
width: 25%;
height: 100%;
font-weight: 500;
font-size: 16px;
line-height: 19px;
text-align: center;
font-style: normal;
text-transform: none;
}
#device-online-box .device-status:nth-child(1) {
background: rgba(217, 217, 217, 0.01);
box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
border-radius: 2px 2px 2px 2px;
border: 1px solid #79FFFF;
color: #79FFFF;
}
#device-online-box .device-status:nth-child(2) {
background: rgba(217, 217, 217, 0.01);
box-shadow: inset 2px 2px 4px 0px rgba(121, 255, 255, 0.5);
border-radius: 2px 2px 2px 2px;
border: 1px solid #79FFFF;
color: #79FFFF;
opacity: 0.6;
}
#device-online-box .device-status:nth-child(3) {
background: rgba(217, 217, 217, 0.01);
box-shadow: inset 2px 2px 4px 0px rgba(255, 84, 61, 0.5);
border-radius: 2px 2px 2px 2px;
border: 1px solid #FF543D;
opacity: 0.6;
color: #FF543DFF;
}
#device-tree {
width: 100%;
height: calc(88% - 82px);
}
/* 左侧样式 end */
/* 中侧样式 start */
#center-box {
width: 54%;
height: 100%;
box-sizing: border-box;
padding-top: 0.85%;
}
#video-box {
width: 100%;
height: 100%;
background: url("../../img/video/spjk.png") no-repeat 0 0 / 100% 100%;
background-position: center center !important;
}
/* 中侧样式 start */
/* 右侧样式 start */
#voi-photo-box {
width: 100%;
height: 100%;
background: url("../../img/video/wzzp.png") no-repeat 0 0 / 100% 100%;
}
#voi-null {
width: 100%;
height: 5%;
}
#voi-photo {
width: 100%;
height: 95%;
box-sizing: border-box;
overflow-y: auto;
}
.voi-item {
width: 100%;
height: 250px;
margin-bottom: 10px;
box-sizing: border-box;
padding: 3%;
font-size: 15px;
}
.voi-item>img {
object-fit: cover;
width: 100%;
height: 80%;
}
.voi-item .voi-info {
width: 100%;
height: 20%;
}
.voi-time,
.voi-content {
width: 50%;
height: 100%;
justify-content: space-between;
}
.voi-content {
justify-content: end;
}
/* 右侧样式 start */

BIN
img/video/voi_photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

8
js/pages/video/video.js
View File

@ -0,0 +1,8 @@
let layer, form;
layui.use(['layer', 'form'], function () {
form = layui.form;
layer = layui.layer;
$("#voi-photo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
$("body").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
console.log("选中的标段编码：" + parent.$('#bidPro').val())
});

146
pages/video/video.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -13,10 +14,153 @@
<script src="../../plugin/toolTip/mTips.js"></script>
<script src="../../js/publics/aescbc.js"></script>
<script src="../../api/commonRequest.js" type="text/javascript"></script>
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
<title>视频监控</title>
</head>
<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></button>
<p>远程录像</p>
</div>
<div id="bdlx" class="layout">
<button></button>
<p>本地录像</p>
</div>
</div>
<div id="two-child" class="layout">
<div id="yt" class="layout">
<div id="yt-left" class="layout">
<button></button>
</div>
<div id="yt-center" class="layout">
<button></button>
<button></button>
</div>
<div id="yt-right" class="layout">
<button></button>
</div>
</div>
</div>
<div id="three-child">
<div id="yczp" class="layout">
<button></button>
<p>远程抓拍</p>
</div>
<div id="bdzp" class="layout">
<button></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></button>
<button></button>
</div>
<p>聚焦</p>
</div>
<div id="sf-box" class="layout">
<div id="sf" class="layout">
<button></button>
<button></button>
</div>
<p>缩放</p>
</div>
<div id="gq-box" class="layout">
<div id="gq" class="layout">
<button></button>
<button></button>
</div>
<p>光圈</p>
</div>
</div>
</div>
<!-- 球机列表 -->
<div id="left-bottom">
<div id="search-box">
<form class="layui-form layout">
<input class="layui-input" autocomplete="off" placeholder="请输入关键字">
<img src="../../img/video/search.png" id="search-img" alt="搜索">
</form>
</div>
<div id="device-online-box" class="layout">
<div class="device-status layout">全部（100）</div>
<div class="device-status layout">在线（20）</div>
<div class="device-status layout">离线（80）</div>
</div>
<div id="device-tree"></div>
</div>
</div>
<div id="center-box">
<div id="video-box">
</div>
</div>
<div id="right-box">
<div id="voi-photo-box">
<div id="voi-null"></div>
<div id="voi-photo">
<div class="voi-item">
<img src="../../img/video/voi_photo.png">
<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/video/voi_photo.png">
<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/video/voi_photo.png">
<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/video/voi_photo.png">
<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>
</div>
</div>
</div>
</body>
<script src="../../js/pages/video/video.js" type="text/javascript"></script>
</html>