自动化ui

pages/home/control/automatic.vue

@@ -36,7 +36,13 @@
           </view>
         </view>
       </view>
-      <!---->
+    </uni-section>
+    <uni-section title="自动化参数配置" titleFontSize="16px" type="line"
+                  v-if="value!== 1 && !['862538065276939','A','B','C'].includes(value)">
+      <template v-slot:right>
+        <button @click="saveAutoTerm" style="margin-right: 10rpx" class="cu-btn bg-cyan shadow">保存</button>
+      </template>
+      <!--自动化设置-->
       <view class="film-roller">
         <tn-subsection :list="filmRollerList"
                        :current="current"
@@ -48,23 +54,23 @@
                        :key="item">
             <view >
               <view class="param-setting">
-                <tn-button  @click="showSelect=true">参考温度：{{ result }}
+                <view class="temp-dialog" @click="showSelect=true">参考温度：{{ termList[term[current] + 'Param'].refTemp }}
                   <uni-icons type="down"/>
-                </tn-button>
+                </view>
-<!--                <button class="cu-btn line-cyan round shadow" @click="showSelect=true">参考温度：{{ result }}</button>-->
+                <!--                <button class="cu-btn line-cyan round shadow" @click="showSelect=true">参考温度：{{ result }}</button>-->
-                <tn-button  class="param-dialog">参数设置弹窗</tn-button>
+                <text  @click="openParamDialog" class="param-dialog">参数设置弹窗</text>
               </view>
-<!--              F8F7F8-->
+              <!--              F8F7F8-->
               <view class="term-content">
 
                 <uni-swipe-action :key="termList[term[current]].length">
                   <uni-swipe-action-item class="swiper-custom" v-for="(item, index) in termList[term[current]]"
-                               :key="item.id" :index="index" @click="onDeleteItem($event, item.id)" :right-options="options">
+                                         :key="item.id" :index="index" @click="onDeleteItem($event, item.id)" :right-options="options">
                     <view class="message">
                       <view class="message__left">
                         <view class="message__tag">温度控制</view>
                         <view class="message__content tn-text-ellipsis">第{{ index+1 }}段</view>
-  <!--                      <tn-avatar shape="square"  size="lg"  src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>-->
+                        <!--                      <tn-avatar shape="square"  size="lg"  src="https://resource.tuniaokj.com/images/avatar/xiaomai1.jpg"></tn-avatar>-->
                       </view>
                       <view class="message__middle" @click="changeTime('startTime',index)">
                         <view class="message__name">运行时间开始</view>
@@ -74,36 +80,34 @@
                         <view class="message__name">运行时间终止</view>
                         <view class="message__content tn-text-ellipsis">{{ item.endTime }}</view>
                       </view>
-  <!--                    <tn-button backgroundColor="#01BEFF" :plain="true"  class="message__right" width="150rpx" height="100rpx"-->
+                      <!--                    <tn-button backgroundColor="#01BEFF" :plain="true"  class="message__right" width="150rpx" height="100rpx"-->
-  <!--                                 :fontSize="40" shape="icon" margin="10rpx 10rpx">-->
+                      <!--                                 :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">
+                                 :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="openSlider('temp', index)">
                         <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">
+                                 :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>
                       </tn-button>
-  <!--                    <view class="message__tag">阶段{{index+1}}</view>-->
+                      <!--                    <view class="message__tag">阶段{{index+1}}</view>-->
                     </view>
                   </uni-swipe-action-item>
                 </uni-swipe-action>
               </view>
 
-              <view class="add-term" @click="addTerm">
+              <view class="add-term" >
-                <uni-icons color="var(--cyan)" type="plus" size="40"/>
+                <uni-icons color="var(--cyan)" type="plus" size="40" @click="addTerm"/>
-                <text>添加条件</text>
+                <text @click="addTerm">添加条件</text>
               </view>
             </view>
           </swiper-item>
         </swiper>
       </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">
@@ -136,10 +140,10 @@
       </view>
     </uni-popup>
 
-    <uni-popup ref="inputDialog" mode="center">
+    <uni-popup ref="autoParam" mode="center">
       <!-- 新增：修改运行时间的弹窗 -->
       <view class="modal-container">
-        <view class="modal-title">{{ `【${selectedText} - ${currentCard.name}】设置` }}</view>
+        <view class="modal-title">{{ `【${selectedText} - 自动化】参数设置` }}</view>
         <view class="modal-input-wrap">
           <text class="modal-label">当前时间：</text>
           <text class="modal-current">{{ currentCardTime > 0 ? `${currentCardTime} 秒` : '未设置' }}</text>
@@ -160,8 +164,33 @@
           <uni-easyinput style="width: 100px" v-model="remark" placeholder="不填展示默认备注"/>
         </view>
         <view class="modal-btn-wrap">
-          <button class="modal-btn cancel" @click="close">取消</button>
+          <button class="modal-btn cancel" @click="closeParamDialog">取消</button>
-          <button class="modal-btn confirm" @click="confirmModifyTime">确定</button>
+          <button class="modal-btn confirm" @click="setAutoParam">确定</button>
+        </view>
+      </view>
+    </uni-popup>
+
+
+    <uni-popup ref="sliderDialog" mode="center">
+      <view class="modal-container">
+        <view class="modal-title">{{ `【${selectedText} - 自动化】参数设置` }}</view>
+        <!-- 核心修改：给容器加 flex 布局样式 -->
+        <view class="modal-slider">
+          <text class="slider-label">{{ slider.title }}</text>
+          <slider
+              :value="slider.value"
+              :min="slider.min"
+              :max="slider.max"
+              show-value
+              class="slider-component"
+              @change="changeSlider"
+          />
+          <text class="slider-unit">{{ slider.unit }}</text>
+        </view>
+
+        <view class="modal-btn-wrap">
+          <button class="modal-btn cancel" @click="closeSlider">取消</button>
+          <button class="modal-btn confirm" @click="confirmSlider">确定</button>
         </view>
       </view>
     </uni-popup>
@@ -176,6 +205,7 @@ import {addLimit, getAgriByImei, updateLimit} from "../../../api/system/assets/l
 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";
 
 export default {
   dicts: ['sys_data_map'],
@@ -252,6 +282,7 @@ export default {
     }
   },
   components: {
+    UniSection,
     UniPopup  // 注册弹窗组件
   },
   mounted() {
@@ -299,12 +330,20 @@ export default {
         }
       ],
       showSelect:false,
-      result: "请选择",
       term:["jm1", "jm2", "jm3"],
       termList: {
-          "jm1": [],
+        "jm1": [],
-          "jm2": [],
+        "jm1Param":{
-          "jm3": [],
+          refTemp: '请选择',
+        },
+        "jm2": [],
+        "jm2Param":{
+          refTemp: '请选择',
+        },
+        "jm3": [],
+        "jm3Param":{
+          refTemp: '请选择'
+        },
       },
       options: [
         {
@@ -326,9 +365,18 @@ export default {
       },
       selectTime: false,
       timeTag: null,
-      timeIndex: null,
+      follerIndex: null,
       defaultTime: null,
       maxTermLength: 5,
+      autoParam:false,
+      slider: {
+        title: '请选择',
+        min:0,
+        max:100,
+        value:0,
+        unit:'',
+        mode: null
+      },
     };
   },
 
@@ -343,15 +391,24 @@ export default {
     },
     // 左上角选择时间
     confirmTemp(event) {
-      this.result = event[0]['label']
+      this.termList[this.term[this.current] + 'Param'].refTemp = event[0]['label']
       console.info(`选择温度：${event[0]['label']}`)
     },
     // 下拉刷新以及进入组件渲染
     refresh() {
       this.termList = {
         "jm1": [],
+        "jm1Param":{
+          refTemp: '请选择',
+        },
         "jm2": [],
+        "jm2Param":{
+          refTemp: '请选择',
+        },
         "jm3": [],
+        "jm3Param":{
+          refTemp: '请选择'
+        },
       };
       this.showFlag = !((store.getters && store.getters.name !== 'admin') && this.$auth.hasRole("test"))
       this.$nextTick(() => {
@@ -607,14 +664,76 @@ export default {
     // 选择运行时间
     changeTime(timeTag, timeIndex) {
       this.timeTag = timeTag;
-      this.timeIndex = timeIndex;
+      this.follerIndex = timeIndex;
       this.selectTime = true;
     },
+    openParamDialog() {
+      this.$refs.autoParam.open();
+    },
+    // 卷膜参数设置
+    setAutoParam() {
+      var jmTerm = this.term[this.current];
+      // todo 卷膜参数设置
+      this.$refs.autoParam.close();
+    },
+    closeParamDialog() {
+      this.$refs.autoParam.close();
+    },
     // 选择时间串口点击确定
     confirmTime(time) {
-      this.termList[this.term[this.current]][this.timeIndex][this.timeTag] = `${time.hour}:${time.minute}`
+      this.termList[this.term[this.current]][this.follerIndex][this.timeTag] = `${time.hour}:${time.minute}`
     },
-  }
+    /**
+     * @param tag 参数
+     * @param index 条件
+     */
+    openSlider(tag, index) {
+      var fillerTerm = this.termList[this.term[this.current]][index];
+      if (tag === 'temp') {
+        this.slider = {
+          title: '适宜温度',
+          min: 0,
+          max: 40,
+          unit: '℃',
+          value: fillerTerm.temp==='选择'?0:fillerTerm.temp,
+          mode: tag
+        }
+      } else if (tag === 'vent') {
+        this.slider = {
+          title: '风口大小',
+          min: 0,
+          max: 100,
+          unit: '﹪',
+          value: fillerTerm.vent==='选择'?0:fillerTerm.vent,
+          mode: tag
+        }
+      }
+      this.follerIndex = index;
+      this.$refs.sliderDialog.open();
+    },
+    changeSlider(e) {
+      this.slider.value = e.detail.value
+    },
+    closeSlider() {
+      this.$refs.sliderDialog.close();
+    },
+    confirmSlider() {
+      const slideMode = this.slider.mode;
+      const value = this.slider.value;
+      if (slideMode === 'temp') {
+        this.termList[this.term[this.current]][this.follerIndex].temp = value;
+      } else if (slideMode === 'vent') {
+        this.termList[this.term[this.current]][this.follerIndex].vent = value;
+      }
+      this.$refs.sliderDialog.close();
+    },
+    // 保存自动化条件 
+    saveAutoTerm() {
+      var termMap = this.termList;
+      // todo 校验、后端保存
+    }
+  },
+  
 };
 </script>
 <style lang="scss" scoped>
@@ -759,10 +878,31 @@ export default {
   font-size: 26rpx;
   width: 80rpx;
 }
+/* 核心样式：让子元素水平排列 */
+.modal-slider {
+  display: flex;
+  align-items: center; /* 垂直居中对齐 */
+  padding: 10rpx 20rpx; /* 增加内边距，避免拥挤 */
+  gap: 10rpx; /* 元素之间的间距 */
+}
 
-.modal-unit {
+/* 标题样式：固定宽度，避免挤压滑块 */
-  margin-left: 10rpx;
+.slider-label {
-  color: #666;
+  flex: 0 0 auto; /* 不拉伸、不收缩 */
+  font-size: 28rpx;
+  white-space: nowrap; /* 防止标题换行 */
+}
+
+/* 滑块样式：占满剩余空间 */
+.slider-component {
+  flex: 1; /* 自动填充剩余宽度 */
+}
+
+/* 单位样式：固定宽度 */
+.slider-unit {
+  flex: 0 0 auto;
+  font-size: 28rpx;
+  margin-left: 5rpx;
 }
 
 .modal-btn-wrap {
@@ -801,7 +941,7 @@ export default {
   overflow: hidden;
 }
 .film-roller {
-  padding: 20rpx;
+  padding: 10rpx 20rpx 20rpx 20rpx;
 }
 .swiper {
   box-sizing: border-box;
@@ -821,7 +961,7 @@ export default {
   //padding: 10px 20px;
   font-size: 40rpx;
   color: #42b3ff;
-  margin-top: 30rpx;
+  margin-top: 50rpx;
   //border: 1px solid var(--cyan);
   //border-radius: 8px;
   //background-color: #fff;
@@ -829,8 +969,15 @@ export default {
 .param-setting {
   display: flex;
   align-items: center;
+  font-size: 28rpx;
+  color: #0a0a0a;
+  margin-top: 15rpx;
+  .temp-dialog {
+    margin-left: 20rpx;
+  }
   .param-dialog {
     margin-left: auto; /* 自动填充左侧空间，将按钮推到最右侧 */
+    margin-right: 20rpx;
   }
 }
 .term-content {
@@ -882,6 +1029,7 @@ export default {
 //  text-align: center;
 //}
 .message__content {
-  font-size: 26rpx;
+  font-size: 27rpx;
+  color: #020e15;
 }
 </style>