feat(自动施肥): 优化自动施肥页面布局和交互逻辑

refactor(配方设置): 重构配方设置页面样式和功能

feat(定时设置): 添加定时设置功能并优化UI

style(控制页面): 更新控制页面图标样式和布局

perf(对象合并): 使用Map优化对象合并算法性能

docs(页面导航): 更新页面间导航参数传递逻辑

pages/cb/shuifeizsFirst/autoSetting.vue

@@ -1,96 +1,97 @@
 <template>
   <view class="auto-fertilization-container">
-    <!-- 顶部导航栏 -->
-    <view class="nav-bar">
-      <view class="nav-left">
-        <text class="back-icon">←</text>
-      </view>
-      <view class="nav-center">
-        <text class="nav-title">自动施肥</text>
-      </view>
-      <view class="nav-right">
-        <text class="nav-icon">⋯</text>
-        <text class="nav-icon">⚙️</text>
-      </view>
-    </view>
-
+    <custom-card>
+      <block slot="backText">自动施肥</block>
+    </custom-card>
     <!-- 内容区域 -->
     <view class="content">
       <!-- 灌溉模式 -->
-      <view class="setting-item">
-        <text class="setting-label">灌溉模式</text>
-        <view class="radio-group">
-          <label class="radio-item" :class="{ active: irrigationMode === '定时' }" @click="irrigationMode = '定时'">
-            <radio value="定时" :checked="irrigationMode === '定时'" color="#14a478" />
-            <text>定时</text>
-          </label>
-          <label class="radio-item" :class="{ active: irrigationMode === '定量' }" @click="irrigationMode = '定量'">
-            <radio value="定量" :checked="irrigationMode === '定量'" color="#14a478" />
-            <text>定量</text>
-          </label>
-          <label class="radio-item" :class="{ active: irrigationMode === '禁用' }" @click="irrigationMode = '禁用'">
-            <radio value="禁用" :checked="irrigationMode === '禁用'" color="#14a478" />
-            <text>禁用</text>
-          </label>
+      <view class="setting-top-container">
+        <view class="setting-item">
+          <text class="setting-label">灌溉模式</text>
+          <view class="radio-group">
+            <view class="group-check-container" @click="selectFertType('1')">
+              <view class="group-check-radius" :class="{'active': FertType == '1'}">
+                <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertType == '1'"/>
+              </view>
+              <text class="text" :class="FertType == '1'?'text-active':''">定时</text>
+            </view>
+            <view class="group-check-container" @click="selectFertType('2')" :class="{'active': FertType == '2'}" style="width: 150rpx;">
+              <view class="group-check-radius" :class="{'active': FertType == '2'}">
+                <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertType == '2'"/>
+              </view>
+              <text class="text" :class="FertType == '2'?'text-active':''">定量</text>  
+            </view>
+            <view class="group-check-container" @click="selectFertType('0')" :class="{'active': FertType == '0'}">
+              <view class="group-check-radius" :class="{'active': FertType == '0'}">
+                <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertType == '0'"/>
+              </view>
+              <text class="text" :class="FertType == '0'?'text-active':''">禁用</text>  
+            </view>
+          </view>
         </view>
-      </view>
 
-      <!-- 配方方式 -->
-      <view class="setting-item">
-        <text class="setting-label">配方方式</text>
-        <view class="radio-group">
-          <label class="radio-item" :class="{ active: formulaMode === 'PID' }" @click="formulaMode = 'PID'">
-            <radio value="PID" :checked="formulaMode === 'PID'" color="#14a478" />
-            <text>PID</text>
-          </label>
-          <label class="radio-item" :class="{ active: formulaMode === '水肥比例' }" @click="formulaMode = '水肥比例'">
-            <radio value="水肥比例" :checked="formulaMode === '水肥比例'" color="#14a478" />
-            <text>水肥比例</text>
-          </label>
-          <label class="radio-item" :class="{ active: formulaMode === '禁用' }" @click="formulaMode = '禁用'">
-            <radio value="禁用" :checked="formulaMode === '禁用'" color="#14a478" />
-            <text>禁用</text>
-          </label>
+        <!-- 配方方式 -->
+        <view class="setting-item">
+          <text class="setting-label">配方方式</text>
+          <view class="radio-group">
+            <view class="group-check-container" @click="selectFertPidType('1')" >
+              <view class="group-check-radius" :class="{'active': FertPidType == '1'}">
+                <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertPidType == '1'"/>
+              </view>
+              <text class="text" :class="FertPidType == '1'?'text-active':''">PID</text>
+            </view>
+            <view class="group-check-container"  @click="selectFertPidType('2')"  :class="{'active': FertPidType == '2'}" style="width: 150rpx;">
+              <view class="group-check-radius" :class="{'active': FertPidType == '2'}">
+                <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertPidType == '2'"/>
+              </view>
+              <text class="text" :class="FertPidType == '2'?'text-active':''">水费比例</text>  
+            </view>
+            <view class="group-check-container" @click="selectFertPidType('0')"  :class="{'active': FertPidType == '0'}">
+              <view class="group-check-radius" :class="{'active': FertPidType == '0'}">
+                <u-icon class="check-icon" name="checkmark" size="24rpx" v-if="FertPidType == '0'"/>
+              </view>
+              <text class="text" :class="FertPidType == '0'?'text-active':''">禁用</text>  
+            </view>
+          </view>
         </view>
-      </view>
 
-      <!-- 轮灌次数 -->
-      <view class="setting-item">
-        <text class="setting-label">轮灌次数</text>
-        <view class="number-input">
-          <text class="number-btn" @click="decreaseRoundCount">−</text>
-          <text class="number-value">{{ roundCount }}</text>
-          <text class="number-btn" @click="increaseRoundCount">+</text>
+        <!-- 轮灌次数 -->
+        <view class="setting-item">
+          <text class="setting-label">轮灌次数</text>
+          <view class="number-input">
+            <u-number-box v-model="IrrCnt" placeholder="请输入轮灌次数" min="1" max="9999999" @change="irrChange(IrrCnt)"></u-number-box>
+          </view>
         </view>
-      </view>
 
-      <!-- 轮灌间隔 -->
-      <view class="setting-item">
-        <text class="setting-label">轮灌间隔</text>
-        <view class="time-input">
-          <input type="number" v-model="roundInterval" class="time-input-field" />
-          <text class="time-unit">分钟</text>
+        <!-- 轮灌间隔 -->
+        <view class="setting-item">
+          <text class="setting-label">轮灌间隔</text>
+          <view class="time-input">
+            <input type="number" v-model="IdleTim" class="time-input-field" min="0" max="1440" placeholder="请输入轮灌间隔（分钟）" @change="idleChange(IdleTim)" />
+            <text class="time-unit">分钟</text>
+          </view>
         </view>
-      </view>
 
-      <!-- 肥前水 -->
-      <view class="setting-item">
-        <text class="setting-label">肥前水</text>
-        <view class="time-input">
-          <input type="number" v-model="waterBefore" class="time-input-field" />
-          <text class="time-unit">分钟</text>
+        <!-- 肥前水 -->
+        <view class="setting-item">
+          <text class="setting-label">肥前水</text>
+          <view class="time-input">
+            <input type="number" v-model="FrontClearWater" class="time-input-field"  min="0" max="1440" placeholder="请输入肥前水（秒）" @change="frontChange(FrontClearWater)" />
+            <text class="time-unit">秒</text>
+          </view>
         </view>
-      </view>
 
-      <!-- 肥后水 -->
-      <view class="setting-item">
-        <text class="setting-label">肥后水</text>
-        <view class="time-input">
-          <input type="number" v-model="waterAfter" class="time-input-field" />
-          <text class="time-unit">分钟</text>
+        <!-- 肥后水 -->
+        <view class="setting-item">
+          <text class="setting-label">肥后水</text>
+          <view class="time-input">
+            <input type="number" v-model="UnderClearWater" class="time-input-field"  min="0" max="1440" placeholder="请输入肥后水（秒）" @change="underChange(UnderClearWater)" />
+            <text class="time-unit">秒</text>
+          </view>
         </view>
       </view>
-
+      <u-picker :show="show" :columns="columns"></u-picker>
       <!-- 定时轮灌组 -->
       <view class="round-groups-section">
         <text class="section-title">定时轮灌组</text>
@@ -98,61 +99,53 @@
           <!-- 左侧轮灌组列表 -->
           <view class="round-groups-list">
             <view 
-              v-for="i in 7" 
-              :key="i"
+              v-for="(item,index) in group_list" :key="item.group"
               class="round-group-item"
-              :class="{ active: selectedGroup === i }"
-              @click="selectedGroup = i"
+              @click="selectGroup(index)"
+              :class="{ active: selectedGroup === index }"
             >
-              <text>{{ i }}组</text>
+              <text :class="{ 'green-text': selectedGroup === index }">{{ index + 1 }}组</text>
             </view>
           </view>
 
           <!-- 右侧轮灌组详情 -->
           <view class="round-group-detail">
-            <!-- 1组 -->
-            <view class="group-detail-item" :class="{ active: selectedGroup === 1 }">
+            <view class="group-detail-item" v-for="(item,index) in group_list" :key="item.group" :id="'group-'+index">
               <view class="group-header">
-                <text class="group-title">1组</text>
-                <text class="group-check" v-if="selectedGroup === 1">✓</text>
-              </view>
-              <view class="group-settings">
-                <view class="setting-row">
-                  <text class="setting-row-label">施肥配方</text>
-                  <input type="text" placeholder="请输入" class="setting-row-input" />
-                </view>
-                <view class="setting-row">
-                  <text class="setting-row-label">灌溉时长</text>
-                  <input type="number" v-model="irrigationTime1" class="setting-row-input" />
-                  <text class="setting-row-unit">分钟</text>
-                </view>
-                <view class="setting-row">
-                  <text class="setting-row-label">施肥时长</text>
-                  <input type="number" v-model="fertilizationTime1" class="setting-row-input" />
-                  <text class="setting-row-unit">分钟</text>
+                <text class="group-title">{{index + 1}}组</text>
+                <view class="group-check" :class="{ active: item.selected }" @click="changeGroupStatus(item)">
+                  <u-icon class="check-icon" name="checkmark" size="24rpx" />
                 </view>
               </view>
-            </view>
-
-            <!-- 2组 -->
-            <view class="group-detail-item" :class="{ active: selectedGroup === 2 }">
-              <view class="group-header">
-                <text class="group-title">2组</text>
-                <text class="group-check" v-if="selectedGroup === 2">✓</text>
-              </view>
               <view class="group-settings">
                 <view class="setting-row">
                   <text class="setting-row-label">施肥配方</text>
-                  <input type="text" placeholder="请输入" class="setting-row-input" />
+                  <view @click="selectFormula(index)" class="select-group">选择配方</view>
                 </view>
                 <view class="setting-row">
                   <text class="setting-row-label">灌溉时长</text>
-                  <input type="number" v-model="irrigationTime2" class="setting-row-input" />
+                  <input
+                    type="number"
+                    v-model="item.PartTim"
+                    class="setting-row-input"
+                    min="0"
+                    max="1440"
+                    placeholder="请输入灌溉时长（分钟）"
+                    @change="(item) => PartTimChange(item)"
+                  />
                   <text class="setting-row-unit">分钟</text>
                 </view>
                 <view class="setting-row">
                   <text class="setting-row-label">施肥时长</text>
-                  <input type="number" v-model="fertilizationTime2" class="setting-row-input" />
+                  <input
+                    type="number"
+                    v-model="item.FertTim"
+                    class="setting-row-input"
+                    min="0"
+                    max="1440"
+                    placeholder="请输入施肥时长（分钟）"
+                    @change="(item) => FertTimChange(item)"
+                  />
                   <text class="setting-row-unit">分钟</text>
                 </view>
               </view>
@@ -161,13 +154,6 @@
         </view>
       </view>
     </view>
-
-    <!-- 底部确定按钮 -->
-    <view class="confirm-btn-container">
-      <view class="confirm-btn" @click="confirm">
-        <text class="confirm-btn-text">确定</text>
-      </view>
-    </view>
   </view>
 </template>
 
@@ -175,29 +161,149 @@
 export default {
   data() {
     return {
-      // 灌溉模式
-      irrigationMode: '定时',
-      // 配方方式
-      formulaMode: 'PID',
-      // 轮灌次数
-      roundCount: 1,
-      // 轮灌间隔（分钟）
-      roundInterval: 0,
-      // 肥前水（分钟）
-      waterBefore: 0,
-      // 肥后水（分钟）
-      waterAfter: 0,
-      // 选中的轮灌组
-      selectedGroup: 1,
+      show: true,
+      devBid:'',
+      columns: [ ['中国', '美国', '日本']],
+      selectedGroup: 0,
       // 1组设置
       irrigationTime1: 0,
       fertilizationTime1: 0,
       // 2组设置
       irrigationTime2: 0,
-      fertilizationTime2: 0
+      fertilizationTime2: 0,
+      FertType: -1,
+      FertPidType: -1,
+      IrrCnt: 0,
+      IdleTim: 0,
+      FrontClearWater: 0,
+      UnderClearWater: 0,
+      group_list:[]
     };
   },
+  
+  onLoad(options) {
+    const { devBid } = options;
+    this.devBid = devBid;
+    this.getConfigInfo();
+  },
   methods: {
+    /*
+    FertType = '1' && editGroup({FertType: '1'})
+    */
+    selectFertType(type){
+      this.FertType = type;
+      this.editGroup({
+        FertType: type,
+      });
+    },
+    selectFertPidType(type){
+      this.FertPidType = type;
+      this.editGroup({
+        FertPidType: type,
+      });
+    },
+    underChange(val){
+      this.UnderClearWater = val;
+      this.editGroup({UnderClearWater: val});
+    },
+    PartTimChange(item){
+      console.log(item,'itemitmeimteimte')
+      if(item.selected){
+        this.editGroup({group_value: item.group_value, PartTim: item.PartTim});
+      }
+    },
+    FertTimChange(item){
+      if(item.selected){
+        this.editGroup({group_value: item.group_value, FertTim: item.FertTim});
+      }
+    },
+    frontChange(val){
+      this.FrontClearWater = val;
+      this.editGroup({FrontClearWater: val});
+    },
+    idleChange(val){
+      this.IdleTim = val;
+      this.editGroup({IdleTim: val});
+    },
+    irrChange(val){
+      this.IrrCnt = val;
+      this.editGroup({IrrCnt: val});
+    },
+    selectFormula(index){
+      this.show = true;
+      console.log(index,'indexnidex')
+    },
+    async editGroup(data){
+      console.log('editGroup data:', data);
+      const params = {
+        devBid: parseInt(this.devBid),
+        data,
+      }
+      console.log('editGroup params:', params);
+      const res = await this.$myRequest({
+        url:'/api/v2/iot/device/sf/yunshang/auto/config/edit/',
+        method:'POST',
+        data: params,
+        header: {
+          'Content-Type': 'application/json',
+          'accept': 'application/json, text/plain, */*'
+        }
+      })
+      if(res?.code === '000000'){
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success',
+        })
+      }
+    },
+    async getConfigInfo(){
+      const res = await this.$myRequest({
+        url:'/api/v2/iot/device/sf/yunshang/auto/config/info/',
+        method:'post',
+        data: {
+          devBid: String(this.devBid),
+        },
+      })
+      const resData = res || {};
+      this.FertPidType = resData?.FertPidType;
+      this.FertType = resData?.FertType;
+      this.IrrCnt = resData?.IrrCnt;
+      this.IdleTim = resData?.IdleTim;
+      this.FrontClearWater = resData?.FrontClearWater;
+      this.UnderClearWater = resData?.UnderClearWater;
+      const group_list = resData.group_list || [];
+      this.group_list = group_list.map((item, index) => {
+        const selected = item.group_value == 1 ? true : false;
+        for (let key in item) {
+          if (key.includes('PartTim')) {
+            item.PartTim = item[key];
+          } else if (key.includes('FertTim')) {
+            item.FertTim = item[key];
+          } else if (key.includes('Formula')) {
+            item.Formula = item[key];
+          }
+        }
+        return {
+          ...item,
+          selected
+        };
+      });
+    },
+    changeGroupStatus(item) {
+      item.selected = !item.selected;
+      this.editGroup({group_value: item.group_value});
+    },
+    selectGroup(index) {
+      this.selectedGroup = index;
+      uni.createSelectorQuery().select('#group-' + index).boundingClientRect((data) => {
+        if (data) {
+          uni.pageScrollTo({
+            scrollTop: data.top,
+            duration: 300
+          });
+        }
+      }).exec();
+    },
     // 减少轮灌次数
     decreaseRoundCount() {
       if (this.roundCount > 1) {
@@ -221,47 +327,54 @@ export default {
 .auto-fertilization-container {
   width: 100%;
   min-height: 100vh;
-  background: linear-gradient(180deg, #e6f7f2 0%, #f5f5f5 100%);
+  background: linear-gradient(180deg, #f5f6fa00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
   font-family: 'Source Han Sans CN';
 }
-
-/* 顶部导航栏 */
-.nav-bar {
+.group-check-container{
+  display: flex;
+  width: 120rpx;
+}
+.select-group{
+  text-align:right;
+}
+.group-check-radius{
+  width: 30rpx;
+  height: 30rpx;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 20rpx 32rpx;
-  background: linear-gradient(180deg, #14a478 0%, #0f8a64 100%);
-  color: #fff;
-
-  .nav-left {
-    .back-icon {
-      font-size: 32rpx;
-    }
-  }
-
-  .nav-center {
-    .nav-title {
-      font-size: 32rpx;
-      font-weight: 500;
-    }
-  }
-
-  .nav-right {
-    display: flex;
-    gap: 24rpx;
-
-    .nav-icon {
-      font-size: 28rpx;
-    }
-  }
+  justify-content: center;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2rpx solid #E4E7ED;
+  font-size: 24rpx;
+  color: #14a478;
+  margin-right: 10rpx;
+}
+.active{
+  border-color: #0BBC58;
+}
+.text{
+  color: #666666;
+  font-family: "Source Han Sans CN VF";
+  font-size: 28rpx;
+}
+.text-active{
+  color: #0BBC58;
 }
-
 /* 内容区域 */
 .content {
+  overflow-y: auto;
+  width: calc(100% - 64rpx);
+  margin-left: 32rpx;
+  display:flex;
+  flex-direction: column;
+}
+.setting-top-container{
+  border: 2px solid #FFF;
+  border-radius: 8px;
   padding: 32rpx;
+  background: #FFF;
 }
-
 /* 设置项 */
 .setting-item {
   display: flex;
@@ -286,7 +399,7 @@ export default {
       gap: 8rpx;
       font-size: 26rpx;
       color: #666;
-
+      width: 120rpx;
       &.active {
         color: #14a478;
       }
@@ -330,13 +443,11 @@ export default {
     gap: 8rpx;
 
     .time-input-field {
-      width: 100rpx;
+      flex:1;
       height: 52rpx;
       padding: 0 16rpx;
       font-size: 26rpx;
-      text-align: center;
-      border: 1rpx solid #d9d9d9;
-      border-radius: 8rpx;
+      text-align: right;
       color: #042118;
     }
 
@@ -350,24 +461,23 @@ export default {
 /* 轮灌组区域 */
 .round-groups-section {
   margin-top: 40rpx;
-
+  flex:1;
   .section-title {
     font-size: 28rpx;
     font-weight: 500;
     color: #042118;
-    margin-bottom: 24rpx;
   }
 
   .round-groups-container {
+    margin-top: 24rpx;
     display: flex;
-    background: #fff;
     border-radius: 12rpx;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-
+    flex:1;
     /* 左侧轮灌组列表 */
     .round-groups-list {
       width: 120rpx;
-      border-right: 1rpx solid #e8e8e8;
+      background: #ffffff;
+      border-radius: 8rpx;
 
       .round-group-item {
         height: 80rpx;
@@ -376,30 +486,39 @@ export default {
         justify-content: center;
         font-size: 26rpx;
         color: #666;
-        border-bottom: 1rpx solid #f0f0f0;
+        border-left-top-radius: 16rpx;
+        border-left-bottom-radius: 16rpx;
 
         &.active {
-          background: #e6f7f2;
-          color: #14a478;
-          font-weight: 500;
+          background: #F5F6FA;
+          color:#0BBC58;
+          font-weight: 700;
         }
 
         &:last-child {
           border-bottom: none;
         }
+
+        .green-text {
+          color: #14a478;
+          font-weight: 500;
+        }
       }
     }
 
     /* 右侧轮灌组详情 */
     .round-group-detail {
-      flex: 1;
-      padding: 24rpx;
-
+      margin-left: 24rpx;
+      border-radius: 16rpx;
+      height: 600rpx;
+      overflow-y: auto;
       .group-detail-item {
-        display: none;
-
-        &.active {
-          display: block;
+        margin-bottom: 32rpx;
+        padding: 24rpx;
+        background: #ffffff;
+        border-radius: 8rpx;
+        &:last-child {
+          margin-bottom: 0;
         }
 
         .group-header {
@@ -415,15 +534,22 @@ export default {
           }
 
           .group-check {
-            width: 32rpx;
-            height: 32rpx;
+            width: 38rpx;
+            height: 38rpx;
             display: flex;
             align-items: center;
             justify-content: center;
-            background: #14a478;
-            color: #fff;
+            background: #C9CDD4;
+            color: #ffffff;
             border-radius: 50%;
-            font-size: 20rpx;
+            font-size: 24rpx;
+            .check-icon{
+              font-size: 24rpx;
+            }
+            &.active {
+              background: #0BBC58;
+              color: #fff;
+            }
           }
         }
 
@@ -431,6 +557,7 @@ export default {
           .setting-row {
             display: flex;
             align-items: center;
+            justify-content: space-between;
             margin-bottom: 24rpx;
 
             .setting-row-label {
@@ -444,10 +571,9 @@ export default {
               height: 56rpx;
               padding: 0 16rpx;
               font-size: 26rpx;
-              border: 1rpx solid #d9d9d9;
-              border-radius: 8rpx;
               color: #042118;
               margin-right: 12rpx;
+              text-align: right;
             }
 
             .setting-row-unit {

pages/cb/shuifeizsFirst/control.vue

@@ -157,15 +157,30 @@ export default {
     getChecked(item) {
       return item.value == 1 ? true : false;
     },
+    
     mergeTwoObject(firstObject, secondObject) {
-      for (let key in secondObject) {
-        for (let i = 0; i < firstObject.length; i++) {
-          const item = firstObject[i];
-          if (item.sfCode == key) {
-            item.value = secondObject[key][0][1];
-          } else if (item.childrenList && item.childrenList.length) {
-            this.mergeTwoObject(item.childrenList, secondObject);
+      // 构建 sfCode 到对象的映射，实现 O(1) 查找
+      const sfCodeMap = new Map();
+      
+      // 递归构建映射
+      const buildMap = (items) => {
+        for (const item of items) {
+          if (item.sfCode) {
+            sfCodeMap.set(item.sfCode, item);
           }
+          if (item.childrenList && item.childrenList.length) {
+            buildMap(item.childrenList);
+          }
+        }
+      };
+      
+      buildMap(firstObject);
+      
+      // 遍历 secondObject 并更新值
+      for (const key in secondObject) {
+        const item = sfCodeMap.get(key);
+        if (item) {
+          item.value = secondObject[key][0][1];
         }
       }
     },

pages/cb/shuifeizsFirst/formulaSetting.vue

@@ -1,103 +1,49 @@
 <template>
-  <view class="formula-setting-page">
+  <view class="formula-setting-container">
     <custom-card>
-      <block slot="backText">配方设置</block>
-      <block slot="right">
-        <view class="right-icons">
-          <u-icon name="more-dot-fill" color="#333333" size="36rpx" style="margin-right: 16rpx;" />
-          <u-icon name="camera" color="#333333" size="36rpx" />
-        </view>
-      </block>
+      <block slot="backText">{{ title }}</block>
     </custom-card>
 
-    <view class="formula-content">
-      <!-- 选择肥源 -->
-      <view class="form-section">
-        <text class="section-label">选择肥源</text>
-        <picker
-          mode="selector"
-          :range="fertilizerSources"
-          :value="selectedSourceIndex"
-          @change="onSourceChange"
-        >
-          <view class="picker-wrapper">
-            <text class="picker-text" :class="{ placeholder: selectedSourceIndex === -1 }">
-              {{ selectedSourceIndex === -1 ? '请选择肥源' : fertilizerSources[selectedSourceIndex] }}
-            </text>
-            <u-icon name="arrow-down" color="#999999" size="24rpx" />
-          </view>
-        </picker>
-      </view>
-
-      <!-- 配方名称 -->
-      <view class="form-section">
-        <text class="section-label">配方名称</text>
-        <input
-          class="formula-name-input"
-          v-model="formulaName"
-          placeholder="请输入配方名称"
-          placeholder-style="color: #999999;"
-        />
-      </view>
-
-      <!-- 肥料配置表格 -->
-      <view class="fertilizer-table">
-        <view class="table-header">
-          <text class="header-cell">肥料名称</text>
-          <text class="header-cell">EC值</text>
-          <text class="header-cell">占比</text>
-          <text class="header-cell action">操作</text>
-        </view>
-
-        <view
-          v-for="(item, index) in fertilizerList"
-          :key="index"
-          class="table-row"
-        >
-          <view class="row-cell">
-            <input
-              class="cell-input"
-              v-model="item.name"
-              placeholder="输入名称"
-              placeholder-style="color: #999999;"
-            />
-          </view>
-          <view class="row-cell">
-            <input
-              class="cell-input"
-              v-model="item.ec"
-              type="digit"
-              placeholder="EC"
-              placeholder-style="color: #999999;"
-            />
+    <!-- 内容区域 -->
+    <view class="content">
+      <!-- 配方列表 -->
+      <view class="formula-list">
+        <!-- 配方1 -->
+        <view class="formula-item" v-for="(item,index) in formulas" :key="item.id">
+          <view class="formula-header">
+            <text class="formula-name">配方{{index+1}}</text>
           </view>
-          <view class="row-cell">
-            <input
-              class="cell-input"
-              v-model="item.proportion"
-              type="digit"
-              placeholder="%"
-              placeholder-style="color: #999999;"
-            />
+          <view class="formula-details">
+            <view class="detail-row">
+              <text class="detail-label">目标EC</text>
+              <view class="detail-value">
+                <u-input v-model="item.ec" type="number" placeholder="请输入EC值" class="input"/>
+                <text class="detail-unit">us/cm</text>
+              </view>
+            </view>
+            <view class="detail-row">
+              <text class="detail-label">目标PH</text>
+              <view class="detail-value">
+                <u-input v-model="item.ph" type="number" placeholder="请输入PH值"  class="input"/>
+              </view>
+            </view>
+            <view class="detail-row">
+              <text class="detail-label">目标水肥比</text>
+              <view class="detail-value">
+                <u-input v-model="item.waterFertilizerRatio" type="number" placeholder="请输入水肥比值"  class="input"/>
+              </view>
+            </view>
+            <view class="detail-row">
+              <text class="detail-label">吸肥通道比例</text>
+              <view class="detail-value">
+                <u-input v-model="item.channelRatio" type="number" placeholder="请输入吸肥通道比例值"  class="input1"/>
+                <u-input v-model="item.channelRatio" type="number" placeholder="请输入吸肥通道比例值"  class="input2"/>
+                <u-input v-model="item.channelRatio" type="number" placeholder="请输入吸肥通道比例值"  class="input3"/>
+                <u-input v-model="item.channelRatio" type="number" placeholder="请输入吸肥通道比例值"  class="input4"/>
+                <text class="detail-unit">%</text>
+              </view>
+            </view>
           </view>
-          <view class="row-cell action">
-            <text class="delete-btn" @click="deleteFertilizer(index)">删除</text>
-          </view>
-        </view>
-      </view>
-
-      <!-- 添加按钮 -->
-      <view class="add-btn-wrapper">
-        <view class="add-fertilizer-btn" @click="addFertilizer">
-          <u-icon name="plus" color="#00c853" size="28rpx" />
-          <text class="add-btn-text">添加肥料</text>
-        </view>
-      </view>
-
-      <!-- 保存按钮 -->
-      <view class="save-btn-wrapper">
-        <view class="save-btn" @click="handleSave">
-          <text class="save-text">保存</text>
         </view>
       </view>
     </view>
@@ -108,278 +54,236 @@
 export default {
   data() {
     return {
-      fertilizerSources: ['肥源1', '肥源2', '肥源3'],
-      selectedSourceIndex: -1,
-      formulaName: '',
-      fertilizerList: [
-        { name: '', ec: '', proportion: '' },
-        { name: '', ec: '', proportion: '' },
-        { name: '', ec: '', proportion: '' },
-      ],
+      title: '配方设置',
+      // 配方列表
+      formulas: [
+        { id: 1, name: '配方1', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 },
+        { id: 2, name: '配方2', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 },
+        { id: 3, name: '配方3', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 },
+        { id: 4, name: '配方4', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 },
+        { id: 5, name: '配方5', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 },
+        { id: 6, name: '配方6', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 },
+        { id: 7, name: '配方7', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 },
+        { id: 8, name: '配方8', ec: 0, ph: 0, waterFertilizerRatio: 1, channelRatio: 0 }
+      ]
     };
   },
   methods: {
-    // 肥源选择改变
-    onSourceChange(e) {
-      this.selectedSourceIndex = e.detail.value;
-    },
-
-    // 添加肥料
-    addFertilizer() {
-      if (this.fertilizerList.length >= 10) {
-        uni.showToast({
-          title: '最多添加10种肥料',
-          icon: 'none'
-        });
-        return;
-      }
-      this.fertilizerList.push({ name: '', ec: '', proportion: '' });
+    // 添加配方
+    addFormula() {
+      const newFormula = {
+        id: this.formulas.length + 1,
+        name: `配方${this.formulas.length + 1}`,
+        ec: 0,
+        ph: 0,
+        waterFertilizerRatio: 1,
+        channelRatio: 0
+      };
+      this.formulas.push(newFormula);
     },
-
-    // 删除肥料
-    deleteFertilizer(index) {
-      if (this.fertilizerList.length <= 1) {
+    // 删除配方
+    deleteFormula(index) {
+      if (this.formulas.length <= 1) {
         uni.showToast({
-          title: '至少保留一种肥料',
+          title: '至少保留一个配方',
           icon: 'none'
         });
         return;
       }
       uni.showModal({
         title: '确认删除',
-        content: '确定要删除该肥料吗？',
+        content: '确定要删除该配方吗？',
         success: (res) => {
           if (res.confirm) {
-            this.fertilizerList.splice(index, 1);
+            this.formulas.splice(index, 1);
           }
         }
       });
     },
+    // 确认按钮点击事件
+    confirm() {
+      // 这里可以添加确认逻辑
+      console.log('确认设置');
+    }
+  }
+};
+</script>
 
-    // 保存
-    handleSave() {
-      // 验证
-      if (this.selectedSourceIndex === -1) {
-        uni.showToast({
-          title: '请选择肥源',
-          icon: 'none'
-        });
-        return;
-      }
-
-      if (!this.formulaName.trim()) {
-        uni.showToast({
-          title: '请输入配方名称',
-          icon: 'none'
-        });
-        return;
-      }
-
-      // 验证肥料列表
-      const validFertilizers = this.fertilizerList.filter(item => {
-        return item.name.trim() || item.ec || item.proportion;
-      });
-
-      if (validFertilizers.length === 0) {
-        uni.showToast({
-          title: '请至少添加一种肥料',
-          icon: 'none'
-        });
-        return;
-      }
-
-      // 构建保存数据
-      const saveData = {
-        fertilizerSource: this.fertilizerSources[this.selectedSourceIndex],
-        formulaName: this.formulaName,
-        fertilizers: validFertilizers
-      };
+<style scoped lang="scss">
+.formula-setting-container {
+  width: 100%;
+  min-height: 100vh;
+  background: linear-gradient(180deg, #f5f6fa00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
+  font-family: 'Source Han Sans CN';
+  ::v-deep .u-input{
+    text-align:right !important;
+  }
+}
+.input{
+  width: 100%;
+  height: 80rpx;
+  text-align:right;
+  display:flex;
+  align-items: center;
+  color:#020305;
+}
+.input1{
+  width: 25%;
+  color:#020305;
+}
+.input2{
+  width: 25%;
+  color:#020305;
+}
+.input3{
+  width: 25%;
+  color:#020305;
+}
+.input4{
+  width: 25%;
+  color:#020305;
+}
+/* 顶部导航栏 */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx 32rpx;
+  background: linear-gradient(180deg, #14a478 0%, #0f8a64 100%);
+  color: #fff;
+
+  .nav-left {
+    .back-icon {
+      font-size: 32rpx;
+    }
+  }
 
-      console.log('保存配方设置:', saveData);
+  .nav-center {
+    .nav-title {
+      font-size: 32rpx;
+      font-weight: 500;
+    }
+  }
 
-      // TODO: 调用接口保存
+  .nav-right {
+    display: flex;
+    gap: 24rpx;
 
-      uni.showToast({
-        title: '保存成功',
-        icon: 'success'
-      });
-    },
-  },
-};
-</script>
+    .nav-icon {
+      font-size: 28rpx;
+    }
+  }
+}
 
-<style scoped lang="scss">
-uni-page-body {
-  position: relative;
-  height: 100%;
+/* 内容区域 */
+.content {
+  padding: 32rpx;
 }
 
-.formula-setting-page {
-  min-height: 100%;
-  background: linear-gradient(180deg, #e6f7f0 0%, #ffffff 100%);
-  overflow-x: hidden;
-  overflow-y: auto;
+/* 配方管理 */
+.formula-management {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  padding: 24rpx;
+  border-radius: 12rpx;
+  margin-bottom: 24rpx;
+
+  .management-title {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #042118;
+  }
 
-  .right-icons {
+  .add-formula-btn {
+    width: 40rpx;
+    height: 40rpx;
     display: flex;
     align-items: center;
+    justify-content: center;
+    background: #14a478;
+    color: #fff;
+    border-radius: 50%;
+    font-size: 28rpx;
+    font-weight: bold;
   }
+}
 
-  .formula-content {
-    padding: 24rpx 32rpx;
-  }
+/* 配方列表 */
+.formula-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
 
-  // 表单区域
-  .form-section {
-    background: #ffffff;
-    border-radius: 12rpx;
-    padding: 24rpx;
-    margin-bottom: 20rpx;
+/* 配方项 */
+.formula-item {
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
 
-    .section-label {
-      display: block;
+  .formula-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24rpx;
+
+    .formula-name {
       font-size: 28rpx;
       font-weight: 500;
-      color: #333333;
-      margin-bottom: 20rpx;
-      font-family: 'Source Han Sans CN';
+      color: #020305;
     }
 
-    .picker-wrapper {
+    .delete-formula-btn {
+      width: 32rpx;
+      height: 32rpx;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 20rpx 24rpx;
-      background: #f5f5f5;
-      border-radius: 8rpx;
-
-      .picker-text {
-        font-size: 28rpx;
-        color: #333333;
-        font-family: 'Source Han Sans CN';
-
-        &.placeholder {
-          color: #999999;
-        }
-      }
-    }
-
-    .formula-name-input {
-      width: 100%;
-      padding: 20rpx 24rpx;
+      justify-content: center;
       background: #f5f5f5;
-      border-radius: 8rpx;
-      font-size: 28rpx;
-      color: #333333;
-      font-family: 'Source Han Sans CN';
+      color: #666;
+      border-radius: 50%;
+      font-size: 24rpx;
+      font-weight: bold;
     }
   }
 
-  // 肥料表格
-  .fertilizer-table {
-    background: #ffffff;
-    border-radius: 12rpx;
-    padding: 24rpx;
-    margin-bottom: 20rpx;
-
-    .table-header {
+  .formula-details {
+    .detail-row {
       display: flex;
-      padding-bottom: 20rpx;
-      border-bottom: 1rpx solid #f0f0f0;
-
-      .header-cell {
-        flex: 1;
-        font-size: 26rpx;
-        font-weight: 500;
-        color: #666666;
-        text-align: center;
-        font-family: 'Source Han Sans CN';
-
-        &.action {
-          flex: 0.8;
-        }
-      }
-    }
-
-    .table-row {
-      display: flex;
-      padding: 24rpx 0;
+      align-items: center;
+      padding: 16rpx 0;
       border-bottom: 1rpx solid #f0f0f0;
 
       &:last-child {
         border-bottom: none;
       }
 
-      .row-cell {
-        flex: 1;
+      .detail-label {
+        width: 150rpx;
+        font-size: 26rpx;
+        color: #333333;
+      }
+
+      .detail-value {
         display: flex;
+        flex:1;
         align-items: center;
-        justify-content: center;
-
-        .cell-input {
-          width: 100%;
-          padding: 12rpx 16rpx;
-          background: #f5f5f5;
-          border-radius: 6rpx;
-          font-size: 26rpx;
-          color: #333333;
-          text-align: center;
-          font-family: 'Source Han Sans CN';
-        }
-
-        &.action {
-          flex: 0.8;
-
-          .delete-btn {
-            font-size: 26rpx;
-            color: #ff4d4f;
-            font-family: 'Source Han Sans CN';
-          }
-        }
+        justify-content: flex-end;
+        height: 60rpx;
+        font-size: 26rpx;
+        color: #042118;
+        text-align: right;
       }
-    }
-  }
-
-  // 添加按钮区域
-  .add-btn-wrapper {
-    margin-bottom: 20rpx;
-
-    .add-fertilizer-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 80rpx;
-      background: #ffffff;
-      border: 2rpx dashed #00c853;
-      border-radius: 12rpx;
 
-      .add-btn-text {
+      .detail-unit {
         margin-left: 8rpx;
-        font-size: 28rpx;
-        color: #00c853;
-        font-family: 'Source Han Sans CN';
-      }
-    }
-  }
-
-  // 保存按钮
-  .save-btn-wrapper {
-    .save-btn {
-      width: 100%;
-      height: 88rpx;
-      background: #00c853;
-      border-radius: 12rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .save-text {
-        font-size: 32rpx;
-        font-weight: 500;
-        color: #ffffff;
-        font-family: 'Source Han Sans CN';
+        font-size: 24rpx;
+        color: #333333;
       }
     }
   }
 }
+
 </style>

pages/cb/shuifeizsFirst/shuifeizs.vue

@@ -17,12 +17,15 @@
         :key="index"
         @click="nativeTo(item)"
       >
-        <image class="item-icon" :src="item.icon" />
+        <view class="item-icon-container" :class="item.className">
+          <image class="item-icon" :src="item.icon" />
+        </view>
         <view class="facilitystate-top__item-text">{{ item.title }}</view>
       </view>
     </view>
     <Base :dataList="dataList" />
     <facilitystate
+      :devBid="devBid"
       :ggbCurrent="ggbCurrent"
       :sfbCurrent="sfbCurrent"
       :irrigatedAreaList="irrigatedAreaList"
@@ -35,11 +38,8 @@
 <script>
 import manualControl from './assets/manualControl.png';
 import wheelIrrigation from './assets/wheelIrrigation.png';
-import timing from './assets/timing.png';
-import masterStop from './assets/masterStop.png';
-import fertilizationFormula from './assets/fertilizationFormula.png';
-import backwashControl from './assets/backwashControl.png';
-import basicSetting from './assets/basicSetting.png';
+import time from './assets/timing.png';
+import formulaSetting from './assets/formulaSetting.png';
 import operatingRecord from './assets/operatingRecord.png';
 import Base from './components/base.vue';
 import facilitystate from './components/facilitystate.vue';
@@ -59,47 +59,30 @@ export default {
         {
           icon: manualControl,
           title: '手动控制',
+          className: 'manualControl',
           url: '/pages/cb/shuifeizsFirst/control',
         },
         {
           icon: wheelIrrigation,
           title: '自动控制',
-          url: '/pages/cb/shuifeizsFirst/autoSetting',
+          className: 'wheelIrrigation',
+          url: '/pages/cb/shuifeizsFirst/autoSetting?devBid=' + this.devBid,
         }, {
-          icon: timing,
-          title: '定时设置',
-          url: '/pages/cb/shuifeizsFirst/timingSetting',
+          icon: time,
+          title: '定时设置',  
+          className: 'timedSetting',
+          url: '/pages/cb/shuifeizsFirst/timingSetting?devBid=' + this.devBid,
         },{
-          icon: timing,
-          title: '配方设置',
-          url: '/pages/cb/shuifeizsFirst/formulaSetting',
-        },
-        {
+          icon: formulaSetting,
+          title: '配方设置',  
+          className: 'formulaSetting',
+          url: '/pages/cb/shuifeizsFirst/formulaSetting?devBid=' + this.devBid,
+        }, {
           icon: operatingRecord,
-          title: '操作记录',
-          url: '/pages/cb/shuifeizsFirst/history',
+          title: '操作记录',  
+          className: 'operatingRecord',
+          url: '/pages/cb/shuifeizsFirst/history?devBid=' + this.devBid,
         },
-       
-        // {
-        //   icon: masterStop,
-        //   title: '总停',
-        //   url: '',
-        // },
-        // {
-        //   icon: fertilizationFormula,
-        //   title: '施肥配方',
-        //   url: '',
-        // },
-        // {
-        //   icon: backwashControl,
-        //   title: '反冲洗控制',
-        //   url: '',
-        // },
-        // {
-        //   icon: basicSetting,
-        //   title: '基础设置',
-        //   url: '',
-        // },
       ],
       ggbCurrent: {},
       sfbCurrent: {},
@@ -132,6 +115,9 @@ export default {
     this.devName = devName;
     this.devStatus = devStatus;
     this.deviceList[0].url = `/pages/cb/shuifeizsFirst/control?devBid=${options.devBid}`;
+    this.deviceList[1].url = `/pages/cb/shuifeizsFirst/autoSetting?devBid=${options.devBid}`;
+    this.deviceList[2].url = `/pages/cb/shuifeizsFirst/timingSetting?devBid=${options.devBid}`;
+    this.deviceList[3].url = `/pages/cb/shuifeizsFirst/formulaSetting?devBid=${options.devBid}`;
     this.deviceList[
       this.deviceList.length - 1
     ].url = `/pages/cb/shuifeizsFirst/history?devBid=${options.devBid}`;
@@ -213,15 +199,30 @@ export default {
         }
       });
     },
+    
     mergeTwoObject(firstObject, secondObject) {
-      for (let key in secondObject) {
-        for (let i = 0; i < firstObject.length; i++) {
-          const item = firstObject[i];
-          if (item.sfCode == key) {
-            item.value = secondObject[key][0][1];
-          } else if (item.childrenList && item.childrenList.length) {
-            this.mergeTwoObject(item.childrenList, secondObject);
+      // 构建 sfCode 到对象的映射，实现 O(1) 查找
+      const sfCodeMap = new Map();
+      
+      // 递归构建映射
+      const buildMap = (items) => {
+        for (const item of items) {
+          if (item.sfCode) {
+            sfCodeMap.set(item.sfCode, item);
           }
+          if (item.childrenList && item.childrenList.length) {
+            buildMap(item.childrenList);
+          }
+        }
+      };
+      
+      buildMap(firstObject);
+      
+      // 遍历 secondObject 并更新值
+      for (const key in secondObject) {
+        const item = sfCodeMap.get(key);
+        if (item) {
+          item.value = secondObject[key][0][1];
         }
       }
     },
@@ -336,6 +337,21 @@ uni-page-body {
   top: -4rpx;
   position: relative;
 }
+.manualControl{
+  background: linear-gradient(326deg, #FFAB3D 6.86%, #FED55A 93.52%);
+}
+.wheelIrrigation{
+  background: linear-gradient(152deg, #83D2FF 14.82%, #02A2FC 92.92%);
+}
+.timedSetting{
+  background: linear-gradient(335deg, #0BBC58 6.91%, #60D799 89.95%);
+}
+.formulaSetting{
+  background: linear-gradient(147deg, #FE9797 12.77%, #FF6060 92.63%);
+}
+.operatingRecord{
+  background: linear-gradient(152deg, #B9B9F6 11.22%, #8080F8 94.92%);
+}
 .facilitystate-top__title{
   width: 80%;
   overflow: hidden;
@@ -365,14 +381,24 @@ uni-page-body {
   overflow-y: scroll;
   .facilitystate-top {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(5, 1fr);
     text-align: center;
     margin-top: 18rpx;
     &__item {
       margin-bottom: 32rpx;
-      .item-icon {
+      .item-icon-container{
         width: 96rpx;
         height: 96rpx;
+        border-radius: 26rpx;
+        overflow: hidden;
+        margin: 0 auto;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .item-icon {
+        width: 64rpx;
+        height: 64rpx;
       }
     }
     &__item-text {

pages/cb/shuifeizsFirst/timingSetting.vue

@@ -2,12 +2,6 @@
   <view class="timing-setting-page">
     <custom-card>
       <block slot="backText">定时设置</block>
-      <block slot="right">
-        <view class="right-icons">
-          <u-icon name="more-dot-fill" color="#333333" size="36rpx" style="margin-right: 16rpx;" />
-          <u-icon name="camera" color="#333333" size="36rpx" />
-        </view>
-      </block>
     </custom-card>
 
     <view class="timing-content">
@@ -20,11 +14,13 @@
         <!-- 定时标题和开关 -->
         <view class="timer-header">
           <text class="timer-title">定时{{ index + 1 }}</text>
-          <switch
-            :checked="timer.enabled"
-            @change="onSwitchChange($event, index)"
-            color="#00c853"
-            class="timer-switch"
+          <u-switch
+            size="40"
+            space="4"
+            activeColor="#0BBC58"
+            inactiveColor="#C3CAD8"
+            v-model="timer.enabled"
+            @change="onSwitchChange($event, index, timer)"
           />
         </view>
 
@@ -33,7 +29,7 @@
           <view
             class="radio-item"
             :class="{ active: timer.frequency === 'once' }"
-            @click="selectFrequency(index, 'once')"
+            @click="selectFrequency(index, 'once', timer)"
           >
             <view class="radio-icon">
               <view v-if="timer.frequency === 'once'" class="radio-dot"></view>
@@ -42,8 +38,9 @@
           </view>
           <view
             class="radio-item"
+            style="margin-left: 48rpx;"
             :class="{ active: timer.frequency === 'daily' }"
-            @click="selectFrequency(index, 'daily')"
+            @click="selectFrequency(index, 'daily', timer)"
           >
             <view class="radio-icon">
               <view v-if="timer.frequency === 'daily'" class="radio-dot"></view>
@@ -60,17 +57,13 @@
         >
           <view class="time-picker">
             <text class="time-text" :class="{ placeholder: !timer.time }">
-              {{ timer.time || '请选择时间' }}
+              {{ timer.timeLabel }}
             </text>
             <u-icon name="clock" color="#999999" size="32rpx" />
           </view>
         </picker>
       </view>
 
-      <!-- 确定按钮 -->
-      <view class="confirm-btn" @click="handleConfirm">
-        <text class="confirm-text">确定</text>
-      </view>
     </view>
   </view>
 </template>
@@ -79,29 +72,84 @@
 export default {
   data() {
     return {
-      timerList: [
-        { enabled: false, frequency: 'once', time: '' },
-        { enabled: false, frequency: 'once', time: '' },
-        { enabled: false, frequency: 'once', time: '' },
-        { enabled: false, frequency: 'once', time: '' },
-        { enabled: false, frequency: 'once', time: '' },
-      ],
+      devBid:'',
+      timerList: [],
     };
   },
+  onLoad(options) {
+    const { devBid } = options;
+    this.devBid = devBid;
+    this.getTimerList();
+  },
   methods: {
+    // 编辑
+    async editInfo(data){
+      const params = {
+        devBid: parseInt(this.devBid),
+        data: data,
+      };
+      const resData = await this.$myRequest({
+        url:'/api/v2/iot/device/sf/yunshang/timer/edit/',
+        method:'POST',
+        data: params,
+        header: {
+          'Content-Type': 'application/json',
+          'accept': 'application/json, text/plain, */*'
+        }
+      })
+      console.log(resData,'resDataresData')
+      if(resData.code === '000000'){
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success',
+        })
+      }
+    },
+    async getTimerList(){
+      const resData = await this.$myRequest({
+        url:'/api/v2/iot/device/sf/yunshang/timer/list/',
+        method:'POST',
+        data: {
+          devBid: this.devBid,
+        },
+      })
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        const time = item[`Timer0${i}:TimerHM`];
+        const hour = time.slice(0, 2);
+        const minute = time.slice(2, 4);
+        item.enabled = item[`Timer0${i}:TimerEn`] == 1;
+        item.frequency = item[`Timer0${i}:Mode`] == 1 ? 'daily' : 'once';
+        item.time = new Date(hour, minute);
+        item.timeLabel = hour + ':' + minute;
+      }
+      this.timerList = resData;
+    },
     // 开关状态改变
-    onSwitchChange(e, index) {
-      this.timerList[index].enabled = e.detail.value;
+    onSwitchChange(e, index,timer) {
+      console.log(timer,e,'开关状态改变')
+      this.timerList[index].enabled = e;
+      this.editInfo({
+        [`Timer0${index}:TimerEn`]: e ? 1 : 0,
+      });
     },
 
     // 选择频率
     selectFrequency(index, frequency) {
       this.timerList[index].frequency = frequency;
+      this.editInfo({
+        [`Timer0${index}:Mode`]: frequency === 'daily' ? 1 : 0,
+      });
     },
 
     // 时间改变
     onTimeChange(e, index) {
+      console.log(e.detail.value,'时间改变')
       this.timerList[index].time = e.detail.value;
+      this.timerList[index].timeLabel = e.detail.value;
+      this.editInfo({
+        [`Timer0${index}:TimerHM`]: e.detail.value.slice(0, 2) + e.detail.value.slice(3, 5),
+      });
     },
 
     // 确认按钮
@@ -137,11 +185,12 @@ export default {
 uni-page-body {
   position: relative;
   height: 100%;
+  overflow-y: auto;
 }
 
 .timing-setting-page {
   min-height: 100%;
-  background: linear-gradient(180deg, #e6f7f0 0%, #ffffff 100%);
+  background: linear-gradient(180deg, #f5f6fa00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
   overflow-x: hidden;
   overflow-y: auto;
 
@@ -151,7 +200,9 @@ uni-page-body {
   }
 
   .timing-content {
+    height: 100%;
     padding: 24rpx 32rpx;
+    overflow-y: auto;
   }
 
   // 定时卡片
@@ -233,8 +284,8 @@ uni-page-body {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 20rpx 24rpx;
-      background: #f5f5f5;
+      padding: 10rpx 24rpx;
+      background: #F5F6FA;
       border-radius: 8rpx;
 
       .time-text {
@@ -248,24 +299,5 @@ uni-page-body {
       }
     }
   }
-
-  // 确定按钮
-  .confirm-btn {
-    width: 100%;
-    height: 88rpx;
-    background: #00c853;
-    border-radius: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20rpx;
-
-    .confirm-text {
-      font-size: 32rpx;
-      font-weight: 500;
-      color: #ffffff;
-      font-family: 'Source Han Sans CN';
-    }
-  }
 }
 </style>