1008 lines
51 KiB
Plaintext
1008 lines
51 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" %>
|
||
<%@ page import="com.sipai.entity.enums.CameraCtrlEnum" %>
|
||
<% request.setAttribute("TILT_UP", CameraCtrlEnum.TILT_UP);%>
|
||
<% request.setAttribute("TILT_DOWN", CameraCtrlEnum.TILT_DOWN);%>
|
||
<% request.setAttribute("PAN_LEFT", CameraCtrlEnum.PAN_LEFT);%>
|
||
<% request.setAttribute("PAN_RIGHT", CameraCtrlEnum.PAN_RIGHT);%>
|
||
<% request.setAttribute("UP_LEFT", CameraCtrlEnum.UP_LEFT);%>
|
||
<% request.setAttribute("UP_RIGHT", CameraCtrlEnum.UP_RIGHT);%>
|
||
<% request.setAttribute("DOWN_LEFT", CameraCtrlEnum.DOWN_LEFT);%>
|
||
<% request.setAttribute("DOWN_RIGHT", CameraCtrlEnum.DOWN_RIGHT);%>
|
||
<!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 map4 = new Map();//用于存放摄像头对应IP 账号密码端口通道 传给video控制摄像头
|
||
var webSocketCtrl;
|
||
var focusid;
|
||
var this_uuid = '${uuid}';
|
||
var definitionSt = 'standard';
|
||
var ctrlId = "";
|
||
var url = "";
|
||
var cameraS = {};
|
||
|
||
let hostUrl = window.location.href;
|
||
|
||
|
||
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;
|
||
$(".red").each(function (i, n) {
|
||
$(this).removeClass('red');
|
||
$(this).removeClass('white');
|
||
})
|
||
$('#' + id).removeClass('white');
|
||
$('#' + id).addClass('red');
|
||
ctrlId = map2.get(id);
|
||
cameraS = eval("(" + map4.get(ctrlId) + ")");
|
||
if (cameraS) {
|
||
var ll = cameraS.url.substring(0, 15);
|
||
if (hostUrl.substring(0, 5) == 'https') {
|
||
url = url.replace("ws", "https")
|
||
} else {
|
||
url = url.replace("ws", "http")
|
||
}
|
||
$.get(url + '/video/initCtrl.do?username=' + cameraS.username + '&password=' + stringToHex(cameraS.password) + '&ip=' + ll + '&port=8000', function (data) {
|
||
});
|
||
}
|
||
}
|
||
|
||
function stringToHex(str) {
|
||
var val = "";
|
||
for (var i = 0; i < str.length; i++) {
|
||
if (val == "")
|
||
val = str.charCodeAt(i).toString(16);
|
||
else
|
||
val += str.charCodeAt(i).toString(16);
|
||
}
|
||
return val;
|
||
}
|
||
|
||
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) {
|
||
console.log("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) {
|
||
map4.set(id, 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) {
|
||
if (hostUrl.substring(0, 5) == 'https') {
|
||
console.log("data.url = ", data.url)
|
||
data.url = data.url.replace('ws', 'wss');
|
||
}
|
||
url = data.url;
|
||
websocketCtrl = new WebSocket("" + data.url + "/ctrlCameraWebSocket/" + this_uuid);
|
||
websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
||
ctrlId = map2.get(id);
|
||
|
||
var ll = camera.url.substring(0, 15);
|
||
|
||
if (hostUrl.substring(0, 5) == 'https') {
|
||
url = url.replace("wss", "https")
|
||
} else {
|
||
url = url.replace("ws", "http")
|
||
}
|
||
$.get(url + '/video/initCtrl.do?username=' + camera.username + '&password=' + stringToHex(camera.password) + '&ip=' + ll + '&port=8000', function (data) {
|
||
console.log("data is ", data)
|
||
});
|
||
cameraS = camera
|
||
console.log("cameraS1 is ", cameraS)
|
||
// 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);
|
||
// }
|
||
}
|
||
});
|
||
map.set(fid, websocket);
|
||
websocket.onerror = function () {
|
||
};
|
||
//连接成功建立的回调方法
|
||
websocket.onopen = function () {
|
||
console.info('消息滚动websocker开启');
|
||
}
|
||
//接收到消息的回调方法
|
||
websocket.onmessage = function (event) {
|
||
$("#show_" + fid).attr("src", event.data);
|
||
}
|
||
websocketCtrl.onerror = function () {
|
||
};
|
||
//连接成功建立的回调方法
|
||
websocketCtrl.onopen = function () {
|
||
console.info('消息滚动websocketCtrl开启');
|
||
}
|
||
//接收到消息的回调方法
|
||
websocketCtrl.onmessage = function (event) {
|
||
showAlert('d', event.data, 'mainAlertdiv');
|
||
}
|
||
})
|
||
console.log("后" + map);
|
||
} else {
|
||
alert('当前浏览器 Not support websocket')
|
||
}
|
||
//连接发生错误的回调方法
|
||
}, 1000);
|
||
});
|
||
} else {
|
||
var websocket = null;
|
||
var restartDialog;
|
||
console.log("wait")
|
||
//判断当前浏览器是否支持WebSocket
|
||
if ('WebSocket' in window) {
|
||
console.log("in")
|
||
var time = "now";
|
||
$.post(ext.contextPath + '/work/camera/getCameraById.do', {
|
||
id: id
|
||
}, function (data) {
|
||
map4.set(id, 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) {
|
||
if (hostUrl.substring(0, 5) == 'https') {
|
||
data.url = data.url.replace('ws', 'wss');
|
||
}
|
||
url = data.url
|
||
websocket = new WebSocket("" + data.url + "/videoWebSocket/" + camera.type + "/" + camera.url + "/" + camera.username + "/" + camera.password + "/" + camera.channel + "/" + time + "/" + this_uuid + fid + "/" + definitionSt);
|
||
websocketCtrl = new WebSocket("" + data.url + "/ctrlCameraWebSocket/" + this_uuid);
|
||
console.log("camera is ", cameraS)
|
||
cameraS = camera
|
||
var ll = camera.url.substring(0, 15);
|
||
if (hostUrl.substring(0, 5) == 'https') {
|
||
url = url.replace("wss", "https")
|
||
} else {
|
||
url = url.replace("ws", "http")
|
||
}
|
||
$.get(url + '/video/initCtrl.do?username=' + camera.username + '&password=' + stringToHex(camera.password) + '&ip=' + ll + '&port=8000', function (data) {
|
||
console.log("data is ", data)
|
||
});
|
||
}
|
||
});
|
||
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);
|
||
}
|
||
websocketCtrl.onerror = function () {
|
||
console.log('错误');
|
||
};
|
||
|
||
//连接成功建立的回调方法
|
||
websocketCtrl.onopen = function () {
|
||
console.info('消息滚动websocker开启');
|
||
}
|
||
//接收到消息的回调方法
|
||
websocketCtrl.onmessage = function (event) {
|
||
showAlert('d', event.data, 'mainAlertdiv');
|
||
}
|
||
})
|
||
//websocket = new WebSocket(ext.basePath.replace("http","ws")+"/videoWebSocket/"+id+"/"+time+"/"+fid);
|
||
|
||
} else {
|
||
alert('当前浏览器 Not support websocket')
|
||
}
|
||
//连接发生错误的回调方法
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
var isOK = false;
|
||
var ctrlCamera = function (direction, millis) {
|
||
console.log("camera is ssss ", cameraS)
|
||
if (cameraS) {
|
||
if (millis) {
|
||
if (isOK) {
|
||
isOK = false;
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: url + '/video/doStop.do',
|
||
async: false,
|
||
globle: false,
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
console.log("data is ", data)
|
||
}
|
||
});
|
||
} else {
|
||
isOK = true;
|
||
camerS = eval("(" + map4.get(ctrlId) + ")");
|
||
var ll = cameraS.url.substring(0, 15);
|
||
url = url.replace("ws", "http")
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: url + '/video/autoCtrl.do?direction=' + direction + "&channel=" + cameraS.channel + "&brand=" + cameraS.type + "&millis=" + millis,
|
||
async: false,
|
||
globle: false,
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
console.log("data is ", data)
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
var json = "{\"direction\":" + direction + ",\"channel\":" + cameraS.channel + ",\"brand\":\"" + cameraS.type + "\",\"uuid\":\"" + this_uuid + "\"}";
|
||
websocketCtrl.send(json);
|
||
}
|
||
}
|
||
}
|
||
|
||
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);
|
||
$.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/getTree.do', {ng: '', companyId: unitId}, function (data) {
|
||
var json = data;
|
||
// console.log(json)
|
||
// var json = JSON.parse(data);
|
||
// console.log(json)
|
||
$('#cameracount').html(json.cameracount);
|
||
$('#onlinecount').html(json.onlinecount);
|
||
$('#notonlinecount').html(json.notonlinecount);
|
||
$('#qiujicount').html(json.qiujicount);
|
||
$('#qiangjicount').html(json.qiangjicount);
|
||
$('#tree').treeview({
|
||
data: json.cameras,
|
||
});
|
||
console.log("json is ", json)
|
||
$('#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/getTree.do', {
|
||
ng: '',
|
||
companyId: unitId,
|
||
cameraName: $('#search_name').val()
|
||
}, function (data) {
|
||
var json = data;
|
||
$('#tree').treeview({
|
||
data: json.cameras,
|
||
});
|
||
$('#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 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');
|
||
});
|
||
}
|
||
|
||
function saveImage() {
|
||
let id = "";
|
||
let imgId = "";
|
||
$(".red").each(function (i, n) {
|
||
id = map2.get($(this).attr("id"));
|
||
imgId = $(this).attr("id");
|
||
})
|
||
if (id != '') {
|
||
// console.log(imgId)
|
||
// console.log(id)
|
||
if (id != undefined) {
|
||
let ImageURL = $('#show_' + imgId).attr('src');
|
||
// console.log(ImageURL)
|
||
const block = ImageURL.split(";");
|
||
const contentType = block[0].split(":")[1];// In this case "image/jpeg"
|
||
const imgData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."
|
||
|
||
$.post(ext.contextPath + '/work/camera/saveImage.do', {
|
||
id: id, imgData: imgData, contentType: contentType
|
||
},
|
||
function (data) {
|
||
if (data == '1') {
|
||
alert("图片抓拍成功");
|
||
}
|
||
});
|
||
} else {
|
||
alert("未识别到当前选择的摄像头！");
|
||
}
|
||
|
||
} else {
|
||
alert("未识别到当前选择的摄像头！");
|
||
}
|
||
}
|
||
|
||
function showImageList() {
|
||
let id = "";
|
||
$(".red").each(function (i, n) {
|
||
id = map2.get($(this).attr("id"));
|
||
})
|
||
if (id != '') {
|
||
$.post(ext.contextPath + '/work/camera/showImageList.do', {
|
||
masterId: id,
|
||
tbName: 'tb_work_camera_File',
|
||
nameSpace: 'cameraimg'
|
||
}, 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><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;" onclick="ctrlCamera('${UP_LEFT.id}', '')"><i
|
||
class="fa fa-angle-left"
|
||
style="transform: rotate(45deg);"></i></button>
|
||
<button style="width: 30px;height: 30px;" onclick="ctrlCamera('${TILT_UP.id}', '')"><i
|
||
class="fa fa-angle-up"></i></button>
|
||
<button style="width: 30px;height: 30px;" onclick="ctrlCamera('${UP_RIGHT.id}', '')"><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;" onclick="ctrlCamera('${PAN_LEFT.id}', '')"><i
|
||
class="fa fa-angle-left"></i></button>
|
||
<button style="width: 30px;height: 30px;" onclick="ctrlCamera('${PAN_LEFT.id}', '30000')"><i
|
||
class="fa fa-arrows"></i></button>
|
||
<button style="width: 30px;height: 30px;" onclick="ctrlCamera('${PAN_RIGHT.id}', '')"><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;" onclick="ctrlCamera('${DOWN_LEFT.id}', '')"><i
|
||
class="fa fa-angle-left"
|
||
style="transform: rotate(-45deg);"></i></button>
|
||
<button style="width: 30px;height: 30px;" onclick="ctrlCamera('${TILT_DOWN.id}', '')"><i
|
||
class="fa fa-angle-down"></i></button>
|
||
<button style="width: 30px;height: 30px;" onclick="ctrlCamera('${DOWN_RIGHT.id}', '')"><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>
|
||
<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="saveImage();">抓拍
|
||
</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>
|