zk-station-control-frontend/src/views/power-change-monitoring/components/BinInfomation.vue

<template>
  <div class="bin-bottom">
    <div class="bin-carbg">
      <img src="../assets/car1x.png" class="car" />
      <div class="battery-yellow" :class="yellowBattery" v-if="BatteryOnCar">
        <div class="battery-yellow-img">
          <img src="../assets/yellow.png">
        </div>
        <div class="battery-yellow-text">
          <p>SOC</p>
          <p>{{ BatteryOnCar }}%</p>
        </div>
      </div>
    </div>
    <div class="bin-battery">
      <div class="battery-list" v-for="(item, index) in storeInfoList" :key="index">
        <div class="battery-listbg" :class="[greenBattery(index),setBatteryBg(index)]" v-if="Carconnection(index)">
          <template v-if="step >= 3 && swapCode === index">
            <p v-show="swapSoc">SOC  {{ swapSoc }}%</p>
            <p v-show="swapCurrent">{{ swapCurrent }} A</p>
          </template>
          <template v-else>
            <p v-show="item.soc">SOC  {{ item.soc }}%</p>
            <p v-show="item.current">{{ item.current }} A</p>
          </template>
        </div>
        <div class="battery-defaultcls defaultbg" v-if="swapCode === index">
            <p v-show="item.soc && yellowBattery.yellowshow">SOC  {{ item.soc }}%</p>
            <p v-show="item.current && yellowBattery.yellowshow">{{ item.current }} A</p>
        </div>
        <div class="battery-liststatus">
          <img src="../assets/status0.png" v-show="item.chargerInfoVo.chgState === 0">
          <img src="../assets/status1.png" v-show="item.chargerInfoVo.chgState === 1">
          <img src="../assets/status2.png" v-show="item.chargerInfoVo.chgState === 2">
          <img src="../assets/status3.png" v-show="item.chargerInfoVo.chgState === 3">
        </div>
      </div>

    </div>
    <div class="battery-num">
      <img src="../assets/nostatus.png" v-for="(index) in 8" :key="index">
    </div>
  </div>
</template>

<script>
/*
    * @step：动画步骤
    * @BatteryOnCar：控制车上亏电电池是否亮起 
    * @storeInfoList：充电仓电池列表
    * @swapCode：换电电池编号
    * @connectionState：车站连接状态 1已连接 0断开连接
    * @swapCurrent：绿电池缓存电流,
    * @swapSoc：绿电池缓存SOC,
*/
export default {
  props: ["BatteryOnCar","storeInfoList","swapCode","connectionState","swapCurrent","swapSoc","step"],
  data() {
    return {
      
    };
  },
  watch:{
    
  },
  computed:{
    //设置黄电池动画
    yellowBattery:{
      get(){
        let cls={}
        if(this.step === 0 || this.step === 1) {
          cls['onestepPotion'] =true
        }else if(this.step === 2){
          cls['onestepPotion'] =true
          cls['yellowAnimationOne']=true
        }else if(this.step === 3){
          cls['twostepPotion']=true
        }
        else if(this.step === 4){
          cls['twostepPotion']=true
          if(this.swapCode === 1){
            cls['yellowAnimationSwapone']=true
          }else if(this.swapCode === 2){
            cls['SwaptwoPotion']=true
            cls['yellowAnimationSwaptwo']=true
          }else if(this.swapCode === 0){
            cls['SwapZeroPotion']=true
            cls['yellowAnimationSwapZero']=true
          }else if(this.swapCode === 4){
            cls['SwapthreePotion']=true
            cls['yellowAnimationSwapthree']=true
          }else if(this.swapCode === 5){
            cls['SwapfourPotion']=true
            cls['yellowAnimationSwapfour']=true
          }else if(this.swapCode === 6){
            cls['SwapfivePotion']=true
            cls['yellowAnimationSwapfive']=true
          }else if(this.swapCode === 7){
            cls['SwapsixPotion']=true
            cls['yellowAnimationSwapsix']=true
          }
        }
        return cls
      },
      set(val){
        return val
      }
    },
  },
  methods: {
    //设置车辆断开状态
    Carconnection(index){
      if(this.swapCode === index && this.connectionState === 0 && this.step >=3){
        return false
      }else{
        return true
      }
    },
    //设置换电电池背景
    setBatteryBg(index){
      if(this.swapCode === index && this.step !== 5){
          return 'lightbg'
      }else{
        return 'defaultbg'
      }
    },
    //设置绿电池动画
    greenBattery(index){
      let cls={}
      if(this.step === 3 && this.swapCode === index){
        if(this.swapCode === 1){
          cls['greenAnimationOne']=true
        }else if(this.swapCode ===2){
          cls['greenAnimationTwo']=true
        }else if(this.swapCode ===0){
          cls['greenAnimationZero']=true
        }else if(this.swapCode ===4){
          cls['greenAnimationThree']=true
        }else if(this.swapCode ===5){
          cls['greenAnimationFour']=true
        }else if(this.swapCode ===6){
          cls['greenAnimationFive']=true
        }else if(this.swapCode ===7){
          cls['greenAnimationSix']=true
        }
        
      }
      if(this.step === 4 && this.swapCode === index){
        if(this.swapCode === 1){
          cls['greenStepOnePotion']=true
        } else if(this.swapCode ===2){
          cls['greenStepTwoPotion']=true
        }else if(this.swapCode ===0){
          cls['greenStepZeroPotion']=true
        }else if(this.swapCode === 4){
          cls['greenStepThreePotion']=true
        }else if(this.swapCode === 5){
          cls['greenStepFourPotion']=true
        }else if(this.swapCode === 6){
          cls['greenStepFivePotion']=true
        }else if(this.swapCode === 7){
          cls['greenStepSixPotion']=true
        }
      }
      return cls
    }
  },
  mounted() {
   
  },
};
</script>

<style lang="scss" scoped>
.yellowshow{
  visibility: hidden;
}
.battery-defaultcls {
  width: 73px;
  height: 36px;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
.defaultbg{
  background-image: url("../assets/statusbg.png");
  background-size: 100% 100%;
  color: #73cb95;
}
.yellowbg{
  background-image: url("../assets/yellow.png");
  background-size: 100% 100%;
  color: #f6bb47;
}
.lightbg{
  background-image: url("../assets/lightbg.png");
  background-size: 100% 100%;
  color: #233C39;
  position: absolute;
  z-index:99999
}
.yellowAnimationOne{
  animation: yellowOnestep 2s linear forwards
}
@keyframes yellowOnestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(119px, 28px);
    }
}
.greenAnimationZero{
  animation: greenZerostep 2s linear forwards
}
@keyframes greenZerostep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, 110px);
    }
}
.greenAnimationOne{
  animation: greenOnestep 2s linear forwards
}
@keyframes greenOnestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, 63px);
    }
}
.greenAnimationTwo{
  animation: greenTwostep 2s linear forwards
}
@keyframes greenTwostep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, 18px);
    }
}
.greenAnimationThree{
  animation: greenThreestep 2s linear forwards
}
@keyframes greenThreestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -74.5px);
    }
}
.greenAnimationFour{
  animation: greenFourstep 2s linear forwards
}
@keyframes greenFourstep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -121px);
    }
}
.greenAnimationFive{
  animation: greenFivestep 2s linear forwards
}
@keyframes greenFivestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -166px);
    }
}
.greenAnimationSix{
  animation: greenSixstep 4s linear forwards
}
@keyframes greenSixstep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(-119px, -212px);
    }
}
.greenStepZeroPotion{
  left:-117px;
  top:110px;
}
.greenStepOnePotion{
  left:-117px;
  top:63px;
}
.greenStepTwoPotion{
  left:-117px;
  top:18px;
}
.greenStepThreePotion{
  left:-117px;
  top:-74.5px;
}
.greenStepFourPotion{
  left:-117px;
  top:-121px;
}
.greenStepFivePotion{
  left:-117px;
  top:-166px;
}
.greenStepSixPotion{
  left:-117px;
  top:-212px;
}
.onestepPotion{
  top: 114px;
  left: 27%;
}
.twostepPotion{
  top:142px;
  left:158px
}
.threestepPotion{
  top:52px;
  left:158px
}
.yellowAnimationSwapone{
  animation: yellowThreestep 2s linear forwards
}
@keyframes yellowThreestep{
  0%{
      transform: translate(0);
    }

    100% {
      transform: translate(0, -92.5px);
    }
}
.yellowAnimationSwaptwo{
  transition: top 2s;
}
.yellowAnimationSwapthree{
  transition: top 2s;
}
.yellowAnimationSwapfour{
  transition: top 2s;
}
.yellowAnimationSwapfive{
  transition: top 4s;
}
.yellowAnimationSwapsix{
  transition: top 5s;
}
.SwaptwoPotion{
  top:96px
}
.SwapthreePotion{
  top:188px
}
.SwapfourPotion{
  top:233px
}
.SwapfivePotion{
  top:279px
}
.SwapsixPotion{
  top:325px
}
.yellowAnimationSwapZero{
  transition: top 4s;
}
.SwapZeroPotion{
  top:4px
}
.bin-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  height: 100%;
}

.bin-carbg {
  width: 38%;
  position: relative;
  padding-top: 5px;
}

.bin-carbg .car {
  position: absolute;
  width: 137px;
  height: 362px;
  left: 5%;
}

.bin-carbg .battery-yellow {
  position: relative;
  width: 73px;
  z-index: 9999;
}

.battery-yellow .battery-yellow-img {
  width: 73px;
  position: absolute;
}

.battery-yellow .battery-yellow-text {
  width: 73px;
  display: flex;
  position: absolute;
  z-index: 99;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #f6bb47;
  padding-left: 3px;
}

.battery-yellow-text p {
  padding-left: 6px;
}
.bin-battery {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding-left: 10px;
  flex: 1;

  .battery-list {
    width: 98%;
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    padding-left: 2%;
  }

  .battery-list .battery-listbg {
    width: 73px;
    height: 36px;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
  }
  
  .battery-listbg p:first-child,.battery-defaultcls p:first-child {
    margin-top: 4px;
  }

  .battery-listbg p,.battery-defaultcls p {
    margin: 0;
    padding:0 3px;
    margin-top: 2px;
    text-align: right;
  }

  .battery-list .battery-lightbg {
    width: 73px;
    height: 36px;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    z-index: 999;
    position: absolute;
  }



  .battery-list .battery-liststatus {
    width: 25px;
    height: 31px;
    margin-top: 3px;
    margin-left: 5px;
  }
}
.battery-num {
  width: 101px;
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.battery-num img {
  width: 101px;
  height: 35px;
}
</style>