<!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 http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<title>监管大屏-视频监管</title>
|
|
<link th:href="@{/group/video.css}" rel="stylesheet" type="text/css">
|
<style>
|
.deptNameStyle {
|
font-family: 微软雅黑, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
}
|
|
.right-videoWrap {
|
padding-top: 10px;
|
height: 830px;
|
}
|
|
.text_fp {
|
font-size: 14px;
|
margin-right: 0px;
|
color: #FFF;
|
}
|
|
.fenping_icon {
|
position: absolute;
|
right: 60px;
|
top: 8px;
|
}
|
|
.text_select_play {
|
font-size: 14px;
|
margin-right: 0px;
|
color: #FFF;
|
}
|
|
.select_play_icon {
|
position: absolute;
|
right: 20px;
|
top: 8px;
|
}
|
.div_v1 {
|
width: 99.88%;
|
height: 829px;
|
float: left;
|
background-color: #333;
|
|
text-align: center;
|
line-height: 826px;
|
color: #FFF;
|
font-size: 20px;
|
}
|
|
.div_v4 {
|
width: 49.88%;
|
height: 414px;
|
float: left;
|
background-color: #333;
|
|
text-align: center;
|
line-height: 413px;
|
color: #FFF;
|
font-size: 20px;
|
}
|
|
.div_v9 {
|
width: 33.23%;
|
height: 275.8px;
|
float: left;
|
background-color: #333;
|
|
text-align: center;
|
line-height: 275.4px;
|
color: #FFF;
|
font-size: 20px;
|
}
|
|
.div_v16 {
|
width: 24.9%;
|
height: 206.5px;
|
float: left;
|
background-color: #333;
|
|
text-align: center;
|
line-height: 206.5px;
|
color: #FFF;
|
font-size: 20px;
|
}
|
|
.bor_t_l {
|
border-top: 1px solid #ff0000;
|
border-left: 1px solid #ff0000;
|
}
|
|
.bor_b {
|
border-bottom: 1px solid #ff0000;
|
}
|
|
.bor_r {
|
border-right: 1px solid #ff0000;
|
}
|
.handSelect {
|
background-color: #1e9fff
|
}
|
.i-main {
|
padding: 0px 30px 0px;
|
width: unset;
|
}
|
.right-videoWrap {
|
height: unset;
|
}
|
.left-m2 .panel-content .panel-content-body .panel-content-body-tr {
|
padding-top: unset;
|
height: 40px;
|
line-height: 40px;
|
}
|
.left-m2 .panel-content .panel-content-body .panel-content-body-tr .body-item {
|
font-size: 18px;
|
}
|
.left-m2 .panel-content .panel-content-head {
|
line-height: unset;
|
font-size: 18px;
|
}
|
.text_select_play {
|
font-size: 16px;
|
}
|
.video {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
</head>
|
<body style="overflow: hidden;">
|
|
<div class="container row-main">
|
<div class="i-top">
|
<h1 ondblclick="changeScreen()" class="i-top-tit"><span th:text="${sysName}">政策性储备粮油监管平台</span></h1>
|
<div class="i-navBar">
|
<a href="javaScript:;" onclick="changePage('index')" class="i-nav3">首页</a>
|
<a href="javaScript:;" onclick="changePage('gis')" class="i-nav4">GIS监管</a>
|
<a href="javaScript:;" onclick="changePage('video')" class="i-nav5 active">视频监管</a>
|
<a href="javaScript:;" onclick="changePage('logout')" class="i-nav6">退出系统</a>
|
</div>
|
<div class="date-time-module">
|
<span id="navBarTime"></span>
|
<div class="i-top-date">
|
<span id="navBarDate"></span>
|
<span id="navBarWeek"></span>
|
</div>
|
</div>
|
<!-- <div id="data"></div> -->
|
|
</div><!--i-top end-->
|
<div class="i-main cl">
|
<div class="left-container">
|
<div class="left-m1">
|
<div class="panel-title">库区信息</div>
|
<div class="panel-content">
|
<div class="panel-box1-item">
|
<div class="company-cut"></div>
|
<h3 id="deptNameBox" class="panel-box1-title t1">
|
<span id="deptName" class="deptNameStyle d1" style="margin-left: 10px;">
|
库区名称1
|
</span>
|
</h3>
|
</div>
|
<div class="panel-box1-item t2">
|
<p><i><img th:src="@{/img/web/group/icon-address.png}"/></i>
|
<span id="deptAddress" class="d1">
|
乌鲁木齐市
|
</span>
|
</p>
|
</div>
|
<div class="panel-box1-item">
|
<p><i><img th:src="@{/img/web/group/icon-user.png}"/></i>
|
<span id="deptContact">
|
张三
|
</span>
|
</p>
|
</div>
|
<div class="panel-box1-item">
|
<p><i><img th:src="@{/img/web/group/icon-phone.png}"/></i>
|
<span id="deptPhone">
|
18638530750
|
</span>
|
</p>
|
</div>
|
</div>
|
</div><!-- i-m1 end -->
|
<div class="left-m2">
|
<div>
|
<div class="panel-title" id="panel-title">监控点信息</div>
|
</div>
|
<div class="panel-content">
|
<div class="panel-content-head">
|
<span class="head-item" style="flex: 1.4">监控名称</span>
|
<span class="head-item" style="flex: 0.6">监控类型</span>
|
</div>
|
|
<div class="panel-content-body" id="inventoryInfoBox">
|
<div id="inventoryInfo">
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙1</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙2</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙3</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙4</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙5</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙6</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙7</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙8</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙9</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙10</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙11</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙12</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙13</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙14</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙15</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
<div class="panel-content-body-tr">
|
<span class="body-item" style="flex: 1.4">安防-北围墙16</span>
|
<span class="body-item" style="flex: 0.6">枪机</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div><!-- left end -->
|
<div class="right-container">
|
<div class="right-bottom bottom-container">
|
<div>
|
<div class="panel-title" id="pieCharTitle">视频监控</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(16)" id="f_16" style="width: 30px" th:src="@{/img/web/group/fp_16.png}"/>
|
</div>
|
</div>
|
<!--一分屏 默认显示-->
|
<div id="video_1" class="right-videoWrap">
|
<div id="f1_d1" 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" class="div_v4 bor_t_l">
|
<video class="video" id="video4_1" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f4_d2" class="div_v4 bor_t_l bor_r">
|
<video class="video" id="video4_2" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f4_d3" class="div_v4 bor_t_l bor_b">
|
<video class="video" id="video4_3" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f4_d4" 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" class="div_v9 bor_t_l">
|
<video class="video" id="video9_1" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d2" class="div_v9 bor_t_l">
|
<video class="video" id="video9_2" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d3" class="div_v9 bor_t_l bor_r">
|
<video class="video" id="video9_3" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d4" class="div_v9 bor_t_l">
|
<video class="video" id="video9_4" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d5" class="div_v9 bor_t_l">
|
<video class="video" id="video9_5" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d6" class="div_v9 bor_t_l bor_r">
|
<video class="video" id="video9_6" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d7" class="div_v9 bor_t_l bor_b">
|
<video class="video" id="video9_7" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d8" class="div_v9 bor_t_l bor_b">
|
<video class="video" id="video9_8" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f9_d9" class="div_v9 bor_t_l bor_b bor_r">
|
<video class="video" id="video9_9" autoplay="" muted="" playsinline=""></video>
|
</div>
|
</div>
|
|
<!--十六分屏 默认隐藏-->
|
<div id="video_16" class="right-videoWrap" style="display: none;">
|
<div id="f16_d1" class="div_v16 bor_t_l">
|
<video class="video" id="video16_1" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d2" class="div_v16 bor_t_l">
|
<video class="video" id="video16_2" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d3" class="div_v16 bor_t_l">
|
<video class="video" id="video16_3" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d4" class="div_v16 bor_t_l bor_r">
|
<video class="video" id="video16_4" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d5" class="div_v16 bor_t_l">
|
<video class="video" id="video16_5" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d6" class="div_v16 bor_t_l">
|
<video class="video" id="video16_6" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d7" class="div_v16 bor_t_l">
|
<video class="video" id="video16_7" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d8" class="div_v16 bor_t_l bor_r">
|
<video class="video" id="video16_8" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d9" class="div_v16 bor_t_l">
|
<video class="video" id="video16_9" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d10" class="div_v16 bor_t_l">
|
<video class="video" id="video16_10" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d11" class="div_v16 bor_t_l">
|
<video class="video" id="video16_11" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d12" class="div_v16 bor_t_l bor_r">
|
<video class="video" id="video16_12" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d13" class="div_v16 bor_t_l bor_b">
|
<video class="video" id="video16_13" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d14" class="div_v16 bor_t_l bor_b">
|
<video class="video" id="video16_14" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d15" class="div_v16 bor_t_l bor_b">
|
<video class="video" id="video16_15" autoplay="" muted="" playsinline=""></video>
|
</div>
|
<div id="f16_d16" class="div_v16 bor_t_l bor_b bor_r">
|
<video class="video" id="video16_16" autoplay="" muted="" playsinline=""></video>
|
</div>
|
</div>
|
|
</div> <!-- right end -->
|
|
</div><!--i-main end-->
|
|
</div>
|
</div>
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
|
<script th:src="@{/ajax/libs/layer/layer.js}"></script>
|
<script th:src="@{/common/constant.js}"></script>
|
<script th:src="@{/common/igds-common.js}"></script>
|
<script th:src="@{/group/video.js}"></script>
|
<script th:inline="javascript">
|
|
var deptCur = [[${deptInfo}]]
|
var deptId = [[${deptId}]];
|
var dicSlogan = [[${dicSlogan}]];
|
var cameraList = [[${cameraList}]];
|
|
//设置定时刷新页面，主要为了防止掉线
|
var timer2;
|
window.onload = function () {
|
if (timer2) {
|
clearInterval(timer2);
|
}
|
timer2 = setInterval(function () {
|
window.location.href = window.location.href;
|
}, 60 * 60 * 1000);
|
};
|
</script>
|
</body>
|
</html>
|
