646 lines
28 KiB
Plaintext
646 lines
28 KiB
Plaintext
|
<%@page import="com.sipai.entity.maintenance.Maintenance" %>
|
|||
|
|
<%@ 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>--%>
|
|||
|
|
<jsp:include page="/jsp/incProVisual.jsp"></jsp:include>
|
|||
|
|
<%@ page import="com.sipai.tools.Mqtt" %>
|
|||
|
|
<%@ page import="org.springframework.context.ApplicationContext" %>
|
|||
|
|
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
|
|||
|
|
<%-- mqtt依赖--%>
|
|||
|
|
<script src="<%=request.getContextPath()%>/JS/mqtt/mqtt.min.js" type="text/javascript"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var addFun = function () {
|
|||
|
|
$.post(ext.contextPath + '/work/camera/add.do', {companyId: unitId}, function (data) {
|
|||
|
|
$("#subDiv").html(data);
|
|||
|
|
openModal('subModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
var editFun = function (id) {
|
|||
|
|
$.post(ext.contextPath + '/work/camera/edit.do', {id: id}, function (data) {
|
|||
|
|
$("#subDiv").html(data);
|
|||
|
|
openModal('subModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
var viewFun = function (id, type) {
|
|||
|
|
$.post(ext.contextPath + '/work/camera/showCameraDetail.do', {id: id, type: type}, function (data) {
|
|||
|
|
$("#subDiv").html(data);
|
|||
|
|
openModal('subModal');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var viewVideoFun = function (id, channel) {
|
|||
|
|
$.post(ext.contextPath + '/work/camera/showCameraVideo.do', {
|
|||
|
|
id: id,
|
|||
|
|
nowUrl: window.location.host
|
|||
|
|
}, function (data) {
|
|||
|
|
$("#subDiv").html(data);
|
|||
|
|
openModal('subCameraModal');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Date.prototype.format = function (format) {
|
|||
|
|
var args = {
|
|||
|
|
"M+": this.getMonth() + 1,
|
|||
|
|
"d+": this.getDate(),
|
|||
|
|
"h+": this.getHours(),
|
|||
|
|
"m+": this.getMinutes(),
|
|||
|
|
"s+": this.getSeconds(),
|
|||
|
|
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
|
|||
|
|
"S": this.getMilliseconds()
|
|||
|
|
};
|
|||
|
|
if (/(y+)/.test(format))
|
|||
|
|
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|||
|
|
for (var i in args) {
|
|||
|
|
var n = args[i];
|
|||
|
|
if (new RegExp("(" + i + ")").test(format))
|
|||
|
|
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
|
|||
|
|
}
|
|||
|
|
return format;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var hisCameraViewWindow = null;
|
|||
|
|
var definitionSt = 'standard';
|
|||
|
|
function showHisCamera(id) {
|
|||
|
|
var time = new Date(new Date().getTime() - 60 * 60 * 1000).format("yyyy-MM-dd hh:mm:ss")
|
|||
|
|
hisCameraViewWindow = window.open(ext.contextPath + "/work/camera/hisCameraView.do?id=" + id + "&definitionSt=" + definitionSt + "&time=" + time, 'hisCameraViewWindow', 'width=720,height=480,top=200,left=300,toolbar=0,menubar=0,scrollbars=0,resizable=0,location=0,status=0')
|
|||
|
|
// console.log(ext.contextPath + "/work/camera/hisCameraView.do?id=" + id + "&definitionSt=" + definitionSt + "&time=" + time, 'hisCameraViewWindow', 'width=720,height=480,top=200,left=300,toolbar=0,menubar=0,scrollbars=0,resizable=0,location=0,status=0')
|
|||
|
|
hisCameraViewWindow.focus();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// var viewVideoHFFun = function(id,channel){
|
|||
|
|
// $.post(ext.contextPath + '/work/camera/showVideo.do', {id:id,time:$('#datetimepicker').val()} , function(data) {
|
|||
|
|
// $("#subDiv").html(data);
|
|||
|
|
// openModal('subModal');
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
var deletesFun = function () {
|
|||
|
|
var checkedItems = $("#table").bootstrapTable('getSelections');
|
|||
|
|
var datas = "";
|
|||
|
|
$.each(checkedItems, function (index, item) {
|
|||
|
|
datas += item.id + ",";
|
|||
|
|
});
|
|||
|
|
if (datas == "") {
|
|||
|
|
showAlert('d', '请先选择记录', 'mainAlertdiv');
|
|||
|
|
} else {
|
|||
|
|
swal({
|
|||
|
|
text: "您确定要删除此记录？",
|
|||
|
|
dangerMode: true,
|
|||
|
|
buttons: {
|
|||
|
|
cancel: {
|
|||
|
|
text: "取消",
|
|||
|
|
value: null,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-default btn-sm",
|
|||
|
|
closeModal: true,
|
|||
|
|
},
|
|||
|
|
confirm: {
|
|||
|
|
text: "确定",
|
|||
|
|
value: true,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-danger btn-sm",
|
|||
|
|
closeModal: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.then(function (willDelete) {
|
|||
|
|
if (willDelete) {
|
|||
|
|
$.post(ext.contextPath + '/work/camera/deletes.do', {ids: datas}, function (data) {
|
|||
|
|
if (data > 0) {
|
|||
|
|
$("#table").bootstrapTable('refresh');
|
|||
|
|
} else {
|
|||
|
|
showAlert('d', '删除失败', 'mainAlertdiv');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var deleteFun = function(id) {
|
|||
|
|
swal({
|
|||
|
|
text: "您确定要删除此记录？",
|
|||
|
|
dangerMode: true,
|
|||
|
|
buttons: {
|
|||
|
|
cancel: {
|
|||
|
|
text: "取消",
|
|||
|
|
value: null,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-default btn-sm",
|
|||
|
|
closeModal: true,
|
|||
|
|
},
|
|||
|
|
confirm: {
|
|||
|
|
text: "确定",
|
|||
|
|
value: true,
|
|||
|
|
visible: true,
|
|||
|
|
className: "btn btn-danger btn-sm",
|
|||
|
|
closeModal: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).then(function(willDelete){
|
|||
|
|
if (willDelete) {
|
|||
|
|
$.post(ext.contextPath + '/work/camera/deletes.do', {ids: id}, function (data) {
|
|||
|
|
if (data > 0) {
|
|||
|
|
$("#table").bootstrapTable('refresh');
|
|||
|
|
} else {
|
|||
|
|
showAlert('d', '删除失败', 'mainAlertdiv');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
var dosearch = function () {
|
|||
|
|
$("#table").bootstrapTable('refresh');
|
|||
|
|
};
|
|||
|
|
var refreshSelect = function () {
|
|||
|
|
var selelct_ = $("#processsection").select2({
|
|||
|
|
data: null,
|
|||
|
|
placeholder: '请选择',//默认文字提示
|
|||
|
|
allowClear: true,//允许清空
|
|||
|
|
escapeMarkup: function (markup) {
|
|||
|
|
return markup;
|
|||
|
|
}, // 自定义格式化防止xss注入
|
|||
|
|
language: "zh-CN",
|
|||
|
|
minimumInputLength: 0,
|
|||
|
|
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
|||
|
|
});
|
|||
|
|
$("#processsection").empty();
|
|||
|
|
// $("#table").bootstrapTable('refresh', {data:null});
|
|||
|
|
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
|
|||
|
|
if ('${param.unitId}' != "") {
|
|||
|
|
unitId = '${param.unitId}'
|
|||
|
|
}
|
|||
|
|
$.post(ext.contextPath + "/user/processSection/getProcessSection4Select.do", {companyId: unitId}, function (data) {
|
|||
|
|
$("#processsection").empty();
|
|||
|
|
var selelct_ = $("#processsection").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_.on("change", function (e) {
|
|||
|
|
dosearch();
|
|||
|
|
});
|
|||
|
|
if ('${param.selectId}' != '') {
|
|||
|
|
selelct_.val('${param.selectId}').trigger("change");
|
|||
|
|
dosearch();
|
|||
|
|
} else {
|
|||
|
|
selelct_.val('').trigger("change");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, 'json');
|
|||
|
|
|
|||
|
|
//init();
|
|||
|
|
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
|
|||
|
|
$("#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,
|
|||
|
|
search_name: $('#search_name').val(),
|
|||
|
|
search_channel: $('#search_channel').val(),
|
|||
|
|
unitId: unitId,
|
|||
|
|
processsectionid: $("#processsection").val(),
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
sortName: 'url,channel', // 要排序的字段
|
|||
|
|
sortOrder: 'desc', // 排序规则
|
|||
|
|
columns: [
|
|||
|
|
{
|
|||
|
|
checkbox: true, // 显示一个勾选框
|
|||
|
|
}, {
|
|||
|
|
field: 'name', // 返回json数据中的number
|
|||
|
|
title: '名称', // 表格表头显示文字
|
|||
|
|
align: 'center', // 左右居中
|
|||
|
|
valign: 'middle' // 上下居中
|
|||
|
|
}, {
|
|||
|
|
field: 'url', // 返回json数据中的model
|
|||
|
|
title: '地址', // 表格表头显示文字
|
|||
|
|
align: 'center', // 左右居中
|
|||
|
|
valign: 'middle' // 上下居中
|
|||
|
|
}, {
|
|||
|
|
field: 'channel', // 返回json数据中的libraryid
|
|||
|
|
title: '通道号', // 表格表头显示文字
|
|||
|
|
align: 'center', // 左右居中
|
|||
|
|
valign: 'middle' // 上下居中
|
|||
|
|
}, {
|
|||
|
|
field: 'type', // 返回json数据中的state
|
|||
|
|
title: '摄像机类型', // 表格表头显示文字
|
|||
|
|
align: 'center', // 左右居中
|
|||
|
|
valign: 'middle', // 上下居中
|
|||
|
|
}, {
|
|||
|
|
field: 'style', // 返回json数据中的state
|
|||
|
|
title: '摄像机外形', // 表格表头显示文字
|
|||
|
|
align: 'center', // 左右居中
|
|||
|
|
valign: 'middle', // 上下居中
|
|||
|
|
formatter: function (value, row, index) {
|
|||
|
|
switch (value) {
|
|||
|
|
case '1':
|
|||
|
|
return '球机';
|
|||
|
|
case '0':
|
|||
|
|
return '枪机';
|
|||
|
|
default:
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'viewscopes', // 返回json数据中的state
|
|||
|
|
title: '用途分类', // 表格表头显示文字
|
|||
|
|
align: 'center', // 左右居中
|
|||
|
|
valign: 'middle', // 上下居中
|
|||
|
|
formatter:function(value,row,index){
|
|||
|
|
switch (value) {
|
|||
|
|
case '1':
|
|||
|
|
return '生产';
|
|||
|
|
case '0':
|
|||
|
|
return '安防';
|
|||
|
|
default:
|
|||
|
|
return '——';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'active', // 返回json数据中的state
|
|||
|
|
title: '启用状态', // 表格表头显示文字
|
|||
|
|
align: 'center', // 左右居中
|
|||
|
|
valign: 'middle', // 上下居中
|
|||
|
|
formatter:function(value,row,index){
|
|||
|
|
switch (value) {
|
|||
|
|
case '1':
|
|||
|
|
return '启用';
|
|||
|
|
case '0':
|
|||
|
|
return '禁用';
|
|||
|
|
default:
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "操作",
|
|||
|
|
align: 'center',
|
|||
|
|
valign: 'middle',
|
|||
|
|
width: 160, // 定义列的宽度，单位为像素px
|
|||
|
|
formatter: function (value, row, index) {
|
|||
|
|
var str = "";
|
|||
|
|
str += '<button class="btn btn-default btn-sm" onclick="viewVideoFun(\'' + row.id + '\',\'' + row.channel + '\')"><i class="fa fa-video-camera"></i></button>';
|
|||
|
|
str += '<button class="btn btn-default btn-sm" onclick="showHisCamera(\'' + row.id + '\')"><i class="fa fa-play-circle-o"></i></button>';
|
|||
|
|
// str += '<button class="btn btn-default btn-sm" onclick="showHisCamera(\'' + row.id + '\')">回放</button>';
|
|||
|
|
/*str+='<button class="btn btn-default btn-sm" onclick="viewFun(\'' + row.id + '\',\'' + row.type + '\')"><i class="fa fa-eye"></i></button>';*/
|
|||
|
|
str += '<button class="btn btn-default btn-sm" onclick="editFun(\'' + row.id + '\')"><i class="fa fa-edit"></i></button>';
|
|||
|
|
str += '<button class="btn btn-default btn-sm" onclick="deleteFun(\'' + row.id + '\')"><i class="fa fa fa-trash-o"></i></i></button>';
|
|||
|
|
str = '<div class="btn-group" >' + str + '</div>';
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
onLoadSuccess: function () { //加载成功时执行
|
|||
|
|
adjustBootstrapTableView("table");
|
|||
|
|
},
|
|||
|
|
onLoadError: function () { //加载失败时执行
|
|||
|
|
console.info("加载数据失败");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var hisCameraViewWindow = null;
|
|||
|
|
var definitionSt = 'standard';
|
|||
|
|
// 视频回放
|
|||
|
|
// function showHisCamera(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 () {
|
|||
|
|
$('#datetimepicker').prop("readonly", true).datetimepicker({
|
|||
|
|
language: 'zh-CN',
|
|||
|
|
autoclose: true,
|
|||
|
|
todayHighlight: true,
|
|||
|
|
minuteStep: 1,
|
|||
|
|
dataFormat: 'yyyy-mm-dd',
|
|||
|
|
timeFormat: 'HH:mm:ss',
|
|||
|
|
showSecond: true,
|
|||
|
|
//format: "yyyy-mm-dd hh:ii:ss",
|
|||
|
|
endDate: new Date(),
|
|||
|
|
});
|
|||
|
|
getMqtt(mqttStatus, mqttHostWeb);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 重启模型
|
|||
|
|
var restart = function(id) {
|
|||
|
|
// stopBubbleDefaultEvent();
|
|||
|
|
if(confirm("是否重启模型？")){
|
|||
|
|
$.post(ext.contextPath + '/work/pythonModel/restart.do',{}, function(data) {
|
|||
|
|
if(data==1){
|
|||
|
|
showAlert('s','重启成功','mainAlertDetaildiv');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 识别区域
|
|||
|
|
var identifyAreasDiv = function(id) {
|
|||
|
|
|
|||
|
|
$.post(ext.contextPath + '/work/camera/showCameraVideo4identifyAreas.do', {
|
|||
|
|
id: id,
|
|||
|
|
nowUrl: window.location.host
|
|||
|
|
}, function (data) {
|
|||
|
|
$("#identifyAreasDiv").html(data);
|
|||
|
|
openModal('identifyAreasModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 视野区域
|
|||
|
|
var visionAreasDiv = function(id) {
|
|||
|
|
$.post(ext.contextPath + '/work/camera/showCameraVideo4visionAreas.do', {
|
|||
|
|
id: id,
|
|||
|
|
}, function (data) {
|
|||
|
|
$("#visionAreasDiv").html(data);
|
|||
|
|
openModal('visionAreasModal');
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var client;
|
|||
|
|
|
|||
|
|
function getMqtt(mqttStatus, mqttHostWeb) {
|
|||
|
|
try {
|
|||
|
|
//初始化mqtt
|
|||
|
|
if (mqttStatus == '0') {
|
|||
|
|
let mqttId = "camera_model" + "_" + Math.random();
|
|||
|
|
|
|||
|
|
initialMqtt(mqttId, mqttHostWeb);
|
|||
|
|
// setTimeout(function () {
|
|||
|
|
//
|
|||
|
|
// }, 10000);
|
|||
|
|
} else {
|
|||
|
|
console.log('mq已关闭')
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
//处理错误
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initialMqtt(mqttId, mqttHostWeb) {
|
|||
|
|
// console.log(personnelPositioning_auto_mq_theme)
|
|||
|
|
//动态拿取mq定制化数据
|
|||
|
|
// $.ajax({
|
|||
|
|
// type: 'POST',
|
|||
|
|
// url: ext.contextPath + "/mqtt/addTopic.do",
|
|||
|
|
// async: false,
|
|||
|
|
// globle: false,
|
|||
|
|
// data: {
|
|||
|
|
// topic: 'topic_dataVisual_' + nowUnitId + '_' + frameId,
|
|||
|
|
// mpointIds: mqttMpcode
|
|||
|
|
// },
|
|||
|
|
// dataType: 'json',
|
|||
|
|
// error: function () {
|
|||
|
|
// return false;
|
|||
|
|
// },
|
|||
|
|
// success: function (data) {
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// console.log(mqttMpcode);
|
|||
|
|
const options = {
|
|||
|
|
clean: true,
|
|||
|
|
// cleanSession : false,
|
|||
|
|
// reconnect : true,
|
|||
|
|
connectTimeout: 10000,
|
|||
|
|
clientId: mqttId,
|
|||
|
|
username: "admin",
|
|||
|
|
password: 'public'
|
|||
|
|
}
|
|||
|
|
console.log(mqttHostWeb)
|
|||
|
|
const connectUrl = mqttHostWeb;
|
|||
|
|
client = mqtt.connect(connectUrl, options);
|
|||
|
|
|
|||
|
|
//当重新连接启动触发回调
|
|||
|
|
client.on('reconnect', function () {
|
|||
|
|
// console.log('正在重连.....');
|
|||
|
|
});
|
|||
|
|
//连接断开后触发的回调
|
|||
|
|
client.on("close", function () {
|
|||
|
|
console.log('客户端已断开连接.....');
|
|||
|
|
});
|
|||
|
|
//从broker接收到断开连接的数据包后发出。MQTT 5.0特性
|
|||
|
|
client.on("disconnect", function (packet) {
|
|||
|
|
console.log('从broker接收到断开连接的数据包.....' + packet);
|
|||
|
|
});
|
|||
|
|
//客户端脱机下线触发回调
|
|||
|
|
client.on("offline", function () {
|
|||
|
|
console.log('客户端脱机下线.....');
|
|||
|
|
});
|
|||
|
|
//当客户端无法连接或出现错误时触发回调
|
|||
|
|
client.on("error", (error) => {
|
|||
|
|
console.log('客户端出现错误.....' + error);
|
|||
|
|
});
|
|||
|
|
//当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包
|
|||
|
|
client.on("packetsend", (packet) => {
|
|||
|
|
// console.log('客户端已发出数据包：' + packet);
|
|||
|
|
});
|
|||
|
|
//当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
|
|||
|
|
client.on("packetreceive", (packet) => {
|
|||
|
|
// console.log('收到：' + packet);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//成功连接后触发的回调
|
|||
|
|
client.on("connect", function (connack) {
|
|||
|
|
// layer.msg('成功连接上mq服务器');
|
|||
|
|
console.log('成功连接上mq服务器');
|
|||
|
|
//订阅某主题
|
|||
|
|
/**
|
|||
|
|
* client.subscribe(topic/topic array/topic object, [options], [callback])
|
|||
|
|
* topic:一个string类型的topic或者一个topic数组,也可以是一个对象
|
|||
|
|
* options
|
|||
|
|
*/
|
|||
|
|
let auto_mq_theme_in = ['cameraModel'];
|
|||
|
|
|
|||
|
|
client.subscribe(auto_mq_theme_in, {qos: 1});
|
|||
|
|
//每隔2秒发布一次数据
|
|||
|
|
// setInterval(publish, 2000)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function publish() {
|
|||
|
|
//发布数据
|
|||
|
|
/**
|
|||
|
|
* client.publish(topic,message,[options], [callback])
|
|||
|
|
*
|
|||
|
|
* message: Buffer or String
|
|||
|
|
* options:{
|
|||
|
|
* qos:0, //默认0
|
|||
|
|
* retain:false, //默认false
|
|||
|
|
* dup:false, //默认false
|
|||
|
|
* properties:{}
|
|||
|
|
* }
|
|||
|
|
* callback:function (err){}
|
|||
|
|
*/
|
|||
|
|
const message = "h5 message " + Math.random() + new Date();
|
|||
|
|
client.publish("testtopic/123", message, {qos: 2});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//当客户端接收到发布消息时触发回调
|
|||
|
|
/**
|
|||
|
|
* topic:收到的数据包的topic
|
|||
|
|
* message:收到的数据包的负载playload
|
|||
|
|
* packet:收到的数据包
|
|||
|
|
*/
|
|||
|
|
client.on('message', (topic, message, packet) => {
|
|||
|
|
var json = JSON.parse(message.toString());
|
|||
|
|
if (json.result == "1") {
|
|||
|
|
showAlert('s', '模型重启成功', 'mainAlertdiv');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//页面离开自动断开连接
|
|||
|
|
$(window).bind("beforeunload", () => {
|
|||
|
|
// console.log("客户端窗口关闭,断开连接");
|
|||
|
|
client.disconnect();
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<!-- 引用top -->
|
|||
|
|
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
|
|||
|
|
<!-- 菜单栏 -->
|
|||
|
|
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
|
|||
|
|
<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>--%>
|
|||
|
|
<%-- <!-- <li class="active">Here</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 id="subDetailDiv"></div>
|
|||
|
|
<div id="subNVRDiv"></div>
|
|||
|
|
<div id="mpSubDiv"></div>
|
|||
|
|
<div id="fault4SelectNVRDiv"></div>
|
|||
|
|
<div id="identifyAreasDiv"></div>
|
|||
|
|
<div id="visionAreasDiv"></div>
|
|||
|
|
<div>
|
|||
|
|
<div class="form-group form-inline" style="padding:0;">
|
|||
|
|
|
|||
|
|
<div class="form-group pull-right">
|
|||
|
|
<div class="form-group ">
|
|||
|
|
<label class="form-label" style="line-height: 34px;">工艺段：</label>
|
|||
|
|
<select class="form-control select2-selection--single" id="processsection"
|
|||
|
|
name="processsection" style="width: 220px;"></select>
|
|||
|
|
<!-- select2 select2-container select2-selection--single -->
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group ">
|
|||
|
|
<label class="form-label" style="line-height: 34px;">通道号：</label>
|
|||
|
|
<input type="text" id="search_channel" name="search_channel" class="form-control pull-right"
|
|||
|
|
placeholder="通道号">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group ">
|
|||
|
|
<label class="form-label" style="line-height: 34px;">名称/地址：</label>
|
|||
|
|
<input type="text" id="search_name" name="search_name" class="form-control pull-right"
|
|||
|
|
placeholder="名称/地址">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-group " style="vertical-align: top;">
|
|||
|
|
<button class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<%-- <div class="input-group input-group-sm" style="width: 300px;">--%>
|
|||
|
|
<%-- <label class="form-label">回放开始时间</label>--%>
|
|||
|
|
<%-- <input type="text" style="width:200px" id="datetimepicker" name="datetimepicker" class="form-control pull-right" >--%>
|
|||
|
|
<%-- </div>--%>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="btn-group" style="width: 220px;padding-bottom:10px;">
|
|||
|
|
<button type="button" class="btn btn-default btn-sm" onclick="addFun();"><i class="fa fa-plus"></i>
|
|||
|
|
新增
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button type="button" class="btn btn-default btn-sm" onclick="deletesFun();"><i
|
|||
|
|
class="fa fa-trash-o"></i> 删除
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<security:authorize buttonUrl="work/pythonModel/restart.do">
|
|||
|
|
<button type="button" class="btn btn-danger btn-sm" onclick="restart();"><i
|
|||
|
|
class="fa fa-refresh"></i> 重启模型
|
|||
|
|
</button>
|
|||
|
|
</security:authorize>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<br>
|
|||
|
|
<table id="table"></table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
<!-- /.content -->
|
|||
|
|
</div>
|
|||
|
|
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
|||
|
|
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|