app-station-control-frontend_v1/components/BatteryInfo/BatteryInfo.vue

<template>
	<view class="battery-info" :class="[IsSelect?'SelectBorder':'defaultBorder']" @click="HandleBatterySelected(storeCode,storeState,getChgState)">
		<view class="battery-header" :class="[storeState===1&&soc?'battery-have':'battery-null']">
			<view class="battery-box" :class="linktype===4?'battery4-box':''" v-show="getChgState!=2 && storeState===1">
				<view class="batteryList">
					<view class="battery-many" v-for="item in getBatteryNum" :key="item"
						:style="{ 'bottom': item * 14 - 14 + 'px' }">
						<image :src="item === getBatteryNum ? '/static/change/ding.png' : '/static/change/zhong.png'"></image>
					</view>
				</view>
				<span>SOC {{soc || '0'}}%</span>
			</view>
			<view class="battery-anmition" :class="linktype===4?'battery-anmition4':''" v-show="getChgState==2">
				<span>SOC {{soc || '0'}}%<br>{{chgEstimatedTime || '0'}}min 充满</span>
			</view>
		</view>
		<view class="battery-footer">
			<view class="battery-number">
				<span class="codeNum">{{ storeCode }}号仓</span>
				<span v-if="freezeState"><image src="/static/change/s5.png"></image></span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BatteryInfo",
		props: ['soc',
			'chgState',
			'storeCode',
			'IsSelect',
			'BatterySelected',
			'BatterySelectAllArr',
			'chgEstimatedTime',
			'storeState',
			'linktype',//单四连型号
			'freezeState', //冻结状态
			'comState', //电池通讯状态
			'chargerComState', //充电机通讯状态
		],
		data() {
			return {

			};
		},
		computed: {
			//计算电池块数
			getBatteryNum() {
				if (this.soc === 0) {
					return 0
				} else if (this.soc > 0 && this.soc <= 20) {
					return 1
				} else if (this.soc > 20 && this.soc <= 40) {
					return 2
				} else if (this.soc > 40 && this.soc <= 60) {
					return 3
				} else if (this.soc > 60 && this.soc <= 80) {
					return 4
				} else if (this.soc > 80 && this.soc <= 100) {
					return 5
				}
			},
			//计算电池是否充电中
			getChgState(){
				if(this.chgState==1 || this.chgState==2){
					return 2
				}else{
					return 0
				}
			}
		},
		methods: {
			//把选择的仓位号传给父组件，触发函数BatterySelected
			HandleBatterySelected(storeCode,storeState,getChgState) {
				 const CurrentStore={storeCode,storeState,getChgState}//当前选择的电池仓位号，以及是否有电池
				 this.BatterySelected(CurrentStore)
				// console.log(storeCode)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.SelectBorder{
		border: 1px solid #338150;
	}
	.defaultBorder{
		border: 1px solid #111827;
	}
	.battery-info {
		width: 110px;
		height: 180px;
		background: #0A101C;
		display: flex;
		flex-direction: column;
		cursor: pointer;
		margin-left: 14px;
		.battery-null{
			background: #292D46;
		}
		.battery-have{
			background: #0A101C;
		}
		.battery-header {
			height: 156px;
			// background: #292D46;
			box-sizing: border-box;
			padding-top: 10px;
			.battery-anmition {
				width: 90px;
				height: 136px;
				background-image: url('~@/static/change/battery-anim.gif');
				background-size: 100% 100%;
				margin: 0 10px;
				position: relative;
			}
			
			.battery-box {
				width: 90px;
				height: 136px;
				background-image: url('~@/static/change/battery.png');
				background-size: 100% 100%;
				margin: 0 10px;
				padding-bottom: 26px;
				box-sizing: border-box;
				position: relative;

				.batteryList {
					position: relative;
					height: 110px;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;

					.batteryOne {
						position: absolute;
						bottom: 0;
						z-index: 10;
					}

					.battery-many {
						position: absolute;
						width: 50px;
						image{
							width: 50px;
							height: 21.5px;
						}
						// span{
						//     position: absolute;
						//     width: 78px;
						//     font-weight: 500;
						//     color: #FFFFFF;
						//     text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
						//     font-size: 12px;
						//     left: 0;
						//     text-align: center;
						//     bottom:-24px;
						//     line-height: 14px;
						// }
					}
				}
			}
			.battery-anmition4{
				background-image: url('~@/static/change/battery-anim4.gif');
			}
			.battery4-box{
				background-image: url('~@/static/change/battery4.png');
			}
			span {
				position: absolute;
				width: 100%;
				font-weight: 500;
				color: #FFFFFF;
				text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
				font-size: 12px;
				left: 0;
				text-align: center;
				top: 41%;
				line-height: 16px;
			}
		}

		.battery-footer {
			height: 24px;
			background-color: #1C263A;
			width: 100%;
			line-height: 24px;
			color: white;
			font-size: 12px;
			.battery-number{
				display: flex;
				justify-content: space-between;
				.codeNum{
					text-indent: 5rpx;
				}
				image{
					width: 18rpx;
					height: 18rpx;
					margin-top: 3rpx;
					margin-right: 5rpx;
				}
			}
		}
	}
</style>