xzzn/movecheck
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接mqtt

Browse Source
This commit is contained in:
吉浩茹
2025-09-27 14:59:48 +08:00
parent 8f6dcca19f
commit e4ea3312b7
8 changed files with 1093 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/EnvironmentParams.vue
View File

@ -61,7 +61,7 @@
<view class="progress-bar">
<view class="progress-fill temperature-fill" :style="{ width: temperaturePercent + '%' }"></view>
</view>
<text class="param-range">15°C - 35°C</text>
<text class="param-range">0°C - 100°C</text>
</view>
</view>
@ -74,7 +74,7 @@
<view class="progress-bar">
<view class="progress-fill humidity-fill" :style="{ width: humidityPercent + '%' }"></view>
</view>
<text class="param-range">30% - 70%</text>
<text class="param-range">0% - 100%</text>
</view>
</view>
@ -87,7 +87,7 @@
<view class="progress-bar">
<view class="progress-fill cleanliness-fill" :style="{ width: cleanlinessPercent + '%' }"></view>
</view>
<text class="param-range">60% - 100%</text>
<text class="param-range">暂无数据</text>
</view>
</view>
</view>
@ -165,28 +165,35 @@
</template>
<script setup>
import { ref, defineEmits, onMounted, onUnmounted } from 'vue';
// import mqttClient from '@/utils/mqttClient';
import { MQTT_CONFIG, DataParser } from '@/config/mqtt';
import { ref, defineEmits, onMounted, onUnmounted, nextTick } from 'vue';
import { createMqtt, closeMqtt, judgeBeat, getConnectionStatus } from '@/utils/sendMqtt';
import { DataParser } from '@/config/mqtt';
const emit = defineEmits(['openSettings']);
// 环境参数数据
const temperature = ref(25);
const humidity = ref(45);
const cleanliness = ref(80);
const temperature = ref(0);
const humidity = ref(0);
const cleanliness = ref('-'); // 暂无洁净度数据
// MQTT连接状态
const isConnected = ref(false);
const lastUpdateTime = ref('');
const isPageLoaded = ref(false); // 页面加载状态
// 计算百分比值用于进度条显示
const temperaturePercent = ref(50);
const humidityPercent = ref(60);
const cleanlinessPercent = ref(40);
// 计算百分比值用于进度条显示 (0-100范围)
const temperaturePercent = ref(0); // 0°C对应0%
const humidityPercent = ref(0); // 0%对应0%
const cleanlinessPercent = ref(0); // 暂无数据
// MQTT数据处理
const handleDeviceData = (data) => {
// 只有在页面加载完成后才处理数据
if (!isPageLoaded.value) {
console.log('页面尚未加载完成，忽略MQTT数据:', data);
return;
}
console.log('收到设备数据:', data);
// 更新最后更新时间
@ -197,33 +204,32 @@ const handleDeviceData = (data) => {
case 'AC': // 空调设备
if (data.Data && data.Data.BSQWD !== undefined) {
temperature.value = parseFloat(data.Data.BSQWD);
temperaturePercent.value = ((temperature.value - 15) / 20) * 100; // 15-35°C范围
temperaturePercent.value = Math.max(0, Math.min(100, temperature.value)); // 0-100°C范围
console.log('更新空调温度:', temperature.value);
}
break;
case 'WSD': // 温湿度传感器
if (data.Data) {
// WD为温度，SD为湿度
if (data.Data.WD !== undefined) {
temperature.value = parseFloat(data.Data.WD);
temperaturePercent.value = ((temperature.value - 15) / 20) * 100;
console.log('更新温湿度传感器温度:', temperature.value);
temperaturePercent.value = Math.max(0, Math.min(100, temperature.value)); // 0-100°C范围
console.log('更新WSD温度(WD):', temperature.value);
}
if (data.Data.SD !== undefined) {
humidity.value = parseFloat(data.Data.SD);
humidityPercent.value = (humidity.value / 80) * 100; // 0-80%范围
console.log('更新湿度:', humidity.value);
humidityPercent.value = Math.max(0, Math.min(100, humidity.value)); // 0-100%范围
console.log('更新WSD湿度(SD):', humidity.value);
}
}
break;
case 'PM': // PM2.5传感器
if (data.Data && data.Data.PM25 !== undefined) {
// 将PM2.5值转换为洁净度百分比 (PM2.5越低，洁净度越高)
// 暂时不处理PM2.5数据，洁净度显示为"-"
const pm25Value = parseFloat(data.Data.PM25);
cleanliness.value = Math.max(0, Math.min(100, 100 - (pm25Value / 2))); // 简单转换
cleanlinessPercent.value = cleanliness.value;
console.log('更新PM2.5/洁净度:', pm25Value, cleanliness.value);
console.log('收到PM2.5数据:', pm25Value, '洁净度保持显示"-"');
}
break;
@ -232,32 +238,49 @@ const handleDeviceData = (data) => {
}
};
// // 连接MQTT并订阅数据
// const connectMQTT = async () => {
// try {
// await mqttClient.connect();
// isConnected.value = true;
// 连接MQTT并订阅数据
const connectMQTT = async () => {
try {
console.log('开始连接MQTT...');
createMqtt();
// // 订阅设备数据主题
// const subscribeSuccess = mqttClient.subscribe(MQTT_CONFIG.topics.deviceData, handleDeviceData);
// 延迟检查连接状态
setTimeout(() => {
isConnected.value = getConnectionStatus();
if (isConnected.value) {
console.log('MQTT连接成功，开始监听数据...');
uni.showToast({
title: 'MQTT连接成功',
icon: 'success',
duration: 2000
});
} else {
console.log('MQTT连接失败');
uni.showToast({
title: 'MQTT连接失败',
icon: 'error',
duration: 3000
});
}
}, 2000);
// if (subscribeSuccess) {
// console.log('MQTT订阅成功，等待设备数据...');
// } else {
// console.error('MQTT订阅失败');
// }
// } catch (error) {
// console.error('MQTT连接失败:', error);
// isConnected.value = false;
} catch (error) {
console.error('MQTT连接失败:', error);
isConnected.value = false;
// // 显示连接失败提示
// uni.showToast({
// title: 'MQTT连接失败',
// icon: 'error',
// duration: 3000
// });
// }
// };
uni.showToast({
title: 'MQTT连接失败',
icon: 'error',
duration: 3000
});
}
};
// 开始监听MQTT数据
const startMqttListener = () => {
console.log('开始监听MQTT数据...');
uni.$on('mqttData', handleDeviceData);
};
// 打开设置弹窗
const openSettings = () => {
@ -276,7 +299,7 @@ const getHumidityStatus = () => {
};
const getCleanlinessStatus = () => {
if (cleanliness.value < 70) return 'status-warning';
// 洁净度暂无数据，始终显示为正常状态
return 'status-normal';
};
@ -310,14 +333,27 @@ const getCurrentTime = () => {
};
// 组件挂载时连接MQTT
onMounted(() => {
// connectMQTT();
onMounted(async () => {
console.log('EnvironmentParams组件已挂载');
// 恢复MQTT连接
connectMQTT();
// 等待DOM更新完成
await nextTick();
// 等待页面完全渲染后再开始监听MQTT数据
setTimeout(() => {
console.log('页面加载完成，开始监听MQTT数据...');
isPageLoaded.value = true; // 标记页面已加载完成
startMqttListener();
}, 2000); // 2秒后开始监听，确保页面和MQTT连接都已就绪
});
// 组件卸载时断开连接
onUnmounted(() => {
// mqttClient.unsubscribe(MQTT_CONFIG.topics.deviceData);
// mqttClient.disconnect();
uni.$off('mqttData', handleDeviceData);
closeMqtt();
});
// 移除模拟数据变化，使用真实MQTT数据