875 lines
43 KiB
Plaintext
875 lines
43 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>
|
||
<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>
|
||
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.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: beginTimeStore,
|
||
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);
|
||
// console.log(map3)
|
||
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: beginTimeStore,
|
||
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 = beginTimeStore;
|
||
$.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);
|
||
}
|
||
});
|
||
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);
|
||
}
|
||
})
|
||
console.log("后" + map);
|
||
} else {
|
||
alert('当前浏览器 Not support websocket')
|
||
}
|
||
//连接发生错误的回调方法
|
||
|
||
}, 1000);
|
||
});
|
||
} else {
|
||
var websocket = null;
|
||
var restartDialog;
|
||
//判断当前浏览器是否支持WebSocket
|
||
if ('WebSocket' in window) {
|
||
var time = beginTimeStore;
|
||
$.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);
|
||
}
|
||
});
|
||
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 = "";
|
||
var beginTimeStore = '';
|
||
$(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);
|
||
|
||
|
||
//定义locale汉化插件
|
||
if ('${param.hisData}' != null && '${param.hisData}' != '') {
|
||
beginTimeStore = '${param.hisData}';
|
||
} else {
|
||
beginTimeStore = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm');
|
||
}
|
||
|
||
// endTimeStore = moment().format('YYYY-MM-DD HH:mm');
|
||
var locale = {
|
||
"format": 'YYYY-MM-DD HH:mm',
|
||
"separator": " ~ ",
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"fromLabel": "起始时间",
|
||
"toLabel": "结束时间'",
|
||
"customRangeLabel": "自定义",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
$('#reservationtime').daterangepicker({
|
||
"timePicker": true,
|
||
"timePicker24Hour": true,
|
||
// "timePickerIncrement": 10,
|
||
"singleDatePicker": true,
|
||
"locale": locale,
|
||
// //汉化按钮部分
|
||
// ranges: {
|
||
// '今日': [moment().subtract(1, 'days'), moment()],
|
||
// '昨日': [moment().subtract(2, 'days'), moment().subtract(1, 'days')],
|
||
// '最近7日': [moment().subtract(7, 'days'), moment()],
|
||
// '本月': [moment().startOf('month'), moment().endOf('month')],
|
||
// '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||
// },
|
||
startDate: beginTimeStore,
|
||
// endDate: endTimeStore
|
||
}, function (start, end, label) {
|
||
beginTimeStore = start.format(this.locale.format);
|
||
// endTimeStore = end.format(this.locale.format);
|
||
if (!this.startDate) {
|
||
this.element.val('');
|
||
} else {
|
||
this.element.val(this.startDate.format(this.locale.format));
|
||
}
|
||
|
||
var cid = "";
|
||
$(".red").each(function (i, n) {
|
||
cid = map2.get($(this).attr("id"));
|
||
})
|
||
|
||
if (map3.get(cid) != null) {
|
||
map3.delete(cid);
|
||
}
|
||
// console.log(cid)
|
||
viewThisCamera(cid, 'true');
|
||
});
|
||
$('#reservationtime').val(beginTimeStore);
|
||
|
||
|
||
$.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');
|
||
|
||
});
|
||
|
||
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: beginTimeStore,
|
||
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: beginTimeStore,
|
||
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 viewCameraWindow = null;
|
||
|
||
function showNowCamera() {
|
||
var id = "";
|
||
$(".red").each(function (i, n) {
|
||
id = map2.get($(this).attr("id"));
|
||
})
|
||
if (id != '') {
|
||
viewCameraWindow = window.open(ext.contextPath + "/work/camera/getCameraJsp.do?id=" + id, 'nowViewCamera', 'width=720,height=480,top=200,left=300,toolbar=0,menubar=0,scrollbars=0,resizable=0,location=0,status=0')
|
||
viewCameraWindow.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');
|
||
});
|
||
}
|
||
|
||
function showImageList() {
|
||
let id = "";
|
||
$(".red").each(function (i, n) {
|
||
id = map2.get($(this).attr("id"));
|
||
})
|
||
if (id != '') {
|
||
$.post(ext.contextPath + '/work/camera/showAlarmImageList.do', {
|
||
masterId: id,
|
||
tbName: 'tb_work_camera_File',
|
||
nameSpace: 'cameraimg',
|
||
alarmId: '${alarmId}'
|
||
}, function (data) {
|
||
$("#fileInputDiv").html(data);
|
||
openModal('fileInputModal');
|
||
});
|
||
}
|
||
}
|
||
|
||
</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="fileOnlinePicDiv"></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 style="float: left;margin-left: 5px;line-height: 34px;">回放时间：</label>
|
||
<input type="text" class="form-control pull-left" id="reservationtime"
|
||
style="width:150px;margin-left: 5px;">
|
||
<%-- <%– <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>
|
||
<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="showNowCamera();">当前
|
||
</button>
|
||
</div>
|
||
<div style="float: left;width: 50%;">
|
||
<button type="button" class="btn btn-default btn-sm" onclick="showImageList();">图片
|
||
</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> |