621 lines
29 KiB
Plaintext
621 lines
29 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8" %>
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
|
<!DOCTYPE html>
|
|
<!-- <html lang="zh-CN"> -->
|
|
<!-- BEGIN HEAD -->
|
|
|
|
<head>
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
|
</title>
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
|
|
<style type="text/css">
|
|
.ztree li a.level0 span {
|
|
font-size: 150%;
|
|
}
|
|
|
|
.ztree li a.level1 span {
|
|
font-size: 150%;
|
|
}
|
|
|
|
.ztree li a.level2 span {
|
|
font-size: 150%;
|
|
}
|
|
|
|
.ztree li a.level3 span {
|
|
font-size: 150%;
|
|
}
|
|
|
|
.ztree li a.level4 span {
|
|
font-size: 150%;
|
|
}
|
|
|
|
.white {
|
|
border: 1px solid white;
|
|
}
|
|
|
|
.red {
|
|
border: 1px solid red;
|
|
}
|
|
|
|
img[src=""], img:not([src]) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.gray {
|
|
-webkit-filter: grayscale(100%);
|
|
-moz-filter: grayscale(100%);
|
|
-ms-filter: grayscale(100%);
|
|
-o-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
filter: gray;
|
|
opacity: 0.3;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
var videoWidth = 0;
|
|
var videoHeight = 0;
|
|
var map = new Map();//用于存放websocket
|
|
var map2 = new Map();//用于存放窗口对应的摄像头
|
|
var map3 = new Map();//用于存放摄像头对应的窗口，便于判断是否已经打开
|
|
var this_uuid = '${uuid}';
|
|
var focusid;
|
|
var definitionSt = 'standard';
|
|
var autoSt = 'stop';
|
|
var completeSt = "false";
|
|
|
|
var videoCars = [];
|
|
var nowvideoCars = [];
|
|
var t = null;
|
|
|
|
$(function () {
|
|
var iWidth = "";
|
|
var iHeight = "";
|
|
|
|
if (global_width != null && global_height != null) {
|
|
iWidth = global_width;
|
|
iHeight = global_height;
|
|
} else {
|
|
iWidth = $(window).width();
|
|
iHeight = $(window).height();
|
|
}
|
|
// console.log(iWidth);
|
|
// console.log(iHeight);
|
|
if (iWidth == 0) {
|
|
iWidth = 1150;
|
|
}
|
|
if (iHeight == 0) {
|
|
iHeight = 595;
|
|
}
|
|
$('#camerasMainDiv').css('width', iWidth);
|
|
$('#camerasMainDiv').css('height', iHeight);
|
|
|
|
let videoDiv = document.getElementById("videos");
|
|
videoWidth = videoDiv.offsetWidth;
|
|
videoHeight = videoDiv.offsetHeight
|
|
|
|
let tree = eval("(" + '${cameraslist}' + ")");
|
|
let html = "";
|
|
for (let i = 0; i < tree.length; i++) {
|
|
videoCars.push({
|
|
"id": tree[i].id,
|
|
"time": 10
|
|
})
|
|
nowvideoCars.push({
|
|
"id": tree[i].id,
|
|
"time": 10
|
|
})
|
|
html += "<div id='" + tree[i].id + "' style='width: 100%;height:30px;line-height: 30px;float:left;" +
|
|
"border-bottom: 1px solid rgb(221, 221, 221);padding-left: 10px;cursor: pointer;' " +
|
|
"onclick=\"viewThisCamera('" + tree[i].id + "',true)\">" +
|
|
"<span style='float: left;'>" + tree[i].text + "</span>" +
|
|
"<span id='" + tree[i].id + "Num' style='float: right;padding-right: 5px;'>10</span>" +
|
|
"</div>";
|
|
}
|
|
$('#camerasDoIntree').html(html);
|
|
|
|
// console.log(videoCars)
|
|
// startAuto();
|
|
|
|
});
|
|
|
|
function startAuto() {
|
|
// console.log(nowvideoCars)
|
|
if (nowvideoCars.length > 0) {
|
|
viewThisCamera(nowvideoCars[0].id, true, 'autoIn');
|
|
t = setInterval(function () {
|
|
$('#' + nowvideoCars[0].id + "Num").html(nowvideoCars[0].time);
|
|
nowvideoCars[0].time = Number(nowvideoCars[0].time) - 1;
|
|
if (nowvideoCars[0].time == -1) {
|
|
clearInterval(t);
|
|
$('#' + nowvideoCars[0].id + "Num").css("color", "green");
|
|
$('#' + nowvideoCars[0].id + "Num").html("√");
|
|
|
|
$.post(ext.contextPath + '/timeEfficiency/patrolRecord/doCameraOk.do', {
|
|
patrolRecordId: "${recordId}",
|
|
cameraId: nowvideoCars[0].id
|
|
}, function (data) {
|
|
});
|
|
|
|
nowvideoCars.shift();
|
|
startAuto();
|
|
// console.log(nowvideoCars);
|
|
}
|
|
// if (k < 11) {
|
|
// $('#time').html('倒计时：' + (10 - k) + 's后完成该摄像头视频巡检');
|
|
// k++;
|
|
// } else {
|
|
// $('#time').html('该摄像头视频巡检完成，可切换下一个视频');
|
|
// $.post(ext.contextPath + '/timeEfficiency/patrolRecord/finishCameraPatrol_New.do', {id: pid}, function (data) {
|
|
// $("#table_patrolPoint").bootstrapTable('refresh');
|
|
// $("#cameras").bootstrapTable('refresh');
|
|
// });
|
|
// clearInterval(interval);
|
|
// }
|
|
}, 1000);
|
|
} else {
|
|
clickAuto('stop');
|
|
// nowvideoCars = videoCars;
|
|
completeSt = "true";
|
|
for (let i = 0; i < videoCars.length; i++) {
|
|
nowvideoCars.push({
|
|
"id": videoCars[i].id,
|
|
"time": 10
|
|
})
|
|
}
|
|
<%--if (completeSt == 'true') {--%>
|
|
<%-- alert("已完成巡检，无需重复操作！");--%>
|
|
<%--} else {--%>
|
|
<%-- //完成任务--%>
|
|
<%-- $.post(ext.contextPath + '/timeEfficiency/patrolRecord/dook.do', {--%>
|
|
<%-- patrolRecordId: "${recordId}",--%>
|
|
<%-- }, function (data) {--%>
|
|
<%-- clickAuto('stop');--%>
|
|
<%-- completeSt = "true";--%>
|
|
<%-- });--%>
|
|
<%--}--%>
|
|
}
|
|
}
|
|
|
|
function dofenpin() {
|
|
if (autoSt == 'auto') {
|
|
alert("自动巡检模式下无法操作！");
|
|
$('#fenpin').val($('#fenpinHidden').val());
|
|
return;
|
|
}
|
|
|
|
$('#fenpinHidden').val($('#fenpin').val());
|
|
var f = $('#fenpin').val();
|
|
for (var i = 0; i < 9; i++) {
|
|
if (map.get("video_" + (i + 1)) != null) {
|
|
map.get("video_" + (i + 1)).close();
|
|
//map.delete("video_"+(i+1));
|
|
$.post(ext.contextPath + '/work/camera/closeRPCWebSocket.do', {
|
|
id: map2.get("video_" + (i + 1)),
|
|
time: "now",
|
|
uuid: this_uuid + "video_" + (i + 1)
|
|
}, function () {
|
|
//map3.delete(map2.get("video_"+(i+1)));
|
|
//map2.delete("video_"+(i+1));
|
|
});
|
|
}
|
|
}
|
|
map.clear();
|
|
map2.clear();
|
|
map3.clear();
|
|
$('#videos').html("");
|
|
if (f == 1) {
|
|
$('#videos').append('<div style="width: ' + (videoWidth - 6) + 'px;height: ' + (videoHeight - 6) + 'px;float: left;margin-left: 3px;margin-top: 3px;background-color: black;" id="video_1" class="white" onclick="focusThis(this.id)" ><img id="show_video_1" style="width: 100%;height: 100%;" src="" ></div>');
|
|
} else if (f == 2) {
|
|
for (var i = 0; i < 4; i++) {
|
|
$('#videos').append('<div style="width: ' + (videoWidth / 2 - 6) + 'px;height: ' + (videoHeight / 2 - 6) + 'px;float: left;margin-left: 3px;margin-top: 3px;background-color: black;" id="video_' + (i + 1) + '" class="white" onclick="focusThis(this.id)" ondblclick="dblclickt(this.id)"><img id="show_video_' + (i + 1) + '" style="width:100%;height:100%;" src="" ></div>');
|
|
}
|
|
} else if (f == 3) {
|
|
for (var i = 0; i < 9; i++) {
|
|
$('#videos').append('<div style="width: ' + (videoWidth / 3 - 6) + 'px;height: ' + (videoHeight / 3 - 6) + 'px;float: left;margin-left: 3px;margin-top: 3px;background-color: black;" id="video_' + (i + 1) + '" class="white" onclick="focusThis(this.id)" ondblclick="dblclickt(this.id)"><img id="show_video_' + (i + 1) + '" style="width: 100%;height:100%;" src=""></div>');
|
|
}
|
|
}
|
|
}
|
|
|
|
function focusThis(id) {
|
|
focusid = id;
|
|
/*var oldFocus = $('.red');
|
|
for(var i=0;i<oldFocus.length;i++){
|
|
oldFocus[i].removeClass('red');
|
|
oldFocus[i].addClass('white');
|
|
//oldFocus[i].className = 'white';
|
|
}*/
|
|
$(".red").each(function (i, n) {
|
|
$(this).removeClass('red');
|
|
$(this).removeClass('white');
|
|
})
|
|
$('#' + id).removeClass('white');
|
|
$('#' + id).addClass('red');
|
|
//document.getElementById(id).className='red';
|
|
}
|
|
|
|
function dblclickt(id) {
|
|
if ($('#' + focusid).hasClass('big')) {
|
|
reset();
|
|
} else {
|
|
var f = $('#fenpin').val();
|
|
for (var i = 0; i < f * f; i++) {
|
|
if (id != ('video_' + (i + 1))) {
|
|
$('#video_' + (i + 1)).prop('hidden', 'hidden');
|
|
}
|
|
}
|
|
$('#' + id).css({'height': (videoHeight - 6), 'width': (videoWidth - 6)});
|
|
$('#' + id).addClass('big');
|
|
$('#show_' + id).css({'height': (videoHeight - 6), 'width': (videoWidth - 6)});
|
|
}
|
|
}
|
|
|
|
function reset() {
|
|
var f = $('#fenpin').val();
|
|
$('#' + focusid).removeClass('big');
|
|
for (var i = 0; i < f * f; i++) {
|
|
$('#video_' + (i + 1)).removeAttr('hidden');
|
|
}
|
|
if (f == 1) {
|
|
$('#' + focusid).css({'height': (videoHeight - 6), 'width': (videoWidth - 6)});
|
|
$('#show_' + focusid).css({'height': (videoHeight - 6), 'width': (videoWidth - 6)});
|
|
} else if (f == 2) {
|
|
$('#' + focusid).css({
|
|
'height': (videoHeight / 2 - 6),
|
|
'width': (videoWidth / 2 - 6)
|
|
});
|
|
$('#show_' + focusid).css({
|
|
'height': (videoHeight / 2 - 6),
|
|
'width': (videoWidth / 2 - 6)
|
|
});
|
|
} else {
|
|
$('#' + focusid).css({
|
|
'height': (videoHeight / 3 - 6),
|
|
'width': (videoWidth / 3 - 6)
|
|
});
|
|
$('#show_' + focusid).css({
|
|
'height': (videoHeight / 3 - 6),
|
|
'width': (videoWidth / 3 - 6)
|
|
});
|
|
}
|
|
}
|
|
|
|
function viewThisCamera(id, online, autoIn) {
|
|
if (autoIn != 'autoIn') {
|
|
if (autoSt == 'auto') {
|
|
alert("自动巡检模式下无法操作！");
|
|
return;
|
|
}
|
|
}
|
|
$("#camerasDoIntree div").each(function () {
|
|
let cid = $(this).attr("id");
|
|
if (cid == id) {
|
|
$('#' + cid).css({
|
|
'background': "#428bca",
|
|
'color': "#ffffff"
|
|
});
|
|
} else {
|
|
$('#' + cid).css({
|
|
'background': "#ffffff",
|
|
'color': "#333333"
|
|
});
|
|
}
|
|
});
|
|
|
|
if (!online) {
|
|
swal('该摄像头无法连接。');
|
|
return;
|
|
}
|
|
console.log("前" + map);
|
|
if (map3.get(id) != null) {
|
|
focusThis(map3.get(id));
|
|
} else {
|
|
if (focusid == null || focusid == '') {
|
|
focusThis('video_1');
|
|
}
|
|
var fid = focusid;
|
|
var oldid = map2.get(fid);
|
|
map2.set(fid, id);
|
|
map3.set(id, fid);
|
|
if (map.get(fid) != null) {
|
|
map.get(fid).close();
|
|
$.post(ext.contextPath + '/work/camera/closeRPCWebSocket.do', {
|
|
id: oldid,
|
|
time: "now",
|
|
uuid: this_uuid + fid
|
|
}, function (data) {
|
|
map.delete(fid);
|
|
map3.delete(oldid);
|
|
console.log("关闭旧的流");
|
|
$("#show_" + fid).attr("src", "");
|
|
setTimeout(function () {
|
|
var websocket = null;
|
|
var restartDialog;
|
|
//判断当前浏览器是否支持WebSocket
|
|
if ('WebSocket' in window) {
|
|
var time = "now";
|
|
$.post(ext.contextPath + '/work/camera/getCameraById.do', {
|
|
id: id
|
|
}, function (data) {
|
|
var camera = JSON.parse(data);
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/work/camera/isNet.do?nowUrl=" + window.location.host,
|
|
async: false,
|
|
globle: false,
|
|
dataType: 'json',
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
let hostUrl = window.location.href;
|
|
if (hostUrl.substring(0, 5) == 'https') {
|
|
data.url = data.url.replace('ws', 'wss');
|
|
}
|
|
websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
|
// if (data.type == '1') {
|
|
// websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
|
// } else if (data.type == '2') {
|
|
// websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.netUrl + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
|
// }
|
|
}
|
|
});
|
|
<%--if($('#net').val()=='2'){--%>
|
|
<%-- websocket = new WebSocket("${netws}/videoWebSocket/"+camera.type+"/"+camera.url+"/"+camera.username+"/"+camera.password+"/"+camera.channel+"/"+time+"/"+this_uuid+fid);--%>
|
|
<%--}else{--%>
|
|
<%-- websocket = new WebSocket("${ws}/videoWebSocket/"+camera.type+"/"+camera.url+"/"+camera.username+"/"+camera.password+"/"+camera.channel+"/"+time+"/"+this_uuid+fid);--%>
|
|
<%--}--%>
|
|
map.set(fid, websocket);
|
|
websocket.onerror = function () {
|
|
};
|
|
|
|
//连接成功建立的回调方法
|
|
websocket.onopen = function () {
|
|
console.info('消息滚动websocker开启');
|
|
}
|
|
//接收到消息的回调方法
|
|
websocket.onmessage = function (event) {
|
|
$("#show_" + fid).attr("src", event.data);
|
|
// var result = JSON.parse(event.data);
|
|
// $("#show_" + fid).attr("src", "data:image/*;base64," + result.data);
|
|
}
|
|
})
|
|
// websocket = new WebSocket(ext.basePath.replace("http","ws")+"/videoWebSocket/"+id+"/"+time+"/"+fid);
|
|
// map.set(fid,websocket);
|
|
console.log("后" + map);
|
|
} else {
|
|
alert('当前浏览器 Not support websocket')
|
|
}
|
|
//连接发生错误的回调方法
|
|
|
|
}, 1000);
|
|
});
|
|
} else {
|
|
var websocket = null;
|
|
var restartDialog;
|
|
//判断当前浏览器是否支持WebSocket
|
|
if ('WebSocket' in window) {
|
|
var time = "now";
|
|
$.post(ext.contextPath + '/work/camera/getCameraById.do', {
|
|
id: id
|
|
}, function (data) {
|
|
var camera = JSON.parse(data);
|
|
console.log('当前fid:' + fid);
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/work/camera/isNet.do?nowUrl=" + window.location.host,
|
|
async: false,
|
|
globle: false,
|
|
dataType: 'json',
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
let hostUrl = window.location.href;
|
|
if (hostUrl.substring(0, 5) == 'https') {
|
|
data.url = data.url.replace('ws', 'wss');
|
|
}
|
|
websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
|
// if (data.type == '1') {
|
|
// websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
|
// } else if (data.type == '2') {
|
|
// websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.netUrl + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
|
// }
|
|
}
|
|
});
|
|
<%--if ($('#net').val() == '2') {--%>
|
|
<%-- websocket = new WebSocket("${netws}/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid);--%>
|
|
<%--} else {--%>
|
|
<%-- websocket = new WebSocket("${ws}/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid);--%>
|
|
<%--}--%>
|
|
map.set(fid, websocket);
|
|
websocket.onerror = function () {
|
|
console.log('错误');
|
|
};
|
|
|
|
//连接成功建立的回调方法
|
|
websocket.onopen = function () {
|
|
console.info('消息滚动websocker开启');
|
|
}
|
|
//接收到消息的回调方法
|
|
websocket.onmessage = function (event) {
|
|
// var result = JSON.parse(event.data);
|
|
// console.log(result)
|
|
$("#show_" + fid).attr("src", event.data);
|
|
}
|
|
})
|
|
//websocket = new WebSocket(ext.basePath.replace("http","ws")+"/videoWebSocket/"+id+"/"+time+"/"+fid);
|
|
|
|
} else {
|
|
alert('当前浏览器 Not support websocket')
|
|
}
|
|
//连接发生错误的回调方法
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function cleanAll() {
|
|
if (autoSt == 'auto') {
|
|
alert("自动巡检模式下无法操作！");
|
|
return;
|
|
}
|
|
var f = $('#fenpin').val();
|
|
for (var i = 0; i < f * f; i++) {
|
|
if (map.get("video_" + (i + 1)) != null) {
|
|
map.get("video_" + (i + 1)).close();
|
|
map.delete("video_" + (i + 1));
|
|
$.post(ext.contextPath + '/work/camera/closeRPCWebSocket.do', {
|
|
id: map2.get("video_" + (i + 1)),
|
|
time: "now",
|
|
uuid: this_uuid + "video_" + (i + 1)
|
|
}, function () {
|
|
});
|
|
$("#show_video_" + (i + 1)).attr("src", "");
|
|
}
|
|
map3.delete(map2.get("video_" + (i + 1)));
|
|
map2.delete("video_" + (i + 1));
|
|
}
|
|
}
|
|
|
|
function cleanFocus() {
|
|
if (autoSt == 'auto') {
|
|
alert("自动巡检模式下无法操作！");
|
|
return;
|
|
}
|
|
if (map.get(focusid) != null) {
|
|
map.get(focusid).close();
|
|
map.delete(focusid);
|
|
$.post(ext.contextPath + '/work/camera/closeRPCWebSocket.do', {
|
|
id: map2.get(focusid),
|
|
time: "now",
|
|
uuid: this_uuid + focusid
|
|
}, function () {
|
|
map3.delete(map2.get(focusid));
|
|
map2.delete(focusid);
|
|
});
|
|
$("#show_" + focusid).attr("src", "");
|
|
}
|
|
}
|
|
|
|
function clickAuto(st) {
|
|
if (st == 'stop') {
|
|
clearInterval(t);
|
|
$('#auto').css('color', '#444444');
|
|
$('#auto').css('background-color', '#f4f4f4');
|
|
$('#stop').css('color', '#ffffff');
|
|
$('#stop').css('background-color', '#0AB1DF');
|
|
} else {
|
|
// if (completeSt == 'true') {
|
|
// alert("已完成巡检，无需重复操作！");
|
|
// return;
|
|
// }
|
|
cleanAll();
|
|
$('#fenpin').val("1");
|
|
// $('#fenpinHidden').val("1");
|
|
dofenpin();
|
|
startAuto();
|
|
$('#stop').css('color', '#444444');
|
|
$('#stop').css('background-color', '#f4f4f4');
|
|
$('#auto').css('color', '#ffffff');
|
|
$('#auto').css('background-color', '#0AB1DF');
|
|
}
|
|
autoSt = st;
|
|
}
|
|
|
|
function doComplete() {
|
|
// if (completeSt == 'true') {
|
|
// alert("已完成全部巡检任务，无需重复提交！");
|
|
// return;
|
|
// }
|
|
if (completeSt == 'false') {
|
|
alert("还未完成全部巡检任务，无法提交！");
|
|
} else {
|
|
//完成任务
|
|
$.post(ext.contextPath + '/timeEfficiency/patrolRecord/dook.do', {
|
|
patrolRecordId: "${recordId}",
|
|
}, function (data) {
|
|
// console.log(data)
|
|
$('#completeB').css('color', '#ffffff');
|
|
$('#completeB').css('background-color', '#3e8f3e');
|
|
alert("提交成功！");
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
|
<!-- Content Header (Page header) -->
|
|
<%-- <section class="content-header">--%>
|
|
<%-- <h1 id="head_title"></h1>--%>
|
|
<%-- <ol class="breadcrumb">--%>
|
|
<%-- <li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>--%>
|
|
<%-- <!-- <li class="active">Here</li> -->--%>
|
|
<%-- </ol>--%>
|
|
<%-- </section>--%>
|
|
<!-- Main content -->
|
|
<div id="camerasMainDiv" style="height: 100%;width: 100%;padding: 5px;">
|
|
<div class="form-group form-inline" style="float: left;width:100%;height:40px;margin-bottom: 0px;">
|
|
<div style="float: left;width:100%;">
|
|
<div class="btn-group" style="float: left;">
|
|
<button id="auto" type="button" class="btn btn-default btn-sm"
|
|
style="color: #444444;background-color: #f4f4f4;"
|
|
onclick="clickAuto('auto');">开始
|
|
</button>
|
|
<button id="stop" type="button" class="btn btn-default btn-sm"
|
|
style="color: #ffffff;background-color: #0AB1DF;margin-left: 5px;"
|
|
onclick="clickAuto('stop');">暂停
|
|
</button>
|
|
</div>
|
|
<div class="btn-group" style="float: right;">
|
|
<button id="completeB" type="button" class="btn btn-default btn-sm"
|
|
style="color: #444444;background-color: #f4f4f4;margin-right: 5px;"
|
|
onclick="doComplete();">提交
|
|
</button>
|
|
<label class="form-label" style="margin-left: 5px;">分屏选择</label>
|
|
<select class="form-control select2-selection--single" id="fenpin"
|
|
style="width: 80px;height: 30px;"
|
|
onchange="dofenpin();" placeholder="请选择">
|
|
<!-- <option disabled value>-分屏选择</option> -->
|
|
<option selected value="1">单屏</option>
|
|
<option value="2">2X2</option>
|
|
<option value="3">3X3</option>
|
|
</select>
|
|
<input id="fenpinHidden" type="hidden" value="1">
|
|
<button type="button" class="btn btn-default btn-sm" onclick="cleanFocus();"> 清除当前</button>
|
|
<button type="button" class="btn btn-default btn-sm" style="margin-left: 5px;"
|
|
onclick="cleanAll();">全部清除
|
|
</button>
|
|
<!-- <button type="button" class="btn btn-default btn-sm" style="margin-left: 5px;" onclick="reset();">还原分屏</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height:calc(100% - 60px);float: left;background-color: rgb(255,255,255);">
|
|
<div id="cameralist" style="width: 240px;height:100%;float: left;padding-right: 10px;">
|
|
<div id="camerasDoIntree"
|
|
style="height:100%;overflow:auto;border: 1px solid rgb(221, 221, 221);padding: 5px;border-radius:10px;"></div>
|
|
</div>
|
|
<div id="videos" style="width:calc(100% - 240px);height:100%;border:2px solid gray;float: right;">
|
|
<div style="width: 100%;height: 100%;float: left;margin-left: 3px;margin-top: 3px;background-color: black;"
|
|
id="video_1" class="white" onclick="focusThis(this.id)">
|
|
<img id="show_video_1" style="width: 100%;height: 100%;" src="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /.content -->
|
|
</body>
|
|
|
|
</html> |