feat: 云尚水肥机的功能实现

pages/cb/shuifeizsFirst/components/facilitystate.vue

@@ -30,17 +30,24 @@
           <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="lineTopBottom" class="facilitystate-item__bg"/>
-              <image :src="lineTopAndBottom" class="facilitystate-item__line"/>
+            <!--一条直线有下一个有waterChannel的时候应该展示-->
+              <image :src="line" class="facilitystate-item-line__bg" v-if="isHaveNextWaterChannel(index)"/>
+              <!--一条直线有下一个没有waterChannel的时候应该展示并且isHavewaterChannel=true-->
+              <image :src="lineTopBorder" class="facilitystate-item-line__bg3" v-if="!isHaveNextWaterChannel(index) && isHavewaterChannel(item.childrenList)"/>
+              <!--一条直线有下一个有waterChannel的时候应该展示并且isHavewaterChannel=true的时候展示-->
+              <image :src="lineHeight" class="facilitystate-item-lineheight__bg" v-if="isHaveNextWaterChannel(index) && isHavewaterChannel(item.childrenList)"/>
+              <image :src="bottomLine" class="facilitystate-item__bg"/>
+              <image :src="lineHeight" class="facilitystate-item__line"/>
             </view>
             <view  v-else>
-              <image :src="lineTopBottom" class="facilitystate-item__bg2"/>
-              <image :src="lastBorder" class="facilitystate-item__line2"/>
+              <image :src="lineTopBorder" class="facilitystate-item-line__bg2" v-if="isHavewaterChannel(item.childrenList)"/>
+              <image :src="lineBottomBorder" class="facilitystate-item__bg2"/>
+              <!-- <image :src="lastBorder" class="facilitystate-item__line2"/> -->
             </view>
             <view class="facilitystate-item-fan">
               <view class="fertTopBottom">
-              <text class="fertTopBottom-text">{{item.sfDisplayname || item.sfName}}</text>
-              <image :src="getJBCurrentValue(item.childrenList)? fanRun : fan" class="fan" :class="{'fan-run': getJBCurrentValue(item.childrenList)}" />
+                <text class="fertTopBottom-text">{{item.sfDisplayname || item.sfName}}</text>
+                <image :src="getJBCurrentValue(item.childrenList)? fanRun : fan" class="fan" :class="{'fan-run': getJBCurrentValue(item.childrenList)}" />
               </view>
             </view>
             <image :src="getXSCurrentValue(item.childrenList)?bucketOpen:bucketClose" class="bucketClose1" />
@@ -54,6 +61,14 @@
 </template>
 <script>
 import fertTopBottom from '../assets/fertTopBottom.png';
+import line from '../assets/line.png';
+import lineBottomBorder from '../assets/lineBottomBorder.png';
+import lineBottomBorderLittle from '../assets/lineBottomBorderLittle.png';
+import lineTopBorderLittle from '../assets/lineTopBorderLittle.png';
+import lineHeight from '../assets/lineHeight.png';
+import lineOne from '../assets/lineOne.png';
+import bottomLine from '../assets/bottomLine.png';
+import lineTopBorder from '../assets/lineTopBorder.png';
 import lineTopAndBottom from '../assets/lineTopAndBottom.png';
 import lineTopBottom from '../assets/lineTopBottom.png';
 import fertTopBottomRadius from '../assets/fertTopBottomRadius.png';
@@ -91,10 +106,18 @@ export default {
   data() {
     return {
       fan,
+      line,
       fanRun,
       lastBorder,
       lineTopBottom,
       fertTopBottom,
+      lineTopBorderLittle,
+      lineBottomBorder,
+      lineHeight,
+      lineBottomBorderLittle,
+      lineOne,
+      bottomLine,
+      lineTopBorder,
       lineTopAndBottom,
       bucketOpenTop,
       bucketOpenTopStatus:false,
@@ -119,6 +142,31 @@ export default {
       })
       return current?.value || '0'
     },
+    isHavewaterChannel(childList = []){
+      let isHaveWater = false;
+      for(let i = 0;i< childList.length;i++){
+        const item = childList[i];
+        if(item.sfType === '8'){
+          isHaveWater = true
+        }
+      }
+      return isHaveWater;
+    },
+    isHaveNextWaterChannel(currentIndex){
+      let isNextHaveWater;
+      for(let i = currentIndex+1;i< this.alreadyfertilizerBucketList.length;i++){
+        // const item = this.alreadyfertilizerBucketList[i];
+        isNextHaveWater = false;
+        for(let j = i;j< this.alreadyfertilizerBucketList.length;j++){
+          const currentItem = this.alreadyfertilizerBucketList[j];
+          isNextHaveWater = this.isHavewaterChannel(currentItem.childrenList || []);
+          if(isNextHaveWater){
+            return true
+          }
+        }
+      }
+      return isNextHaveWater
+    },
     getBottomDeviceName(list){
       let current = {}
       list?.forEach(item =>{
@@ -270,6 +318,7 @@ export default {
       align-items: center;
       height: 228rpx;
       margin-top: 112rpx;
+      position:relative;
       &__label{
         display: flex;
         flex-direction: column;
@@ -325,23 +374,53 @@ export default {
           z-index:100;
         }
       }
+      .facilitystate-item-line__bg{
+        position:absolute;
+        width: 102%;
+        height: 4rpx;
+        top: 0rpx;
+      }
       &__bg{
+        position:absolute;
         width: 100%;
-        height: 153rpx;
-        top: 0rpx;
+        left:0;
+        height: 36rpx;
+        bottom: -16rpx;
+      }
+      .facilitystate-item-lineheight__bg{
+        height: 32rpx;
+        width: 4rpx;
+        position:absolute;
+        left:0;
+        right: 0;
+        margin: auto;
       }
       &__line{
         position: absolute;
         width: 8rpx;
-        height: 152rpx;
+        height: 20rpx;
         left: 50%;
-        top: 0;
+        bottom: 0;
         transform: translateX(-50%);
       }
+      .facilitystate-item-line__bg2{
+        position:absolute;
+        top: 0;
+        width:50%;
+        height: 32rpx;
+      }
+      .facilitystate-item-line__bg3{
+        position:absolute;
+        top: 0;
+        width:50%;
+        height: 32rpx;
+      }
       &__bg2{
-        width: 50%;
-        height: 153rpx;
-        left: -4rpx;
+        width: 55%;
+        height: 32rpx;
+        left: -6rpx;
+        position:absolute;
+        bottom: -16rpx;
       }
       &__line2{
         position: absolute;

pages/cb/shuifeizsFirst/shuifeizs.vue

@@ -185,6 +185,7 @@ export default {
           this.irrigatedAreaList.push(item);
         }
       });
+      console.log(this.alreadyfertilizerBucketList,'alreadyfertilizerBucketListalreadyfertilizerBucketList')
     },
     nativeTo(item) {
       uni.navigateTo({
@@ -213,6 +214,12 @@ uni-page-body {
   top: -4rpx;
   position: relative;
 }
+.facilitystate-top__title{
+  width: 80%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .offline {
   height: 32rpx;
   line-height: 32rpx;