474 lines
21 KiB
JavaScript
474 lines
21 KiB
JavaScript
console.log("闸门上升状态"+JSON.parse(message.payloadString).gus);
|
|
console.log("闸门下降状态"+JSON.parse(message.payloadString).gds);
|
|
|
|
console.log("闸门上限位"+JSON.parse(message.payloadString).gul);
|
|
console.log("闸门下限位"+JSON.parse(message.payloadString).gll);
|
|
|
|
|
|
console.log("主污泵状态"+JSON.parse(message.payloadString).mps);
|
|
console.log("备污泵状态"+JSON.parse(message.payloadString).sps);
|
|
|
|
console.log("闸门上升指示灯"+JSON.parse(message.payloadString).guil);
|
|
console.log("闸门下降指示灯"+JSON.parse(message.payloadString).gdil);
|
|
console.log("复位按钮指示灯"+JSON.parse(message.payloadString).rbil);
|
|
|
|
console.log("主污泵指示灯"+JSON.parse(message.payloadString).mpril);
|
|
console.log("备污泵指示灯"+JSON.parse(message.payloadString)
|
|
<script type="text/javascript">
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
bigScreenDeviceList: '',
|
|
bigScreenDeviceRunInfo: '',
|
|
bigScreenDeviceEventList: '',
|
|
bigScreenHospitalDataList: '',
|
|
timer: '',
|
|
bigScreenDeviceRunCurrentInfo: '',
|
|
bigScreenDeviceRealData: '',
|
|
bigScreenDeviceName: '',
|
|
bigScreenCurrentTime: ''
|
|
},
|
|
methods: {
|
|
// 获取设备列表
|
|
getBigScreenDeviceList: function()
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceList = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
selectDeviceId: function(id)
|
|
{
|
|
// 设备运行详情
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenCurrentTime',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenCurrentTime = mes.data
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceRunInfo',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceRunInfo = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
|
|
// 设备当前情况
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceRunCurrentInfo',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceRunCurrentInfo = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
|
|
// 事件列表
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceEventList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceEventList = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
|
|
// 设备实时图名称
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceName',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceName = mes.data
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
|
|
// 实时数据
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceRealData',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceRealData = mes.data
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
|
|
// 历史数据
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenHospitalDataList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenHospitalDataList = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 设备运行详情
|
|
getBigScreenDeviceRunInfo: function(id)
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceRunInfo',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceRunInfo = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 设备当前情况
|
|
getBigScreenDeviceRunCurrentInfo: function(id)
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceRunCurrentInfo',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceRunCurrentInfo = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 事件列表
|
|
getBigScreenDeviceEventList: function(id)
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceEventList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceEventList = mes.data
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 设备实时图名称
|
|
getBigScreenDeviceName: function(id)
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceName',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceName = mes.data
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 实时数据
|
|
getBigScreenDeviceRealData: function(id)
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceRealData',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenDeviceRealData = mes.data
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 历史数据
|
|
getBigScreenHospitalDataList: function(id)
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenHospitalDataList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenHospitalDataList = mes.data
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 命令控制
|
|
command_control: function(message,name)
|
|
{
|
|
// websocket 连接
|
|
var socket = new WebSocket("wss://gpic.opmonitor.com/wss");
|
|
|
|
// 连接成功时触发
|
|
socket.onopen = function(event)
|
|
{
|
|
console.log('=====================WebSocket 连接成功======================');
|
|
|
|
|
|
// 组合返回指令进行发送
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getCommand',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'command': message,'name': name},
|
|
success: function(mes)
|
|
{
|
|
for (let i = 0; i < mes.data.length; i++) {
|
|
// 发送消息到服务器
|
|
console.info(mes.data[i]);
|
|
socket.send(mes.data[i]);
|
|
}
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
};
|
|
|
|
// 关闭连接时触发
|
|
socket.onclose = function(event)
|
|
{
|
|
console.log('WebSocket 连接关闭');
|
|
};
|
|
|
|
// 发生错误时触发
|
|
socket.onerror = function(event)
|
|
{
|
|
console.error('WebSocket 错误:', event);
|
|
};
|
|
|
|
// 指令发送成功 显示
|
|
// $('#toast-command').css('display','block');
|
|
$('#toast-command').text(message+'指令已发送成功!');
|
|
// 指令发送成功 消失
|
|
// setTimeout(function() {
|
|
// $('#toast-command').text('')
|
|
// }, 3000);
|
|
},
|
|
// 获取当前更新时间
|
|
getBigScreenCurrentTime: function(id)
|
|
{
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenCurrentTime',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'id':id},
|
|
success: function(mes)
|
|
{
|
|
_this.bigScreenCurrentTime = mes.data
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
},
|
|
// 每5秒更新数据
|
|
updateData: function()
|
|
{
|
|
let _this = this;
|
|
let device_name = this.bigScreenDeviceName;
|
|
$.ajax({
|
|
url: '?c=big_screen&a=convertId',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'device_name':device_name},
|
|
success: function(mes)
|
|
{
|
|
console.info('执行了一次...')
|
|
_this.selectDeviceId(mes.data);
|
|
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getBigScreenDeviceList();
|
|
let _this = this;
|
|
// 首次加载更新一次
|
|
$.ajax({
|
|
url: '?c=big_screen&a=getBigScreenDeviceId',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes)
|
|
{
|
|
// 获取当前更新时间
|
|
_this.getBigScreenCurrentTime(mes.data);
|
|
_this.getBigScreenDeviceName(mes.data);
|
|
_this.getBigScreenDeviceRunInfo(mes.data);
|
|
_this.getBigScreenDeviceEventList(mes.data);
|
|
_this.getBigScreenHospitalDataList(mes.data);
|
|
_this.getBigScreenDeviceRunCurrentInfo(mes.data);
|
|
_this.getBigScreenDeviceRealData(mes.data);
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
|
|
// 连接mqtt
|
|
// 将在全局初始化一个 mqtt 变量
|
|
const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
|
|
|
|
// 创建一个全局的 MQTT 客户端
|
|
var client = new Paho.MQTT.Client("mqtt.gpic.opmonitor.com", Number(8083), clientId);
|
|
|
|
// 设置接收消息的回调函数
|
|
client.onMessageArrived = function(message) {
|
|
// 在这里处理接收到的消息 将接收到的数据放到页面中
|
|
// 判断mqtt 上来的数据是否是当前页面的数据，如果是进行更新
|
|
let _that = _this;
|
|
device_name = _this.bigScreenDeviceName
|
|
|
|
if(_this.bigScreenDeviceName != '')
|
|
{
|
|
$.ajax({
|
|
url: '?c=big_screen&a=judgeDevice',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'did': JSON.parse(message.payloadString).did, 'name': _that.bigScreenDeviceName},
|
|
success: function(mes)
|
|
{
|
|
if(mes.data == 'success')
|
|
{
|
|
console.info(message.payloadString)
|
|
// 传感器数据
|
|
_that.bigScreenDeviceRealData.level_data = JSON.parse(message.payloadString).llv
|
|
_that.bigScreenDeviceRealData.ph_data = JSON.parse(message.payloadString).phv
|
|
_that.bigScreenDeviceRealData.rainfall_data = JSON.parse(message.payloadString).rfv
|
|
_that.bigScreenDeviceRealData.ammonia_data = JSON.parse(message.payloadString).nh4v
|
|
_that.bigScreenDeviceRealData.rainsnow = JSON.parse(message.payloadString).rsv
|
|
// 传感器状态
|
|
_that.bigScreenDeviceRunCurrentInfo.gate_up = JSON.parse(message.payloadString).gus == 1 ? '闸门上升' : '闸门停止上升'
|
|
_that.bigScreenDeviceRunCurrentInfo.gate_down = JSON.parse(message.payloadString).gds == 1 ? '闸门下降' : '闸门停止下降'
|
|
_that.bigScreenDeviceRunCurrentInfo.main_sewage_pump = JSON.parse(message.payloadString).mps == 1 ? '开启' : '关闭'
|
|
_that.bigScreenDeviceRunCurrentInfo.standby_sewage_pump = JSON.parse(message.payloadString).sps == 1 ? '开启' : '关闭'
|
|
_that.bigScreenDeviceRunCurrentInfo.main_rain_pump = JSON.parse(message.payloadString).rps == 1 ? '开启' : '关闭'
|
|
}
|
|
},
|
|
error: function(msg)
|
|
{
|
|
console.info('ajax请求失败');
|
|
}
|
|
})
|
|
}else
|
|
{
|
|
console.info('bigScreenDeviceName为空')
|
|
}
|
|
};
|
|
|
|
// 连接到 MQTT 代理
|
|
client.connect({
|
|
onSuccess: function() {
|
|
console.log("已连接到 MQTT 代理");
|
|
// 连接成功后，订阅主题
|
|
client.subscribe("gpic_d/#");
|
|
},
|
|
onFailure: function(errorMessage) {
|
|
console.log("连接失败: " + errorMessage.errorMessage);
|
|
}
|
|
});
|
|
// 每5秒更新一次
|
|
setInterval(() => {
|
|
this.updateData(); // 每隔一定时间更新数据
|
|
}, 2000);
|
|
}
|
|
})
|
|
</script> |