feat(灌溉控制): 新增三态阀门控制功能并优化UI

- 添加三态阀门(开/停/关)控制功能
- 新增阀门状态对应的图片资源
- 重构设备控制逻辑，提取公共方法
- 优化灌溉区域组件显示不同阀门状态
- 调整设施状态组件的布局和样式

pages/cb/shuifeizsFirst/components/facilitystate.vue

@@ -30,6 +30,7 @@
           <view class="facilitystate-item__image">
             <image :src="getJSCurrentValue(item.childrenList)?bucketOpen:bucketClose" class="bucketClose" v-if="isHave"/>
             <view  v-if="index == alreadyfertilizerBucketList.length - 1? false:true">
+              <image :src="bottomLine" class="facilitystate-item__bg3"/>
             <!--一条直线有下一个有waterChannel的时候应该展示-->
               <image :src="line" class="facilitystate-item-line__bg" v-if="isHaveNextWaterChannel(index)"/>
               <!--一条直线有下一个没有waterChannel的时候应该展示并且isHavewaterChannel=true-->
@@ -42,6 +43,7 @@
             <view  v-else>
               <image :src="lineTopBorder" class="facilitystate-item-line__bg2" v-if="isHavewaterChannel(item.childrenList)"/>
               <image :src="lineBottomBorder" class="facilitystate-item__bg2"/>
+              <image :src="lineBottomBorder" class="facilitystate-item__bg4"/>
               <!-- <image :src="lastBorder" class="facilitystate-item__line2"/> -->
             </view>
             <view class="facilitystate-item-fan">
@@ -54,9 +56,8 @@
           </view>
         </view>
       </view>
-      </view>
-      <irrigatedArea :irrigatedAreaList="irrigatedAreaList"/>
     </view>
+    <irrigatedArea :irrigatedAreaList="irrigatedAreaList"/>
   </view>
 </template>
 <script>
@@ -387,6 +388,15 @@ export default {
         height: 36rpx;
         bottom: -16rpx;
       }
+      &__bg3{
+        position:absolute;
+        width: 100%;
+        left:0;
+        height: 36rpx;
+        top: 0rpx;
+        // 旋转180度
+        transform: rotate(180deg);
+      }
       .facilitystate-item-lineheight__bg{
         height: 32rpx;
         width: 4rpx;
@@ -409,6 +419,12 @@ export default {
         width:50%;
         height: 32rpx;
       }
+      .facilitystate-item-line__bg4{
+        position:absolute;
+        top: 0;
+        width:50%;
+        height: 32rpx;
+      }
       .facilitystate-item-line__bg3{
         position:absolute;
         top: 0;
@@ -422,6 +438,14 @@ export default {
         position:absolute;
         bottom: -16rpx;
       }
+      &__bg4{
+        width: 55%;
+        height: 32rpx;
+        left: -6rpx;
+        position:absolute;
+        top: 0rpx;
+        transform: rotateX(180deg);
+      }
       &__line2{
         position: absolute;
         width: 16rpx;

pages/cb/shuifeizsFirst/components/irrigatedArea.vue

@@ -21,12 +21,18 @@
             <view class="irrigated-area-item-content-item-title">{{
               i.sfDisplayname || i.sfName || '暂无数据'
             }}</view>
-            <view class="irrigated-area-item-content-item-icon">
+            <view class="irrigated-area-item-content-item-icon" v-if="i.sfType != '10'">
               <image
                 :src="i.value != '0' ? bucketOpen1 : bucketClose1"
                 class="bucket-icon"
               />
             </view>
+            <view class="irrigated-area-item-content-item-icon" v-else>
+              <image
+                :src="i.value == '0' ? bucketStop1 : i.value == '1'? bucketOpen1 : bucketClose1"
+                class="bucket-icon"
+              />
+            </view>
           </view>
         </view>
       </view>
@@ -36,6 +42,8 @@
 <script>
 import bucketOpen1 from '../assets/bucketOpen1.png';
 import bucketClose1 from '../assets/bucketClose1.png';
+import bucketStop1 from '../assets/bucketStop1.png';
+
 export default {
   props: {
     irrigatedAreaList: {
@@ -47,6 +55,7 @@ export default {
     return {
       bucketOpen1,
       bucketClose1,
+      bucketStop1
     };
   },
   methods: {

pages/cb/shuifeizsFirst/control.vue

@@ -27,27 +27,63 @@
       </view>
       <view class="control-list-right">
         <view
-          class="control-list-right-item"
           v-for="(item, index) in deviceList"
+          class="control-list-right-item"
+          :class="item.sfType == '10' ? 'control-list-right-items' : ''"
           :key="index"
         >
-          <view class="control-list-right-item-icon">
-            <image
-              :src="item.sfType == '3' ? stir : solenoidValve"
-              class="solenoid-valve"
-            />
+          <view style="display: flex; align-items: center;" v-if="item.sfType != '10'">
+            <view class="control-list-right-item-icon">
+              <image
+                :src="item.sfType == '3' ? stir : solenoidValve"
+                class="solenoid-valve"
+              />
+            </view>
+            <view class="control-list-right-item-title">{{
+              item.sfDisplayname || item.sfName
+            }}</view>
+            <view class="control-list-right-item-action">
+              <u-switch
+                :value="item.value == 1 ? true : false"
+                @change="changeSwitch(item)"
+                activeColor="#14A478"
+                size="40"
+                inactiveColor="rgb(230, 230, 230)"
+              ></u-switch>
+            </view>
           </view>
-          <view class="control-list-right-item-title">{{
-            item.sfDisplayname || item.sfName
-          }}</view>
-          <view class="control-list-right-item-action">
-            <u-switch
-              :value="item.value == 1 ? true : false"
-              @change="changeSwitch(item)"
-              activeColor="#14A478"
-              size="40"
-              inactiveColor="rgb(230, 230, 230)"
-            ></u-switch>
+          <view v-else>
+            <view class="control-list-right-item-icon">
+              <image
+                :src="item.sfType == '3' ? stir : solenoidValve"
+                class="solenoid-valve"
+              />
+              <text style="margin-left:6rpx">
+                {{ 
+                  item.sfDisplayname || item.sfName 
+                }}
+              </text>
+            </view>
+            <view class="control-list-right-item-actions">
+             状态 
+              <view class="control-list-right-item-actions-status">
+                <view
+                  class="status-item"
+                  :class="item.value == '1'?'status-item-open':''"
+                  @click="changeStatus(item, '1')"
+                >开</view>
+                <view
+                  class="status-item" 
+                  :class="item.value == '0'?'status-item-pause':''" 
+                  @click="changeStatus(item, '0')"
+                >停</view>
+                <view 
+                  class="status-item status-item-close-label"
+                  :class="item.value == '2'?'status-item-close':''"
+                  @click="changeStatus(item, '2')"
+                >关</view>
+              </view>
+            </view>
           </view>
         </view>
         <u-empty v-if="deviceList.length === 0" text="暂无数据"></u-empty>
@@ -178,24 +214,23 @@ export default {
       
       // 遍历 secondObject 并更新值
       for (const key in secondObject) {
-        const item = sfCodeMap.get(key);
-        if (item) {
-          item.value = secondObject[key][0][1];
+        let newKey = '';
+        if(key.includes('GHChannelDev:ChannelParamSet')){
+          newKey = key + ':Status';
+          const item = sfCodeMap.get(newKey);
+          if (item) {
+            const params = JSON.parse(secondObject[key][0][1]);
+            this.$set(item,'value',params.Status)
+          }
+        }else{
+          const item = sfCodeMap.get(key);
+          if (item) {
+            this.$set(item,'value',secondObject[key][0][1])
+          }
         }
       }
     },
-    async changeSwitch(item) {
-      item.value = item.value == 1 ? 0 : 1;
-      const sfCode = item.sfCode;
-      const params = {};
-      params[sfCode] = item.value;
-      const payload = {
-        data: params,
-      };
-      const data = {
-        devBid: this.devBid,
-        data: params,
-      };
+    async sfDecvtl(data){
       const res = await this.$myRequest({
         url: '/api/v2/iot/mobile/device/sf/devctl/',
         method: 'post',
@@ -212,6 +247,27 @@ export default {
         icon: 'none',
       });
     },
+    changeStatus(item,index){
+      const sfCode = item.sfCode;
+      const params = {};
+      params[sfCode] = index;
+      const data = {
+        devBid: this.devBid,
+        data: params,
+      };
+      this.sfDecvtl(data)
+    },
+    changeSwitch(item) {
+      item.value = item.value == 1 ? 0 : 1;
+      const sfCode = item.sfCode;
+      const params = {};
+      params[sfCode] = item.value;
+      const data = {
+        devBid: this.devBid,
+        data: params,
+      };
+      this.sfDecvtl(data)
+    },
     controlClick(index) {
       this.activeIndex = index;
       this.deviceList = this.leftList[this.activeIndex]?.childrenList || [];
@@ -373,6 +429,8 @@ uni-page-body {
         margin-bottom: 22rpx;
         position: relative;
         .control-list-right-item-icon {
+          display: flex;
+          align-items: center;
           .solenoid-valve {
             width: 40rpx;
             height: 40rpx;
@@ -385,6 +443,46 @@ uni-page-body {
           position: absolute;
           right: 16rpx;
         }
+        .control-list-right-item-actions {
+          display: flex;
+          align-items: center;
+          margin-top: 22rpx;
+          .control-list-right-item-actions-status {
+            display: flex;
+            align-items: center;
+            border-radius: 12rpx;
+            background: #FFF;
+            padding: 6rpx;
+            margin-left: 12rpx;
+            .status-item{
+              width: 92rpx;
+              height: 48rrpx;
+              line-height: 48rrpx;
+              text-align: center;
+              border-radius: 8rpx;
+              background: #FFF;
+              color:#656565;
+            }
+            .status-item-close-label{
+              color:#FF5951;
+            }
+            .status-item-open{
+              background: #0BBC58;
+              color: #fff;
+            }
+            .status-item-pause{
+              background: #F8B610;
+              color: #fff;
+            }
+            .status-item-close{
+              background: #DDDFE6;
+              color: #303133;
+            }
+          }
+        }
+      }
+      .control-list-right-items{
+        height: 172rpx;
       }
     }
   }

pages/cb/shuifeizsFirst/shuifeizs.vue

@@ -322,6 +322,7 @@ export default {
       });
     },
     
+    
     mergeTwoObject(firstObject, secondObject) {
       // 构建 sfCode 到对象的映射，实现 O(1) 查找
       const sfCodeMap = new Map();
@@ -342,9 +343,19 @@ export default {
       
       // 遍历 secondObject 并更新值
       for (const key in secondObject) {
-        const item = sfCodeMap.get(key);
-        if (item) {
-          item.value = secondObject[key][0][1];
+        let newKey = '';
+        if(key.includes('GHChannelDev:ChannelParamSet')){
+          newKey = key + ':Status';
+          const item = sfCodeMap.get(newKey);
+          if (item) {
+            const params = JSON.parse(secondObject[key][0][1]);
+            this.$set(item,'value',params.Status)
+          }
+        }else{
+          const item = sfCodeMap.get(key);
+          if (item) {
+            this.$set(item,'value',secondObject[key][0][1])
+          }
         }
       }
     },