code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-18 00:45:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

设备详情页的实时监测

Browse Source
This commit is contained in:
kerwincui
2022-07-30 11:38:43 +08:00
parent e94a770425
commit 62b14ca053
3 changed files with 210 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
vue/src/views/iot/device/device-edit.vue
View File

@@ -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);
});
},
/**加载地图*/

39
vue/src/views/iot/device/index.vue
View File

@@ -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() {
// 清空图表数据

237
vue/src/views/iot/device/running-status.vue
View File

@@ -149,9 +149,6 @@
{{item.value}} {{item.unit?item.unit:""}}
</el-descriptions-item>
</el-descriptions>
<!-- Mqtt通讯 -->
<mqtt-client ref="mqttClient" :publish="publish" :subscribes="subscribes" @callbackEvent="mqttCallback($event)" />
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14" v-if="deviceInfo.readOnlyList.length > 0">
@@ -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);
}
}
},