自动化页面ui

pages/home/control/automatic.vue

@@ -90,7 +90,7 @@
                       <tn-button :shadow="true" class="message__right" width="150rpx" height="100rpx"
                                  :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="openSlider('vent', index)">
                         <view class="message__name">风口</view>
-                        <view class="message__content tn-text-ellipsis">{{ formatValueWithUnit(item.vent, '%') }}</view>
+                        <view class="message__content tn-text-ellipsis">{{ formatValueWithUnit(item.vent, 'cm') }}</view>
                       </tn-button>
                       <!--                    <view class="message__tag">阶段{{index+1}}</view>-->
                     </view>
@@ -142,27 +142,46 @@
 
     <uni-popup ref="autoParam" mode="center">
       <!-- 新增：修改运行时间的弹窗 -->
-      <view class="modal-container">
+      <view class="modal-container_">
         <view class="modal-title">{{ `【${selectedText} - ${filmRollerList[current]}】风口校准`}}</view>
-        <view class="modal-input-wrap">
-          <text class="modal-label">计算风口总长：</text>
-          <text class="modal-current">{{ currentCardTime > 0 ? `${currentCardTime} 秒` : '未设置' }}</text>
-        </view>
-        <view class="modal-input-wrap">
-          <text class="modal-label">修改后时间：</text>
-          <input
-              class="modal-input"
-              type="number"
-              v-model.number="newLimitTime"
-          />
-          <!--        <uni-number-box v-model="newLimitTime" />-->
-          <text class="modal-unit">秒</text>
-        </view>
 
-        <view class="modal-input-wrap">
+        <uni-forms :model="rollerParam" ref="form" :labelWidth="130" >
-          <text class="modal-label">别名设置：</text>
+          <uni-forms-item label="当前卷膜：" prop="refTemp" v-if="false">
-          <uni-easyinput style="width: 100px" v-model="remark" placeholder="不填展示默认备注"/>
+            <uni-easyinput  type="text" placeholderStyle="font-size: 25rpx;" v-model="rollerParam.roller"
-        </view>
+                            disabled :inputBorder="false" :clearable="false"/>
+          </uni-forms-item>
+          <uni-forms-item label="参考温度：" prop="refTemp"  v-if="false">
+            <uni-easyinput  type="text" placeholderStyle="font-size: 25rpx;" v-model="rollerParam.refTemp"
+                            disabled :inputBorder="false" :clearable="false"/>
+          </uni-forms-item>
+          <uni-forms-item label="计算风口长度：" prop="autoTotalLen" :labelWidth="124">
+            <uni-easyinput  type="number" placeholderStyle="font-size: 25rpx;" v-model="rollerParam.autoTotalLen"
+                            placeholder="风口校准完成自动写入" disabled
+                            :inputBorder="false" :clearable="false">
+              <template #right>
+                <view>cm</view>
+              </template>
+            </uni-easyinput>
+          </uni-forms-item>
+          <uni-forms-item label="手动设置：" prop="manualTotalLen" :labelWidth="95">
+            <uni-easyinput  type="number" placeholderStyle="font-size: 25rpx;" v-model="rollerParam.manualTotalLen"
+                            placeholder="可在此处手动校准风口长度"
+                            :inputBorder="false" :clearable="false">
+              <template #right>
+                <view>cm</view>
+              </template>
+            </uni-easyinput>
+          </uni-forms-item>
+          <uni-forms-item label="预留风口长度：" prop="reservedLen" :required="true" :labelWidth="135">
+            <uni-easyinput  type="number" placeholderStyle="font-size: 25rpx;" v-model="rollerParam.reservedLen"
+                            placeholder="请输入预留风口长度"
+                            :inputBorder="false" :clearable="false">
+              <template #right>
+                <view>cm</view>
+              </template>
+            </uni-easyinput>
+          </uni-forms-item>
+        </uni-forms>
         <view class="modal-btn-wrap">
           <button class="modal-btn cancel" @click="closeParamDialog">取消</button>
           <button class="modal-btn confirm" @click="setAutoParam">确定</button>
@@ -206,6 +225,7 @@ import store from "../../../store";
 import {addRemark, updateRemark} from "../../../api/system/assets/remark";
 import {generateUniqueId} from "../../../utils/agri";
 import UniSection from "../../../components/uni-section/uni-section.vue";
+import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
 
 export default {
   dicts: ['sys_data_map'],
@@ -282,6 +302,7 @@ export default {
     }
   },
   components: {
+    UniFormsItem,
     UniSection,
     UniPopup  // 注册弹窗组件
   },
@@ -313,19 +334,19 @@ export default {
       filmRollerList:["卷膜1", "卷膜2", "卷膜3"],
       tempList: [
         {
-          value: '1',
+          value: '201',
           label: '温度1'
         },
         {
-          value: '2',
+          value: '202',
           label: '温度2'
         },
         {
-          value: '3',
+          value: '203',
           label: '温度3'
         },
         {
-          value: '4',
+          value: '204',
           label: '温度4'
         }
       ],
@@ -335,14 +356,29 @@ export default {
         "jm1": [],
         "jm1Param":{
           refTemp: '请选择',
+          refTempCode: null,
+          autoTotalLen: null,
+          manualTotalLen: null,
+          reservedLen: null,
+          roller:'jm1'
         },
         "jm2": [],
         "jm2Param":{
           refTemp: '请选择',
+          refTempCode: null,
+          autoTotalLen: null,
+          manualTotalLen: null,
+          reservedLen: null,
+          roller:'jm2'
         },
         "jm3": [],
         "jm3Param":{
-          refTemp: '请选择'
+          refTemp: '请选择',
+          refTempCode: null,
+          autoTotalLen: null,
+          manualTotalLen: null,
+          reservedLen: null,
+          roller:'jm3'
         },
       },
       options: [
@@ -365,7 +401,7 @@ export default {
       },
       selectTime: false,
       timeTag: null,
-      follerIndex: null,
+      rollerIndex: null,
       defaultTime: null,
       maxTermLength: 5,
       autoParam:false,
@@ -377,6 +413,13 @@ export default {
         unit:'',
         mode: null
       },
+      rollerParam: {
+        roller: null,
+        refTemp: '请选择',
+        autoTotalLen: null,
+        manualTotalLen: null,
+        reservedLen: null
+      },
     };
   },
 
@@ -392,7 +435,7 @@ export default {
     // 左上角选择时间
     confirmTemp(event) {
       this.termList[this.term[this.current] + 'Param'].refTemp = event[0]['label']
-      console.info(`选择温度：${event[0]['label']}`)
+      this.termList[this.term[this.current] + 'Param'].refTempCode = event[0]['value']
     },
     // 下拉刷新以及进入组件渲染
     refresh() {
@@ -400,14 +443,17 @@ export default {
         "jm1": [],
         "jm1Param":{
           refTemp: '请选择',
+          refTempCode: null,
         },
         "jm2": [],
         "jm2Param":{
           refTemp: '请选择',
+          refTempCode: null,
         },
         "jm3": [],
         "jm3Param":{
-          refTemp: '请选择'
+          refTemp: '请选择',
+          refTempCode: null,
         },
       };
       this.showFlag = !((store.getters && store.getters.name !== 'admin') && this.$auth.hasRole("test"))
@@ -615,8 +661,8 @@ export default {
     },
     // 添加条件方法
     addTerm() {
-      var tempList = this.termList[this.term[this.current]];
+      var temps = this.termList[this.term[this.current]];
-      if (tempList.length >= this.maxTermLength) {
+      if (temps.length >= this.maxTermLength) {
         this.$modal.alert(`您设置的条件数量已超过上限！上限为${this.maxTermLength}条，请删除后重试！`,
             "操作提示");
         return;
@@ -664,16 +710,29 @@ export default {
     // 选择运行时间
     changeTime(timeTag, timeIndex) {
       this.timeTag = timeTag;
-      this.follerIndex = timeIndex;
+      this.rollerIndex = timeIndex;
       this.selectTime = true;
     },
     openParamDialog() {
+      this.rollerParam = JSON.parse(JSON.stringify(this.termList[this.term[this.current] + 'Param']));
+      // this.rollerParam.roller = this.term[this.current];
       this.$refs.autoParam.open();
     },
     // 卷膜参数设置
     setAutoParam() {
-      var jmTerm = this.term[this.current];
+      // 2. 优化校验逻辑
-      // todo 卷膜参数设置
+      const isValid = this.rollerParam.manualTotalLen > 0 || this.rollerParam.autoTotalLen > 0;
+      if (!isValid) {
+        this.$modal.alert(`计算风口总长和手动设置风口长度至少填写一个！`,
+            "操作提示");
+        return;
+      }
+      if (!(this.rollerParam.reservedLen && this.rollerParam.reservedLen > 0)) {
+        this.$modal.alert(`请填写预留风口！`,
+            "操作提示");
+        return;
+      }
+      this.termList[this.term[this.current] + 'Param'] = {...this.rollerParam}
       this.$refs.autoParam.close();
     },
     closeParamDialog() {
@@ -681,7 +740,7 @@ export default {
     },
     // 选择时间串口点击确定
     confirmTime(time) {
-      this.termList[this.term[this.current]][this.follerIndex][this.timeTag] = `${time.hour}:${time.minute}`
+      this.termList[this.term[this.current]][this.rollerIndex][this.timeTag] = `${time.hour}:${time.minute}`
     },
     /**
      * @param tag 参数
@@ -708,7 +767,7 @@ export default {
           mode: tag
         }
       }
-      this.follerIndex = index;
+      this.rollerIndex = index;
       this.$refs.sliderDialog.open();
     },
     changeSlider(e) {
@@ -721,29 +780,72 @@ export default {
       const slideMode = this.slider.mode;
       const value = this.slider.value;
       if (slideMode === 'temp') {
-        this.termList[this.term[this.current]][this.follerIndex].temp = value;
+        this.termList[this.term[this.current]][this.rollerIndex].temp = value;
       } else if (slideMode === 'vent') {
-        this.termList[this.term[this.current]][this.follerIndex].vent = value;
+        this.termList[this.term[this.current]][this.rollerIndex].vent = value;
       }
       this.$refs.sliderDialog.close();
     },
     // 保存自动化条件 
     saveAutoTerm() {
-      var termMap = this.termList;
+      const termMap = this.termList;
-      // todo 校验、后端保存
+      const rollerList = [];
+      let showTips = null;
 
-      // todo
+      const checkRules = [
-      // uni.showModal({
+        {
-      //   title: '温馨提示：',
+          tip: '参考温度未设置，请点击相应页签左上角设置后重试！',
-      //   content: '',
+          validate: (rollerParam, term) => rollerParam.refTemp === '请选择'
-      //   cancelText: '取消',
-      //   confirmText: '确定',
-      //   success: async (res) => {
-      //
-      //   }
-      // })
-    }
         },
+        {
+          tip: '计算风口总长和手动设置风口长度至少填写一个！请填写后重试！',
+          validate: (rollerParam, term) => !((rollerParam.manualTotalLen && rollerParam.manualTotalLen > 0) ||
+              (rollerParam.autoTotalLen && rollerParam.autoTotalLen > 0))
+        },
+        {
+          tip: '预留风口长度未设置，请点击相应页签右上角设置后重试！',
+          validate: (rollerParam, term) => !(rollerParam.reservedLen && rollerParam.reservedLen > 0)
+        },
+        {
+          tip: '温度控制未设置，请设置后重新尝试！',
+          validate: (rollerParam, term) => !(term && term.length > 0)
+        },
+        {
+          tip: '温度控制运行时间填写不完整，请检查填写后重新尝试！',
+          validate: (rollerParam, term) => term.filter(item => !((item.startTime && item.startTime!=='请选择时间') ||
+              (item.endTime && item.endTime !== '请选择时间')))
+        },
+        {
+          tip: '温度控制适宜温度填写不完整，请填写后重新尝试！',
+          validate: (rollerParam, term) => term.filter(item => !(item.temp && item.temp!=='选择'))
+        },
+        {
+          tip: '温度控制风口开合大小填写不完整，请填写后重新尝试！',
+          validate: (rollerParam, term) => term.filter(item => !(item.vent && item.vent!=='选择'))
+        }
+      ];
+
+      // todo 校验、后端保存
+      for (const [_, rule] of checkRules.entries()) {
+        for (const [index, item] of this.term.entries()) {
+          const term = termMap[item]; // 温度条件
+          const rollerParam = termMap[item + 'Param']; // 参数设置
+          const filmRoller = this.filmRollerList[index];
+          if (!rollerParam) {
+            this.$tn.message.toast('参数设置失败，请下拉刷新后重试！')
+            return;
+          } else if (rule.validate(rollerParam, term)) {
+            rollerList.push(filmRoller);
+            showTips = rule.tip;
+          }
+        }
+        if (rollerList.length>0) {
+          this.$tn.message.toast(`【${rollerList.join("，")}】${showTips}`);
+          return;
+        }
+      }
+    }
+  }
   
 };
 </script>
@@ -848,13 +950,15 @@ export default {
 }
 
 /* 新增：弹窗样式 */
-.modal-container {
+.modal-container, .modal-container_ {
   width: 600rpx;
   background: #fff;
   border-radius: 16rpx;
   padding: 30rpx 20rpx;
 }
-
+.modal-container_{
+  padding: 30rpx 40rpx;
+}
 .modal-title {
   font-size: 30rpx;
   font-weight: 500;
@@ -1046,4 +1150,15 @@ export default {
 /deep/ .uni-slider-handle-wrapper {
   height: 10rpx !important;
 }
+/deep/ .uni-forms-item {
+  border-bottom: 1rpx solid #E5E5E5;
+  .uni-forms-item__label {
+    font-size: 28rpx;
+    color: #0a0a0a;
+  }
+}
+/deep/ .uni-input-input {
+  text-align: right !important;
+  font-size: 28rpx;
+}
 </style>

pages/home/control/index.vue

@@ -495,6 +495,9 @@ export default {
           if (res.confirm) {
             // todo 修改大棚模式
             this.currentMode = mode
+            if (!mode) {
+              this.change(this.imei)
+            }
           }
         }
       })

pages/home/control/manual.vue

@@ -7,34 +7,17 @@
       </template>
 
       <view>
-        <!-- 优化：温度卡片循环渲染 -->
+        <!-- 优化：温湿度卡片循环渲染 -->
-        <view class="uni-flex_control uni-row">
+        <view class="uni-flex_control uni-row" v-for="data in dataType" :key="data.name">
           <view
-              class="text uni-flex_control_one uni-view"
+              :class="['text', `uni-flex_control_${data.name}`,'uni-view']"
-              v-for="item in sensorCards.temp"
+              v-for="item in sensorCards[data.name]"
               :key="item.key"
               @click="openDataModal(item)"
           >
             <text class="data" :style="fontStyle">
               {{ liveData[item.key] }}
-              <text v-if="isEffectiveValue(liveData[item.key])" class="tempStyle">℃</text>
+              <text v-if="isEffectiveValue(liveData[item.key])" class="dataStyle">{{data.unit}}</text>
-            </text>
-            <text class="data" v-if="dtu_remark[item.key]">{{ dtu_remark[item.key] }}</text>
-            <text class="data" v-else>{{ item.label }}</text>
-          </view>
-        </view>
-
-        <!-- 优化：湿度卡片循环渲染 -->
-        <view class="uni-flex_control uni-row">
-          <view
-              class="text uni-flex_control_two uni-view"
-              v-for="item in sensorCards.humi"
-              :key="item.key"
-              @click="openDataModal(item)"
-          >
-            <text class="data" :style="fontStyle">
-              {{ liveData[item.key] }}
-              <text v-if="isEffectiveValue(liveData[item.key])" class="humiStyle"> %RH</text>
             </text>
             <text class="data" v-if="dtu_remark[item.key]">{{ dtu_remark[item.key] }}</text>
             <text class="data" v-else>{{ item.label }}</text>
@@ -253,7 +236,7 @@ export default {
       imei: '',
       // 优化：温湿度卡片配置（固定顺序：温度1→2→3→4，湿度1→2→3→4）
       sensorCard:{},
-      dataType: ["temp", "humi"]
+      dataType: [{name:"temp", unit: "℃"}, {name:"humi", unit: "%RH"}]
     };
   },
 
@@ -638,7 +621,7 @@ export default {
   box-shadow: 0 2rpx 8rpx #bfbec1
 }
 
-.tempStyle, .humiStyle {
+.dataStyle {
   display: inline-block;
   font-size: 12px;
 }

utils/uni.css

@@ -25,15 +25,16 @@ form {
 	flex-direction: column;
 }
 
-.uni-flex_control_one {
+.uni-flex_control_temp {
 	display: flex;
 	flex-direction: column;
 	background: radial-gradient(circle at bottom right, #faf1f1 40%, #F8FCFE 100%);
 }
-.uni-flex_control_two {
+.uni-flex_control_humi {
 	display: flex;
 	flex-direction: column;
-	background: radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%);
+	background: radial-gradient(circle at top left, #E8F4F8 40%,
+	#F8FCFE 100%);
 }
 
 .uni-flex-item {