Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/mqtt/alarm_mqtt.jsp
2026-01-16 14:13:44 +08:00

653 lines
26 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ 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("hostWeb", mqtt.getHostWeb()); %>
<!-- 文件上传-->
<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>
<%--文件上传 minio--%>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/commonFile.js" charset="utf-8"></script>
<!-- 颜色选择器-->
<%--<link rel="stylesheet"
href="<%=request.getContextPath()%>/plugins/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript"
src="<%=request.getContextPath()%>/plugins/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"
charset="utf-8"></script>--%>
<html>
<head>
<title>Title</title>
<%-- <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">--%>
<%-- <script src="//unpkg.com/vue/dist/vue.js"></script>--%>
<%-- <script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>--%>
<style>
/*.el-form-item__label {
text-align: right;
vertical-align: middle;
float: left;
font-size: 16px;
color: #606266;
line-height: 40px;
padding: 0 20px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.el-form-item__content {
line-height: 40px;
position: relative;
font-size: 16px;
}*/
.notification-item {
position: relative;
word-break: normal;
width: 380px;
height: 100px;
/*background-color: #3f0808;*/
background-color: #dd4b39;
color: white;
/*padding: 16px 6px 6px 12px;*/
border-radius: 6px;
/*white-space: pre-line;*/
word-wrap: break-word;
overflow: hidden;
animation: alarm 1s ease-in-out infinite;
}
.notification-item-2 {
background-color: #00c0ef;
color: white;
border-radius: 6px;
}
/*.notification-item .notification-item-header {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 12px 4px 26px;
width: 100%;
height: 24px;
border-bottom: 2px solid #1d1e1f;
}
.notification-item .notification-item-header::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
box-shadow: 0 0 4px #660101 inset;
}*/
@keyframes running {
0%, 100% {
box-shadow: 0 0 40px yellow;
}
50% {
box-shadow: 0 0 10px yellow;
}
}
@keyframes alarm {
0%, 100% {
box-shadow: 0 0 15px yellow inset;
}
50% {
box-shadow: 0 0 4px yellow inset;
}
}
/*上报异常和下发任务按钮样式*/
.button2Fun { /* 按钮美化 */
width: 100px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #00a65a; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
}
.button2Fun:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}
/*layer弹窗的报警确认按钮*/
.layui-layer-btn .layui-layer-btn0 {
border-color: #00a65a;
background-color: #00a65a;
color: #fff;
}
</style>
<script type="text/javascript">
var index;
var speakContent = "";
function mqtt_open(msg) {
if (msg.alarm_time != null && msg.alarm_time != '') {
$('#alarm_time').html(msg.alarm_time);
} else {
$('#alarm_time').html('无报警时间');
}
if (msg.alarm_type != null && msg.alarm_type != '') {
$('#alarm_type').html(msg.alarm_type);
} else {
$('#alarm_type').html('无报警类型');
}
if (msg.alarm_description != null && msg.alarm_description != '') {
$('#alarm_description').html(msg.alarm_description);
} else {
$('#alarm_description').html('暂无报警描述');
}
if (msg.expert_advice != null && msg.expert_advice != '') {
$('#expert_advice').html(msg.expert_advice);
} else {
$('#expert_advice').html('暂无专家建议');
}
//发送给BIM报警内容+专家建议
$.post(ext.contextPath + '/cmd/cmdController/handle4SpeechAlarm.do', {
mpId: msg.objId,
value: msg.alarm_description + '建议:' + msg.expert_advice,
}, function (data) {
});
$.post(ext.contextPath + '/work/mpoint/getMpoint4Mq.do', {
id: msg.objId,
bizId: ''
}, function (data) {
// console.log(data);
if (data != null && data != '') {
var str = JSON.parse(data);
if (str.equipmentCard != null && str.equipmentCard != '') {
$('#equipmentcardid').val(str.equipmentCard.equipmentcardid);
// $('#equipmentname').html(str.equipmentCard.equipmentname + ' ' + str.equipmentCard.equipmentcardid + '');
$('#equipmentname').html(str.equipmentCard.equipmentname);
} else {
$('#equipmentcardid').html('-');
$('#equipmentname').html('暂无关联设备');
}
$('#unitId_mqtt').val(msg.unitId);
$('#processSectionCode').val(str.processsectioncode);
index = layer.open({
id: 1,
type: 1,
title: '报警预览',
area: ['70%', '800px'],
skin: 'bgfff', //没有背景色
maxmin: true,
shadeClose: false,
closeBtn: '1',
content: $('#show_div'),
zIndex: 99,
btn: ['报警确认', '关闭'], //按钮组
yes: function (index) {//layer.msg('yes'); //点击确定回调
alarm_confirm(msg.objId, msg.alarm_time, msg.unitId);
layer.close(index);
},
btn2: function () {//layer.alert('aaa',{title:'msg title'}); 点击取消回调
// layer.msg('bbb');//
// layer.closeAll();
layer.close(index);
},
min: function () { //点击最小化后的回调函数
$(".layui-layer-shade").css({"z-index": "-1"});
},
full: function () { //点击最大化后的回调函数
$(".layui-layer-shade").css({"z-index": "99"});
},
restore: function () { //点击还原后的回调函数
$(".layui-layer-shade").css({"z-index": "99"});
}
});
fun_nowUser(msg.unitId);
//加载设备相关点位数据
if (str.equipmentCard != null && str.equipmentCard != '') {
fun_table1(str.equipmentCard.equipmentcardid);
} else {
fun_table1('');
}
//加载设备历史报警
fun_table2(msg.objId);
// speakText("一级报警," + str.parmname.replaceAll("_", "") + ",请注意!");
} else {
// alert('无次点位');
}
});
// $("#imgDivId").attr("src", ext.contextPath + "/IMG/cmd/FS_SK11_C_man.png");
// $("#imgDivId").attr("src", ext.contextPath + "/IMG/shakou/logo.png");
$.post(ext.contextPath + '/cmd/cmdController/getAlarmImg.do', {}, function (data) {
//有配置头像根据配置来 没有则默认
if (data != null && data != '') {
$("#imgDivId").attr("src", ext.contextPath + data);
} else {
$("#imgDivId").attr("src", ext.contextPath + "/IMG/shakou/logo.png");
}
});
}
/**
* 获取运行当班人员
* @param unitId
*/
function fun_nowUser(unitId) {
$.post(ext.contextPath + '/work/scheduling/getXYNowPeople.do', {
bizid: unitId
}, function (data) {
var str = JSON.parse(data);
if (str.result != null && str.result != '') {
$('#nowUser').html(str.result);
} else {
$('#nowUser').html('暂无排班');
}
})
}
//加载设备相关点位数据
function fun_table1(equipmentcardid) {
$.post(ext.contextPath + '/work/mpoint/getlistES.do', {
rows: 20,
page: 1,
sort: 'id',
order: 'desc',
equipmentcardId: equipmentcardid
}, function (data) {
var json = JSON.parse(data);
var str = "";//alarm_his_div
str += "<table class='table'><caption>设备相关点位数据</caption>";
str += "<thead><tr><th>" + "点位名称" + "</th><th>" + "当前值" + "</th><th>" + "时间" + "</th></tr>";
str += "<tbody>";
var dt = "";
for (var i = 0; i < json.rows.length; i++) {
dt = json.rows[i].measuredt;
if (dt != null && dt != '') {
dt = dt.replace("T", " ");
dt = dt.replace("Z", "");
dt = dt.substring(0, 16);
}
str += "<tr>";
if (json.rows[i].disname != null && json.rows[i].disname != '') {
str += " <td>" + json.rows[i].disname + "</td>";
} else {
str += " <td>" + json.rows[i].parmname + "</td>";
}
str += " <td>" + json.rows[i].parmvalue + " " + json.rows[i].unit + "</td>";
str += " <td>" + dt + "</td>";
str += "</tr>";
}
str += "</tbody>";
str += "</table>";
$('#table1').html(str);
});
}
//点位报警记录
/*function fun_table2(equipmentcardid) {
$.post(ext.contextPath + '/listener/listenerMessage/getList4Equ.do', {
equipmentcardId: equipmentcardid
}, function (data) {
var json = JSON.parse(data);
var str = "";//alarm_his_div
str += "<table class='table'><caption>点位报警记录</caption>";
str += "<thead><tr><th>" + "报警点位" + "</th><th>" + "报警时间" + "</th></tr>";
str += "<tbody>";
for (var i = 0; i < json.length; i++) {
str += "<tr>";
// str += " <td>" + json[i].objid + "</td>";
if (json[i].mPoint != null && json[i].mPoint != '') {
str += " <td>" + json[i].mPoint.parmname + "</td>";
} else {
str += " <td>" + "-" + "</td>";
}
str += " <td>" + json[i].insdt + "</td>";
str += "</tr>";
}
str += "</tbody>";
str += "</table>";
$('#table2').html(str);
});
}*/
//点位报警记录
function fun_table2(point_code) {
$.post(ext.contextPath + '/alarm/proAlarm/getlist.do', {
point_code: point_code,
}, function (data) {
var json = JSON.parse(data);
var str = "";//alarm_his_div
str += "<table class='table'><caption>点位报警记录</caption>";
str += "<thead><tr><th>" + "报警点位" + "</th><th>" + "报警时间" + "</th><th>" + "报警描述" + "</th></tr>";
str += "<tbody>";
for (var i = 0; i < json.length; i++) {
if (i <= 10) {
str += "<tr>";
str += " <td width='30%'>" + json[i].pointCode + "</td>";
str += " <td width='30%'>" + json[i].alarmTime.substring(0, 16) + "</td>";
str += " <td width='40%'>" + json[i].describe + "</td>";
str += "</tr>";
}
}
str += "</tbody>";
str += "</table>";
$('#table2').html(str);
});
}
/**
* 报警确认
* @param pointCode
* @param alarmTime
* @param bizid
*/
function alarm_confirm(pointCode, alarmTime, bizid) {
$.post(ext.contextPath + '/alarm/proAlarm/alarmConfirm.do', {
pointCode: pointCode,
alarmTime: alarmTime,
bizid: bizid
}, function (data) {
})
}
/**
* 点击历史报警
*/
/*function alarm_his() {
$.post(ext.contextPath + '/listener/listenerMessage/getList.do', {}, function (data) {
var json = JSON.parse(data);
var str = "";//alarm_his_div
str += "<table class='table'>";
str += "<thead><tr><th>" + "报警点位编码" + "</th><th>" + "报警点位名称" + "</th><th>" + "报警时间" + "</th><th>" + "所属设备" + "</th><th>" + "所属厂" + "</th></tr>";
str += "<tbody>";
for (var i = 0; i < json.length; i++) {
str += "<tr>";
str += " <td>" + json[i].objid + "</td>";
if (json[i].mPoint != null && json[i].mPoint != '') {
str += " <td>" + json[i].mPoint.parmname + "</td>";
} else {
str += " <td>" + "-" + "</td>";
}
str += " <td>" + json[i].insdt + "</td>";
if (json[i].mPoint != null && json[i].mPoint.equipmentCard != null && json[i].mPoint.equipmentCard != '') {
str += " <td>" + json[i].mPoint.equipmentCard.equipmentname + "</td>";
} else {
str += " <td>" + "-" + "</td>";
}
if (json[i].company != null && json[i].company != '') {
str += " <td>" + json[i].company.name + "</td>";
} else {
str += " <td>" + "-" + "</td>";
}
str += "</tr>";
}
str += "</tbody>";
str += "</table>";
$('#alarm_his_div').html(str);
var index2 = layer.open({
id: 2,
type: 1,
title: '历史报警',
area: ['60%', '500px'],
skin: 'bgfff', //没有背景色
shadeClose: false,
closeBtn: '1',
content: $('#alarm_his_div')
});
});
}*/
/**
* 点击历史报警
*/
function alarm_his() {
var equipmentcardid = $('#equipmentcardid').val();
$.post(ext.contextPath + '/work/mpoint/getlistES.do', {
rows: 20,
page: 1,
sort: 'id',
order: 'desc',
equipmentcardId: equipmentcardid
}, function (data1) {
var json1 = JSON.parse(data1);
var str = "";
// str += "<table class='table'><caption>设备下点位报警记录</caption>";
str += "<table class='table'>";
str += "<thead><tr><th>" + "报警点位" + "</th><th>" + "报警时间" + "</th><th>" + "报警描述" + "</th></tr>";
str += "<tbody>";
for (var c = 0; c < json1.rows.length; c++) {
$.ajaxSettings.async = false;
$.post(ext.contextPath + '/alarm/proAlarm/getlist.do', {
point_code: json1.rows[c].id,
}, function (data) {
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
if (i <= 20) {
str += "<tr>";
str += " <td>" + json[i].pointCode + "</td>";
str += " <td>" + json[i].alarmTime.substring(0, 19) + "</td>";
str += " <td>" + json[i].describe + "</td>";
str += "</tr>";
}
}
});
$.ajaxSettings.async = true;
}
str += "</tbody>";
str += "</table>";
$('#alarm_his_div').html(str);
var index2 = layer.open({
id: 2,
type: 1,
title: '历史报警',
area: ['60%', '500px'],
skin: 'bgfff', //没有背景色
shadeClose: true,
closeBtn: '1',
content: $('#alarm_his_div')
});
});
}
//调用新增异常页面
var addAbnormityFun = function () {
var description = $('#alarm_description').text();//报警描述 - 赋值到异常描述里
var expert_advice = $('#expert_advice').text();//专家建议 - 赋值到备注里
var processSectionCode = $('#processSectionCode').val();//工艺段code - 赋值到工艺段
$.post(ext.contextPath + '/maintenance/abnormity/doadd_new.do', {
unitId: $('#unitId_mqtt').val(),
abnormityDescription: description,
remark: expert_advice,
processSectionCode: processSectionCode
}, function (data) {
$("#subDiv").html(data);
openModal('subModalAbnorm');
});
};
//调用新增临时任务页面
var addPatrolPlanFun = function () {
$.post(ext.contextPath + '/timeEfficiency/patrolPlan/addTemp.do', {
unitId: $('#unitId_mqtt').val()
}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
});
};
</script>
</head>
<body>
<div style="display:none;width: 100%;height: 100%;" id="show_div">
<input type="hidden" id="unitId_mqtt" value="">
<input type="hidden" id="processSectionCode" value="">
<%--整个div--%>
<div style="width: 100%;height: 100%;">
<%--红色div--%>
<div style="width: 100%;height: 20%;float: left;">
<div style="width: 98%;height: 90%;margin: 8px 1% 5px 1%" class="notification-item">
<div style="width: 85%;height: 100%;float: left;font-size: 24px;">
<div style="width: 2%;height: 100%;float: left;"></div>
<div style="width: 98%;height: 100%;float: left;">
<div style="width: 100%;height: 15%;"></div>
<div style="width: 100%;height: 30%;">
<span id="alarm_time" style="margin-left: 10px;"></span>
<span style="width: 200px;">&nbsp;&nbsp;&nbsp;</span>
<span id="alarm_type" style="margin-left: 10px;"></span>
</div>
<div style="width: 100%;height: 10%;"></div>
<div style="width: 100%;height: 45%;white-space: nowrap;">
<span id="alarm_description" style="margin-left: 10px;"></span>
</div>
</div>
</div>
<div style="width: 15%;height: 100%;float: left;text-align:center;font-size: 31px;margin-top:30px;">
<%--<u style="cursor:pointer;" onclick="alarm_his();">历史报警</u>--%>
</div>
</div>
</div>
<%--蓝色div--%>
<div style="width: 100%;height: 20%;float: left;">
<div style="width: 98%;height: 90%;margin: 5px 1% 5px 1%;" class="notification-item-2">
<div>
<div style="width: 135px;height: 100%;float: left;">
<img id="imgDivId" style="width: 100%;height: 172px;padding-bottom: 45px;"/>
</div>
<div style="width: 10%;height: 100%;float: left;"></div>
<div style="width: 10%;height: 100%;float: left;font-size: 24px;color: white;padding-top: 45px;padding-left: 31px;font-weight: bold;">
专家建议
</div>
<div style="width: 70%;height: 100%;float: left;font-size: 24px;color: white;padding-top: 45px;padding-left: 31px;white-space: nowrap;">
<span style="text-align:left;" id="expert_advice"></span>
</div>
</div>
</div>
</div>
<%--设备和负责人 div--%>
<div style="width: 100%;height: 10%;float: left;border-top: 2px solid #F5F5F5;border-bottom: 2px solid #F5F5F5;">
<div style="width: 60%;height: 100%;float: left;font-size: 22px;">
<div style="padding-top: 14px;padding-left: 31px;">
<div style="width: 10%;height: 100%;float: left;"></div>
<div style="width: 20%;height: 100%;float: left;">
<input type="hidden" id="equipmentcardid" value="">
<span style="font-weight: bold;padding-left: 15px;">设备关联</span>
</div>
<div style="width: 70%;height: 100%;float: left;">
<span id="equipmentname"></span>
<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
<u style="cursor:pointer;" onclick="alarm_his();">历史报警</u>
</div>
</div>
</div>
<div style="width: 20%;height: 100%;float: left;text-align:left;margin-top:14px;font-size: 22px;">
<span style="font-weight: bold;">当班负责人&nbsp;&nbsp;&nbsp;</span>
<span id="nowUser">-</span>
</div>
<div style="width: 10%;height: 100%;float: left;text-align:left;font-size: 22px;margin-top:10px;">
<button class="button2Fun"
onclick="addAbnormityFun();">
上报异常
</button>
</div>
<div style="width: 10%;height: 100%;float: left;text-align:left;font-size: 22px;margin-top:10px;">
<button class="button2Fun"
onclick="addPatrolPlanFun();">
下发任务
</button>
</div>
</div>
<%--下面div--%>
<div style="width: 100%;height: 50%;float: left;font-size: 16px;">
<div style="width: 2%;height: 100%;float: left;"></div>
<div style="width: 47%;height: 100%;float: left;overflow-y:auto;" id="table1">
</div>
<div style="width: 2%;height: 100%;float: left;">
</div>
<div style="width: 47%;height: 100%;float: left;overflow-y:auto;" id="table2">
</div>
<div style="width: 2%;height: 100%;float: left;">
</div>
</div>
</div>
</div>
<div style="display:none;width: 100%;height: 100%;" id="alarm_his_div">
</div>
<%--<div id="subDiv" style="z-index:99;"></div>--%>
<%--<div id="app" style="display:none;">
<div></div>
<el-form ref="form" :model="form" label-width="100px">
<el-row>
<el-col span="12">
<el-form-item label="设备名称">
<el-view v-model="form.mimian">1#粗格栅机</el-view>
</el-form-item>
</el-col>
<el-col span="12">
<el-form-item label="设备编号">
<el-view v-model="form.mimu">123456789</el-view>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>--%>
</body>
</html>