308 lines
8.3 KiB
Vue
308 lines
8.3 KiB
Vue
<template>
|
||
<view class="deviceDetail">
|
||
<u-alert class="margin-bottom-20" closable description="设备不在线无法发送实时监测,设备不在线且非影子模式不能进行设备控制" type="warning" showIcon></u-alert>
|
||
<view class="device">
|
||
<image class="icon" :src="deviceInfo.src" mode=""></image>
|
||
<view class="data">
|
||
<view class="name">
|
||
{{deviceInfo.deviceName}}
|
||
</view>
|
||
<view class="serialNumber">
|
||
{{deviceInfo.serialNumber}}
|
||
</view>
|
||
<view class="status">
|
||
<view class="flex aic font-size-24 margin-right-20">
|
||
<view class="width-20 height-20 border-radius-15 margin-right-10" :style="{backgroundColor:statusColor(deviceInfo.status)}">
|
||
</view>
|
||
{{deviceInfo.status|statusName}}
|
||
</view>
|
||
<view class="flex aic font-size-24 margin-right-20">
|
||
<view class="width-20 height-20 border-radius-15 margin-right-10" :style="{backgroundColor:deviceInfo.isShadow!=0?'#2b7':'#808080'}">
|
||
</view>
|
||
影子模式
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="WIFI">
|
||
<view v-if="deviceInfo.status==3 " class="iconfont icon-wifi4 width-50 height-50 font-size-50 font-color-2b7 flex aic jcc "></view>
|
||
<view v-if="deviceInfo.status!=3" class="iconfont icon-wifi0 width-50 height-50 font-size-50 flex aic jcc font-color-l4 "></view>
|
||
</view>
|
||
</view>
|
||
<u-sticky offset-top="0">
|
||
<view style="background: #f3f4f6;">
|
||
<u-gap height="5"></u-gap>
|
||
<u-tabs :list="tabs" @click="changeTab" lineColor="#67B873"></u-tabs>
|
||
<u-gap height="5"></u-gap>
|
||
</view>
|
||
</u-sticky>
|
||
<!-- <component :is="currentTabComponent" :device="device"></component> -->
|
||
<view class="padding-lr-20 padding-tb-20">
|
||
<propertys v-if="currentTabComponent=='propertys'" :device="device" @mqttPublish="mqttPublish" @showChart="showChart"></propertys>
|
||
<functions v-if="currentTabComponent=='functions'" :device="device" @mqttPublish="mqttPublish" @showChart="showChart"></functions>
|
||
<log v-if="currentTabComponent=='log'" :device="device"></log>
|
||
</view>
|
||
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import propertys from "./propertys.vue"
|
||
import functions from "./functions.vue"
|
||
import log from "./log.vue"
|
||
import sysTopics from '@/utils/sysTopics.js';
|
||
import mqttService from '@/utils/mqttService.js'
|
||
|
||
export default {
|
||
components:{
|
||
propertys,functions,log
|
||
},
|
||
async onLoad(option) {
|
||
this.deviceInfo={
|
||
...option,
|
||
status:Number(option.status)
|
||
}
|
||
await this.getDevice();
|
||
this.connectMqtt();
|
||
},
|
||
data() {
|
||
return {
|
||
currentTabComponent:"propertys",
|
||
tabs:[
|
||
{name:'数据采集',currentTabComponent:"propertys"},
|
||
{name:'设备控制',currentTabComponent:"functions"},
|
||
{name:'设备日志',currentTabComponent:"log"},
|
||
],
|
||
deviceInfo:{},
|
||
device:{}
|
||
};
|
||
},
|
||
filters:{
|
||
statusName(val) {
|
||
switch (val) {
|
||
case 1:
|
||
return "未激活"
|
||
break;
|
||
case 2:
|
||
return "禁用"
|
||
break;
|
||
case 3:
|
||
return "在线"
|
||
break;
|
||
case 4:
|
||
return "离线"
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
//tab切换
|
||
changeTab(item){
|
||
this.getDevice()
|
||
this.currentTabComponent=item.currentTabComponent
|
||
},
|
||
//获取设备详情
|
||
async getDevice() {
|
||
const { deviceId } = this.deviceInfo;
|
||
//请求设备运行状态
|
||
const {data} = await uni.$u.http.get('/iot/device/runningStatus/' + deviceId)
|
||
this.device = data;
|
||
},
|
||
|
||
//因为过滤器不支持style，这边使用方法来根据status翻译颜色值
|
||
statusColor(val){
|
||
switch (val) {
|
||
case 1:
|
||
return "#e6a23c"
|
||
break;
|
||
case 2:
|
||
return "#F56C6C"
|
||
break;
|
||
case 3:
|
||
return "#2b7"
|
||
break;
|
||
case 4:
|
||
return "#808080"
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
//mqtt连接和订阅
|
||
async connectMqtt() {
|
||
if (this.$mqttTool.client == null) {
|
||
await this.$mqttTool.connect();
|
||
}
|
||
this.mqttSubscribe();
|
||
this.mqttCallback();
|
||
},
|
||
//mqtt订阅主题
|
||
mqttSubscribe() {
|
||
const { device } = this;
|
||
//设备状态主题
|
||
let topicStatus ='/'+ this.deviceInfo.productId + '/'+ this.deviceInfo.serialNumber + sysTopics.statusFetch;
|
||
let topicProperty = '/' + device.productId + '/' + device.serialNumber + sysTopics.propertyFetch;
|
||
let topicFunction = '/' + device.productId + '/' + device.serialNumber + sysTopics.functionFetch;
|
||
let topicMonitor = '/' + device.productId + '/' + device.serialNumber + sysTopics.monitorFetch;
|
||
let topics = [];
|
||
topics.push(topicStatus);
|
||
topics.push(topicProperty);
|
||
topics.push(topicFunction);
|
||
topics.push(topicMonitor);
|
||
this.$mqttTool.subscribe(topics);
|
||
},
|
||
//mqtt回调
|
||
mqttCallback() {
|
||
this.$mqttTool.client.on('message', (topic, message, buffer) => {
|
||
let _topic = topic.split('/');
|
||
let _message = JSON.parse(message.toString());
|
||
//设备状态
|
||
if(_topic[3]=='status'){
|
||
if(_topic[1] && _topic[2] && _message.status){
|
||
//设置设备状态
|
||
this.deviceInfo.status = _message.status;
|
||
//设置设备信号量
|
||
this.deviceInfo.rssi = _message.rssi;
|
||
}
|
||
}
|
||
//更新设备模型的值
|
||
else if(['property','function',"monitor"].includes(_topic[3])){
|
||
let {thingsModels} = this.device;
|
||
if (thingsModels.length>0) {
|
||
for (let i = 0; i < thingsModels.length; i++) {
|
||
for (let j = 0; j < _message.length; j++) {
|
||
//更新的integer、decimal、string，enum，bool
|
||
if (thingsModels[i].id == _message[j].id) {
|
||
thingsModels[i].value = _message[j].value;
|
||
thingsModels[i].shadow = _message[j].value;
|
||
}else{
|
||
let arr = _message[j].id.split('_');
|
||
//对象 device_switch
|
||
if(arr.length==2){
|
||
let fatherId = arr[0];
|
||
if (thingsModels[i].id == fatherId) {
|
||
thingsModels[i].dataType.params.forEach(item=>{
|
||
if(item.id==_message[j].id){
|
||
item.value = _message[j].value;
|
||
item.shadow = _message[j].value;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
//简单数组 array_01_id
|
||
else if(arr.length==3){
|
||
let fatherId = arr[2];
|
||
if(thingsModels[i].id == fatherId){
|
||
thingsModels[i].dataType.simpleArrayParams.forEach(item=>{
|
||
if(item.id==_message[j].id){
|
||
item.value=_message[j].value;
|
||
item.shadow =_message[j].value;
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
//复杂数组 array_01_fatherid_childId
|
||
else if(arr.length==4){
|
||
let index = Number(arr[1]);
|
||
let fatherId = arr[2];
|
||
if (thingsModels[i].id == fatherId) {
|
||
let arrayParam = thingsModels[i].dataType.arrayParams[index];
|
||
arrayParam.forEach(item=>{
|
||
if(item.id==_message[j].id){
|
||
item.value=_message[j].value;
|
||
item.shadow = _message[j].value;
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//mqtt发布
|
||
mqttPublish(model) {
|
||
mqttService.mqttPublish(model,this.device);
|
||
},
|
||
//指标统计
|
||
showChart(data){
|
||
uni.$u.route({
|
||
url: 'pages/dataAcquisition/collectionDetail',
|
||
params: {
|
||
identity:data.id,
|
||
serialNumber:this.device.serialNumber,
|
||
total:10,
|
||
label:data.name,
|
||
unit:data.dataType.unit
|
||
}
|
||
})
|
||
},
|
||
//ota升级
|
||
ota(){
|
||
mqttService.ota(this.device);
|
||
}
|
||
},
|
||
|
||
destroyed() {
|
||
this.$mqttTool.end();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.deviceDetail{
|
||
box-sizing: border-box;
|
||
.device{
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
.icon{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
font-size: 60rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
margin-right: 20rpx;
|
||
}
|
||
.data{
|
||
flex: 1;
|
||
font-size: 34rpx;
|
||
.name{
|
||
font-weight: 700;
|
||
}
|
||
.serialNumber{
|
||
font-size: 26rpx;
|
||
padding:10rpx 0;
|
||
}
|
||
.status{
|
||
display: flex;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.WIFI{
|
||
width: 80rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|