自动化页面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>
@@ -98,7 +98,7 @@
                 </uni-swipe-action>
               </view>
 
-              <view class="add-term" >
+              <view class="add-term">
                 <uni-icons color="var(--cyan)" type="plus" size="40" @click="addTerm"/>
                 <text @click="addTerm">添加条件</text>
               </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

@@ -184,7 +184,6 @@ export default {
         // 确保数据有值后执行方法
         if (newVal) {
           this.imei = this.value
-          console.info(this.liveData)
         }
       }
     }