304 lines
14 KiB
Plaintext
304 lines
14 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.tools.Mqtt" %>
|
||
|
|
<%@ page import="org.springframework.context.ApplicationContext" %>
|
||
|
|
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
|
||
|
|
<% ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(request.getServletContext());
|
||
|
|
Mqtt mqtt = (Mqtt) ctx.getBean("mqtt");
|
||
|
|
request.setAttribute("mqttStatus", mqtt.getStatus());
|
||
|
|
request.setAttribute("hostWeb", mqtt.getHostWeb());
|
||
|
|
%>
|
||
|
|
|
||
|
|
<%@page import="com.sipai.tools.CommString" %>
|
||
|
|
<%request.setAttribute("FILE_TYPE_IMAGE", CommString.FILE_TYPE_IMAGE); %>
|
||
|
|
<%request.setAttribute("FILE_TYPE_VIDEO", CommString.FILE_TYPE_VIDEO); %>
|
||
|
|
|
||
|
|
<%-- mqtt依赖--%>
|
||
|
|
<script src="<%=request.getContextPath()%>/JS/mqtt/mqtt.min.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<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-fileinput/css/fileinput.min.css"/>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/fileinput.min.js"
|
||
|
|
charset="utf-8"></script>
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/locales/zh.js"
|
||
|
|
charset="utf-8"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
#div2 {
|
||
|
|
left: 177px;
|
||
|
|
top: 167px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cursor-pointer{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
//名称定义不可修改
|
||
|
|
var getFileList_Position = function (floorId_pic) {
|
||
|
|
$.post(ext.contextPath + '/base/getInputFileList_minio.do', {
|
||
|
|
masterId: floorId_pic,
|
||
|
|
tbName: 'TB_PositionPic_file',
|
||
|
|
bucketName: 'position',
|
||
|
|
type: '${FILE_TYPE_IMAGE}'
|
||
|
|
}, function (data) {
|
||
|
|
if (data.length > 0) {
|
||
|
|
previews = new Array();
|
||
|
|
$('#maintenancefile').show();
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
var path = 'data:image/png;base64,' + data[i].streamFile;
|
||
|
|
$("#pic").css("background-image", "url(" + path + ")");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// $('#maintenanceDetailFile').hide();
|
||
|
|
}
|
||
|
|
}, 'json');
|
||
|
|
};
|
||
|
|
|
||
|
|
//处理定位数据
|
||
|
|
var handlePosition = function (json) {
|
||
|
|
var floorId_pic = $('#floorId_pic').val();
|
||
|
|
// console.log(json.floor + '---' + floorId_pic);
|
||
|
|
if (json.floor != floorId_pic) {//楼层不同
|
||
|
|
//楼层标志位
|
||
|
|
$('#floorId_pic').val(json.floor)
|
||
|
|
//切换上下层 -- 底层图片
|
||
|
|
getFileList_Position('floor_' + json.floor);
|
||
|
|
//切换上下层 -- 出入口位置
|
||
|
|
getCRKData('', json.floor);
|
||
|
|
}
|
||
|
|
|
||
|
|
var left_s = 145;
|
||
|
|
var top_s = 142;
|
||
|
|
var left = 0;
|
||
|
|
var top = 0;
|
||
|
|
left = left_s + json.left * 0.985;
|
||
|
|
top = top_s + json.top * 0.985;
|
||
|
|
// console.log(left + '----------' + top);
|
||
|
|
$("#userDiv").css("left", left + "px");
|
||
|
|
$("#userDiv").css("top", top + "px");
|
||
|
|
$("#userName").html(json.name);
|
||
|
|
}
|
||
|
|
|
||
|
|
//初始化mqtt
|
||
|
|
var initialMqtt = function () {
|
||
|
|
var random = Math.random();
|
||
|
|
<%--console.log('clientId === ' + '${userId}' + '_position_' + random);--%>
|
||
|
|
const options = {
|
||
|
|
clean: true,
|
||
|
|
connectTimeout: 10000,
|
||
|
|
clientId: '${userId}' + '_position_' + random,
|
||
|
|
username: "admin",
|
||
|
|
password: 'public'
|
||
|
|
}
|
||
|
|
const connectUrl = '${hostWeb}';
|
||
|
|
const 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) {
|
||
|
|
console.log('成功连接上mqtt服务器(人员定位)');
|
||
|
|
//订阅某主题
|
||
|
|
client.subscribe(["${userId}" + '_position'], {qos: 0});
|
||
|
|
//每隔2秒发布一次数据
|
||
|
|
// setInterval(publish, 2000)
|
||
|
|
});
|
||
|
|
//当客户端接收到发布消息时触发回调
|
||
|
|
client.on('message', (topic, message, packet) => {
|
||
|
|
// console.log(topic);
|
||
|
|
var json = JSON.parse(message.toString());
|
||
|
|
//处理定位
|
||
|
|
handlePosition(json);
|
||
|
|
});
|
||
|
|
//页面离开自动断开连接
|
||
|
|
$(window).bind("beforeunload", () => {
|
||
|
|
// console.log("客户端窗口关闭,断开连接");
|
||
|
|
// mqtt.disconnect();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
//预览显示出入口的图片
|
||
|
|
var showExit = function (id) {
|
||
|
|
/*var id = 'aqcrk00011';
|
||
|
|
$.post(ext.contextPath + '/work/channelPortConfig/doModal.do', {
|
||
|
|
id: id
|
||
|
|
}, function (data) {
|
||
|
|
$("#subDiv").html(data);
|
||
|
|
openModal('imgModal');
|
||
|
|
});*/
|
||
|
|
|
||
|
|
// var id = 'aqcrk00011';
|
||
|
|
$.post(ext.contextPath + '/work/channelPortConfig/doView.do', {
|
||
|
|
id: id
|
||
|
|
}, function (data) {
|
||
|
|
$("#subDiv").html(data);
|
||
|
|
openModal('subModal');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//获取出入口的数据
|
||
|
|
var getCRKData = function (area, layer) {
|
||
|
|
// console.log('getCRKData===' + area);
|
||
|
|
$('.exit-icon').remove();
|
||
|
|
|
||
|
|
$.post(ext.contextPath + '/work/channelPortConfig/getModalList.do', {
|
||
|
|
area: area
|
||
|
|
}, function (data) {
|
||
|
|
// console.log(data.rows);
|
||
|
|
var arr = data.rows;
|
||
|
|
/*var arr = {
|
||
|
|
rows: [{id:'1',elementLeft:920,elementTop:185},
|
||
|
|
{id:'2',elementLeft:1160,elementTop:185},
|
||
|
|
{id:'3',elementLeft:1190,elementTop:185}],
|
||
|
|
}*/
|
||
|
|
if (arr != null && arr != undefined && arr != '') {
|
||
|
|
// var ChannelPort1 = 0;
|
||
|
|
// var ChannelPort2 = 0;
|
||
|
|
for (var i = 0; i < arr.length; i++) {
|
||
|
|
var element = arr[i];
|
||
|
|
var type = element.type;
|
||
|
|
var heightAlone = 0;
|
||
|
|
var widthAlone = 0;
|
||
|
|
// if(type==1){
|
||
|
|
// ChannelPort1++;
|
||
|
|
// }
|
||
|
|
// if(type==2){
|
||
|
|
// ChannelPort2++;
|
||
|
|
// }
|
||
|
|
if (element.remarks != null && element.remarks != undefined && element.remarks != '' && element.area != null && element.area.layer == layer) {
|
||
|
|
// console.log(layer + '===layer === ' + element.area.layer);
|
||
|
|
var remarks = element.remarks.split(",");
|
||
|
|
var elementLeft = remarks[0];
|
||
|
|
var elementTop = remarks[1];
|
||
|
|
/* elementLeft = Number(elementLeft) + Number(173);
|
||
|
|
elementTop = Number(elementTop) + Number(194);*/
|
||
|
|
elementLeft = Number(elementLeft) + Number(148);
|
||
|
|
elementTop = Number(elementTop) + Number(170);
|
||
|
|
if (element.windowsHeight != null && element.windowsHeight != undefined && element.windowsHeight != '') {
|
||
|
|
heightAlone = element.windowsHeight;
|
||
|
|
} else {
|
||
|
|
heightAlone = 1;
|
||
|
|
}
|
||
|
|
if (element.windowsWidth != null && element.windowsWidth != undefined && element.windowsWidth != '') {
|
||
|
|
widthAlone = element.windowsWidth;
|
||
|
|
} else {
|
||
|
|
widthAlone = 1;
|
||
|
|
}
|
||
|
|
var elements = '<div id="' + element.id + '" class="center-icon exit-icon exit-icon-' + type + ' cursor-pointer" onclick="showExit(\'' + element.id + '\')" ' +
|
||
|
|
'style=" left: ' + (elementLeft * widthAlone) + 'px;top: ' + (elementTop * heightAlone) + 'px;width: 20px;height: 25px;position: absolute;"></div>';
|
||
|
|
$('.factory-area-' + layer).append(elements);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// $('#ChannelPort1').html(ChannelPort1+"个");
|
||
|
|
// $('#ChannelPort2').html(ChannelPort2+"个");
|
||
|
|
}
|
||
|
|
}, 'json');
|
||
|
|
};
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
//加载底图 - 默认1楼
|
||
|
|
getFileList_Position('floor_1');
|
||
|
|
//获取出入口的数据
|
||
|
|
getCRKData('', '1');
|
||
|
|
|
||
|
|
try {
|
||
|
|
//初始化mqtt
|
||
|
|
if ('${mqttStatus}' == '0') {
|
||
|
|
initialMqtt();
|
||
|
|
} else {
|
||
|
|
console.log('mq已关闭')
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
//处理错误
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<input type="hidden" id="mqttStatus" name="mqttStatus" value="${mqttStatus}">
|
||
|
|
<input type="hidden" id="mqttHostWeb" name="mqttHostWeb" value="${hostWeb}">
|
||
|
|
<input type="hidden" id="topUserId" name="topUserId" value="${userId}">
|
||
|
|
<input type="hidden" id="floorId_pic" name="floorId_pic" value="1">
|
||
|
|
|
||
|
|
<body class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
|
|
<div class="wrapper">
|
||
|
|
<div id="subDiv"></div>
|
||
|
|
<div class="content-wrapper" style="overflow: scroll;position:relative;">
|
||
|
|
<div id="pic" style="width: 1000px; height: 1080px;position: relative;">
|
||
|
|
<div id="userDiv" style="position: absolute;cursor: pointer;text-align: center;" draggable="true;">
|
||
|
|
<div id="userName" style="width: 80px;height: 20px;color: white;text-align: center;">-</div>
|
||
|
|
<svg t="1692689565412" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
|
|
xmlns="http://www.w3.org/2000/svg" p-id="3504" width="32" height="32">
|
||
|
|
<path d="M512 938.666667c-53.333333 0-384-257.258667-384-469.333334S299.925333 85.333333 512 85.333333s384 171.925333 384 384-330.666667 469.333333-384 469.333334z m0-352c64.8 0 117.333333-52.533333 117.333333-117.333334s-52.533333-117.333333-117.333333-117.333333-117.333333 52.533333-117.333333 117.333333 52.533333 117.333333 117.333333 117.333334z"
|
||
|
|
fill="#3557F3" p-id="3505"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="factory-area factory-area-1"></div>
|
||
|
|
<div class="factory-area factory-area-2"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<!-- 文件上传-->
|
||
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/css/fileinput.min.css"/>
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/commonFileUpload.js" charset="utf-8"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.write("<scr" + "ipt src=\"<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/fileinput.min.js\"></sc" + "ript>")
|
||
|
|
document.write("<scr" + "ipt src=\"<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/locales/zh.js\"></sc" + "ript>")
|
||
|
|
</script>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
</html>
|