app-station-control-frontend_v1/pages/equipment-monitoring/components/StorageInfo.vue

<template>
    <view class="storage-item" >
        <view class="container">
			<view class="container-header">
				<view class="battery" :class="showCode ==0?'showCodeActive':''" @click="showCode = 0">
					电池(有)
				</view>
				<view class="a-gun battery" :class="showCode ==1?'showCodeActive':''" @click="showCode = 1">
					A枪
				</view>
				 <view class="b-gun battery" :class="showCode ==2?'showCodeActive':''" @click="showCode = 2">
					B枪
				</view> 
			</view>
			<view class="container-code">
				<view class="container-code-one">
					通讯正常
				</view>
				<view class="container-code-two">
					<image src="../../../static/equipment/d5.png" mode=""></image>
					<image src="../../../static/equipment/c1.png" mode=""></image>
				</view>
				
			</view>
            <BatteryStatus
            :storeCode="storeCode"
            :comState="comState"
            :sn="sn"
            :soc="soc"
            :chgEstimatedTime="chgEstimatedTime"
			:showCode="showCode"
            ></BatteryStatus>
         <view class="battery-info">
				<view class="vim" v-if="showCode != 0">
					<text>vin码</text><text>123456789</text>
				</view>
                <BatteryInfo :num="current" unit="A" text="电流"></BatteryInfo>
                <BatteryInfo :num="voltage" unit="V" text="电压"></BatteryInfo>
				<BatteryInfo :num="soh" unit="%" text="SOH" v-if="showCode == 0"></BatteryInfo>
				<view class="info-right" :style="chargerColor">
				     <image class="s1" :src="require('../../../static/equipment/'+`s${chargerState[0]}`+'.png')"><text>{{chargerState[1]}}</text>
				 </view>
                <!--  <BatteryInfo :num="minTemperature" unit="℃" text="最低温度"></BatteryInfo>
                <BatteryInfo :num="maxTemperature" unit="℃" text="最高温度"></BatteryInfo>
                <BatteryInfo :num="maxCellVoltage" unit="V" text="最高单体电压"></BatteryInfo>
                <BatteryInfo :num="minCellVoltage" unit="V" text="最低单体电压"></BatteryInfo>
                <view class="info-right">
                    <image class="s1" src="../../../static/equipment/s1.png"><text class="text">{{StateNum}}</text>
                </view>
                 -->
            </view>
            <view class="battery-charger">
                <BatteryCharger
                :chargerCode="chargerInfoVo.chargerCode"
                :comState="chargerInfoVo.comState"
                :chgState="chargerInfoVo.chgState"
                :sn="sn"
                :storeState="storeState"
                v-show="chargerInfoVo.chargerCode"></BatteryCharger>
                <view class="battery-info" v-show="chargerInfoVo.chargerCode">
                    <BatteryInfo :num="chargerInfoVo.demandCurrent" unit="A" text="需求电流"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.demandVoltage" unit="V" text="需求电压"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.chgCurrent" unit="A" text="充电电流"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.chgVoltage" unit="V" text="充电电压"></BatteryInfo>
                    <BatteryInfo :num="chargerInfoVo.chgCapacity" unit="kWh" text="累计充电电量"></BatteryInfo>
                   
                </view>
				<view class="battery-charger-btn">
					<view class="Plug-gun-charging">
						插枪充电
					</view>
					<view class="Settings Plug-gun-charging" @click="set">
						设置
					</view>
				</view>
                <image src="../../../static/equipment/nodata.png" class="nodata" v-show="!chargerInfoVo.chargerCode">
            </view>
        </view>
    </view>
</template>

<script>
import BatteryInfo from "./BatteryInfo.vue";
import BatteryStatus from "./BatteryStatus.vue";
import BatteryCharger from "./BatteryCharger.vue"
export default {
    name:"StorageInfo",
    props:[
        'storeCode',
        'comState',
        'sn',
        'soc',
        'chgEstimatedTime',
        'current',
        'voltage',
        'minTemperature',
        'maxTemperature',
        'maxCellVoltage',
        'minCellVoltage',
        'soh',
        'storeState',
        'chargerInfoVo'
    ],
    components: {
        BatteryInfo,
        BatteryStatus,
        BatteryCharger
    },
    data(){
        return{
			showCode:0,//0电池1A枪2B枪
        }
    },
	methods:{
		set(){
			this.$emit('drawer')
		}
	},
    computed:{
        chargerState(){
            if(this.chargerInfoVo.chgState === 1){
                return [3,' 准备充电']
            }else if(this.chargerInfoVo.chgState === 2){
                return [1,' 充电中']
            }else if(this.chargerInfoVo.chgState === 3){
                return [2,' 充电完成']
            }else if(this.chargerInfoVo.chgState === 4){
                return [8,' 充电失败']
            }else if(this.chargerInfoVo.chgState === 5){
                return [6,' 预约']
            }else if(this.chargerInfoVo.chgState === 6){
                return [5,' 故障']
            }else if(this.chargerInfoVo.chgState === 0){
                return [7,' 空闲']
            }else{
                return [4,' 无法获取']
            }
        },
        chargerColor(){
            if(this.chargerInfoVo.chgState === 3){
                return 'background-color:rgb(19,33,39,0.9);border:#477c62 solid 1px'
            }else if(this.chargerInfoVo.chgState ===1 || this.chargerInfoVo.chgState === 5){
                return 'background-color:rgb(20,38,50,0.9);border:#4a9dab solid 1px'
            }else if(this.chargerInfoVo.chgState ===2 || this.chargerInfoVo.chgState === 0){
                return ''
            }else{
                return 'background-color:rgb(32,25,36,0.9);border:#94494d solid 1px'
            }
        },
        StateNum(){
            if(this.storeState === 0){
                return '空仓'
            }else if(this.storeState === 1){
                return '有电池'
            }else{
                return '连接异常'
            }
        }
    }
};
</script >
<style lang="scss" scoped>
    .storage-item{
        width: 347px;
        background-color: #0a101c;
        height: 598px;
        margin-right: 22px;
		border: 1px solid #0a101c;
        .container{
            padding: 20px 24px;
            color: #404a63;
            font-size: 14px;
            .container-header{
				display: flex;
				.battery{
					width: 112px;
					height: 32px;
					background: #1C263A;
					color: #DEEFF9;
					line-height: 32px;
					text-align: center;
					margin-bottom: 10px;
				}
				.a-gun{
					width: 78px;
					margin-left: 12px;
				}
				.b-gun{
					width: 78px;
					margin-left: 12px;
				}
				.showCodeActive{
					background-color: #636C97;
				}
			}
			.container-code{
				display: flex;
				margin-bottom: 10px;
				justify-content: space-between;
				.container-code-one{
					font-size: 16px;
					color: #91FDB9;
				}
				.container-code-two{
					display: flex;
					image{
						width: 60px;
						height: 24px;
					}
					image:first-child{
						margin-right: 20px;
					}
				}
			}
            .battery-info{
                display: flex;
                margin-top: 16px;
                justify-content: space-between;
                flex-wrap: wrap;
				margin-bottom: 20px;
				min-height: 116px;
				.vim{
					width: 100%;
					margin: 0px 0px 12px 0px;
					text{
						font-size: 14px;
						color: #414A63;
					}
					text:last-child{
						display: inline-block;
						margin-left: 10px;
						font-weight: 600;
						color: #fff;
					}
				}
                .info-right{
                    width: 46%;
                    height: 32px;
                    line-height:30px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: white;
                    background-color: #0e1f31;
                    border: #1b71a4 solid 1px;
                    .s1{
                        vertical-align: middle;
                        width: 18px;
                        height: 18px;
                    }
                }
                .info-warning{
                    width: 46%;
                    background-color: #201823;
                    border: #834246 solid 1px;
                    height: 34px;
                    line-height:32px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: white;
                    // img{
                    //     vertical-align: middle;
                    // }
                }
            }
            .battery-charger{
                width: 100%;
                min-height: 228px;
                .nodata{
                    position: relative;
                    left: calc(50% - 33px);
                    margin-top: 6vh;
                    width: 66px;
                    height: 66px;
                }
            }
        }
		.battery-charger-btn{
			display: flex;
			    position: absolute;
			    bottom: 20px;
			.Plug-gun-charging{
				width: 135px;
				height: 32px;
				background: #69B889;
				text-align: center;
				line-height: 32px;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #DEEFF9;
			}
			.Settings{
				background: #636C97;
				margin-left: 20px;
			}
		}
    }
	
</style>