<!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>
|
