root
/
agri-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基础修改

master
xce 2026-01-08 20:47:00 +08:00
parent 20b808adc7
commit 07ab68aba5
2 changed files with 104 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
pages/control/index.vue
View File

@ -8,48 +8,39 @@
</view> </view>
</uni-section> </uni-section>
<uni-section title="实时温湿度" titleFontSize="16px" type="line" v-if="value!== 1">
<uni-section title="实时温湿度" titleFontSize="16px" type="line" v-if="value!== 1">
<template v-slot:right > <template v-slot:right >
{{ temp }} {{ temp }}
</template> </template>
<view> <view>
<!-- 优化：温度卡片循环渲染 -->
<view class="uni-flex_control uni-row" > <view class="uni-flex_control uni-row" >
<view class="text uni-flex_control_one uni-view"> <view
<text class="data" :style="fontStyle">{{ liveData.temp1 }}<p v-if=(testNumber(liveData.temp1)) class="tempStyle">℃</p></text> class="text uni-flex_control_one uni-view"
<text class="data">温度1</text> v-for="item in sensorCards.temp"
</view> :key="item.key"
<view class="text uni-flex_control_one uni-view"> >
<text class="data" :style="fontStyle">{{ liveData.temp2 }}<p v-if=(testNumber(liveData.temp2)) class="tempStyle">℃</p></text> <text class="data" :style="fontStyle">
<text class="data">温度2</text> {{ liveData[item.key] }}
</view> <p v-if="isEffectiveValue(liveData[item.key])" class="tempStyle">℃</p>
<view class="text uni-flex_control_one uni-view"> </text>
<text class="data" :style="fontStyle">{{ liveData.temp3 }}<p v-if=(testNumber(liveData.temp3)) class="tempStyle">℃</p></text> <text class="data">{{ item.label }}</text>
<text class="data">温度3</text>
</view>
<view class="text uni-flex_control_one uni-view">
<text class="data" :style="fontStyle">{{ liveData.temp4 }}<p v-if=(testNumber(liveData.temp4)) class="tempStyle">℃</p></text>
<text class="data">温度4</text>
</view> </view>
</view> </view>
<!-- 优化：湿度卡片循环渲染 -->
<view class="uni-flex_control uni-row" > <view class="uni-flex_control uni-row" >
<view class="text uni-flex_control_two uni-view"> <view
<text class="data" :style="fontStyle">{{ liveData.humi1 }}<p v-if=(testNumber(liveData.humi1)) class="humiStyle"> %RH</p></text> class="text uni-flex_control_two uni-view"
<text class="data">湿度1</text> v-for="item in sensorCards.humi"
</view> :key="item.key"
<view class="text uni-flex_control_two uni-view"> >
<text class="data" :style="fontStyle">{{ liveData.humi2 }}<p v-if=(testNumber(liveData.humi2)) class="humiStyle"> %RH</p></text> <text class="data" :style="fontStyle">
<text class="data">湿度2</text> {{ liveData[item.key] }}
</view> <p v-if="isEffectiveValue(liveData[item.key])" class="humiStyle"> %RH</p>
<view class="text uni-flex_control_two uni-view"> </text>
<text class="data" :style="fontStyle">{{ liveData.humi3 }}<p v-if=(testNumber(liveData.humi3)) class="humiStyle"> %RH</p></text> <text class="data">{{ item.label }}</text>
<text class="data">湿度3</text>
</view>
<view class="text uni-flex_control_two uni-view">
<text class="data" :style="fontStyle">{{ liveData.humi4 }}<p v-if=(testNumber(liveData.humi4)) class="humiStyle"> %RH</p></text>
<text class="data">湿度4</text>
</view> </view>
</view> </view>
</view> </view>
@ -59,117 +50,27 @@
<template v-slot:right > <template v-slot:right >
{{ control }} {{ control }}
</template> </template>
<!-- 卷膜/卷被卡片容器（2列栅格布局） --> <!-- 优化：设备卡片循环渲染 -->
<view class="card-grid"> <view class="card-grid">
<!-- 卷被开卡片 --> <view
<view class="control-card" @click="handleCardClick(1-status.jbk, 'jbk')"> class="control-card"
v-for="card in deviceCards"
:key="card.type"
@click="handleCardClick(1 - status[card.type], card.type)"
>
<view class="card-text"> <view class="card-text">
<text class="card-main">卷被开</text> <text class="card-main">{{ card.name }}</text>
<!-- 核心修改：添加限位时间，与暂停/运行同行靠右 -->
<view class="card-sub-wrapper"> <view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jbk }}</text> <text class="card-sub" v-if="showStatusText">{{ show[card.type] || '未知' }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jbk }} s</text> <text class="limit-time">运行时间：{{ limitTimes[card.type] || 0 }} s</text>
</view> </view>
</view> </view>
<view class="card-icon" :class="{ active: status.jbk === 1 }"> <view class="card-icon" :class="{ active: status[card.type] === 1 }">
<uni-icons :type=" (status.jbk === 1)?'circle':'circle-filled'" size="24" color="#fff"/> <uni-icons
</view> :type="status[card.type] === 1 ? 'circle' : 'circle-filled'"
</view> size="24"
color="#fff"
<!-- 卷被关卡片 --> />
<view class="control-card" @click="handleCardClick(1-status.jbg,'jbg')">
<view class="card-text">
<text class="card-main">卷被关</text>
<view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jbg }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jbg }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status.jbg === 1 }">
<uni-icons :type=" (status.jbg === 1)?'circle':'circle-filled'" size="24" color="#fff"/>
</view>
</view>
<!-- 卷膜1开卡片 -->
<view class="control-card" @click="handleCardClick(1-status.jm1k, 'jm1k')">
<view class="card-text">
<text class="card-main">卷膜1开</text>
<view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jm1k }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jm1k }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status.jm1k === 1 }">
<uni-icons :type="(status.jm1k === 1)?'circle':'circle-filled'" size="24" color="#fff"/>
</view>
</view>
<!-- 卷膜1关卡片 -->
<view class="control-card" @click="handleCardClick(1-status.jm1g, 'jm1g')">
<view class="card-text">
<text class="card-main">卷膜1关</text>
<view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jm1g }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jm1g }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status.jm1g === 1 }">
<uni-icons :type="(status.jm1g === 1)?'circle':'circle-filled'" size="24" color="#fff"/>
</view>
</view>
<!-- 卷膜2卡片 -->
<view class="control-card" @click="handleCardClick(1-status.jm2k, 'jm2k')">
<view class="card-text">
<text class="card-main">卷膜2开</text>
<view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jm2k }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jm2k }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status.jm2k === 1 }">
<uni-icons :type="(status.jm2k === 1)?'circle':'circle-filled'" size="24" color="#fff"/>
</view>
</view>
<!-- 卷膜2关卡片 -->
<view class="control-card" @click="handleCardClick(1-status.jm2g, 'jm2g')">
<view class="card-text">
<text class="card-main">卷膜2关</text>
<view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jm2g }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jm2g }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status.jm2g === 1 }">
<uni-icons :type="(status.jm2g === 1)?'circle':'circle-filled'" size="24" color="#fff"/>
</view>
</view>
<!-- 卷膜3开卡片 -->
<view class="control-card" @click="handleCardClick(1-status.jm3k, 'jm3k')">
<view class="card-text">
<text class="card-main">卷膜3开</text>
<view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jm3k }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jm3k }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status.jm3k === 1 }">
<uni-icons :type="(status.jm3k === 1)?'circle':'circle-filled'" size="24" color="#fff"/>
</view>
</view>
<!-- 卷膜3关卡片 -->
<view class="control-card" @click="handleCardClick(1-status.jm3g, 'jm3g')">
<view class="card-text">
<text class="card-main">卷膜3关</text>
<view class="card-sub-wrapper">
<text class="card-sub" v-if="hide">{{ show.jm3g }}</text>
<text class="limit-time">运行时间：{{ limitTimes.jm3g }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status.jm3g === 1 }">
<uni-icons :type="(status.jm3g === 1)?'circle':'circle-filled'" size="24" color="#fff"/>
</view> </view>
</view> </view>
</view> </view>
@ -178,11 +79,16 @@
</template> </template>
<script> <script>
// ========== 修改：替换原有mqtt引入为全局工具类 ========== // 优化：抽离魔法值常量
// import mqtt from 'mqtt' // 移除原有mqtt直接引入 const SENSOR_MAP = {
temp1: "201", temp2: "202", temp3: "203", temp4: "204",
humi1: "101", humi2: "102", humi3: "103", humi4: "104"
};
const MQTT_TOPIC_SUFFIX = { UP: "/up", DOWN: "/down" };
import UniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"; import UniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import { findDtuDataByInfo } from "@/api/system/data"; import { findDtuDataByInfo } from "@/api/system/data";
import mqttUtil from '@/utils/mqtt'; // 引入全局MQTT工具类 import mqttUtil from '@/utils/mqtt';
export default { export default {
dicts: ['sys_data_map'], dicts: ['sys_data_map'],
@ -191,15 +97,13 @@ export default {
}, },
data() { data() {
return { return {
// ========== 修改：移除原有mqttClient相关变量 ==========
// mqttClient: null,
temp: "", temp: "",
// ========== 修改：简化mqttConfig，仅保留订阅/发布主题（全局配置已移到工具类） ==========
mqttConfig: { mqttConfig: {
subscribeTopic:'/up', subscribeTopic:'/up',
}, },
value: 1, value: 1,
hide: false, // 优化：语义化变量名（替换原 hide: false）
showStatusText: false,
control: '正在加载中...', control: '正在加载中...',
range: [{ range: [{
"value": '864865085016294', "value": '864865085016294',
@ -215,8 +119,8 @@ export default {
publishTopic: '/down', publishTopic: '/down',
title:'', title:'',
message: {}, message: {},
// ========== 修改：从全局工具类获取连接状态 ========== // 优化：声明响应式变量 connected
// connected:false, connected: false,
liveData: { liveData: {
temp1: '数据加载中...', temp1: '数据加载中...',
temp2: '数据加载中...', temp2: '数据加载中...',
@ -227,7 +131,33 @@ export default {
humi3: '数据加载中...', humi3: '数据加载中...',
humi4: '数据加载中...' humi4: '数据加载中...'
}, },
// 卡片状态（模拟后端返回数据） // 优化：温湿度卡片配置（固定顺序：温度1→2→3→4，湿度1→2→3→4）
sensorCards: {
temp: [
{ label: '温度1', key: 'temp1' },
{ label: '温度2', key: 'temp2' },
{ label: '温度3', key: 'temp3' },
{ label: '温度4', key: 'temp4' }
],
humi: [
{ label: '湿度1', key: 'humi1' },
{ label: '湿度2', key: 'humi2' },
{ label: '湿度3', key: 'humi3' },
{ label: '湿度4', key: 'humi4' }
]
},
// 优化：设备卡片配置（固定顺序）
deviceCards: [
{ type: 'jbk', name: '卷被开' },
{ type: 'jbg', name: '卷被关' },
{ type: 'jm1k', name: '卷膜1开' },
{ type: 'jm1g', name: '卷膜1关' },
{ type: 'jm2k', name: '卷膜2开' },
{ type: 'jm2g', name: '卷膜2关' },
{ type: 'jm3k', name: '卷膜3开' },
{ type: 'jm3g', name: '卷膜3关' }
],
// 卡片状态
show: { show: {
jbk: "暂停", jbk: "暂停",
jbg: "暂停", jbg: "暂停",
@ -238,7 +168,7 @@ export default {
jm3k: "暂停", jm3k: "暂停",
jm3g: "暂停" jm3g: "暂停"
}, },
// 新增：限位时间配置（你可以根据实际需求修改数值） // 新增：限位时间配置
limitTimes: { limitTimes: {
jbk: 30, jbk: 30,
jbg: 25, jbg: 25,
@ -280,24 +210,21 @@ export default {
}); });
}, },
onShow() { onShow() {
// ========== 修改：替换原有connectMqtt为注册消息回调 ==========
// this.connectMqtt();
// 注册MQTT消息回调（接收设备消息） // 注册MQTT消息回调（接收设备消息）
mqttUtil.setOnMessageCallback(this.ackMessage); mqttUtil.setOnMessageCallback(this.ackMessage);
// 更新连接状态 // 更新连接状态
this.connected = mqttUtil.getMqttState().isConnected; this.connected = mqttUtil.getMqttState().isConnected;
}, },
onUnload() { onUnload() {
// ========== 修改：移除原有disconnectMqtt，改为移除回调 ==========
// this.disconnectMqtt()
// 移除MQTT消息回调（避免内存泄漏） // 移除MQTT消息回调（避免内存泄漏）
mqttUtil.removeOnMessageCallback(); mqttUtil.removeOnMessageCallback();
}, },
methods: { methods: {
change(e) { change(e) {
this.imei = e; this.imei = e;
this.publishTopic = "dtu/"+this.imei+"/down"; // 优化：使用常量拼接MQTT主题
this.mqttConfig.subscribeTopic = "dtu/"+this.imei+"/up"; this.publishTopic = `dtu/${this.imei}${MQTT_TOPIC_SUFFIX.DOWN}`;
this.mqttConfig.subscribeTopic = `dtu/${this.imei}${MQTT_TOPIC_SUFFIX.UP}`;
const selectedItem = this.range.find(item => item.value === e); const selectedItem = this.range.find(item => item.value === e);
if (selectedItem) { if (selectedItem) {
this.selectedText = selectedItem.text; // 获取展示文本 this.selectedText = selectedItem.text; // 获取展示文本
@ -332,7 +259,6 @@ export default {
this.liveData[key] = '数据加载中...'; this.liveData[key] = '数据加载中...';
}); });
this.deviceType = ''; this.deviceType = '';
this.control = '正在加载中...'; this.control = '正在加载中...';
this.message = {}; this.message = {};
this.temp = ''; this.temp = '';
@ -395,13 +321,7 @@ export default {
} }
}) })
}, },
// ========== 删除：原有connectMqtt方法（全局工具类已处理） ==========
// connectMqtt() { ... },
// ========== 删除：原有disconnectMqtt方法（全局工具类已处理） ==========
// disconnectMqtt() { ... },
// ========== 修改：替换原有publishMessage为调用全局工具类 ==========
publishMessage() { publishMessage() {
if (!this.connected || !this.publishTopic || !this.message) { if (!this.connected || !this.publishTopic || !this.message) {
uni.showToast({ uni.showToast({
@ -418,7 +338,6 @@ export default {
} else { } else {
this.addMessage(`发布失败：设备：[${this.publishTopic}]`) this.addMessage(`发布失败：设备：[${this.publishTopic}]`)
} }
this.message = {}; this.message = {};
}, },
@ -426,14 +345,12 @@ export default {
ackMessage(topic, payload) { ackMessage(topic, payload) {
// 1. 先判断是否是目标订阅主题（如dtu/xxx/up） // 1. 先判断是否是目标订阅主题（如dtu/xxx/up）
if (topic !== this.mqttConfig.subscribeTopic) return; if (topic !== this.mqttConfig.subscribeTopic) return;
// console.log(`监听到消息：topic=${topic}，message=${payload}`)
// 2. 解析消息体（注意异常捕获）
let msgData = {}; let msgData = {};
// 优化：捕获JSON解析异常
try { try {
msgData = JSON.parse(payload); msgData = JSON.parse(payload);
} catch (e) { } catch (e) {
console.error("消息解析失败：", e); console.error("MQTT消息解析失败：", e, payload);
return; return;
} }
@ -444,6 +361,7 @@ export default {
this.handleOtherContent(msgData,payload) this.handleOtherContent(msgData,payload)
} }
}, },
addMessage(content) { addMessage(content) {
console.info("提示消息：" + content) console.info("提示消息：" + content)
}, },
@ -456,20 +374,17 @@ export default {
const isSuccess = ackData.suc; // 这里是true const isSuccess = ackData.suc; // 这里是true
if (isSuccess) { if (isSuccess) {
this.status[type] = this.status[type] === 0 ? 1 : 0; // 优化：使用$set确保响应式更新
this.show[type] = this.status[type] === 0 ? "暂停" : "运行"; this.$set(this.status, type, this.status[type] === 0 ? 1 : 0);
this.$set(this.show, type, this.status[type] === 0 ? "暂停" : "运行");
} }
this.deviceType = ''; this.deviceType = '';
this.$modal.msgSuccess("设备操作成功！") this.$modal.msgSuccess("设备操作成功！")
console.log(`指令[${commandField}=${commandValue}]执行${isSuccess ? "成功" : "失败"}`); console.log(`指令[${commandField}=${commandValue}]执行${isSuccess ? "成功" : "失败"}`);
}, },
// 处理其他内容的函数（完全保留）
handleOtherContent(msgData,payload) { handleOtherContent(msgData,payload) {
// 业务逻辑：处理传感器数据、设备状态等 // 业务逻辑：处理传感器数据、设备状态等
// console.log("收到其他内容：", msgData);
// 例如：更新温湿度显示、设备在线状态等
// 设备状态展示 // 设备状态展示
if (this.value !== 1) { if (this.value !== 1) {
var arr = ['jbk', "jbg", "jm1k", "jm1g", "jm2k", "jm2g", "jm3k", "jm3g"] var arr = ['jbk', "jbg", "jm1k", "jm1g", "jm2k", "jm2g", "jm3k", "jm3g"]
@ -485,17 +400,17 @@ export default {
const allKeysNumeric2 = Object.keys(msgData).every(key => /^\d+$/.test(key)); const allKeysNumeric2 = Object.keys(msgData).every(key => /^\d+$/.test(key));
if (Object.keys(msgData).length > 0 && allKeysNumeric2) { if (Object.keys(msgData).length > 0 && allKeysNumeric2) {
const div10 = (v) => (v == null ? null : Math.round((Number(v)/10)*10)/10) const div10 = (v) => (v == null ? null : Math.round((Number(v)/10)*10)/10)
// 优化：使用常量获取传感器数据
this.liveData = { this.liveData = {
temp1: div10(msgData["201"]) || "已离线...", temp1: div10(msgData[SENSOR_MAP.temp1]) || "已离线...",
humi1: div10(msgData["101"]) || "已离线...", humi1: div10(msgData[SENSOR_MAP.humi1]) || "已离线...",
temp2: div10(msgData["202"]) || "已离线...", temp2: div10(msgData[SENSOR_MAP.temp2]) || "已离线...",
humi2: div10(msgData["102"]) || "已离线...", humi2: div10(msgData[SENSOR_MAP.humi2]) || "已离线...",
temp3: div10(msgData["203"]) || "已离线...", temp3: div10(msgData[SENSOR_MAP.temp3]) || "已离线...",
humi3: div10(msgData["103"]) || "已离线...", humi3: div10(msgData[SENSOR_MAP.humi3]) || "已离线...",
temp4: div10(msgData["204"]) || "已离线...", temp4: div10(msgData[SENSOR_MAP.temp4]) || "已离线...",
humi4: div10(msgData["104"]) || "已离线...", humi4: div10(msgData[SENSOR_MAP.humi4]) || "已离线...",
} };
this.temp = "最后更新时间：" + this.getCurrentTime(); this.temp = "最后更新时间：" + this.getCurrentTime();
this.fontStyle = 'font-size:16px;' this.fontStyle = 'font-size:16px;'
} }
@ -526,19 +441,17 @@ export default {
testNumber(data) { testNumber(data) {
const reg = /^-?\d+(\.\d+)?$/; const reg = /^-?\d+(\.\d+)?$/;
return reg.test(String(data).trim()); return reg.test(String(data).trim());
},
// 优化：封装温湿度单位判断函数
isEffectiveValue(value) {
return this.testNumber(value);
} }
}, },
onHide() { onHide() {
// ========== 修改：移除页面隐藏时的断开逻辑（全局App.vue已处理） ==========
// this.disconnectMqtt();
// 仅移除回调，避免后台接收消息导致异常
mqttUtil.removeOnMessageCallback(); mqttUtil.removeOnMessageCallback();
}, },
beforeDestroy() { beforeDestroy() {
// ========== 修改：移除原有client断开逻辑（全局工具类已处理） ==========
// if (this.client) {
// this.client.end()
// }
mqttUtil.removeOnMessageCallback(); mqttUtil.removeOnMessageCallback();
}, },
}; };

2
pages/work/index.vue
View File

@ -143,7 +143,7 @@
.uni-margin-wrap { .uni-margin-wrap {
width: 690rpx; width: 690rpx;
width: 100%; width: 100%;
;
} }
.swiper { .swiper {