bigDataApp/pages/cb/shuifeizsFirst/components/facilitystate.vue

<template>
  <view class="facilitystate-container">
    <view class="facilitystate-title-warp">
      <view class="facilitystate-title">
        <view class="radius-user"></view>使用中
      </view>
      <view class="facilitystate-subtitle">
        <view class="radius-close"></view>
      已关闭</view>
    </view>
    <view class="facilitystate-list">
      <image :src="ggbCurrent.value == 1?bucketOpenTop:bucketCloseTop" class="bucketOpenTop2" />
      <image :src="sfbCurrent.value == 1?bucketOpenTop:bucketCloseTop" class="bucketOpenTop"/>
      <view class="facilitystate-list__left-label">
        <view class="facilitystate-item__left-label-text" style="margin-bottom: 2rpx;">瞬时 L/min ：</view>
        <view class="facilitystate-item__left-label-text">累计L：</view>
      </view>
      <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"
        >
          <view class="facilitystate-item__label">
            <view class="facilitystate-item__label-text">{{getTopDeviceName(item.childrenList)}}</view>
            <view class="facilitystate-item__label-value">{{getBottomDeviceName(item.childrenList)}}</view>
          </view>
          <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-->
              <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="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">
              <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)}" />
              </view>
            </view>
            <image :src="getXSCurrentValue(item.childrenList)?bucketOpen:bucketClose" class="bucketClose1" />
          </view>
        </view>
      </view>
    </view>
    <irrigatedArea :irrigatedAreaList="irrigatedAreaList"/>
  </view>
</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';
import lastBorder from '../assets/lastBorder.png';
import irrigatedArea from './irrigatedArea.vue';
import fan from '../assets/fan.png';
import fanRun from '../assets/fanRun.png';
import bucketOpenTop from '../assets/bucketOpenTop.png';
import bucketCloseTop from '../assets/bucketCloseTop.png';
import bucketClose from '../assets/bucketClose.png';
import bucketOpen from '../assets/bucketOpen.png';

export default {
  props:{
    irrigatedAreaList:{
      type:Array,
      default:()=>[]
    },
    alreadyfertilizerBucketList:{
      type:Array,
      default:()=>[]
    },
    ggbCurrent:{
      type:Object,
      default:()=>{}
    },
    sfbCurrent:{
      type:Object,
      default:()=>{}
    }
  },
  components:{
    irrigatedArea
  },
  data() {
    return {
      fan,
      line,
      fanRun,
      lastBorder,
      lineTopBottom,
      fertTopBottom,
      lineTopBorderLittle,
      lineBottomBorder,
      lineHeight,
      lineBottomBorderLittle,
      lineOne,
      bottomLine,
      lineTopBorder,
      lineTopAndBottom,
      bucketOpenTop,
      bucketOpenTopStatus:false,
      bucketOpenTopStatus2:false,
      bucketCloseTop,
      bucketClose,
      bucketOpen,
      fertTopBottomRadius,
      isHave:false,
    };
  },
  methods:{
    getTopDeviceName(list){
      let current = {}
      list?.forEach(item =>{
        if(item.sfType === '6'){
          const name = item.sfDisplayname || item.sfName;
          if(name.indexOf('瞬时') != -1){
            current = item
          }
        }
      })
      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 =>{
        if(item.sfType === '6'){
          const name = item.sfDisplayname || item.sfName;
         if(name.indexOf('累计') != -1){
            current = item
          }
        }
      })
      return current?.value || '0'
    },
    getJSCurrentValue(list){
      // 进水阀
      let current = {};
      list?.forEach(item =>{
        if(item.sfType === '8'){
          const name = item.sfCode;
          current = item;
          this.isHave = true;
        }
      })
      return current?.value == 1
    },
    getJBCurrentValue(list){
      // 搅拌机
      let current = {};
      list?.forEach(item =>{
        if(item.sfType === '3'){
          const name = item.sfCode;
            current = item
        }
      })
      return current?.value == 1
    },
    getXSCurrentValue(list){
      // 吸水泵
      let current = {};
      list?.forEach(item =>{
        if(item.sfType === '2'){
          const name = item.sfCode;
            current = item
        }
      })
      return current?.value == 1
    },
    handleClick(item){
      item.fan = !item.fan;
    },
    handleOpenClick(){
      this.bucketOpenTopStatus = !this.bucketOpenTopStatus;
    },
    handleOpenClick1(){
      this.bucketOpenTopStatus2 = !this.bucketOpenTopStatus2;
    },
    handleBucketCloseClick(item){
      item.isTopStatus = !item.isTopStatus;
    },
    handleBucketCloseClick1(item){
      item.isBottomStatus = !item.isBottomStatus;
    }
  }
};
</script>
<style scoped lang="scss">
.facilitystate-container {
  padding: 16rpx 0rpx;
  justify-content: space-between;
  border-radius: 16rpx;
  position: relative;
  .facilitystate-title-warp{
    position: absolute;
    right: 32rpx;
    top: 10rpx;
    display: flex;
    align-items: center;
    color: #374d59;
    font-family: "Source Han Sans CN VF";
    font-size: 24rpx;
    font-weight: 400;
    .facilitystate-title{
      display: flex;
      align-items: center;
      margin-right: 32rpx;
      .radius-user{
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #14A478;
        margin-right:8rpx;
      }
    }
    .facilitystate-subtitle{
      display: flex;
      align-items: center;
      .radius-close{
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #7A8291;
        margin-right:8rpx;
      }
    }
  }
  .facilitystate-list {
    background: url('https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/newindex/beijing.png') no-repeat;
    background-size: 100%;
    height: 376rpx;
    width: 690rpx;
    display: flex;
    margin-bottom: 16rpx;
    position: relative;
    &__left-label{
      align-self: stretch;
      color: #687a74;
      text-align: right;
      font-family: "Source Han Sans CN VF";
      font-size: 24rpx;
      font-weight: 400;
      position: absolute;
      left: 30rpx;
      top: 120rpx;
    }
    .bucketOpenTop{
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      left: 120rpx;
      top: 328rpx;
    }
    .bucketOpenTop2{
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      left: 200rpx;
      top: 72rpx;
    }
    &__left{
      height: 100%;
      display: flex;
      margin-left: 160rpx;
      justify-content: space-between;
      width: 100%;
    }
    .facilitystate-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 228rpx;
      margin-top: 112rpx;
      position:relative;
      &__label{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
        margin-bottom: 5rpx;
      }
      &__label-text,&__label-value {
        color: #042118;
        font-family: "Source Han Sans CN VF";
        font-size: 24rpx;
        font-weight: 400;
        height: 36rpx;
        width:90%;
        margin: 0 auto;
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &__image {
        width: 100%;
        height: 140rpx;

        position: relative;
        .facilitystate-item-fan{
          position: absolute;
          top: 20rpx;
          left:0;
          bottom:0;
          right:0;
          margin: auto;
          z-index:100;
        }
        .bucketClose{
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          left: 50%;
          transform: translateX(-25%);
          top: 6rpx;
          z-index:100;
        }
        .bucketClose1{
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          left: 50%;
          transform: translateX(-25%);
          bottom: -6rpx;
          z-index:100;
        }
      }
      .facilitystate-item-line__bg{
        position:absolute;
        width: 102%;
        height: 4rpx;
        top: 0rpx;
      }
      &__bg{
        position:absolute;
        width: 100%;
        left:0;
        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;
        position:absolute;
        left:0;
        right: 0;
        margin: auto;
      }
      &__line{
        position: absolute;
        width: 8rpx;
        height: 20rpx;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
      }
      .facilitystate-item-line__bg2{
        position:absolute;
        top: 0;
        width:50%;
        height: 32rpx;
      }
      .facilitystate-item-line__bg4{
        position:absolute;
        top: 0;
        width:50%;
        height: 32rpx;
      }
      .facilitystate-item-line__bg3{
        position:absolute;
        top: 0;
        width:50%;
        height: 32rpx;
      }
      &__bg2{
        width: 55%;
        height: 32rpx;
        left: -6rpx;
        position:absolute;
        bottom: -16rpx;
      }
      &__bg4{
        width: 55%;
        height: 32rpx;
        left: -6rpx;
        position:absolute;
        top: 0rpx;
        transform: rotateX(180deg);
      }
      &__line2{
        position: absolute;
        width: 16rpx;
        height: 153rpx;
        top: -1rpx;
        margin-left: -6rpx;
        transform: translateX(-50%);
      }
      .fertTopBottom{
        width: 70rpx;
        height: 94rpx;
        margin: 0 auto;
        margin-top: 12rpx;
        background: url('https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/newindex/bucket.png')  no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .fertTopBottom-text{
          width: 70rpx;
          font-size: 24rpx;
          color: #FFB800;
          text-align: center;
          // 超出隐藏
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .fan{
          width: 40rpx;
          height:40rpx;
          margin-left: 10rpx;
        }
        .fan-run{
          animation: rotate .5s linear infinite;
          @keyframes rotate {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
        }
      }
    }
    .facilitystate-item--last{
      width: 100rpx;
      display: flex;
    }
  }
}
</style>