自动化页面

pages/home/control/automatic.vue

@@ -43,7 +43,7 @@
                        :bold="true"
                        @change="switchTab"
                        :height="80"></tn-subsection>
-        <swiper class="swiper" :current="current" :acceleration="true" @change="change">
+        <swiper class="swiper" :disable-touch="true" :current="current" :acceleration="true"  @change="change" :style="{ height: swiperHeight + 'rpx' }">
           <swiper-item v-for="item in filmRollerList"
                        :key="item">
             <view >
@@ -55,37 +55,41 @@
                 <tn-button  class="param-dialog">参数设置弹窗</tn-button>
               </view>
 <!--              F8F7F8-->
-              <view class="condition-content">
+              <view class="term-content">
 
-                <tn-list-cell  v-for="(item, index) in conditionList[condition[current]]"
+                <uni-swipe-action :key="termList[term[current]].length">
-                               :key="index" :index="index" padding="10rpx"
+                  <uni-swipe-action-item class="swiper-custom" v-for="(item, index) in termList[term[current]]"
-                               :unlined="true" backgroundColor="#F8F7F8" :radius="true">
+                               :key="item.id" :index="index" @click="onDeleteItem($event, item.id)" :right-options="options">
-                  <view class="message">
+                    <view class="message">
-                    <view class="message__left">
+                      <view class="message__left">
-                      <tn-avatar shape="square"  size="lg"  src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>
+                        <view class="message__tag">温度控制</view>
-                    </view>
+                        <view class="message__content tn-text-ellipsis">第{{ index+1 }}段</view>
-                    <view class="message__middle" @click="changeTime('start')">
+  <!--                      <tn-avatar shape="square"  size="lg"  src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>-->
-                      <view class="message__name">运行时间开始</view>
+                      </view>
-                      <view class="message__content tn-text-ellipsis">{{ item.startTime }}</view>
+                      <view class="message__middle" @click="changeTime('startTime',index)">
-                    </view>
+                        <view class="message__name">运行时间开始</view>
-                    <view class="message__middle" @click="changeTime('end')">
+                        <view class="message__content tn-text-ellipsis">{{ item.startTime }}</view>
-                      <view class="message__name">运行时间终止</view>
+                      </view>
-                      <view class="message__content tn-text-ellipsis">{{ item.endTime }}</view>
+                      <view class="message__middle" @click="changeTime('endTime',index)">
-                    </view>
+                        <view class="message__name">运行时间终止</view>
-<!--                    <tn-button backgroundColor="#01BEFF" :plain="true"  class="message__right" width="150rpx" height="100rpx"-->
+                        <view class="message__content tn-text-ellipsis">{{ item.endTime }}</view>
-<!--                                 :fontSize="40" shape="icon" margin="10rpx 10rpx">-->
+                      </view>
+  <!--                    <tn-button backgroundColor="#01BEFF" :plain="true"  class="message__right" width="150rpx" height="100rpx"-->
+  <!--                                 :fontSize="40" shape="icon" margin="10rpx 10rpx">-->
+                      <tn-button :shadow="true" class="message__right" width="150rpx" height="100rpx"
+                                   :fontSize="40" shape="icon" margin="10rpx 10rpx">
+                        <view class="message__name">温度</view>
+                        <view class="message__content tn-text-ellipsis">{{ formatValueWithUnit(item.temp, '℃') }}</view>
+                      </tn-button>
                       <tn-button :shadow="true" class="message__right" width="150rpx" height="100rpx"
                                  :fontSize="40" shape="icon" margin="10rpx 10rpx">
-                      <view class="message__name">温度</view>
+                        <view class="message__name">风口</view>
-                      <view class="message__content tn-text-ellipsis">{{ item.temp }}℃</view>
+                        <view class="message__content tn-text-ellipsis">{{ formatValueWithUnit(item.vent, '%') }}</view>
-                    </tn-button>
+                      </tn-button>
-                    <tn-button :shadow="true" class="message__right" width="150rpx" height="100rpx"
+  <!--                    <view class="message__tag">阶段{{index+1}}</view>-->
-                               :fontSize="40" shape="icon" margin="10rpx 10rpx">
+                    </view>
-                      <view class="message__name">风口</view>
+                  </uni-swipe-action-item>
-                      <view class="message__content tn-text-ellipsis">{{ item.vent }}%</view>
+                </uni-swipe-action>
-                    </tn-button>
-                  </view>
-                </tn-list-cell>
               </view>
 
               <view class="add-term" @click="addTerm">
@@ -98,6 +102,8 @@
       </view>
 
     </uni-section>
+    <tn-picker mode="time"  v-model="selectTime" :params="timeParams" @confirm="confirmTime"></tn-picker>
+
     <tn-select title="请选择数据" :safeAreaInsetBottom="true" :searchShow="false" v-model="showSelect" mode="single" :list="tempList" @confirm="confirmTemp"></tn-select>
 
     <uni-popup ref="inputDialog" mode="center">
@@ -139,6 +145,7 @@ import mqttUtil from '@/utils/mqtt';
 import {addLimit, getAgriByImei, updateLimit} from "../../../api/system/assets/limit";
 import store from "../../../store";
 import {addRemark, updateRemark} from "../../../api/system/assets/remark";
+import {generateUniqueId} from "../../../utils/agri";
 
 export default {
   dicts: ['sys_data_map'],
@@ -178,6 +185,12 @@ export default {
         return {}
       }
     },
+    limitTimes: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
     selectedText: {
       type: String,
       default: ""
@@ -197,13 +210,22 @@ export default {
           this.imei = this.value
         }
       }
+    },
+    // 监听 current 变化，切换 tab 时也重新计算高度
+    current: {
+      handler() {
+        this.$nextTick(() => {
+          this.getSwiperHeight();
+        });
+      },
+      immediate: true
     }
   },
   components: {
     UniPopup  // 注册弹窗组件
   },
   mounted() {
-    this.refresh()
+    this.refresh();
   },
   data() {
     return {
@@ -227,19 +249,6 @@ export default {
       connected: false,
       imei: '',
       current: 0,
-      // 新增：限位时间配置
-      limitTimes: {
-        jbkLimit: 0,
-        jbgLimit: 0,
-        jlkLimit: 0,
-        jlgLimit: 0,
-        jm1kLimit: 0,
-        jm1gLimit: 0,
-        jm2kLimit: 0,
-        jm2gLimit: 0,
-        jm3kLimit: 0,
-        jm3gLimit: 0
-      },
       filmRollerList:["卷膜1", "卷膜2", "卷膜3"],
       tempList: [
         {
@@ -261,12 +270,35 @@ export default {
       ],
       showSelect:false,
       result: "请选择",
-      condition:["jm1", "jm2", "jm3"],
+      term:["jm1", "jm2", "jm3"],
-      conditionList: {
+      termList: {
           "jm1": [],
           "jm2": [],
           "jm3": [],
-      }
+      },
+      options: [
+        {
+          text: '删除',
+          icon: 'delete',
+          style: {
+            backgroundColor: '#E83A30'
+          }
+        }
+      ],
+      swiperHeight: 800, // 用于动态设置 swiper 高度
+      timeParams: {
+        year: false,
+        month: false,
+        day: false,
+        hour: true,
+        minute: true,
+        second: false
+      },
+      selectTime: false,
+      timeTag: null,
+      timeIndex: null,
+      defaultTime: null,
+      maxTermLength: 5,
     };
   },
 
@@ -282,8 +314,15 @@ export default {
       console.info(`选择温度：${event[0]['label']}`)
     },
     refresh() {
+      this.termList = {
+        "jm1": [],
+        "jm2": [],
+        "jm3": [],
+      };
       this.showFlag = !((store.getters && store.getters.name !== 'admin') && this.$auth.hasRole("test"))
-      this.getAgriByImei();
+      this.$nextTick(() => {
+        this.getSwiperHeight(); // 页面初始化时也计算一次
+      });
     },
     openDataModal(sensorCard) {
       if ((store.getters && store.getters.name !== 'admin')
@@ -495,14 +534,74 @@ export default {
         }
       })
     },
+    updateSwiperHeight() {
+      if (this.termList[this.term[this.current]].length>4) {
+        // 加上 param-setting 和 add-term 的高度，以及一些间距
+        this.swiperHeight = this.swiperHeight + 160;
+      }
+    },
+    getSwiperHeight() {
+      this.swiperHeight = 800;
+      var length = this.termList[this.term[this.current]].length-4;
+      if (length>0) {
+        this.swiperHeight = this.swiperHeight + 160*length ;
+      }
+    },
     addTerm() {
-      this.conditionList[this.condition[this.current]].push({
+      var tempList = this.termList[this.term[this.current]];
+      if (tempList.length >= this.maxTermLength) {
+        this.$modal.alert(`您设置的条件数量已超过上限！上限为${this.maxTermLength}条，请删除后重试！`,
+            "操作提示");
+        return;
+      }
+      this.termList[this.term[this.current]].push({
+        id: generateUniqueId(),
         startTime: '请选择时间',
         endTime: '请选择时间',
         temp: '选择',
         vent: '选择'
-      })
+      });
-    }
+      this.$nextTick(() => {
+        this.updateSwiperHeight(); // 数据更新后，在下一个 tick 更新高度
+      });
+    },
+    // 格式化带单位的数值（通用方法，支持温度/风口等所有字段）
+    formatValueWithUnit(value, unit) {
+      // 容错：如果value是null/undefined，默认显示“选择”
+      if (!value || value === '选择') return '选择';
+      // 确保value是字符串/数字，避免拼接出错
+      return `${value}${unit}`;
+    },
+    onDeleteItem(event, id) {
+      const currentKey = this.term[this.current];
+      const tempList = this.termList[currentKey];
+      const newList = tempList.filter(item => item.id !== id);
+
+      // 1. 先清空当前列表（强制触发组件感知）
+      this.termList[currentKey] = [];
+      // 2. 用$nextTick确保清空后，再赋值新列表
+      this.$nextTick(() => {
+        this.termList = {
+          ...this.termList,
+          [currentKey]: newList
+        };
+        // 3. 再次nextTick更新swiper高度
+        this.$nextTick(() => {
+          this.getSwiperHeight();
+          // 可选：关闭滑动删除的展开状态（避免组件样式异常）
+          uni.$emit('uni-swipe-action-hide');
+        });
+      });
+    },
+    changeTime(timeTag, timeIndex) {
+      this.timeTag = timeTag;
+      this.timeIndex = timeIndex;
+      this.selectTime = true;
+    },
+    confirmTime(time) {
+      console.info(this.termList[this.term[this.current]])
+      this.termList[this.term[this.current]][this.timeIndex][this.timeTag] = `${time.hour}:${time.minute}`
+    },
   }
 };
 </script>
@@ -729,7 +828,6 @@ export default {
   box-sizing: border-box;
   border: 2rpx solid rgb(248, 241, 241);
   border-top: 0;
-  //height: 800rpx;
   border-bottom-left-radius: 10rpx;
   border-bottom-right-radius: 10rpx;
   box-shadow: 8rpx 5rpx 10rpx rgb(233, 231, 239);
@@ -756,26 +854,34 @@ export default {
     margin-left: auto; /* 自动填充左侧空间，将按钮推到最右侧 */
   }
 }
-.condition-content {
+.term-content {
   margin: 20rpx;
 }
 
 
-.tn-list-cell {
+.swiper-custom {
-  box-shadow: 8rpx 5rpx 10rpx #D9D9D9;
+  box-shadow: 8rpx 5rpx 10rpx #D9D9D9 !important;
   //border: 2rpx solid #D9D9D9;
   margin-bottom: 20rpx;
+  background: #F8F7F8;
+  border-radius: 12rpx;
 }
 .message {
+  padding: 10rpx;
   display: flex;
   flex-direction: row;
   align-items: center;
+  text-align: center;
 }
 .message__left {
-  flex:1;
+  flex:3;
+  .message__tag {
+    font-size: 25rpx;
+    margin-bottom: 8rpx;
+    color: #42b3ff;
+  }
 }
 .message__middle {
-  text-align: center;
   flex: 4;
 }
 .message__right {
@@ -791,6 +897,11 @@ export default {
   color: #838383;
   margin-bottom: 8rpx;
 }
+//.message__tag {
+//  font-size: 24rpx;
+//  color: #838383;
+//  text-align: center;
+//}
 .message__content {
   font-size: 26rpx;
 }

pages/home/control/index.vue

@@ -28,6 +28,7 @@
               v-if="currentMode === true"
               :show="show"
               :status="status"
+              :limitTimes="limitTimes"
               :dtu_remark="dtu_remark"
               :value="value"
           />
@@ -188,6 +189,9 @@ export default {
       // this.getAgriList()
       this.change(this.imei)
       mqttUtil.setOnMessageCallback(this.ackMessage);
+      if (this.currentMode) {
+        this.$refs.autoPage.refresh();
+      }
       this.$refs.paging.complete();
     },
     getNewSpecialData() {
@@ -206,8 +210,10 @@ export default {
       if ((e === 'A' || e==='B' || e==='C')
           && store.getters && store.getters.name === 'admin'
           && this.currentMode===false) {
+        if (!this.currentMode) {
           this.getNewSpecialData(e);
-          this.mqttConfig.subscribeTopic = `frontend/${clientId}/dtu/862538065276061`;
+        }
+        this.mqttConfig.subscribeTopic = `frontend/${clientId}/dtu/862538065276061`;
       }
         if (e !== 'A' && e!=='B' && e!=='C') {
           // 优化：使用常量拼接MQTT主题
@@ -216,14 +222,16 @@ export default {
           var queryParams = {
             imei: this.imei
           }
-          // 最新温湿度数据
+          if (!this.currentMode) {
-          findDtuDataByInfo(queryParams).then(response => {
+            // 最新温湿度数据
-            Object.keys(response.data).forEach(key => {
+            findDtuDataByInfo(queryParams).then(response => {
-              this.liveData[key] = response.data[key] || '已离线..';
+              Object.keys(response.data).forEach(key => {
-            });
+                this.liveData[key] = response.data[key] || '已离线..';
-            this.liveData.temp = "最后更新时间："+response.data.time;
+              });
-            this.fontStyle = 'font-size:16px;'
+              this.liveData.temp = "最后更新时间："+response.data.time;
-          })
+              this.fontStyle = 'font-size:16px;'
+            })
+          }
           this.getAgriByImei();
           // 备注
           this.getRemarkByImei();

pages/index.vue

@@ -283,7 +283,6 @@ export default {
       this.getListData();
     },
     onDeleteItem(item, agri) {
-      console.info(`点击了${item.content.text},${agri}`)
       if (item.content.text==='删除') {
         uni.showModal({
           title: '操作提示：',

utils/agri.js

@@ -226,3 +226,11 @@ export function getNormalPath(p) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+
+// 生成纯数字、无小数点、低重复率的ID
+// 1. 改造generateUniqueId，返回字符串类型（关键！）
+export function generateUniqueId() {
+  const timestamp = Date.now();
+  const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
+  return (timestamp + random).toString(); // 转成字符串，避免数字精度丢失
+}