953 lines
29 KiB
Vue
953 lines
29 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class='tui-notice-board'>
|
||
<view class="tui-icon-bg">
|
||
<tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
|
||
</view>
|
||
<view class="tui-scorll-view" @tap='detail'>
|
||
<view class="tui-notice" :class="[animation?'tui-animation':'']">友情提示：只有在远程手动模式下才能进行远程控制！</view>
|
||
</view>
|
||
</view>
|
||
<tui-list-view>
|
||
<tui-list-cell>
|
||
<view class="tui-item-box" :lineLeft="false">
|
||
<view class="tui-msg-box">
|
||
<image :src="apiHost+'/miniapp/static/wsapp/nav2.png'" class="tui-msg-pic" mode="widthFix"></image>
|
||
<view class="tui-msg-item">
|
||
<view class="tui-msg-name">{{device_info.name}}</view>
|
||
<!-- <view class="tui-msg-content">{{device_info.addr}}</view> -->
|
||
<view class="tui-msg-content1">更新时间：{{device_info.created_at}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="tui-msg-right" @tap="do_back">
|
||
<uni-tag text="返回" style="border:none;padding:20rpx 20rpx;"></uni-tag>
|
||
</view>
|
||
</view>
|
||
</tui-list-cell>
|
||
<view style="height:20rpx"></view>
|
||
</tui-list-view>
|
||
<!-- <view class="mygrid1">
|
||
<h4 style="margin-left:2%; color: #ff0000;font-size: 30rpx;float:left;margin-top: 10rpx;"></h4>
|
||
<tui-button style="float: right;margin-right:20rpx;" type="danger" plain shape="circle" width="110rpx" height="60rpx" :size="24" @click="do_refresh()">刷新</tui-button>
|
||
</view> -->
|
||
|
||
<view class="tui-order-tracking" style="background-color: #F5F6FA;padding-top:0;padding-left:40rpx;display:flex;align-items:center;flex-wrap:wrap;padding-bottom: 10rpx;">
|
||
<view class="mygrid" v-if="device_info.svg_type!=5">
|
||
<view class="sensor_data">{{device_info.ph_data}}</view>
|
||
<view class="mygrid-size">PH</view>
|
||
</view>
|
||
<view class="mygrid" v-if="device_info.svg_type!=5">
|
||
<view class="sensor_data">{{device_info.elec_conductivity_tds_data}}<span style="font-size: 24rpx;">mg/L</span></view>
|
||
<view class="mygrid-size">TDS</view>
|
||
</view>
|
||
<view class="mygrid" v-if="device_info.svg_type!=5">
|
||
<view class="sensor_data">{{device_info.ammonia_data}}<span style="font-size: 24rpx;">mg/L</span></view>
|
||
<view class="mygrid-size">氨氮</view>
|
||
</view>
|
||
<br />
|
||
<view class="mygrid" v-if="device_info.svg_type!=5">
|
||
<view class="sensor_data">{{device_info.level_data}}<span style="font-size: 24rpx;">cm</span></view>
|
||
<view class="mygrid-size">液位</view>
|
||
</view>
|
||
<view class="mygrid">
|
||
<view class="sensor_data">{{device_info.rainsnow}}</view>
|
||
<view class="mygrid-size">雨雪量</view>
|
||
</view>
|
||
<view class="mygrid">
|
||
<view class="sensor_data">{{device_info.rainfall_data}}<span style="font-size: 24rpx;">mm</span></view>
|
||
<view class="mygrid-size">降雨量</view>
|
||
</view>
|
||
</view>
|
||
<view class="tui-flex-box">
|
||
<tui-button v-if="device_info.control_status=='本地'" margin="0 0rpx 26rpx 0" type="primary" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为本地自动')">本地自动</tui-button>
|
||
<tui-button v-else margin="0 0rpx 26rpx 0" type="gray" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为本地自动')">本地自动</tui-button>
|
||
<tui-button v-if="device_info.control_status=='远程'" margin="0 20rpx 26rpx 0" type="primary" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为远程手动')">远程手动</tui-button>
|
||
<tui-button v-else margin="0 20rpx 26rpx 0" type="gray" width="150rpx" height="60rpx" :size="28" @tap="ctrlCmd('M130设置为远程手动')">远程手动</tui-button>
|
||
</view>
|
||
<view class="tui-order-header">
|
||
<view class="device_status_cycle">
|
||
<view>
|
||
<tui-badge :type="gate_status_type_func" class="tui-badge device_status">{{device_info.gate_status_big}}</tui-badge>
|
||
</view>
|
||
</view>
|
||
<view class="device_name">
|
||
<view class="tui-text device_name_text">
|
||
<text class="tui-bold">闸门</text>
|
||
</view>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门上升')" >上升</tui-button>
|
||
<tui-button v-else disabled type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门上升')" >上升</tui-button>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门下降')">下降</tui-button>
|
||
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('闸门下降')">下降</tui-button>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('停止')">停止</tui-button>
|
||
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('停止')">停止</tui-button>
|
||
</view>
|
||
</view>
|
||
<view class="tui-order-header">
|
||
<view class="device_status_cycle">
|
||
<view>
|
||
<tui-badge :type="main_pump_status_type_func" class="tui-badge device_status"> {{device_info.main_pump_big}} </tui-badge>
|
||
</view>
|
||
</view>
|
||
<view class="device_name">
|
||
<view class="tui-text device_name_text">
|
||
<text class="tui-bold">主泵</text>
|
||
</view>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵启动')">启动</tui-button>
|
||
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵启动')">启动</tui-button>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵停止')">停止</tui-button>
|
||
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('主污泵停止')">停止</tui-button>
|
||
</view>
|
||
</view>
|
||
<view class="tui-order-header">
|
||
<view class="device_status_cycle">
|
||
<view>
|
||
<tui-badge :type="standby_pump_status_type_func" class="tui-badge device_status">{{device_info.standby_pump_big}}</tui-badge>
|
||
</view>
|
||
</view>
|
||
<view class="device_name">
|
||
<view class="tui-text device_name_text">
|
||
<text class="tui-bold">备泵</text>
|
||
</view>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵启动')">启动</tui-button>
|
||
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵启动')">启动</tui-button>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='远程'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵停止')">停止</tui-button>
|
||
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('备污泵停止')">停止</tui-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="tui-order-header">
|
||
<view class="device_status_cycle">
|
||
<view>
|
||
<tui-badge :type="control_status_type_func" class="tui-badge device_status">{{device_info.control_status}}</tui-badge>
|
||
</view>
|
||
</view>
|
||
<view class="device_name">
|
||
<view class="tui-text device_name_text">
|
||
<text class="tui-bold">控制</text>
|
||
</view>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('M130设置为本地自动')">本地自动</tui-button>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('M130设置为远程手动')">远程手动</tui-button>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="tui-order-header">
|
||
<view class="device_status_cycle">
|
||
<view>
|
||
<tui-badge :type="alert_status_type_func" class="tui-badge device_status">{{device_info.alert_big}}</tui-badge>
|
||
</view>
|
||
</view>
|
||
<view class="device_name">
|
||
<view class="tui-text device_name_text">
|
||
<text class="tui-bold">消警</text>
|
||
</view>
|
||
</view>
|
||
<view class="device_action">
|
||
<tui-button v-if="device_info.control_status=='手动'" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('工控机报警复位')">消除</tui-button>
|
||
<tui-button v-else disabled="true" type="primary" plain shape="circle" width="110rpx" height="60rpx" class="ctrl_btn" :size="24" @tap="ctrlCmd('工控机报警复位')">消除</tui-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import myapp from '@/common/js/myapp.js';
|
||
import mqtt from '@/utils/mqtt4.1.0.js';
|
||
import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
|
||
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
apiHost: myapp.apiHost,
|
||
animation: false,
|
||
detail:[],
|
||
detailEnd:{},
|
||
item: {
|
||
name: '总览',
|
||
url: '/packagePage/pages/overview/overview',
|
||
img: "nav1.png",
|
||
img_start: 'icon_start.png',
|
||
img_stop: 'icon_stop.png',
|
||
img_ctrlright: 'icon_ctrlright.png',
|
||
img_ctrlleft: 'icon_ctrlleft.png',
|
||
width: 74,
|
||
height: 74
|
||
},
|
||
ws_ctrl:null,
|
||
ws_status:null,
|
||
device_id: 0,
|
||
device_info: {},
|
||
f_did: 1001,
|
||
|
||
// mqtt 相关部分
|
||
broker:{
|
||
host: 'mqtt.gpic.opmonitor.com',
|
||
wsport: '8083',
|
||
wssport:'443',
|
||
path: '/mqtt',
|
||
},
|
||
onTopic: 'gpic_d/1000',
|
||
onSub: 'gpic_d/1000',
|
||
Qos: 2,
|
||
sendMassage: '',
|
||
time:0,
|
||
receiveMessage: '',
|
||
client: null,
|
||
options: {
|
||
wsOptions: {},
|
||
protocolVersion: 5, //MQTT连接协议版本
|
||
clientId: '',
|
||
keepalive: 60,
|
||
clean: false,
|
||
username: '',
|
||
password: '',
|
||
reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
|
||
connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
|
||
resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
|
||
},
|
||
}
|
||
},
|
||
onLoad: function(option) {
|
||
console.error("onLoad");
|
||
setTimeout(() => {
|
||
this.animation = true
|
||
}, 600)
|
||
this.device_id = option.id
|
||
let user = myapp.checkLogin()
|
||
uni.setStorageSync('lastPagePath', '/packagePage/pages/ctrldevice/ctrldevice')
|
||
let that = this
|
||
// 获取f_did
|
||
myapp.request('/?c=overview&a=getDeviceFdid',function(res) {
|
||
that.f_did = res.data.data;
|
||
that.onTopic = 'gpic_d/'+res.data.data;
|
||
that.onSub = 'gpic_d/'+res.data.data;
|
||
// console.info(res.data.data);
|
||
that.connect();
|
||
},{device_id:that.device_id})
|
||
|
||
|
||
myapp.request('/?c=overview&a=getTerminalDeviceInfoBydeviceId',function(res) {
|
||
that.device_info = res.data.data;
|
||
},{device_id:that.device_id})
|
||
|
||
|
||
//mqtt相关
|
||
let clientId = "wx_" + Math.random().toString(16).substr(2, 8);
|
||
that.options.clientId=clientId;
|
||
|
||
},
|
||
onShow: function() {
|
||
console.error("onShow");
|
||
console.error("onSHOW | websocket status ",myapp.websocket.socketOpen);
|
||
|
||
if(!myapp.websocket.socketOpen){
|
||
|
||
// ################# web socket 控制用的 ################
|
||
|
||
uni.connectSocket({
|
||
url: myapp.websocket.url
|
||
})
|
||
|
||
uni.onSocketOpen(function (res) {
|
||
console.log('CTRL WebSocket连接已打开！' + JSON.stringify(res))
|
||
|
||
myapp.websocket.socketOpen = true
|
||
myapp.websocket.send(myapp, 'connect')
|
||
|
||
for (let i = 0; i < myapp.websocket.socketMsgQueue.length; i++) {
|
||
uni.sendSocketMessage({data: myapp.websocket.socketMsgQueue[i]})
|
||
}
|
||
myapp.websocket.socketMsgQueue = []
|
||
})
|
||
|
||
uni.onSocketError(function (res) {
|
||
console.log('CTRL WebSocket连接打开失败，请检查！' + JSON.stringify(res));
|
||
// 页面重新加载一下
|
||
uni.redirectTo({
|
||
url: '/packagePage/pages/ctrldevice/ctrldevice?id=' + this_device_id
|
||
})
|
||
})
|
||
|
||
uni.onSocketMessage(function (res) {
|
||
console.log('收到服务器内容：' + JSON.stringify(res))
|
||
uni.hideLoading()
|
||
// console.log(res.data==null)
|
||
if(JSON.stringify(res).indexOf('connect') == -1) {
|
||
myapp.showHint('指令发送完成')
|
||
}
|
||
})
|
||
let this_device_id = this.device_id
|
||
uni.onSocketClose(function (res) {
|
||
console.log('CTRL WebSocket 已关闭--- 2！' + JSON.stringify(res))
|
||
uni.hideLoading();
|
||
uni.connectSocket({
|
||
url: myapp.websocket.url
|
||
});
|
||
// 坑，每次链接完成，页面就自动刷新
|
||
// console.info('=======')
|
||
// uni.redirectTo({
|
||
// url: '/packagePage/pages/ctrldevice/ctrldevice?id=' + this_device_id
|
||
// })
|
||
|
||
})
|
||
}
|
||
},
|
||
onHide: function() {
|
||
console.error("onHide");
|
||
if (myapp.websocket.socketOpen) {
|
||
uni.closeSocket()
|
||
myapp.websocket.socketOpen = false
|
||
}
|
||
this.unconnect();
|
||
|
||
},
|
||
onUnload:function(){
|
||
console.error("onHide");
|
||
if (myapp.websocket.socketOpen) {
|
||
uni.closeSocket()
|
||
myapp.websocket.socketOpen = false
|
||
}
|
||
this.unconnect();
|
||
},
|
||
|
||
|
||
methods: {
|
||
// bigtran to modify
|
||
ctrlCmd: function(name) {
|
||
uni.showLoading({
|
||
title: '命令发送中',
|
||
mask: true
|
||
})
|
||
let that = this
|
||
that.connect();
|
||
console.error("ctrlCMD | websocket status ",myapp.websocket.socketOpen);
|
||
if(!myapp.websocket.socketOpen){
|
||
|
||
// ################# web socket 控制用的 ################
|
||
|
||
uni.connectSocket({
|
||
url: myapp.websocket.url
|
||
})
|
||
|
||
|
||
}
|
||
|
||
if(name == '停止')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', '闸门停止上升', '000100000006FF0500240000', this.f_did)
|
||
myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
|
||
|
||
}else if(name == '闸门上升')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
|
||
myapp.websocket.send(myapp, 'control', '闸门上升', '000100000006FF050024FF00', this.f_did)
|
||
|
||
}else if(name == '闸门下降')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', '闸门停止上升', '000100000006FF0500240000', this.f_did)
|
||
myapp.websocket.send(myapp, 'control', '闸门下降', '000100000006FF050025FF00', this.f_did)
|
||
}else if(name == '工控机报警复位')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', '工控机报警复位', '000100000006FF0500270000', this.f_did)
|
||
}else if(name == 'M130设置为本地自动')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', 'M130设置为本地自动', '000100000006FF0500820000', this.f_did)
|
||
}else if(name == 'M130设置为远程手动')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', 'M130设置为远程手动', '000100000006FF050082FF00', this.f_did)
|
||
}else if(name == '主污泵启动')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', '主污泵启动', '000100000006FF05001EFF00', this.f_did)
|
||
}else if(name == '主污泵停止')
|
||
{
|
||
myapp.websocket.send(myapp, 'control', '主污泵停止', '000100000006FF05001E0000', this.f_did)
|
||
}
|
||
else
|
||
{
|
||
myapp.websocket.send(myapp, 'control', name, myapp.websocket.cmd[name], this.f_did)
|
||
}
|
||
// console.info('=======')
|
||
// uni.redirectTo({
|
||
// url: '/packagePage/pages/ctrldevice/ctrldevice?id=' + that.device_id
|
||
// })
|
||
// 更新数据
|
||
|
||
// setTimeout(function() {
|
||
// myapp.request('/?c=overview&a=getTerminalDeviceInfoBydeviceId',function(res) {
|
||
// that.device_info = res.data.data
|
||
// console.info(res.data.data.main_sewage_pump)
|
||
// },{device_id:that.device_id})
|
||
// }, 4000);
|
||
|
||
},
|
||
do_back: function() {
|
||
this.unconnect();
|
||
|
||
uni.redirectTo({
|
||
url: '/packagePage/pages/ctrllist/ctrllist'
|
||
})
|
||
},
|
||
do_refresh: function() {
|
||
let that = this
|
||
myapp.request('/?c=overview&a=getTerminalDeviceInfoBydeviceId',function(res) {
|
||
that.device_info = res.data.data
|
||
},{device_id:that.device_id})
|
||
},
|
||
|
||
// mqtt 相关部分 @bigtran
|
||
connect: function() {
|
||
var hosts = '',
|
||
|
||
// #ifdef APP-PLUS
|
||
hosts = 'wx://' + this.broker.host + ':8083/mqtt';
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
hosts = 'wss://' + this.broker.host + '/mqtt';
|
||
//#endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
// wx仅仅可以使用体验版
|
||
hosts = 'wxs://' + this.broker.host + '/mqtt';
|
||
// #endif
|
||
|
||
if (this.client == null || this.client.connented == false) {
|
||
this.client = mqtt.connect(
|
||
hosts,
|
||
this.options
|
||
);
|
||
|
||
this.client.on('connect', () => {
|
||
console.log('mqtt client ||| 连接成功 1')
|
||
this.subscribe()
|
||
});
|
||
this.client.on('message', (topic, 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;
|
||
this.device_info.created_at=formattedTime;
|
||
|
||
console.log(formattedTime, topic," message arrived...");
|
||
// console.log(topic,message.toString());
|
||
this.receiveMessage = message
|
||
if(message.toString().length>10)
|
||
{
|
||
this.device_info.alert_big = JSON.parse(message.toString()).rbil==true?"预警":"正常";
|
||
this.device_info.main_pump_big = JSON.parse(message.toString()).mpril==true?"启":"停";
|
||
this.device_info.standby_pump_big = JSON.parse(message.toString()).spril==true?"启":"停";
|
||
this.device_info.control_status = JSON.parse(message.toString()).m130==true?"远程":"本地";
|
||
var gate_up_status_liuning = JSON.parse(message.toString()).guil==1?"上升":"停止";
|
||
var gate_down_status_liuning = JSON.parse(message.toString()).gdil==1?"下降":"停止";
|
||
|
||
if(gate_up_status_liuning=="上升"){
|
||
this.device_info.gate_status_big = "升";
|
||
}else if(gate_down_status_liuning=="下降"){
|
||
this.device_info.gate_status_big = "降";
|
||
}
|
||
|
||
if(JSON.parse(message.toString()).gul==0 && JSON.parse(message.toString()).gll==1 && gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
|
||
this.device_info.gate_status_big = "开";
|
||
}else if(JSON.parse(message.toString()).gul==1 && JSON.parse(message.toString()).gll==0 && gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
|
||
this.device_info.gate_status_big = "关";
|
||
}else if(gate_up_status_liuning=="停止" && gate_down_status_liuning=="停止"){
|
||
this.device_info.gate_status_big = "半开";
|
||
}
|
||
|
||
this.device_info.level_data = parseFloat(JSON.parse(message.toString()).llv).toFixed(2);
|
||
this.device_info.ph_data = parseFloat(JSON.parse(message.toString()).phv).toFixed(2);
|
||
this.device_info.rainfall_data = parseFloat(JSON.parse(message.toString()).rfv).toFixed(2);
|
||
this.device_info.ammonia_data = parseFloat(JSON.parse(message.toString()).nh4v).toFixed(2);
|
||
this.device_info.rainsnow = parseFloat(JSON.parse(message.toString()).rsv).toFixed(2);
|
||
this.device_info.elec_conductivity_tds_data = parseFloat(JSON.parse(message.toString()).tds).toFixed(2);
|
||
}
|
||
|
||
|
||
|
||
// console.info(this.device_info.control_status)
|
||
// console.log(JSON.parse(message.toString()).rbil," | ",JSON.parse(message.toString()).mpril," | ",JSON.parse(message.toString()).spril," | ",JSON.parse(message.toString()).guil," | ",JSON.parse(message.toString()).gdil)
|
||
// console.log(this.device_info.gate_status_big," | ",this.device_info.main_pump_big," | ",this.device_info.standby_pump_big," | ",this.device_info.alert_big)
|
||
});
|
||
}
|
||
|
||
this.client.on('reconnect', error => {
|
||
console.log('mqtt client ||| 正在重连 2')
|
||
});
|
||
this.client.on('error', error => {
|
||
console.log('mqtt client ||| 连接失败 3')
|
||
});
|
||
|
||
},
|
||
subscribe: function() {
|
||
// 判断是否已成功连接
|
||
if (!this.client || !this.client.connected) {
|
||
console.log('mqtt client ||| 未连接 4')
|
||
return;
|
||
}
|
||
|
||
this.client.subscribe(this.onTopic, {
|
||
qos: this.Qos
|
||
}, error => {
|
||
if (!error) {
|
||
console.log('mqtt client ||| 订阅成功 5');
|
||
}
|
||
});
|
||
},
|
||
publish: function() {
|
||
// 判断是否已成功连接
|
||
if (!this.client || !this.client.connected) {
|
||
console.log('mqtt client ||| 未连接 6')
|
||
return;
|
||
}
|
||
if (this.sendMassage != '') {
|
||
// 定义JSON对象
|
||
const messageq = {
|
||
code: 200,
|
||
msg: 'cmd_name',
|
||
data:'cmd_data'
|
||
}
|
||
|
||
// 将JSON对象转换为JSON字符串
|
||
const message1 = JSON.stringify(messageq)
|
||
this.client.publish(this.onSub,message1, error => {
|
||
console.log(error || '消息发布成功');
|
||
console.log('mqtt client ||| 消息发布成功 7')
|
||
});
|
||
} else {
|
||
console.log('mqtt client ||| 发布消息为空 8')
|
||
}
|
||
|
||
},
|
||
unsubscribe: function() {
|
||
this.client.unsubscribe(
|
||
this.onTopic,
|
||
err => {
|
||
console.log(err || 'mqtt client ||| 取消订阅成功 9');
|
||
}
|
||
);
|
||
},
|
||
unconnect: function() {
|
||
if (!this.client || !this.client.connected) {
|
||
console.log('mqtt client ||| 未连接 10')
|
||
return;
|
||
}
|
||
this.unsubscribe();
|
||
this.client.end();
|
||
this.client = null;
|
||
console.log('mqtt client ||| 成功断开连接 11');
|
||
},
|
||
|
||
},
|
||
computed:{
|
||
gate_status_type_func(){
|
||
var $class;
|
||
if (this.device_info.gate_status_big=="升" || this.device_info.gate_status_big=="降")
|
||
{
|
||
$class="green";
|
||
}else if(this.device_info.gate_status_big=="半开" || this.device_info.gate_status_big=="开" || this.device_info.gate_status_big=="关"){
|
||
$class="primary";
|
||
}
|
||
return $class;
|
||
},
|
||
main_pump_status_type_func(){
|
||
var $class;
|
||
if (this.device_info.main_pump_big=="启")
|
||
{
|
||
$class="green";
|
||
}else if(this.device_info.main_pump_big=="停"){
|
||
$class="gray";
|
||
}
|
||
return $class;
|
||
},
|
||
standby_pump_status_type_func(){
|
||
var $class;
|
||
if (this.device_info.standby_pump_big=="启")
|
||
{
|
||
$class="green";
|
||
}else if(this.device_info.standby_pump_big=="停"){
|
||
$class="gray";
|
||
}
|
||
return $class;
|
||
},
|
||
alert_status_type_func(){
|
||
var $class;
|
||
if (this.device_info.alert_big=="预警")
|
||
{
|
||
$class="danger";
|
||
}else if(this.device_info.alert_big=="正常"){
|
||
$class="gray";
|
||
}else{
|
||
$class="gray";
|
||
}
|
||
return $class;
|
||
},
|
||
control_status_type_func(){
|
||
var $class;
|
||
if (this.device_info.control_status=="远程")
|
||
{
|
||
$class="primary";
|
||
}else if(this.device_info.control_status=="手动"){
|
||
$class="primary";
|
||
}else{
|
||
$class="gray";
|
||
}
|
||
return $class;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F5F6FA;
|
||
}
|
||
|
||
.mygrid {
|
||
display:inline-block;
|
||
border:1px solid #E5E5E5;
|
||
width:200rpx;
|
||
margin:10rpx;
|
||
background-color:#FFF;
|
||
text-align:center;
|
||
padding-top:20rpx;
|
||
padding-bottom:20rpx;
|
||
}
|
||
|
||
.mygrid1 {
|
||
display:inline-block;
|
||
border:1px solid #E5E5E5;
|
||
width:85%;
|
||
margin-left:45rpx;
|
||
background-color:#FFF;
|
||
text-align:left;
|
||
padding-top:20rpx;
|
||
padding-bottom:20rpx;
|
||
}
|
||
.tui-order-header {
|
||
padding: 40rpx 25rpx 0rpx 36rpx;
|
||
/* box-sizing: border-box; */
|
||
background: #fff;
|
||
margin-bottom: 10rpx;
|
||
height:150rpx;
|
||
}
|
||
|
||
.tui-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
padding: 4rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.tui-bold {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tui-node {
|
||
height: 24rpx;
|
||
width: 24rpx;
|
||
border-radius: 50%;
|
||
background-color: #5C5EC3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
flex-shrink: 0;
|
||
margin-top: 0rpx;
|
||
}
|
||
|
||
.tui-order-tracking {
|
||
padding: 30rpx 30rpx 30rpx 60rpx;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tui-time-axis {
|
||
border-left: 3rpx solid #5C5EC3;
|
||
padding-top:0;
|
||
padding-bottom:10rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.mytimeaxis, .mytimeaxis .tui-time-axis {
|
||
border-left: none;
|
||
}
|
||
|
||
.tui-order-title {
|
||
position: relative;
|
||
top:-9rpx;
|
||
padding-bottom: 12rpx;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tui-order-desc {
|
||
padding-bottom: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.tui-ptop {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.tui-order-time {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
display:none;
|
||
}
|
||
|
||
.tui-gray {
|
||
color: #848484 !important;
|
||
}
|
||
|
||
.tui-light-gray {
|
||
color: #888 !important;
|
||
}
|
||
|
||
.textleft, .textright {
|
||
color: #949494;
|
||
font-size: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.textleft {
|
||
float:left;
|
||
}
|
||
.textright {
|
||
float:right;
|
||
}
|
||
|
||
.textleftright {
|
||
border-top:3px solid #F5F6FA;
|
||
}
|
||
|
||
.tui-default {
|
||
padding: 30rpx 10rpx 40rpx 10rpx;
|
||
}
|
||
|
||
.tui-item-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
/* padding-bottom: 20rpx; */
|
||
}
|
||
|
||
.tui-msg-box {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tui-msg-item {
|
||
max-width: 500rpx;
|
||
min-height: 80rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tui-msg-pic {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
display: block;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tui-msg-name {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 34rpx;
|
||
line-height: 1;
|
||
color: #262b3a;
|
||
}
|
||
|
||
.tui-msg-content {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 28rpx;
|
||
line-height: 1;
|
||
color: #9397a4;
|
||
padding-top: 15rpx;
|
||
}
|
||
|
||
.tui-msg-content1 {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-size: 26rpx;
|
||
line-height: 1;
|
||
color: #ff0000;
|
||
padding-top: 15rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tui-msg-right {
|
||
max-width: 180rpx;
|
||
height: 88rpx;
|
||
margin-left: auto;
|
||
text-align: right;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.uni-tag--primary {
|
||
background-color:#ADDEFF !important;
|
||
border:none !important;
|
||
color:#000 !important;
|
||
}
|
||
|
||
.uni-tag--success {
|
||
background-color:#ADFFB5 !important;
|
||
border:none !important;
|
||
color:#000 !important;
|
||
}
|
||
|
||
.tui-grid-icon {
|
||
width: 100%;
|
||
height: 74rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tui-grid-label {
|
||
margin-top: 0rpx;
|
||
display: block;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.uni-tag--primary {
|
||
background-color:#02BC85 !important;
|
||
border:none !important;
|
||
color:#000 !important;
|
||
}
|
||
|
||
.uni-tag--success {
|
||
background-color:#F00 !important;
|
||
border:none !important;
|
||
color:#000 !important;
|
||
}
|
||
|
||
.mygrid-size {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tui-flex-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
padding-left: 45rpx;
|
||
}
|
||
|
||
.tui-notice-board {
|
||
width: 100%;
|
||
padding-right: 30rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
height: 60rpx;
|
||
background: #fff8d5;
|
||
display: flex;
|
||
align-items: center;
|
||
/* position: fixed; */
|
||
top: 0;
|
||
/* #ifdef H5 */
|
||
top: 44px;
|
||
/* #endif */
|
||
z-index: 999;
|
||
}
|
||
|
||
.tui-icon-bg {
|
||
background: #fff8d5;
|
||
padding-left: 30rpx;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.tui-icon-class {
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.tui-scorll-view {
|
||
flex: 1;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
color: #f54f46;
|
||
}
|
||
|
||
.tui-notice {
|
||
-webkit-backface-visibility: hidden;
|
||
-webkit-perspective: 1000;
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
|
||
.tui-animation {
|
||
-webkit-animation: tui-rolling 12s linear infinite;
|
||
animation: tui-rolling 12s linear infinite;
|
||
}
|
||
|
||
@-webkit-keyframes tui-rolling {
|
||
0% {
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
|
||
100% {
|
||
transform: translate3d(-170%, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes tui-rolling {
|
||
0% {
|
||
transform: translate3d(100%, 0, 0);
|
||
}
|
||
|
||
100% {
|
||
transform: translate3d(-170%, 0, 0);
|
||
}
|
||
}
|
||
|
||
.device_status{position:relative !important;top:0px !important;}
|
||
.device_status_cycle{display:inline-block;margin-right:20rpx;}
|
||
.device_name{display:inline-block;margin-right:20rpx;}
|
||
.device_name_text{display:inline-block;margin-left: 10rpx;}
|
||
.device_action{display:inline-block;margin:auto 15rpx;}
|
||
.ctrl_btn{display: inline-block;float:left; top: 20rpx;}
|
||
.sensor_data{color:#5C5EC3;font-weight:bold;}
|
||
.sensor_data span{font-weight: normal;}
|
||
</style>
|