855 lines
54 KiB
HTML
855 lines
54 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>设备运行 | 智能截流闸管理平台</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="智能截流闸管理平台" name="description" />
|
|
<meta content="Themesdesign" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- jquery.vectormap css -->
|
|
<link href="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- DataTables -->
|
|
<link href="assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- Responsive datatable examples -->
|
|
<link href="assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- Bootstrap Css -->
|
|
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|
<!-- <link href="assets/css/bootstrap-dark.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" /> -->
|
|
<!-- Icons Css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App Css-->
|
|
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
|
|
<link href="assets/css/gpic.css" id="app-style" rel="stylesheet" type="text/css" />
|
|
<!-- <link href="assets/css/app-dark.min.css" id="app-style" rel="stylesheet" type="text/css" /> -->
|
|
|
|
<!-- 引入vue.js -->
|
|
<script src="assets/js/pages/vue2.6.11.js"></script>
|
|
</head>
|
|
<body data-sidebar="dark">
|
|
|
|
<div id="layout-wrapper">
|
|
|
|
<!-- 头部开始 -->
|
|
<?php include_once('header.tpl.html'); ?>
|
|
<!-- 头部结束 -->
|
|
|
|
<!-- 目录开始 -->
|
|
<?php include_once('leftsidebar.tpl.html');?>
|
|
<!-- 目录结束 -->
|
|
|
|
<div class="main-content" id="app" style="margin-left: 380px;">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-xl-12">
|
|
<div class="progress progress-sm animated-progess" style="height: 2px;">
|
|
<div class="progress-bar bg-secondary" role="progressbar" style="width: 0%" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body" style="">
|
|
<div style="overflow: auto;">
|
|
<h6 class="mb-2" style="float:left;font-weight: 600;font-size: 28px;">{{bigScreenDeviceName}}</h6>
|
|
<hr><br>
|
|
<h6 class="mb-2" style="float:left;font-weight: 600;font-size: 18px;">设备策略开启状态及运行参数设置
|
|
<div id="click2wait" class="spinner-border text-success ml-2" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
</h6>
|
|
<h6 class="update_time">更新时间：<span class='e-font'>{{bigScreenCurrentTime}}</span></h6>
|
|
</div>
|
|
<div >
|
|
<table class="table table-bordered table-striped mb-0">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate" id="M130">控制模式</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-soft-primary font-size-14">{{bigScreenDeviceRunCurrentInfo.m130}}</div>
|
|
</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate" >主污泵液位控制策略生效开关</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="m500">{{bigScreenDeviceRunCurrentInfo.m500}}</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M500主污泵液位生效',bigScreenDeviceName)">生效</button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M500主污泵液位失效',bigScreenDeviceName)">失效</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">备污泵液位控制策略生效开关</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="m502">{{bigScreenDeviceRunCurrentInfo.m502}}</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M502备污泵液位生效',bigScreenDeviceName)">生效</button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M502备污泵液位失效',bigScreenDeviceName)">失效</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">雨量闸门控制策略生效开关</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="m501">{{bigScreenDeviceRunCurrentInfo.m501}}</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M501闸门雨量控制生效',bigScreenDeviceName)">生效</button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M501闸门雨量控制失效',bigScreenDeviceName)">失效</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">雨量定时清零策略生效开关</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="m503">{{bigScreenDeviceRunCurrentInfo.m503}}</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M503雨量定时清零生效',bigScreenDeviceName)">生效</button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M503雨量定时清零失效',bigScreenDeviceName)">失效</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">雨雪为0时清空雨量策略生效开关</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="m504">{{bigScreenDeviceRunCurrentInfo.m504}}</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M504雨雪定时清零雨量生效',bigScreenDeviceName)">生效</button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control('M504雨雪定时清零雨量失效',bigScreenDeviceName)">失效</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">超声波液位安装高度</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-soft-dark font-size-14" id="D210">{{bigScreenDeviceRunCurrentInfo.d210}} cm</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<div class="btn-group" role="group">
|
|
<input type="number" class="input-mini form-control" name="D210" ref='vd210'></button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control2('D210',<?php echo v('did');?>)">设置</button>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">主泵触发液位上限</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-soft-dark font-size-14" id="D212">{{bigScreenDeviceRunCurrentInfo.d212}} cm</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<div class="btn-group" role="group">
|
|
<input type="number" class="input-mini form-control" name="D212" ref='vd212'></button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control2('D212',<?php echo v('did');?>)">设置</button>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">主泵触发液位下限</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-soft-dark font-size-14" id="D214">{{bigScreenDeviceRunCurrentInfo.d214}} cm</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<div class="btn-group" role="group">
|
|
<input type="number" class="input-mini form-control" name="D214" ref='vd214'></button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control2('D214',<?php echo v('did');?>)">设置</button>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">备泵触发液位上限</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-soft-dark font-size-14" id="D230">{{bigScreenDeviceRunCurrentInfo.d230}} cm</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<div class="btn-group" role="group">
|
|
<input type="number" class="input-mini form-control" name="D230" ref='vd230'></button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control2('D230',<?php echo v('did');?>)">设置</button>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">备泵触发液位下限</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-soft-dark font-size-14" id="D232">{{bigScreenDeviceRunCurrentInfo.d232}} cm</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<div class="btn-group" role="group">
|
|
<input type="number" class="input-mini form-control" name="D232" ref='vd232'></button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control2('D232',<?php echo v('did');?>)">设置</button>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">闸门开启雨量触发阈值</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge badge-soft-dark font-size-14" id="D216">{{bigScreenDeviceRunCurrentInfo.d216}} mm</div>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14">
|
|
<div class="btn-group" role="group">
|
|
<input type="number" class="input-mini form-control" name="D216" ref='vd216'></button>
|
|
<button type="button" class="btn btn-outline-primary btn-ctrl-sm btn-ctrl" @click="command_control2('D216',<?php echo v('did');?>)">设置</button>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">浮子上限位</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="ful">{{bigScreenDeviceRunCurrentInfo.ful}} </div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">浮子下限位</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="fll">{{bigScreenDeviceRunCurrentInfo.fll}} </div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">闸门上限位</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="gul">{{bigScreenDeviceRunCurrentInfo.gul}} </div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<h5 class="font-size-14 text-truncate">闸门下限位</h5>
|
|
</td>
|
|
<td>
|
|
<div class="badge font-size-14" id="gll">{{bigScreenDeviceRunCurrentInfo.gll}} </div>
|
|
</td>
|
|
</tr>
|
|
-->
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Page-content -->
|
|
|
|
<?php include_once('footer.tpl.html');?>
|
|
</div>
|
|
<!-- end main content-->
|
|
<?php include_once('rightsidebar2.tpl.html');?>
|
|
</div>
|
|
<!-- END layout-wrapper -->
|
|
|
|
|
|
<!-- Right bar overlay-->
|
|
<div class="rightbar-overlay"></div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script src="assets/libs/jquery/jquery.min.js"></script>
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/libs/node-waves/waves.min.js"></script>
|
|
<!-- datatable -->
|
|
<script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
|
|
<script src="assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
|
|
<script src="assets/js/paho-mqtt/mqttws31.js"></script>
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
timer: '',
|
|
bigScreenDeviceRunCurrentInfo: '', // yes
|
|
bigScreenDeviceRealData: '',
|
|
bigScreenDeviceName: '', // yes
|
|
bigScreenCurrentTime: '',
|
|
did : 1037,
|
|
client :null,
|
|
isConnected:false,
|
|
},
|
|
mounted(){
|
|
const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8)
|
|
this.client = new Paho.MQTT.Client("mqtt.gpic.opmonitor.com", Number(8083), clientId);
|
|
this.client.onConnectionLost = this.onConnectionLost;
|
|
this.client.onMessageArrived = this.onMessageArrived;
|
|
this.connect();
|
|
},
|
|
beforeDestroy() {
|
|
this.client.disconnect();
|
|
},
|
|
methods: {
|
|
// 获取设备列表
|
|
selectDeviceId: function(id)
|
|
{
|
|
// 设备运行详情
|
|
let _this = this;
|
|
_this.getBigScreenCurrentTime(id);
|
|
_this.getBigScreenDeviceName(id);
|
|
_this.getBigScreenDeviceRunCurrentInfo(id);
|
|
_this.getBigScreenDeviceRealData(id);
|
|
_this.did=id;
|
|
},
|
|
selectDeviceDid: function(did)
|
|
{
|
|
// 设备运行详情
|
|
let _this = this;
|
|
/*
|
|
_this.bigScreenDeviceRunCurrentInfo.m500="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.m501="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.m502="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.m503="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.m504="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.m130="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.d210="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.d212="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.d214="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.d216="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.d230="N/A";
|
|
_this.bigScreenDeviceRunCurrentInfo.d232="N/A";
|
|
*/
|
|
_this.did=did;
|
|
},
|
|
|
|
// 设备当前情况
|
|
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请求失败');
|
|
}
|
|
})
|
|
},
|
|
|
|
// 设备实时图名称
|
|
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请求失败');
|
|
}
|
|
})
|
|
},
|
|
|
|
// 命令控制
|
|
command_control: function(message,name)
|
|
{
|
|
$("#click2wait").css("display","inline-block");
|
|
$(".btn-ctrl").prop("disabled", true);
|
|
// 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').text('“'+message+'” 指令已发送成功!');
|
|
// 指令发送成功 消失
|
|
setTimeout(function() {
|
|
$('#toast-command').text('')
|
|
}, 3000);
|
|
},
|
|
|
|
command_control2: function(daddr,did)
|
|
{
|
|
$("#click2wait").css("display","inline-block");
|
|
$(".btn-ctrl").prop("disabled", true);
|
|
if (daddr=="D210") {
|
|
var vval = this.$refs.vd210.value;
|
|
var daddr_hex= "D2";
|
|
}
|
|
if (daddr=="D212") {
|
|
var vval = this.$refs.vd212.value;
|
|
var daddr_hex= "D4";
|
|
}
|
|
if (daddr=="D214") {
|
|
var vval = this.$refs.vd214.value;;
|
|
var daddr_hex= "D6";
|
|
}
|
|
if (daddr=="D216") {
|
|
var vval = this.$refs.vd216.value;
|
|
var daddr_hex= "D8";
|
|
}
|
|
if (daddr=="D230") {
|
|
var vval = this.$refs.vd230.value;
|
|
var daddr_hex= "E6";
|
|
}
|
|
if (daddr=="D232") {
|
|
var vval = this.$refs.vd232.value;
|
|
var daddr_hex= "E8";
|
|
}
|
|
console.log("daddr:" + daddr + " | did: " + did + " | val: " + vval);
|
|
var vval_hex = this.numberStringToPaddedHex(vval,4);
|
|
var vhex = "010200000006000600"+daddr_hex+vval_hex;
|
|
var vhex_bytes = this.hexToBytes(vhex);
|
|
|
|
console.error(vhex);
|
|
this.client.send("gpic_set/"+did,vhex_bytes);
|
|
|
|
// 指令发送成功 显示
|
|
$('#toast-command').text('“'+did+'” 指令已发送成功!');
|
|
// 指令发送成功 消失
|
|
setTimeout(function() {
|
|
$('#toast-command').text('')
|
|
}, 3000);
|
|
},
|
|
numberStringToPaddedHex: function(numStr, width) {
|
|
var num = parseInt(numStr);
|
|
return num.toString(16).padStart(width, '0');
|
|
},
|
|
hexToBytes:function(hexString) {
|
|
const bytes = [];
|
|
for (let c = 0; c < hexString.length; c += 2) {
|
|
bytes.push(parseInt(hexString.substr(c, 2), 16));
|
|
}
|
|
return new Uint8Array(bytes).buffer;
|
|
},
|
|
|
|
|
|
// 获取当前更新时间
|
|
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请求失败');
|
|
}
|
|
})
|
|
},
|
|
zha_down:function(){
|
|
$("#svg_zha").css("height","60px");
|
|
$("#svg_5_zha").css("height","150px");
|
|
},
|
|
zha_up:function(){
|
|
$("#svg_zha").css("height","10px");
|
|
$("#svg_5_zha").css("height","50px");
|
|
},
|
|
main_pump_start:function(){
|
|
$("#main_pump").attr("src","/assets/svg_img/pump.gif")
|
|
},
|
|
standby_pump_start:function(){
|
|
$("#standby_pump").attr("src","/assets/svg_img/pump.gif")
|
|
},
|
|
main_pump_stop:function(){
|
|
$("#main_pump").attr("src","/assets/svg_img/pump.png")
|
|
},
|
|
standby_pump_stop:function(){
|
|
$("#standby_pump").attr("src","/assets/svg_img/pump.png")
|
|
},
|
|
yewei_height:function(h){
|
|
//console.log(h);
|
|
$("#yewei").css("height",h/86*115+"px");
|
|
$("#yewei").attr("title",h+"cm");
|
|
$("#yewei").attr("alt",h+"cm");
|
|
$("#yewei_info").html("液位： "+h+"cm");
|
|
},
|
|
connect()
|
|
{
|
|
this.client.connect({
|
|
onSuccess: this.onConnect,
|
|
onFailure: this.onFailure,
|
|
});
|
|
},
|
|
onConnect()
|
|
{
|
|
console.log("■■■■■■ mqtt connected");
|
|
this.isConnected = true;
|
|
this.client.subscribe("gpic_d/"+this.did);
|
|
},
|
|
onFailure(message)
|
|
{
|
|
console.log("■■■■■■ mqtt connection failed: " + message.errorMessage);
|
|
this.reconnect();
|
|
},
|
|
onConnectionLost(responseObject)
|
|
{
|
|
if (responseObject.errorCode !== 0) {
|
|
console.log("■■■■■■ mqtt connection lost: " + responseObject.errorMessage);
|
|
this.isConnected = false;
|
|
this.reconnect();
|
|
}
|
|
},
|
|
reconnect()
|
|
{
|
|
if (!this.isConnected) {
|
|
setTimeout(() => {
|
|
this.connect();
|
|
}, 2000);
|
|
}
|
|
},
|
|
onMessageArrived(message) {
|
|
let _this = this;
|
|
console.log("■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ ■■■■■■ received message: ");
|
|
var currentDate = new Date();
|
|
var date = new Date();
|
|
var hours = date.getHours().toString().padStart(2, '0'); // 获取小时，并使用padStart补齐两位
|
|
var minutes = date.getMinutes().toString().padStart(2, '0'); // 获取分钟，并使用padStart补齐两位
|
|
var seconds = date.getSeconds().toString().padStart(2, '0'); // 获取秒，并使用padStart补齐两位
|
|
var formattedTime = hours + ':' + minutes + ':' + seconds;
|
|
console.info("~~~ ~~~"+formattedTime); // 输出当前时间的 H:i:s 格式
|
|
$(".progress").css("height", "3px");
|
|
$(".progress-bar").removeClass("bg-secondary");
|
|
$(".progress-bar").addClass("bg-success");
|
|
|
|
|
|
// 在这里处理接收到的消息 将接收到的数据放到页面中
|
|
// 判断mqtt 上来的数据是否是当前页面的数据，如果是进行更新
|
|
let _that = _this;
|
|
// 传感器数据
|
|
_that.bigScreenCurrentTime = formattedTime;
|
|
_that.bigScreenDeviceRealData.level_data = parseFloat(JSON.parse(message.payloadString).llv).toFixed(2);
|
|
_that.bigScreenDeviceRealData.ph_data = parseFloat(JSON.parse(message.payloadString).phv).toFixed(2);
|
|
_that.bigScreenDeviceRealData.rainfall_data = parseFloat(JSON.parse(message.payloadString).rfv).toFixed(2);
|
|
_that.bigScreenDeviceRealData.ammonia_data = parseFloat(JSON.parse(message.payloadString).nh4v).toFixed(2);
|
|
_that.bigScreenDeviceRealData.rainsnow = parseFloat(JSON.parse(message.payloadString).rsv).toFixed(2);
|
|
_that.bigScreenDeviceRealData.elec_conductivity_tds_data = parseFloat(JSON.parse(message.payloadString).tds).toFixed(2);
|
|
|
|
this.yewei_height(_that.bigScreenDeviceRealData.level_data);
|
|
|
|
// 传感器状态
|
|
console.log("did "+JSON.parse(message.payloadString).did);
|
|
/**/
|
|
console.log(JSON.parse(message.payloadString));
|
|
console.log(" | 复位 "+JSON.parse(message.payloadString).rbil + " | 自动 "+JSON.parse(message.payloadString).aril + " | 手动 "+JSON.parse(message.payloadString).mril);
|
|
console.log(" | 主泵 "+JSON.parse(message.payloadString).mpril + " | 备泵 "+JSON.parse(message.payloadString).spril + " | 闸门上升 "+JSON.parse(message.payloadString).guil + " | 闸门下降 "+JSON.parse(message.payloadString).gdil);
|
|
console.log(" | 浮上 "+JSON.parse(message.payloadString).ful + " | 浮下 "+JSON.parse(message.payloadString).fll + " | 闸上 "+JSON.parse(message.payloadString).gul + " | 闸下 "+JSON.parse(message.payloadString).gll);
|
|
console.log(" | 液位安装高度 D210 "+JSON.parse(message.payloadString).d210 + " | 主泵液位上限 D212 "+JSON.parse(message.payloadString).d212 + " | 主泵液位下限 D214 "+JSON.parse(message.payloadString).d214 + " | 闸门开启雨量阈值 D216 "+JSON.parse(message.payloadString).d216 + " | 备泵液位上限 D230 "+JSON.parse(message.payloadString).d230 + " | 备泵液位下限 D232 "+JSON.parse(message.payloadString).d232);
|
|
|
|
console.log(" | 本地0远程1 M130 "+JSON.parse(message.payloadString).m130 + " | 主泵策略 M500 "+JSON.parse(message.payloadString).m500 + " | 雨量闸门策略 M501 "+JSON.parse(message.payloadString).m501 + " | 备泵策略 M502 "+JSON.parse(message.payloadString).m502 + " | 雨量定时清零 M503 "+JSON.parse(message.payloadString).m503 + " | 雨雪清零 M504 "+JSON.parse(message.payloadString).m504);
|
|
|
|
|
|
|
|
_that.bigScreenDeviceRunCurrentInfo.m130 = JSON.parse(message.payloadString).m130?"手动/远程":"自动/本地";
|
|
|
|
|
|
|
|
|
|
|
|
_that.bigScreenDeviceRunCurrentInfo.m500 = JSON.parse(message.payloadString).m500?"生效":"失效";
|
|
_that.bigScreenDeviceRunCurrentInfo.m501 = JSON.parse(message.payloadString).m501?"生效":"失效";
|
|
_that.bigScreenDeviceRunCurrentInfo.m502 = JSON.parse(message.payloadString).m502?"生效":"失效";
|
|
_that.bigScreenDeviceRunCurrentInfo.m503 = JSON.parse(message.payloadString).m503?"生效":"失效";
|
|
_that.bigScreenDeviceRunCurrentInfo.m504 = JSON.parse(message.payloadString).m504?"生效":"失效";
|
|
|
|
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m500=="生效"){$("#m500").removeClass("badge-secondary"); $("#m500").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m500=="失效"){$("#m500").removeClass("badge-success"); $("#m500").addClass("badge-secondary");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m501=="生效"){$("#m501").removeClass("badge-secondary"); $("#m501").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m501=="失效"){$("#m501").removeClass("badge-success"); $("#m501").addClass("badge-secondary");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m502=="生效"){$("#m502").removeClass("badge-secondary"); $("#m502").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m502=="失效"){$("#m502").removeClass("badge-success"); $("#m502").addClass("badge-secondary");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m503=="生效"){$("#m503").removeClass("badge-secondary"); $("#m503").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m503=="失效"){$("#m503").removeClass("badge-success"); $("#m503").addClass("badge-secondary");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m504=="生效"){$("#m504").removeClass("badge-secondary"); $("#m504").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.m504=="失效"){$("#m504").removeClass("badge-success"); $("#m504").addClass("badge-secondary");}
|
|
|
|
|
|
_that.bigScreenDeviceRunCurrentInfo.d210 = JSON.parse(message.payloadString).d210;
|
|
_that.bigScreenDeviceRunCurrentInfo.d212 = JSON.parse(message.payloadString).d212;
|
|
_that.bigScreenDeviceRunCurrentInfo.d214 = JSON.parse(message.payloadString).d214;
|
|
_that.bigScreenDeviceRunCurrentInfo.d216 = JSON.parse(message.payloadString).d216;
|
|
_that.bigScreenDeviceRunCurrentInfo.d230 = JSON.parse(message.payloadString).d230;
|
|
_that.bigScreenDeviceRunCurrentInfo.d232 = JSON.parse(message.payloadString).d232;
|
|
|
|
|
|
_that.bigScreenDeviceRunCurrentInfo.ful = JSON.parse(message.payloadString).ful?"触发":"未触发";
|
|
_that.bigScreenDeviceRunCurrentInfo.fll = JSON.parse(message.payloadString).fll?"触发":"未触发";
|
|
_that.bigScreenDeviceRunCurrentInfo.gul = JSON.parse(message.payloadString).gul?"触发":"未触发";
|
|
_that.bigScreenDeviceRunCurrentInfo.gll = JSON.parse(message.payloadString).gll?"触发":"未触发";
|
|
|
|
if(_that.bigScreenDeviceRunCurrentInfo.ful=="触发"){$("#ful").removeClass("badge-secondary"); $("#ful").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.ful=="未触发"){$("#ful").removeClass("badge-success"); $("#ful").addClass("badge-secondary");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.fll=="触发"){$("#fll").removeClass("badge-secondary"); $("#fll").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.fll=="未触发"){$("#fll").removeClass("badge-success"); $("#fll").addClass("badge-secondary");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.gul=="触发"){$("#gul").removeClass("badge-secondary"); $("#gul").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.gul=="未触发"){$("#gul").removeClass("badge-success"); $("#gul").addClass("badge-secondary");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.gll=="触发"){$("#gll").removeClass("badge-secondary"); $("#gll").addClass("badge-success");}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.gll=="未触发"){$("#gll").removeClass("badge-success"); $("#gll").addClass("badge-secondary");}
|
|
|
|
|
|
|
|
|
|
var gate_up_status_liuning = JSON.parse(message.payloadString).guil==1?"上升":"停止";
|
|
var gate_down_status_liuning = JSON.parse(message.payloadString).gdil==1?"下降":"停止";
|
|
|
|
if(gate_up_status_liuning=="上升"){
|
|
_that.bigScreenDeviceRunCurrentInfo.gate_status_big = "升";
|
|
}else if(gate_down_status_liuning=="下降"){
|
|
_that.bigScreenDeviceRunCurrentInfo.gate_status_big = "降";
|
|
}
|
|
|
|
if(JSON.parse(message.payloadString).gul==0 && JSON.parse(message.payloadString).gll==1 && gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
|
|
_that.bigScreenDeviceRunCurrentInfo.gate_status_big = "开";
|
|
}else if(JSON.parse(message.payloadString).gul==1 && JSON.parse(message.payloadString).gll==0 && gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
|
|
_that.bigScreenDeviceRunCurrentInfo.gate_status_big = "关";
|
|
}else if(gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
|
|
_that.bigScreenDeviceRunCurrentInfo.gate_status_big = "半开";
|
|
}
|
|
|
|
|
|
if(_that.bigScreenDeviceRunCurrentInfo.gate_status_big=="升" || _that.bigScreenDeviceRunCurrentInfo.gate_status_big=="降"){
|
|
$("#gate_status_big").removeClass("badge-light");
|
|
$("#gate_status_big").removeClass("badge-secondary");
|
|
$("#gate_status_big").removeClass("badge-primary");
|
|
$("#gate_status_big").addClass("badge-success");
|
|
}
|
|
if(_that.bigScreenDeviceRunCurrentInfo.gate_status_big=="升"){
|
|
this.zha_up();
|
|
}else if(_that.bigScreenDeviceRunCurrentInfo.gate_status_big=="降"){
|
|
this.zha_down();
|
|
}
|
|
|
|
if(_that.bigScreenDeviceRunCurrentInfo.gate_status_big=="开" || _that.bigScreenDeviceRunCurrentInfo.gate_status_big=="半开"){
|
|
$("#gate_status_big").removeClass("badge-light");
|
|
$("#gate_status_big").removeClass("badge-success");
|
|
$("#gate_status_big").removeClass("badge-secondary");
|
|
$("#gate_status_big").addClass("badge-primary");
|
|
this.zha_up();
|
|
}else if(_that.bigScreenDeviceRunCurrentInfo.gate_status_big=="关"){
|
|
$("#gate_status_big").removeClass("badge-light");
|
|
$("#gate_status_big").removeClass("badge-success");
|
|
$("#gate_status_big").removeClass("badge-primary");
|
|
$("#gate_status_big").addClass("badge-secondary");
|
|
this.zha_down();
|
|
}
|
|
|
|
_that.bigScreenDeviceRunCurrentInfo.main_sewage_pump_big = JSON.parse(message.payloadString).mpril==true?"启":"停";
|
|
if(_that.bigScreenDeviceRunCurrentInfo.main_sewage_pump_big=="启"){
|
|
$("#main_sewage_pump_big").removeClass("badge-light");
|
|
$("#main_sewage_pump_big").addClass("badge-success");
|
|
this.main_pump_start();
|
|
}else{
|
|
$("#main_sewage_pump_big").removeClass("badge-success");
|
|
$("#main_sewage_pump_big").addClass("badge-light");
|
|
this.main_pump_stop();
|
|
}
|
|
_that.bigScreenDeviceRunCurrentInfo.standby_sewage_pump_big = JSON.parse(message.payloadString).spril==true?"启":"停";
|
|
if(_that.bigScreenDeviceRunCurrentInfo.standby_sewage_pump_big=="启"){
|
|
$("#standby_sewage_pump_big").removeClass("badge-light");
|
|
$("#standby_sewage_pump_big").addClass("badge-success");
|
|
this.standby_pump_start();
|
|
}else{
|
|
$("#standby_sewage_pump_big").removeClass("badge-success");
|
|
$("#standby_sewage_pump_big").addClass("badge-light");
|
|
this.standby_pump_stop();
|
|
}
|
|
_that.bigScreenDeviceRunCurrentInfo.alert_big = JSON.parse(message.payloadString).rbil==true?"预警":"正常";
|
|
if(_that.bigScreenDeviceRunCurrentInfo.alert_big=="预警"){
|
|
$("#alert_big").removeClass("badge-light");
|
|
$("#alert_big").addClass("badge-danger");
|
|
|
|
}else{
|
|
$("#alert_big").removeClass("badge-danger");
|
|
$("#alert_big").addClass("badge-light");
|
|
}
|
|
|
|
$("#click2wait").css("display","none");
|
|
$(".btn-ctrl").prop("disabled", false);
|
|
},
|
|
},
|
|
created: function () {
|
|
let _this = this;
|
|
let v_station_id = <?php echo v("id")?>;
|
|
let did = <?php echo v("did")?>;
|
|
current_station_id = (v_station_id==null)?1:v_station_id;
|
|
_this.selectDeviceId(current_station_id);
|
|
_this.selectDeviceDid(did);
|
|
|
|
// 每5秒更新一次
|
|
setInterval(() => {
|
|
var date = new Date();
|
|
var seconds = date.getSeconds().toString().padStart(2, '0'); // 获取秒，并使用padStart补齐两位
|
|
var s_5 = seconds % 61 * 1.67;
|
|
$(".progress-bar").css("width", s_5+"%");
|
|
$(".progress").css("height","2px");
|
|
$(".progress-bar").removeClass("bg-success");
|
|
$(".progress-bar").addClass("bg-secondary");
|
|
}, 1000);
|
|
},
|
|
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|