first commit
This commit is contained in:
842
WebRoot/jsp/work/cameraIdsShowlist.jsp
Normal file
842
WebRoot/jsp/work/cameraIdsShowlist.jsp
Normal file
@ -0,0 +1,842 @@
|
||||
<%@ 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>
|
||||
<link rel="stylesheet"
|
||||
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
|
||||
<script type="text/javascript"
|
||||
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
||||
charset="utf-8"></script>
|
||||
<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 width = 0;
|
||||
var map = new Map();//用于存放websocket
|
||||
var map2 = new Map();//用于存放窗口对应的摄像头
|
||||
var map3 = new Map();//用于存放摄像头对应的窗口，便于判断是否已经打开
|
||||
var focusid;
|
||||
var this_uuid = '${uuid}';
|
||||
var definitionSt = 'standard';
|
||||
|
||||
function fenpin() {
|
||||
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: ' + (width - 440 - 10) + 'px;height: ' + ((width - 440) * 0.6168 - 10) + '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: ' + ((width - 440 - 10 - 3) / 2) + 'px;height: ' + (((width - 440) * 0.6168 - 10 - 3) / 2) + '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: ' + ((width - 440 - 10 - 6) / 3) + 'px;height: ' + (((width - 440) * 0.6168 - 10 - 6) / 3) + '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 viewThisCamera(id, online) {
|
||||
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')
|
||||
}
|
||||
//连接发生错误的回调方法
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var dosearch = function () {
|
||||
$("#table").bootstrapTable('refresh');
|
||||
};
|
||||
var companyId = "";
|
||||
$(function () {
|
||||
width = document.body.clientWidth;
|
||||
$('#videos').css('width', (width - 440));
|
||||
$('#videos').css('height', (width - 440) * 0.6168);
|
||||
$('#tree').css('height', (width - 440) * 0.6168);
|
||||
$('#video_1').css('width', (width - 440 - 10));
|
||||
$('#video_1').css('height', (width - 440) * 0.6168 - 10);
|
||||
$('#show_video_1').css('width', (width - 440 - 10 - 3));
|
||||
$('#show_video_1').css('height', (width - 440) * 0.6168 - 10 - 3);
|
||||
// $("#rptdt").datetimepicker({
|
||||
// // startDate: date,
|
||||
// language: 'zh-CN',
|
||||
// format: 'yyyy-mm-dd hh:ii:ss',
|
||||
// startView: "month", //初始化视图是‘年’
|
||||
// minView: 0,
|
||||
// maxView: "year",
|
||||
// autoclose: true
|
||||
// // todayBtn: "linked"
|
||||
// });
|
||||
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function (data) {
|
||||
// console.log(data)
|
||||
if (data.length == 1) {
|
||||
//选择厂区为一个厂时隐藏选择框
|
||||
$("#search_code").css("display", "none");
|
||||
$("#company").text(data[0].text);
|
||||
companyId = data[0].id;
|
||||
//dosearch();
|
||||
$.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", {companyId: companyId}, function (data) {
|
||||
$("#processsectionid").empty();
|
||||
var selelct_ = $("#processsectionid").select2({
|
||||
data: data,
|
||||
cache: false,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) {
|
||||
return markup;
|
||||
}, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo) {
|
||||
return repo.text;
|
||||
}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo) {
|
||||
return repo.text;
|
||||
} // 函数用于呈现当前的选择
|
||||
});
|
||||
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
|
||||
selelct_.val('').trigger("change");
|
||||
selelct_.on("change", function (e) {
|
||||
dosearch();
|
||||
});
|
||||
}, 'json');
|
||||
//loadCameraList(companyId);
|
||||
initTreeView(companyId);
|
||||
$('#company').val(companyId);
|
||||
} else {
|
||||
$("#company").css("display", "none");
|
||||
var selelct = $("#search_code").select2({
|
||||
data: data,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) {
|
||||
return markup;
|
||||
}, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo) {
|
||||
return repo.text;
|
||||
}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo) {
|
||||
return repo.text;
|
||||
} // 函数用于呈现当前的选择
|
||||
});
|
||||
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
|
||||
selelct.val('').trigger("change");
|
||||
//refreshSelect();
|
||||
selelct.on("change", function (e) {
|
||||
companyId = $(this).val();
|
||||
//dosearch();
|
||||
//refreshSelect();
|
||||
$.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", {companyId: companyId}, function (data) {
|
||||
console.log(data)
|
||||
$("#processsectionid").empty();
|
||||
var selelct_ = $("#processsectionid").select2({
|
||||
data: data,
|
||||
cache: false,
|
||||
placeholder: '请选择',//默认文字提示
|
||||
allowClear: true,//允许清空
|
||||
escapeMarkup: function (markup) {
|
||||
return markup;
|
||||
}, // 自定义格式化防止xss注入
|
||||
language: "zh-CN",
|
||||
minimumInputLength: 0,
|
||||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||||
formatResult: function formatRepo(repo) {
|
||||
return repo.text;
|
||||
}, // 函数用来渲染结果
|
||||
formatSelection: function formatRepoSelection(repo) {
|
||||
return repo.text;
|
||||
} // 函数用于呈现当前的选择
|
||||
});
|
||||
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
|
||||
selelct_.val('').trigger("change");
|
||||
selelct_.on("change", function (e) {
|
||||
dosearch();
|
||||
});
|
||||
}, 'json');
|
||||
});
|
||||
//loadCameraList(companyId);
|
||||
initTreeView(companyId);
|
||||
$('#company').val(companyId);
|
||||
}
|
||||
}, 'json');
|
||||
|
||||
//获取用途信息
|
||||
$.post(ext.contextPath + "/work/camera/getViewscopes.do", {unitId: unitId}, function (data) {
|
||||
$('#scNum').text(data.sc);
|
||||
$('#afNum').text(data.af);
|
||||
}, 'json');
|
||||
|
||||
});
|
||||
|
||||
function loadCameraList(companyId) {
|
||||
$("#table").bootstrapTable({ // 对应table标签的id
|
||||
url: ext.contextPath + '/work/camera/getList.do', // 获取表格数据的url
|
||||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||||
striped: true, //表格显示条纹，默认为false
|
||||
pagination: true, // 在表格底部显示分页组件，默认false
|
||||
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
|
||||
pageSize: 10, // 页面数据条数
|
||||
pageNumber: 1, // 首页页码
|
||||
sidePagination: 'server', // 设置为服务器端分页
|
||||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||||
return {
|
||||
rows: params.limit, // 每页要显示的数据条数
|
||||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||||
sort: params.sort, // 要排序的字段
|
||||
order: params.order,
|
||||
unitId: companyId,
|
||||
search_name: $('#search_name').val(),
|
||||
processsectionid: $("#processsectionid").val(),
|
||||
}
|
||||
},
|
||||
sortName: 'name', // 要排序的字段
|
||||
sortOrder: 'desc', // 排序规则
|
||||
columns: [
|
||||
{
|
||||
field: 'name', // 返回json数据中的number
|
||||
title: '名称', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: 200
|
||||
}, {
|
||||
field: 'style', // 返回json数据中的model
|
||||
title: '样式', // 表格表头显示文字
|
||||
align: 'center', // 左右居中
|
||||
valign: 'middle', // 上下居中
|
||||
width: 80,
|
||||
formatter: function (value, row, index) {
|
||||
switch (value) {
|
||||
case '1':
|
||||
if (row.online) {
|
||||
return '<img src="<%=request.getContextPath()%>/IMG/qiuji.svg" style="width:40%;height:auto;" alt=""/>';
|
||||
} else {
|
||||
return '<img src="<%=request.getContextPath()%>/IMG/qiuji.svg" style="width:40%;height:auto;" alt="" class="gray"/>';
|
||||
}
|
||||
case '0':
|
||||
if (row.online) {
|
||||
return '<img src="<%=request.getContextPath()%>/IMG/qiangji.svg" style="width:40%;height:auto;" alt=""/>';
|
||||
} else {
|
||||
return '<img src="<%=request.getContextPath()%>/IMG/qiangji.svg" style="width:40%;height:auto;" alt="" class="gray"/>';
|
||||
}
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
adjustBootstrapTableView("table");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.info("加载数据失败");
|
||||
},
|
||||
onDblClickRow: function (row) {
|
||||
viewThisCamera(row.id, row.online);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function cleanFocus() {
|
||||
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 cleanAll() {
|
||||
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 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': (width - 440) * 0.6168 - 10, 'width': (width - 440 - 10)});
|
||||
$('#' + id).addClass('big');
|
||||
$('#show_' + id).css({'height': (width - 440) * 0.6168 - 10 - 3, 'width': (width - 440 - 10 - 3)});
|
||||
}
|
||||
}
|
||||
|
||||
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': (width - 440) * 0.6168 - 10, 'width': (width - 440 - 10)});
|
||||
$('#show_' + focusid).css({'height': (width - 440) * 0.6168 - 10 - 3, 'width': (width - 440 - 10 - 3)});
|
||||
} else if (f == 2) {
|
||||
$('#' + focusid).css({
|
||||
'height': (((width - 440) * 0.6168 - 10 - 3) / 2),
|
||||
'width': ((width - 440 - 10 - 3) / 2)
|
||||
});
|
||||
$('#show_' + focusid).css({
|
||||
'height': (((width - 440) * 0.6168 - 10 - 3) / 2 - 3),
|
||||
'width': ((width - 440 - 10 - 3) / 2 - 3)
|
||||
});
|
||||
} else {
|
||||
$('#' + focusid).css({
|
||||
'height': (((width - 440) * 0.6168 - 10 - 6) / 3),
|
||||
'width': ((width - 440 - 10 - 6) / 3)
|
||||
});
|
||||
$('#show_' + focusid).css({
|
||||
'height': (((width - 440) * 0.6168 - 10 - 6) / 3 - 3),
|
||||
'width': ((width - 440 - 10 - 6) / 3 - 3)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var initTreeView = function () {
|
||||
$.post(ext.contextPath + '/work/camera/getCamerasTree.do', {cameraIds: '${cameraIds}'}, function (data) {
|
||||
// console.log(data)
|
||||
// var json = data;
|
||||
$('#tree').treeview({
|
||||
data: data,
|
||||
});
|
||||
$('#tree').on('nodeSelected', function (event, data) {
|
||||
if (data.type == 'V') {
|
||||
let id = data.id;
|
||||
// console.log(data);
|
||||
viewThisCamera(id, data.online);
|
||||
}
|
||||
});
|
||||
}, 'json');
|
||||
};
|
||||
|
||||
function getTreeCameraBotton(json) {
|
||||
for (let i = 0; i < json.length; i++) {
|
||||
// console.log(json[i].nodes)
|
||||
if (json[i].nodes != null) {
|
||||
if (json[i].nodes.length > 0) {
|
||||
getTreeCameraBotton(json[i].nodes);
|
||||
}
|
||||
} else {
|
||||
if (json[i].type == 'V') {
|
||||
// console.log(json[i].id)
|
||||
$('#' + json[i].id).append("<span class='fa fa-wrench pull-right' style='padding-top:2px;' title='相关设备' onclick='showEqCamera(\"" + json[i].id + "\");'></span>");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var searchCamera = function () {
|
||||
$.post(ext.contextPath + '/work/camera/getCamerasTree.do', {
|
||||
cameraIds: '${cameraIds}',
|
||||
cameraName: $('#search_name').val()
|
||||
}, function (data) {
|
||||
$('#tree').treeview({
|
||||
data: data,
|
||||
});
|
||||
$('#tree').on('nodeSelected', function (event, data) {
|
||||
if (data.type == 'V') {
|
||||
viewThisCamera(data.id, data.online);
|
||||
}
|
||||
});
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
var notonline = function () {
|
||||
$.post(ext.contextPath + '/work/camera/getTree.do', {
|
||||
ng: '',
|
||||
companyId: $('#company').val(),
|
||||
online: 1
|
||||
}, function (data) {
|
||||
var json = JSON.parse(data);
|
||||
//console.info(data)
|
||||
$('#tree').treeview({
|
||||
data: json.cameras,
|
||||
});
|
||||
$('#tree').on('nodeSelected', function (event, data) {
|
||||
if (data.type == 'V') {
|
||||
viewThisCamera(data.id, data.online);
|
||||
}
|
||||
});
|
||||
}, 'json');
|
||||
}
|
||||
|
||||
var mclear = function () {
|
||||
$('#search_name').val("");
|
||||
}
|
||||
|
||||
|
||||
<%--$(function () {--%>
|
||||
<%-- $('#switchBtnDefinition').bootstrapSwitch({--%>
|
||||
<%-- onText: '高清',--%>
|
||||
<%-- offText: '标清',--%>
|
||||
<%-- // size: "small",--%>
|
||||
<%-- });--%>
|
||||
<%-- $('#switchBtnDefinition').bootstrapSwitch('state', false, true);--%>
|
||||
<%-- <%–if ('${dataVisualContent.isfull}' == '${Isfull_False}') {–%>--%>
|
||||
<%-- <%– $('#switchBtnIsFull').bootstrapSwitch('state', false, true);–%>--%>
|
||||
<%-- <%–} else if ('${dataVisualContent.isfull}' == '${Isfull_True}') {–%>--%>
|
||||
<%-- <%– $('#switchBtnIsFull').bootstrapSwitch('state', true, true);–%>--%>
|
||||
<%-- <%–} else {–%>--%>
|
||||
<%-- <%– $('#switchBtnIsFull').bootstrapSwitch('state', false, true);–%>--%>
|
||||
<%-- <%–}–%>--%>
|
||||
<%--});--%>
|
||||
|
||||
function clickDefinition(st) {
|
||||
definitionSt = st;
|
||||
if (st == 'standard') {
|
||||
$('#highDefinition').css('color', '#444444');
|
||||
$('#highDefinition').css('background-color', '#f4f4f4');
|
||||
$('#standardDefinition').css('color', '#ffffff');
|
||||
$('#standardDefinition').css('background-color', '#0AB1DF');
|
||||
} else {
|
||||
$('#standardDefinition').css('color', '#444444');
|
||||
$('#standardDefinition').css('background-color', '#f4f4f4');
|
||||
$('#highDefinition').css('color', '#ffffff');
|
||||
$('#highDefinition').css('background-color', '#0AB1DF');
|
||||
}
|
||||
}
|
||||
|
||||
var hisCameraViewWindow = null;
|
||||
|
||||
function showHisCamera() {
|
||||
var id = "";
|
||||
$(".red").each(function (i, n) {
|
||||
id = map2.get($(this).attr("id"));
|
||||
})
|
||||
if (id != '') {
|
||||
hisCameraViewWindow = window.open(ext.contextPath + "/work/camera/hisCameraView.do?id=" + id + "&definitionSt=" + definitionSt, 'hisCameraViewWindow', 'width=720,height=480,top=200,left=300,toolbar=0,menubar=0,scrollbars=0,resizable=0,location=0,status=0')
|
||||
hisCameraViewWindow.focus();
|
||||
} else {
|
||||
alert("未识别到当前选择的摄像头！");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function showEqCamera() {
|
||||
event.stopPropagation();
|
||||
var id = "";
|
||||
$(".red").each(function (i, n) {
|
||||
id = map2.get($(this).attr("id"));
|
||||
})
|
||||
$.post(ext.contextPath + '/equipment/equipmentCardCamera/showListForEqView.do', {
|
||||
cameraId: id
|
||||
},
|
||||
function (data) {
|
||||
$("#subDiv").html(data);
|
||||
openModal('eqCameraModal');
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body class="hold-transition ${cu.themeclass} sidebar-mini" style="background-color: rgb(255,255,255)">
|
||||
<div class="wrapper">
|
||||
<div class="content-wrapper">
|
||||
<!-- 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>--%>
|
||||
<%-- </ol>--%>
|
||||
<%-- </section>--%>
|
||||
<!-- Main content -->
|
||||
<section class="content container-fluid">
|
||||
<div id="mainAlertdiv"></div>
|
||||
<div id="subDiv"></div>
|
||||
<div id="fileInputDiv"></div>
|
||||
<div id="fault4SelectDiv"></div>
|
||||
<div class="form-group form-inline" style="float: left;width:calc(100% - 150px);">
|
||||
<input type="hidden" name="company" id="company">
|
||||
<div class="input-group" style="margin-right: 10px;float: left;">
|
||||
<input type="text" id="search_name" name="search_name" class="form-control" placeholder="摄像机..."
|
||||
value="" style="width: 160px;">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-flat" onclick="mclear()"
|
||||
style="background-color: #fff;border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;">x</button>
|
||||
<button type="button" onclick="searchCamera();" class="btn btn-flat"><i
|
||||
class="fa fa-search"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
<div style="float: left;border-bottom: 1px #000000 solid;width: calc(100% - 250px);">
|
||||
<%-- <%– <label><font color="#8DEEEE">摄像常用画面</font></label>–%>--%>
|
||||
<%-- <label style="margin-left:5px;">视频总数：<font id='cameracount'></font>（在线：<font--%>
|
||||
<%-- id='onlinecount'></font>;离线：<font id='notonlinecount'></font>）|</label>--%>
|
||||
<%-- <label style="margin-left:5px;">生产：<span id="scNum"></span> 安防：<span id="afNum"></span> |</label>--%>
|
||||
<%-- <label style="margin-left:5px;">球机：<font id='qiujicount'></font> 枪机：<font--%>
|
||||
<%-- id='qiangjicount'></font> </label>--%>
|
||||
|
||||
<%-- <%– <label class="form-label" style="margin-left: 5px;">开始时间</label>–%>--%>
|
||||
<%-- <%– <input type="text" class="form-control" id="rptdt" name="rptdt">–%>--%>
|
||||
|
||||
<div class="btn-group" style="float: right;">
|
||||
<label class="form-label" style="margin-left: 5px;">分屏选择</label>
|
||||
<select class="form-control select2-selection--single" id="fenpin"
|
||||
style="width: 80px;height: 30px;"
|
||||
onchange="fenpin();" placeholder="请选择">
|
||||
<!-- <option disabled value>-分屏选择</option> -->
|
||||
<option selected value="1">单屏</option>
|
||||
<option value="2">2X2</option>
|
||||
<option value="3">3X3</option>
|
||||
</select>
|
||||
<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>
|
||||
<%-- <select class="form-control select2-selection--single" id="net" style="width: 80px;height: 30px;">--%>
|
||||
<%-- <!-- <option disabled value>-分屏选择</option> -->--%>
|
||||
<%-- <option selected value="1">内网</option>--%>
|
||||
<%-- <option value="2">外网</option>--%>
|
||||
<%-- </select>--%>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="width: 100%;height:100%;float: left;background-color: rgb(255,255,255)">
|
||||
<div id="cameralist" style="width: 240px;float: left;">
|
||||
<!-- <table id="table"></table> -->
|
||||
|
||||
<div class="box-body no-padding">
|
||||
<div id="tree" style="height:500px;overflow:auto; "></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="videos" style="width:753px;height:483px;border:2px solid gray;float: left;">
|
||||
<div style="width: 743px;height: 473px;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 id="controlArea" style="width: 150px;height:483px;float: left;background-color: rgb(255,255,255)">
|
||||
<div id="nowCameraName" style="height:30px;line-height: 30px;padding-left: 5px;"><span>球机控制</span>
|
||||
</div>
|
||||
<div style="width: 150px;text-align: center;margin-top: 15px;">
|
||||
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-left"
|
||||
style="transform: rotate(45deg);"></i></button>
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-up"></i></button>
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-right"
|
||||
style="transform: rotate(-45deg);"></i></button>
|
||||
</div>
|
||||
<div style="width: 150px;text-align: center;margin-top: 5px;">
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-left"></i></button>
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-arrows"></i></button>
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-right"></i></button>
|
||||
</div>
|
||||
<div style="width: 150px;text-align: center;margin-top: 5px;">
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-left"
|
||||
style="transform: rotate(-45deg);"></i></button>
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-down"></i></button>
|
||||
<button style="width: 30px;height: 30px;"><i class="fa fa-angle-right"
|
||||
style="transform: rotate(45deg);"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<div style="margin-top:20px;float: left;width: 100%;padding-left: 10px;border-top:1px dashed #3c3c3c;">
|
||||
</div>
|
||||
<div style="margin-top:20px;float: left;width: 100%;padding-left: 20px;">
|
||||
<div style="float: left;width: 50%;">
|
||||
<button type="button" class="btn btn-default btn-sm" onclick="showHisCamera();">回放
|
||||
</button>
|
||||
</div>
|
||||
<div style="float: left;width: 50%;">
|
||||
<button type="button" class="btn btn-default btn-sm">图片
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:20px;float: left;width: 100%;padding-left: 20px;">
|
||||
<div style="float: left;width: 50%;">
|
||||
<button id="standardDefinition" type="button" class="btn btn-default btn-sm"
|
||||
style="color: #ffffff;background-color: #0AB1DF;"
|
||||
onclick="clickDefinition('standard');">标清
|
||||
</button>
|
||||
</div>
|
||||
<div style="float: left;width: 50%;">
|
||||
<button id="highDefinition" type="button" class="btn btn-default btn-sm"
|
||||
style="color: #444444;background-color: #f4f4f4;"
|
||||
onclick="clickDefinition('high');">高清
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<%-- <div style="margin-top:20px;float: left;width: 100%;padding-left: 20px;">--%>
|
||||
<%-- <div style="float: left;width: 50%;">--%>
|
||||
<%-- <button type="button" class="btn btn-default btn-sm" style="width: 46px;height: 30px;" onclick="showEqCamera();">--%>
|
||||
<%-- <span class='fa fa-wrench' ></span>--%>
|
||||
<%-- </button>--%>
|
||||
<%-- </div>--%>
|
||||
<%-- </div>--%>
|
||||
<%-- <div style="margin-top:20px;float: left;width: 100%;padding-left: 20px;">--%>
|
||||
<%-- <input id="switchBtnDefinition" type="checkbox"/>--%>
|
||||
<%-- </div>--%>
|
||||
</div>
|
||||
<%-- <div style="width: 150px;text-align: center;margin-top: 5px;">--%>
|
||||
<%-- <button type="button" class="btn btn-default btn-sm" style="margin-left: 5px;"--%>
|
||||
<%-- onclick="notonline();">离线摄像头--%>
|
||||
<%-- </button>--%>
|
||||
<%-- </div>--%>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user