From 62b14ca053ee5aef6b0a85228447c8a22d83f6d4 Mon Sep 17 00:00:00 2001
From: kerwincui <164770707@qq.com>
Date: Sat, 30 Jul 2022 11:38:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E8=AF=A6=E6=83=85=E9=A1=B5?=
=?UTF-8?q?=E7=9A=84=E5=AE=9E=E6=97=B6=E7=9B=91=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
vue/src/views/iot/device/device-edit.vue | 63 +++++-
vue/src/views/iot/device/index.vue | 39 ++--
vue/src/views/iot/device/running-status.vue | 237 +++++++++++---------
3 files changed, 210 insertions(+), 129 deletions(-)
diff --git a/vue/src/views/iot/device/device-edit.vue b/vue/src/views/iot/device/device-edit.vue
index aa34096e..ea106db7 100644
--- a/vue/src/views/iot/device/device-edit.vue
+++ b/vue/src/views/iot/device/device-edit.vue
@@ -284,6 +284,7 @@ export default {
// 获取设备信息
this.form.deviceId = this.$route.query && this.$route.query.deviceId;
if (this.form.deviceId != 0) {
+ this.connectMqtt();
this.getDevice(this.form.deviceId);
}
// 未加载完，直接返回会报错
@@ -291,7 +292,64 @@ export default {
this.isLoaded = true;
}, 2000);
},
+ destroyed() {
+ // 取消订阅主题
+ this.mqttUnSubscribe(this.form);
+ },
methods: {
+ /* 连接Mqtt消息服务器 */
+ async connectMqtt() {
+ if (this.$mqttTool.client == null) {
+ await this.$mqttTool.connect(this.vuex_token);
+ }
+ this.mqttCallback();
+ },
+ /* Mqtt回调处理 */
+ mqttCallback() {
+ this.$mqttTool.client.on('message', (topic, message, buffer) => {
+ let topics = topic.split('/');
+ let productId = topics[1];
+ let deviceNum = topics[2];
+ message = JSON.parse(message.toString());
+ if (topics[3] == 'status') {
+ console.log('接收到【设备状态-详情】主题：', topic);
+ console.log('接收到【设备状态-详情】内容：', message);
+ // 更新列表中设备的状态
+ if (this.form.serialNumber == deviceNum) {
+ this.oldDeviceStatus = message.status;
+ this.form.status = message.status;
+ this.form.isShadow = message.isShadow;
+ this.form.rssid = message.rssid;
+ }
+ }
+ });
+ },
+ /** Mqtt订阅主题 */
+ mqttSubscribe(device) {
+ // 订阅当前设备状态和实时监测
+ let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
+ let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
+ let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
+ let topics = [];
+ topics.push(topicStatus);
+ topics.push(topicProperty);
+ topics.push(topicFunction);
+ this.$mqttTool.subscribe(topics);
+ },
+ /** Mqtt取消订阅主题 */
+ mqttUnSubscribe(device) {
+ // 订阅当前设备状态和实时监测
+ let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
+ let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
+ let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
+ let topics = [];
+ topics.push(topicStatus);
+ topics.push(topicProperty);
+ topics.push(topicFunction);
+ console.log('取消订阅', topics);
+ this.$mqttTool.unsubscribe(topics);
+ },
+
// 获取子组件订阅的设备状态
getDeviceStatus(status) {
this.form.status = status;
@@ -300,8 +358,6 @@ export default {
deviceSynchronization() {
deviceSynchronization(this.form.serialNumber).then(response => {
this.form = response.data;
- // 选项卡切换
- this.activeName = 'runningStatus';
this.oldDeviceStatus = this.form.status;
this.loadMap();
});
@@ -315,7 +371,8 @@ export default {
}
this.oldDeviceStatus = this.form.status;
this.loadMap();
-
+ //Mqtt订阅
+ this.mqttSubscribe(this.form);
});
},
/**加载地图*/
diff --git a/vue/src/views/iot/device/index.vue b/vue/src/views/iot/device/index.vue
index 4bcbdc50..7abfd21f 100644
--- a/vue/src/views/iot/device/index.vue
+++ b/vue/src/views/iot/device/index.vue
@@ -212,18 +212,12 @@ export default {
monitorNumber: 30,
// 选中的实时监测设备
monitorDevice: {},
- // 发布消息
- publish: {},
- // 订阅集合
- subscribes: [],
// 图表集合
chart: [],
// 图表数据集合
dataList: [],
// 监测物模型
monitorThings: [],
- // mqtt客户端
- client: {},
// 遮罩层
loading: true,
// 图表遮罩层
@@ -310,18 +304,6 @@ export default {
this.mqttCallback();
this.getList();
},
- /** 查询设备分组列表 */
- getGroupList() {
- this.loading = true;
- let queryParams = {
- pageSize: 30,
- pageNum: 1,
- userId: this.$store.state.user.userId
- }
- listGroup(queryParams).then(response => {
- this.myGroupList = response.rows;
- });
- },
/** 发布物模型 类型(1=属性，2=功能) */
publishThingsModel(device, model) {
// 获取缓存的Json物模型
@@ -498,6 +480,14 @@ export default {
break;
}
}
+ // 监测数据
+ for (let k = 0; k < this.deviceList[i].readOnlyList.length && !isComplete; k++) {
+ if (this.deviceList[i].readOnlyList[k].id == message[j].id) {
+ this.deviceList[i].readOnlyList[k].shadow = message[j].value;
+ isComplete = true;
+ break;
+ }
+ }
}
return;
}
@@ -521,7 +511,18 @@ export default {
}
this.$mqttTool.subscribe(topics);
},
-
+ /** 查询设备分组列表 */
+ getGroupList() {
+ this.loading = true;
+ let queryParams = {
+ pageSize: 30,
+ pageNum: 1,
+ userId: this.$store.state.user.userId
+ }
+ listGroup(queryParams).then(response => {
+ this.myGroupList = response.rows;
+ });
+ },
/** 更新实时监测参数*/
updateMonitorParameters() {
// 清空图表数据
diff --git a/vue/src/views/iot/device/running-status.vue b/vue/src/views/iot/device/running-status.vue
index 44d03c26..368209c6 100644
--- a/vue/src/views/iot/device/running-status.vue
+++ b/vue/src/views/iot/device/running-status.vue
@@ -149,9 +149,6 @@
{{item.value}} {{item.unit?item.unit:""}}
-
-
-
@@ -199,13 +196,10 @@ import {
cacheJsonThingsModel
} from "@/api/iot/model";
import * as echarts from 'echarts';
-import mqttClient from './mqtt-client.vue'
export default {
name: "running-status",
- components: {
- mqttClient
- },
+ components: {},
props: {
device: {
type: Object,
@@ -222,18 +216,12 @@ export default {
this.$nextTick(function () {
this.MonitorChart();
});
- // Mqtt订阅主题
- this.mqttSubscribe(this.deviceInfo);
});
}
}
},
data() {
return {
- // 发布消息
- publish: {},
- // 订阅集合
- subscribes: [],
// 控制模块标题
title: "设备控制 ",
// 未启用设备影子
@@ -259,15 +247,126 @@ export default {
arrayList: [],
readOnlyList: []
},
+ // 监测图表
+ monitorChart: [{
+ chart: {},
+ data: {
+ id: '',
+ name: '',
+ value: ''
+ },
+ }],
}
},
created() {
-
+ // 回调处理
+ this.mqttCallback();
},
methods: {
+ /* Mqtt回调处理 */
+ mqttCallback() {
+ this.$mqttTool.client.on('message', (topic, message, buffer) => {
+ let topics = topic.split('/');
+ let productId = topics[1];
+ let deviceNum = topics[2];
+ message = JSON.parse(message.toString());
+ if (topics[3] == 'status') {
+ console.log('接收到【设备状态-运行】主题：', topic);
+ console.log('接收到【设备状态-运行】内容：', message);
+ // 更新列表中设备的状态
+ if (this.deviceInfo.serialNumber == deviceNum) {
+ this.deviceInfo.status = message.status;
+ this.deviceInfo.isShadow = message.isShadow;
+ this.deviceInfo.rssi = message.rssi;
+ this.updateDeviceStatus(this.deviceInfo);
+ }
+ }
+ if (topics[3] == 'property' || topics[3] == 'function') {
+ console.log('接收到【物模型】主题：', topic);
+ console.log('接收到【物模型】内容：', message);
+ // 更新列表中设备的属性
+ if (this.deviceInfo.serialNumber == deviceNum) {
+ for (let j = 0; j < message.length; j++) {
+ let isComplete = false;
+ // 布尔类型
+ for (let k = 0; k < this.deviceInfo.boolList.length && !isComplete; k++) {
+ if (this.deviceInfo.boolList[k].id == message[j].id) {
+ this.deviceInfo.boolList[k].shadow = message[j].value;
+ isComplete = true;
+ break;
+ }
+ }
+ // 枚举类型
+ for (let k = 0; k < this.deviceInfo.enumList.length && !isComplete; k++) {
+ if (this.deviceInfo.enumList[k].id == message[j].id) {
+ this.deviceInfo.enumList[k].shadow = message[j].value;
+ isComplete = true;
+ break;
+ }
+ }
+ // 字符串类型
+ for (let k = 0; k < this.deviceInfo.stringList.length && !isComplete; k++) {
+ if (this.deviceInfo.stringList[k].id == message[j].id) {
+ this.deviceInfo.stringList[k].shadow = message[j].value;
+ isComplete = true;
+ break;
+ }
+ }
+ // 数组类型
+ for (let k = 0; k < this.deviceInfo.arrayList.length && !isComplete; k++) {
+ if (this.deviceInfo.arrayList[k].id == message[j].id) {
+ this.deviceInfo.arrayList[k].shadow = message[j].value;
+ isComplete = true;
+ break;
+ }
+ }
+ // 整数类型
+ for (let k = 0; k < this.deviceInfo.integerList.length && !isComplete; k++) {
+ if (this.deviceInfo.integerList[k].id == message[j].id) {
+ this.deviceInfo.integerList[k].shadow = message[j].value;
+ isComplete = true;
+ break;
+ }
+ }
+ // 小数类型
+ for (let k = 0; k < this.deviceInfo.decimalList.length && !isComplete; k++) {
+ if (this.deviceInfo.decimalList[k].id == message[j].id) {
+ this.deviceInfo.decimalList[k].shadow = message[j].value;
+ isComplete = true;
+ break;
+ }
+ }
+ // 监测数据
+ for (let k = 0; k < this.deviceInfo.readOnlyList.length && !isComplete; k++) {
+ if (this.deviceInfo.readOnlyList[k].id == message[j].id) {
+ this.deviceInfo.readOnlyList[k].shadow = message[j].value;
+ // 更新图表
+ for (let m = 0; m < this.monitorChart.length; m++) {
+ if (message[j].id == this.monitorChart[m].data.id) {
+ let data = [{
+ value: message[j].value,
+ name: this.monitorChart[m].data.name
+ }];
+ this.monitorChart[m].chart.setOption({
+ series: [{
+ data: data
+ }]
+ });
+ break;
+ }
+ }
+ isComplete = true;
+ break;
+ }
+ }
+ }
+ }
+ }
+ });
+ },
/** 发布物模型 类型(1=属性，2=功能) */
publishThingsModel(device, model) {
- // TODO 创建的时候获取一次即可。 获取缓存的Json物模型
+ // 获取缓存的Json物模型
cacheJsonThingsModel(device.productId).then(response => {
let thingsModel = JSON.parse(response.data);
let type = 0;
@@ -288,7 +387,7 @@ export default {
if (type != 0) {
this.mqttPublish(type, device, model);
}
- })
+ });
},
/**
* Mqtt发布消息
@@ -327,97 +426,14 @@ export default {
}
if (topic != "") {
// 发布
- this.publish = {
- topic: topic,
- message: message,
- name: model.name
- }
+ this.$mqttTool.publish(topic, message, model.name).then(res => {
+ this.$modal.notifySuccess(res);
+ }).catch(res => {
+ this.$modal.notifyError(res);
+ });
}
},
- /** 接收到Mqtt回调 */
- mqttCallback(data) {
- let topics = [];
- topics = data.topic.split("/");
- let productId = topics[1];
- let deviceNum = topics[2]
- if (topics[3] == "status") {
- // 更新列表中设备的状态
- this.deviceInfo.status = data.message.status;
- this.deviceInfo.isShadow = data.message.isShadow;
- this.deviceInfo.rssi = data.message.rssi;
- this.updateDeviceStatus(this.deviceInfo);
- return;
- }
- if (topics[3] == 'property' || topics[3] == 'function') {
- // 更新列表中设备的属性
- if (this.deviceInfo.serialNumber == deviceNum) {
- for (let j = 0; j < data.message.length; j++) {
- let isComplete = false;
- // 布尔类型
- for (let k = 0; k < this.deviceInfo.boolList.length && !isComplete; k++) {
- if (this.deviceInfo.boolList[k].id == data.message[j].id) {
- this.deviceInfo.boolList[k].shadow = data.message[j].value;
- isComplete = true;
- break;
- }
- }
- // 枚举类型
- for (let k = 0; k < this.deviceInfo.enumList.length && !isComplete; k++) {
- if (this.deviceInfo.enumList[k].id == data.message[j].id) {
- this.deviceInfo.enumList[k].shadow = data.message[j].value;
- isComplete = true;
- break;
- }
- }
- // 字符串类型
- for (let k = 0; k < this.deviceInfo.stringList.length && !isComplete; k++) {
- if (this.deviceInfo.stringList[k].id == data.message[j].id) {
- this.deviceInfo.stringList[k].shadow = data.message[j].value;
- isComplete = true;
- break;
- }
- }
- // 数组类型
- for (let k = 0; k < this.deviceInfo.arrayList.length && !isComplete; k++) {
- if (this.deviceInfo.arrayList[k].id == data.message[j].id) {
- this.deviceInfo.arrayList[k].shadow = data.message[j].value;
- isComplete = true;
- break;
- }
- }
- // 整数类型
- for (let k = 0; k < this.deviceInfo.integerList.length && !isComplete; k++) {
- if (this.deviceInfo.integerList[k].id == data.message[j].id) {
- this.deviceInfo.integerList[k].shadow = data.message[j].value;
- isComplete = true;
- break;
- }
- }
- // 小数类型
- for (let k = 0; k < this.deviceInfo.decimalList.length && !isComplete; k++) {
- if (this.deviceInfo.decimalList[k].id == data.message[j].id) {
- this.deviceInfo.decimalList[k].shadow = data.message[j].value;
- isComplete = true;
- break;
- }
- }
- }
- return;
- }
- }
- },
- /** Mqtt订阅主题 */
- mqttSubscribe(device) {
- // 订阅当前设备状态和无模型
- let topicStatus = '/' + device.productId + '/' + device.serialNumber + '/status/post';
- let topicProperty = '/' + device.productId + '/' + device.serialNumber + '/property/post';
- let topicFunction = '/' + device.productId + '/' + device.serialNumber + '/function/post';
- let topics = [];
- topics.push(topicStatus);
- topics.push(topicProperty);
- topics.push(topicFunction);
- this.subscribes = topics;
- },
+
/** 更新设备状态 */
updateDeviceStatus(device) {
if (device.status == 3) {
@@ -460,7 +476,14 @@ export default {
/**监测图表统计*/
MonitorChart() {
for (let i = 0; i < this.deviceInfo.readOnlyList.length; i++) {
- var myChart = echarts.init(this.$refs.map[i]);
+ this.monitorChart[i] = {
+ chart: echarts.init(this.$refs.map[i]),
+ data: {
+ id: this.deviceInfo.readOnlyList[i].id,
+ name: this.deviceInfo.readOnlyList[i].name,
+ value: this.deviceInfo.readOnlyList[i].shadow
+ }
+ };
var option;
option = {
tooltip: {
@@ -524,7 +547,7 @@ export default {
}
}]
};
- option && myChart.setOption(option);
+ option && this.monitorChart[i].chart.setOption(option);
}
}
},