fix: bug修改

pages/cb/shuifeizs/components/base.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="base-container">
+  <view class="base-container" v-if="dataList.length">
     <view class="base-list">
       <view class="base-item" v-for="(item, index) in dataList" :key="index">
         <view class="base-item-value">{{ item.value }}</view>
@@ -19,26 +19,7 @@ export default {
     },
   },
   data() {
-    return {
-      list: [
-        {
-          label: 'PH值',
-          value: '0.00',
-        },
-        {
-          label: 'EC值',
-          value: '987 us',
-        },
-        {
-          label: '水温',
-          value: '20 ℃',
-        },
-        {
-          label: '管道压力',
-          value: '20 Pa',
-        },
-      ],
-    };
+    return {};
   },
 };
 </script>
@@ -67,6 +48,10 @@ export default {
         font-size: 32rpx;
         font-weight: 500;
         text-align: center;
+        // 超出隐藏
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       .base-item-label {
         width: 150rpx;

pages/cb/shuifeizs/components/facilitystate.vue

@@ -18,6 +18,8 @@
       <view class="facilitystate-list__left">
         <view
           class="facilitystate-item"
+          :style="{width:100/(alreadyfertilizerBucketList.length)+'%'}"
+          :class="index == alreadyfertilizerBucketList.length - 1?'facilitystate-item--last':''"
           v-for="(item, index) in alreadyfertilizerBucketList"
           :key="index"
         >
@@ -27,8 +29,14 @@
           </view>
           <view class="facilitystate-item__image">
             <image :src="getJSCurrentValue(item.childrenList)?bucketOpen:bucketClose" class="bucketClose"/>
-            <image :src="fertTopBottom" v-if="index == alreadyfertilizerBucketList.length - 1? false:true" class="facilitystate-item__bg"/>
-            <image :src="fertTopBottomRadius" v-else class="facilitystate-item__bg2"/>
+            <view  v-if="index == alreadyfertilizerBucketList.length - 1? false:true">
+              <image :src="lineTopBottom" class="facilitystate-item__bg"/>
+              <image :src="lineTopAndBottom" class="facilitystate-item__line"/>
+            </view>
+            <view  v-else>
+              <image :src="lineTopBottom" 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>
@@ -46,7 +54,10 @@
 </template>
 <script>
 import fertTopBottom from '../assets/fertTopBottom.png';
+import lineTopAndBottom from '../assets/lineTopAndBottom.png';
+import lineTopBottom from '../assets/lineTopBottom.png';
 import fertTopBottomRadius from '../assets/fertTopBottomRadius.png';
+import lastBorder from '../assets/lastBorder.png';
 import irrigatedArea from './irrigatedArea.vue';
 import fan from '../assets/fan.png';
 import fanRun from '../assets/fanRun.png';
@@ -81,7 +92,10 @@ export default {
     return {
       fan,
       fanRun,
+      lastBorder,
+      lineTopBottom,
       fertTopBottom,
+      lineTopAndBottom,
       bucketOpenTop,
       bucketOpenTopStatus:false,
       bucketOpenTopStatus2:false,
@@ -243,18 +257,24 @@ export default {
     &__left{
       height: 100%;
       display: flex;
-      margin-left: 144rpx;
+      margin-left: 160rpx;
+      justify-content: space-between;
+      width: 100%;
     }
     .facilitystate-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       height: 230rpx;
-      margin-top: 122rpx;
-      margin-left: -4rpx;
+      margin-top: 112rpx;
       &__label{
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        width: 100rpx;
+        width: 100%;
+        text-align: center;
         margin-bottom: 5rpx;
       }
       &__label-text,&__label-value {
@@ -263,9 +283,15 @@ export default {
         font-size: 24rpx;
         font-weight: 400;
         height: 36rpx;
+        width:90%;
+        margin: 0 auto;
+        // 超出隐藏
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       &__image {
-        width: 100rpx;
+        width: 100%;
         height: 138rpx;
         position: relative;
         .facilitystate-item-fan{
@@ -281,7 +307,8 @@ export default {
           position: absolute;
           width: 20rpx;
           height: 20rpx;
-          left: 46rpx;
+          left: 50%;
+          transform: translateX(-25%);
           top: 6rpx;
           z-index:100;
         }
@@ -289,20 +316,37 @@ export default {
           position: absolute;
           width: 20rpx;
           height: 20rpx;
-          left: 46rpx;
-          bottom: -4rpx;
+          left: 50%;
+          transform: translateX(-25%);
+          bottom: -6rpx;
           z-index:100;
         }
       }
       &__bg{
-        width: 100rpx;
-        height: 155rpx;
+        width: 100%;
+        height: 153rpx;
+        top: 0rpx;
+      }
+      &__line{
+        position: absolute;
+        width: 8rpx;
+        height: 152rpx;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
       }
       &__bg2{
-        width: 56rpx;
-        height: 157rpx;
-        margin-top:-3rpx;
-        margin-left: -2rpx;
+        width: 50%;
+        height: 153rpx;
+        left: -4rpx;
+      }
+      &__line2{
+        position: absolute;
+        width: 16rpx;
+        height: 153rpx;
+        top: -1rpx;
+        margin-left: -6rpx;
+        transform: translateX(-50%);
       }
       .fertTopBottom{
         width: 70rpx;
@@ -343,6 +387,10 @@ export default {
         }
       }
     }
+    .facilitystate-item--last{
+      width: 100rpx;
+      display: flex;
+    }
   }
 }
 </style>

pages/cb/shuifeizs/components/irrigatedArea.vue

@@ -19,7 +19,7 @@
             :key="n"
           >
             <view class="irrigated-area-item-content-item-title">{{
-              i.sfDisplayname || i.sfName
+              i.sfDisplayname || i.sfName || '暂无数据'
             }}</view>
             <view class="irrigated-area-item-content-item-icon">
               <image
@@ -114,8 +114,8 @@ export default {
             display: flex;
             justify-content: center;
             .bucket-icon {
-              width: 16rpx;
-              height: 16rpx;
+              width: 24rpx;
+              height: 24rpx;
               margin-right: 10rpx;
             }
           }

pages/cb/shuifeizs/components/rotationBottom.vue

@@ -15,8 +15,13 @@
         :key="item.sfBid"
         @click="clickHandler(item, index)"
         :class="{ active: index === currentIndex }"
-        >{{ item.sfDisplayname || item.sfName }}</view
-      >
+        >{{ item.sfDisplayname || item.sfName }}
+        <image
+          :src="borderBottomGray"
+          class="border-bottom-gray"
+          v-if="index === currentIndex"
+        />
+      </view>
     </view>
     <view class="rotation-wraper-right">
       <scroll-view
@@ -39,6 +44,7 @@
 </template>
 <script>
 import rotationCard from './rotationCard.vue';
+import borderBottomGray from '../assets/borderBottomGray.png';
 export default {
   name: 'rotationBottom',
   props: {
@@ -57,6 +63,7 @@ export default {
   },
   data() {
     return {
+      borderBottomGray,
       currentIndex: 0,
       currentItem: {},
       activeMenuId: '',
@@ -109,6 +116,14 @@ export default {
       font-family: 'Source Han Sans CN VF';
       font-size: 28rpx;
       font-weight: 400;
+      position: relative;
+      .border-bottom-gray {
+        position: absolute;
+        width: 40rpx;
+        height: 40rpx;
+        bottom: -30rpx;
+        right: 0;
+      }
     }
   }
   .active {

pages/cb/shuifeizs/control.vue

@@ -220,10 +220,10 @@ uni-page-body {
       }
       .borderBottomRadius {
         position: absolute;
-        width: 30rpx;
-        height: 30rpx;
-        right: -4rpx;
-        bottom: -20rpx;
+        width: 40rpx;
+        height: 40rpx;
+        right: -0rpx;
+        bottom: -30rpx;
         z-index: 100;
       }
     }