暂提-----运行时间

pages/control/index.vue

@@ -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.$set(this.status, type, this.status[type] === 0 ? 1 : 0);
-            // this.show[type] = this.status[type] === 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>