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

暂提-----运行时间

master
xce 2026-01-09 14:34:29 +08:00
parent 07ab68aba5
commit 3105c590bb
1 changed files with 143 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
pages/control/index.vue
View File

@ -56,7 +56,7 @@
class="control-card"
v-for="card in deviceCards"
:key="card.type"
@click="handleCardClick(1 - status[card.type], card.type)"
@click="openTimeModal(card)"
>
<view class="card-text">
<text class="card-main">{{ card.name }}</text>
@ -65,7 +65,8 @@
<text class="limit-time">运行时间：{{ limitTimes[card.type] || 0 }} s</text>
</view>
</view>
<view class="card-icon" :class="{ active: status[card.type] === 1 }">
<view class="card-icon" :class="{ active: status[card.type] === 1 }" @click.stop="handleCardClick(1 - status[card.type], card.type)">
<!-- 加@click.stop防止冒泡触发卡片点击的弹窗事件 -->
<uni-icons
:type="status[card.type] === 1 ? 'circle' : 'circle-filled'"
size="24"
@ -75,6 +76,42 @@
</view>
</view>
</uni-section>
<!-- 输入框示例 -->
<!-- <uni-popup ref="inputDialog" type="dialog">-->
<!-- <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!"-->
<!-- placeholder="请输入内容" @confirm="confirmModifyTime"></uni-popup-dialog>-->
<!-- </uni-popup>-->
<uni-popup v-model="timeModalVisible" ref="inputDialog" mode="center" :z-index="99999">
<!-- 新增：修改运行时间的弹窗 -->
<!-- <uni-popup v-model="timeModalVisible" mode="center">-->
<view class="modal-container">
<view class="modal-title">修改{{ currentCard.name }}运行时间</view>
<view class="modal-input-wrap">
<text class="modal-label">当前时间：</text>
<text class="modal-current">{{ currentCardTime }} s</text>
</view>
<view class="modal-input-wrap">
<text class="modal-label">新时间：</text>
<input
class="modal-input"
type="number"
v-model.number="newTime"
placeholder="请输入1-60的数字"
min="1"
max="60"
/>
<text class="modal-unit">s</text>
</view>
<view class="modal-btn-wrap">
<button class="modal-btn cancel" @click="">取消</button>
<button class="modal-btn confirm" @click="confirmModifyTime">确定</button>
</view>
</view>
</uni-popup>
</view>
</template>
@ -87,13 +124,15 @@ const SENSOR_MAP = {
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 UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue"; // 引入弹窗组件
import { findDtuDataByInfo } from "@/api/system/data";
import mqttUtil from '@/utils/mqtt';
export default {
dicts: ['sys_data_map'],
components: {
UniDatetimePicker
UniDatetimePicker,
UniPopup // 注册弹窗组件
},
data() {
return {
@ -190,7 +229,12 @@ export default {
jm3k: 0,
jm3g: 0
},
fontStyle: ''
fontStyle: '',
// 新增：弹窗相关变量
timeModalVisible: false, // 弹窗显示状态
currentCard: {}, // 当前点击的卡片信息
currentCardTime: 0, // 当前卡片的运行时间
newTime: 0 // 新的运行时间
};
},
onLoad() {
@ -309,13 +353,13 @@ export default {
// 组装消息
this.message = JSON.stringify({[type]: status})
// 控制设备
this.publishMessage();
// this.publishMessage();
// 设备回执
this.deviceType = type;
//todo
// this.status[type] = this.status[type] === 0 ? 1 : 0;
// 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 ? "暂停" : "运行");
}
}
@ -446,6 +490,39 @@ export default {
// 优化：封装温湿度单位判断函数
isEffectiveValue(value) {
return this.testNumber(value);
},
// 新增：打开修改运行时间的弹窗
openTimeModal(card) {
this.currentCard = card; // 记录当前卡片信息
this.currentCardTime = this.limitTimes[card.type]; // 记录当前时间
this.newTime = this.currentCardTime; // 默认填充当前时间
this.timeModalVisible = true; // 显示弹窗
console.info(`this.timeModalVisible:${this.timeModalVisible}`);
this.$refs.inputDialog.open()
},
// 新增：确认修改运行时间
confirmModifyTime() {
// 校验输入：必须是1-60的数字
if (!this.newTime || this.newTime < 1 || this.newTime > 60) {
uni.showToast({
title: '请输入1-60的有效数字',
icon: 'none'
});
return;
}
// 修改limitTimes（用$set确保响应式）
this.$set(this.limitTimes, this.currentCard.type, this.newTime);
// 提示修改成功
uni.showToast({
title: '运行时间修改成功',
icon: 'success'
});
// 关闭弹窗
this.$refs.inputDialog.close()
// （可选）这里可以加接口请求，把新时间同步到后端
// this.saveLimitTimeToServer(this.currentCard.type, this.newTime);
}
},
onHide() {
@ -594,4 +671,63 @@ export default {
/deep/ .uni-section-header__slot-right {
color: green;
}
/* 新增：弹窗样式 */
.modal-container {
width: 600rpx;
background: #fff;
border-radius: 16rpx;
padding: 30rpx 20rpx;
}
.modal-title {
font-size: 30rpx;
font-weight: 500;
text-align: center;
margin-bottom: 30rpx;
color: #333;
}
.modal-input-wrap {
display: flex;
align-items: center;
margin-bottom: 25rpx;
font-size: 26rpx;
}
.modal-label {
width: 120rpx;
color: #666;
}
.modal-current {
color: #333;
}
.modal-input {
flex: 1;
height: 60rpx;
border: 1px solid #eee;
border-radius: 8rpx;
padding: 0 15rpx;
font-size: 26rpx;
}
.modal-unit {
margin-left: 10rpx;
color: #666;
}
.modal-btn-wrap {
display: flex;
gap: 20rpx;
margin-top: 40rpx;
}
.modal-btn {
flex: 1;
height: 70rpx;
border-radius: 8rpx;
font-size: 26rpx;
}
.modal-btn.cancel {
background: #f5f5f5;
color: #666;
}
.modal-btn.confirm {
background: #007aff;
color: #fff;
}
</style>