bigDataApp/pages/cb/shuifeizs/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="bucketOpenTop" />
      <image :src="sfbCurrent.value == 1?bucketOpenTop:bucketCloseTop" class="bucketOpenTop2"/>
      <view class="facilitystate-list__left">
        <view
          class="facilitystate-item"
          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"/>
            <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 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>
  </view>
</template>
<script>
import fertTopBottom from '../assets/fertTopBottom.png';
import fertTopBottomRadius from '../assets/fertTopBottomRadius.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,
      fanRun,
      fertTopBottom,
      bucketOpenTop,
      bucketOpenTopStatus:false,
      bucketOpenTopStatus2:false,
      bucketCloseTop,
      bucketClose,
      bucketOpen,
      fertTopBottomRadius,
    };
  },
  methods:{
    getTopDeviceName(list){
      let current = {}
      list?.forEach(item =>{
        if(item.sfType === '6'){
          const name = item.sfCode;
          if(name.indexOf('lsb') != -1){
            current = item
          }
        }
      })
      return current?.value
    },
    getBottomDeviceName(list){
      let current = {}
      list?.forEach(item =>{
        if(item.sfType === '6'){
          const name = item.sfCode;
         if(name.indexOf('llb') != -1){
            current = item
          }
        }
      })
      return current?.value
    },
    getJSCurrentValue(list){
      // 进水阀
      let current = {};
      list?.forEach(item =>{
        if(item.sfType === '8'){
          const name = item.sfCode;
          current = item;
        }
      })
      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 32rpx;
  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('../assets/beijing.png') no-repeat;
    background-size: 100%;
    height: 376rpx;
    width: 100%;
    display: flex;
    margin-bottom: 16rpx;
    .bucketOpenTop{
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      left: 140rpx;
      top: 344rpx;
    }
    .bucketOpenTop2{
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      left: 230rpx;
      top: 85rpx;
    }
    &__left{
      height: 100%;
      display: flex;
      margin-left: 144rpx;
    }
    .facilitystate-item {
      height: 230rpx;
      margin-top: 120rpx;
      margin-left: -4rpx;
      &__label{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100rpx;
        margin-bottom: 5rpx;
      }
      &__label-text,&__label-value {
        color: #042118;
        font-family: "Source Han Sans CN VF";
        font-size: 24rpx;
        font-weight: 400;
        height: 36rpx;
      }
      &__image {
        width: 100rpx;
        height: 138rpx;
        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: 46rpx;
          top: 6rpx;
          z-index:100;
        }
        .bucketClose1{
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          left: 46rpx;
          bottom: -4rpx;
          z-index:100;
        }
      }
      &__bg{
        width: 100rpx;
        height: 154rpx;
      }
      &__bg2{
        width: 56rpx;
        height: 155rpx;
        margin-top:-3rpx;
        margin-left: -2rpx;
      }
      .fertTopBottom{
        width: 70rpx;
        height: 94rpx;
        margin: 0 auto;
        margin-top: 12rpx;
        background: url('../assets/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);
            }
          }
        }
      }
    }
  }
}
</style>