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="actshowCode(0)">
					{{StateNum}}
				</view>
				<view class="a-gun battery" :class="showCode ==1?'showCodeActive':''" @click="actshowCode(1)">
					A枪
				</view>
				<view class="b-gun battery" :class="showCode ==2?'showCodeActive':''" @click="actshowCode(2)">
					B枪
				</view>
			</view>
			<view class="topBox">
				<view class="container-code">
					<view class="container-code-one" :class="statustext[1]" v-if="showCode== 0">
						{{statustext[0]}}
					</view>
					<view class="container-code-one" :class="statustextA[1]" v-if="showCode== 1">
						{{statustextA[0]}}
					</view>
					<view class="container-code-one" :class="statustextB[1]" v-if="showCode== 2">
						{{statustextB[0]}}
					</view>
					<view class="container-code-two" v-if="showCode== 0">
						<image src="../../../static/equipment/d5.png" mode="" v-if="chargerInfoVo.chgState === 2"
							@click="sendCharger('断电')"></image>
						<image src="../../../static/equipment/d6.png" mode="" v-if="chargerInfoVo.chgState !== 2"></image>
						<image src="../../../static/equipment/c1.png" mode=""
							v-if="chargerInfoVo.chgState === 0 || chargerInfoVo.chgState === 3" @click="sendCharger('充电')">
						</image>
						<image src="../../../static/equipment/c2.png" mode=""
							v-if="chargerInfoVo.chgState !== 0 && chargerInfoVo.chgState !== 3"></image>
					</view>
					<view class="container-code-two" v-if="showCode== 1">
						<image src="../../../static/equipment/d5.png" mode="" v-if="chargerInfoOneVo.chgState === 2"
							@click="sendChargerClose('断电',batInfoOneVo.gunCode,chargerInfoOneVo.chargerCode)">
						</image>
						<image src="../../../static/equipment/d6.png" mode="" v-if="chargerInfoOneVo.chgState !== 2">
						</image>
						<image src="../../../static/equipment/c1.png" mode=""
							v-if="chargerInfoOneVo.chgState === 0 || chargerInfoOneVo.chgState === 3"
							@click="sendChargerOpen('充电',batInfoOneVo.gunCode,chargerInfoOneVo.chargerCode)"></image>
						<image src="../../../static/equipment/c2.png" mode=""
							v-if="chargerInfoOneVo.chgState !== 0 && chargerInfoOneVo.chgState !== 3"></image>
					</view>
					<view class="container-code-two" v-if="showCode== 2">
						<image src="../../../static/equipment/d5.png" mode="" v-if="chargerInfoTwoVo.chgState === 2"
							@click="sendChargerClose('断电',batInfoTwoVo.gunCode,chargerInfoTwoVo.chargerCode)">
						</image>
						<image src="../../../static/equipment/d6.png" mode="" v-if="chargerInfoTwoVo.chgState !== 2">
						</image>
						<image src="../../../static/equipment/c1.png" mode=""
							v-if="chargerInfoTwoVo.chgState === 0 || chargerInfoTwoVo.chgState === 3"
							@click="sendChargerOpen('充电',batInfoTwoVo.gunCode,chargerInfoTwoVo.chargerCode)"></image>
						<image src="../../../static/equipment/c2.png" mode=""
							v-if="chargerInfoTwoVo.chgState !== 0 && chargerInfoTwoVo.chgState !== 3"></image>
					</view>
				</view>
				<BatteryStatus :storeCode="storeCode" :comState="comState" :sn="sn" :soc="soc"
					:chgEstimatedTime="chgEstimatedTime" :showCode="showCode" :ascription="ascription" v-if="showCode== 0"></BatteryStatus>
				<BatteryStatus :storeCode="batInfoOneVo.storeCode" :comState="chargerInfoOneVo.comState"
					:sn="batInfoOneVo.sn" :soc="batInfoOneVo.soc"  :ascription="ascription" :chgEstimatedTime="chargerInfoOneVo.chgEstimatedTime"
					:showCode="showCode" v-if="showCode== 1"></BatteryStatus>
				<BatteryStatus :storeCode="batInfoTwoVo.storeCode" :comState="chargerInfoTwoVo.comState"
					:sn="batInfoTwoVo.sn" :soc="batInfoTwoVo.soc"  :ascription="ascription" :chgEstimatedTime="chargerInfoTwoVo.chgEstimatedTime"
					:showCode="showCode" v-if="showCode== 2"></BatteryStatus>
				<view class="battery-info">
					<view class="vim" v-if="showCode == 1">
						<text>vin码</text><text>{{batInfoOneVo.vin ||'-'}}</text>
					</view>
					<view class="vim" v-if="showCode == 2">
						<text>vin码</text><text>{{batInfoTwoVo.vin ||'-'}}</text>
					</view>
					<template v-if="showCode == 0">
						<BatteryInfo :num="chargerInfoVo.demandCurrent" unit="A" text="需求电流"></BatteryInfo>
						<BatteryInfo :num="chargerInfoVo.demandVoltage" unit="V" text="需求电压"></BatteryInfo>
					</template>
					<template v-if="showCode == 1">
						<BatteryInfo :num="chargerInfoOneVo.demandCurrent" unit="A" text="需求电流"></BatteryInfo>
						<BatteryInfo :num="chargerInfoOneVo.demandVoltage" unit="V" text="需求电压"></BatteryInfo>
					</template>
					<template v-if="showCode == 2">
						<BatteryInfo :num="chargerInfoTwoVo.demandCurrent" unit="A" text="需求电流"></BatteryInfo>
						<BatteryInfo :num="chargerInfoTwoVo.demandVoltage" unit="V" text="需求电压"></BatteryInfo>
					</template>
					<BatteryInfo :num="current" unit="A" text="电流" v-if="showCode == 0 && chgType == 0"></BatteryInfo>
					<BatteryInfo :num="batInfoOneVo.current" unit="A" text="电流" v-if="showCode ==1 && chgType == 0">
					</BatteryInfo>
					<BatteryInfo :num="batInfoTwoVo.current" unit="A" text="电流" v-if="showCode == 2 && chgType == 0">
					</BatteryInfo>
					<BatteryInfo :num="voltage" unit="V" text="电压" v-if="showCode == 0 && chgType == 0"></BatteryInfo>
					<BatteryInfo :num="batInfoOneVo.voltage" unit="V" text="电压" v-if="showCode == 1 && chgType == 0">
					</BatteryInfo>
					<BatteryInfo :num="batInfoTwoVo.voltage" unit="V" text="电压" v-if="showCode == 2 && chgType == 0">
					</BatteryInfo>
					<BatteryInfo :num="soh" unit="%" text="SOH" v-if="showCode == 0"></BatteryInfo>
					<BatteryInfo :num="electricity" unit="V" text="额定电压"></BatteryInfo>
					<view class="info-right" :style="chargerColor" v-if="showCode == 0">
						<image class="s1" :src="require('../../../static/equipment/'+`s${chargerState[0]}`+'.png')">
							<text>{{chargerState[1]}}</text>
					</view>
					<view class="info-right" :style="chargerColorA" v-if="showCode == 1">
						<image class="s1" :src="require('../../../static/equipment/'+`s${chargerStateA[0]}`+'.png')">
							<text>{{chargerStateA[1]}}</text>
					</view>
					<view class="info-right" :style="chargerColorB" v-if="showCode == 2">
						<image class="s1" :src="require('../../../static/equipment/'+`s${chargerStateB[0]}`+'.png')">
							<text>{{chargerStateB[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>
			<view class="battery-charger">
				<BatteryCharger :chargerCode="chargerInfoVo.chargerCode" :comState="chargerInfoVo.comState"
					v-if="chargerInfoVo.chargerCode &&showCode ==0"></BatteryCharger>
				<BatteryCharger :chargerCode="chargerInfoOneVo.chargerCode" :comState="chargerInfoOneVo.comState"
					v-if="chargerInfoOneVo.chargerCode &&showCode ==1"></BatteryCharger>
				<BatteryCharger :chargerCode="chargerInfoTwoVo.chargerCode" :comState="chargerInfoTwoVo.comState"
					v-if="chargerInfoTwoVo.chargerCode &&showCode ==2"></BatteryCharger>
				<view class="battery-info" v-if="chargerInfoVo.chargerCode && showCode ==0">
					<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-info" v-if="chargerInfoOneVo.chargerCode && showCode ==1">
					<BatteryInfo :num="chargerInfoOneVo.chgCurrent" unit="A" text="充电电流"></BatteryInfo>
					<BatteryInfo :num="chargerInfoOneVo.chgVoltage" unit="V" text="充电电压"></BatteryInfo>
					<!-- <BatteryInfo :num="chargerInfoOneVo.chgCapacity" unit="kWh" text="累计充电电量"></BatteryInfo> -->
				</view>
				<view class="battery-info" v-if="chargerInfoTwoVo.chargerCode && showCode ==2">

					<BatteryInfo :num="chargerInfoTwoVo.chgCurrent" unit="A" text="充电电流"></BatteryInfo>
					<BatteryInfo :num="chargerInfoTwoVo.chgVoltage" unit="V" text="充电电压"></BatteryInfo>
					<!-- <BatteryInfo :num="chargerInfoTwoVo.chgCapacity" unit="kWh" text="累计充电电量"></BatteryInfo> -->
				</view>
				<view class="battery-charger-btn">
					<button class="Plug-gun-charging" @click="ChargingMode(chgType)">
						{{chgType == 0 ?'切换为插枪充电':'切换为线束充电'}}
					</button>
					<template v-if="chgType == 0 && showCode !=0">
						<button class="disabled Plug-gun-charging" @click="set" :disabled="true">设置</button>
					</template>
					<template v-else-if="chgType == 1  && showCode ==0">
						<button class="disabled Plug-gun-charging" @click="set" :disabled="true">设置</button>
					</template>
					<template v-else>
						<template v-if="showCode==0 && chargerInfoVo.comState===1">
							<button class="Settings Plug-gun-charging" @click="set">设置</button>
						</template>
						<template v-else-if="showCode==1 && chargerInfoOneVo.comState===1">
							<button class="Settings Plug-gun-charging" @click="set">设置</button>
						</template>
						<template v-else-if="showCode==2 && chargerInfoTwoVo.comState===1">
							<button class="Settings Plug-gun-charging" @click="set">设置</button>
						</template>
						<template v-else>
							<button class="disabled Plug-gun-charging" :disabled="true" @click="set">设置</button>
						</template>
					</template>
					<!-- <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',
			'chgType',
			'batInfoOneVo',
			'batInfoTwoVo',
			'chargerInfoOneVo',
			'chargerInfoTwoVo',
			'showCodeNum',
			'electricity',
			'ascription'
		],
		components: {
			BatteryInfo,
			BatteryStatus,
			BatteryCharger
		},
		data() {
			return {
				showCode: 0, //0电池1A枪2B枪
				Markers: 0, //标记 0代表没点击过 1代表点击过
			}
		},
		mounted() {
			this.showCode = this.showCodeNum; //根据后端返的数据动态渲染当前状态
			console.log(this.showCode, this.showCodeNum, 'this.showCode')
		},
		watch: {
			showCodeNum(newshowCodeNum, oldshowCodeNum) {
				if (this.Markers == 0) {
					this.showCode = newshowCodeNum //没点击过  根据后端数据实时渲染不同的数据
				}
			}
		},

		methods: {
			//传给父组件的showCode
			getShowCode(){
				this.$emit('getShowCode',this.showCode)
			},
			//页面切换
			actshowCode(code) {
				this.showCode = code;
				this.Markers = 1
			},
			//打开弹窗
			set() {
			  this.getShowCode()
			  this.$emit('drawer')
			},
			//切换仓内仓外
			ChargingMode(chgType) {
				//停止充电后才能切换
				let _self=this
				let data = {
					"chargerId": this.chargerInfoVo.chargerCode,
					"chargerWay": chgType == 1 ? '1' : '2',
					"controlPriority": 0,
					"powerControl": 0,
					"powerToggle": 0
				}
				uni.showModal({
					title: `请确认切换为${chgType===0?'插枪充电':'线束充电'}`,
					content: '',
					success: function(res) {
						if(res.confirm){
							if (chgType == 0 && _self.chargerInfoVo.chgState == 2) { //仓内充电 充电时不允许切换
								_self.$emit('ExchangeMessage', 'error','请停止充电后再进行切换!')
								return
							} else if (chgType == 1 && _self.chargerInfoOneVo.chgState == 2 || _self.chargerInfoTwoVo.chgState == 2) {
								_self.$emit('ExchangeMessage', 'error','请停止充电后再进行切换!')
								return
							} else {
								_self.$http.gettoggleChargeWay(data).then(res => {
									_self.$emit('ExchangeMessage', res.code === 0 ? 'success' : 'error',
										res.code === 0 ? '切换成功!' : res.msg)
								})
							}
						}
					}
					
				})
			},
			//仓内充电、断电操作
			sendCharger(name) {
				let params = {}
				if (this.chargerInfoVo.chgState === 0 || this.chargerInfoVo.chgState === 3) {
					params = {
						chargerId: this.chargerInfoVo.chargerCode * 1,
						sn: this.sn
					}
				} else if (this.chargerInfoVo.chgState === 2) {
					params = {
						chargerId: this.chargerInfoVo.chargerCode * 1
					}
				}
				let that = this
				uni.showModal({
					title: `确认发起${name}`,
					content: '',
					success: function(res) {
						if (res.confirm) { //点击确定
							//充电操作
							if (that.chargerInfoVo.chgState === 0 || that.chargerInfoVo.chgState === 3) {
								that.$emit('ExchangeMessage', 'success', '充电指令已下发')
								that.$http.startCharge(params)
									.then(res => {
										that.$emit('ExchangeMessage', res.code === 0 ? 'success' : 'error',
											res.code === 0 ? '充电成功' : '充电失败')
									}).catch(err => {
										console.error(err)
									})
							}
							//断电操作
							else if (that.chargerInfoVo.chgState === 2) {
								that.$emit('ExchangeMessage', 'success', '断电指令已下发')
								that.$http.stopCharge(params)
									.then(res => {
										that.$emit('ExchangeMessage', res.code === 0 ? 'success' : 'error',
											res.code === 0 ? '断电成功' : '断电失败')
									}).catch(err => {
										console.error(err)
									})
							}
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
			},
			//仓外·断电操作
			sendChargerClose(name, guncode, chargerId) {
				let params = {}
				params = {
					"chargerId": chargerId * 1,
					"gunNo": guncode,
				}
				let that = this
				uni.showModal({
					title: `确认发起${name}`,
					content: '',
					success: function(res) {
						if (res.confirm) { //点击确定
							//断电操作
							if (that.chargerInfoOneVo.chgState === 2 || that.chargerInfoTwoVo.chgState === 2) {
								that.$emit('ExchangeMessage', 'success', '断电指令已下发')
								console.log('stop')
								that.$http.getgunStopCharge(params)
									.then(res => {
										that.$emit('ExchangeMessage', res.code === 0 ? 'success' : 'error',
											res.code === 0 ? '断电成功' : '断电失败')
									}).catch(err => {
										console.error(err)
									})
							}
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
			},
			//仓外充电
			sendChargerOpen(name, guncode, chargerId) {
				let params = {}
				params = {
					"chargerId": chargerId * 1,
					"gunNo": guncode,
					"strategy": 4,
					"strategyParam": 0
				}
				let that = this
				uni.showModal({
					title: `确认发起${name}`,
					content: '',
					success: function(res) {
						if (res.confirm) { //点击确定
							if (that.chargerInfoOneVo.chgState === 0 || that.chargerInfoOneVo
								.chgState === 3 ||
								that.chargerInfoTwoVo.chgState === 0 || that.chargerInfoTwoVo.chgState === 3) {
								//充电操作
								that.$emit('ExchangeMessage', 'success', '充电指令已下发')
								that.$http.getgunStartCharge(params)
									.then(res => {
										that.$emit('ExchangeMessage', res.code === 0 ? 'success' : 'error',
											res.code === 0 ? '充电成功' : '充电失败')
									}).catch(err => {
										console.error(err)
									})
							}
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
			}
		},
		computed: {
			statustext() {
				if (this.comState === 1) {
					return ['通讯正常', 'success']
				} else {
					return ['通讯异常', 'warning']
				}
			},
			statustextA() {
				if (this.batInfoOneVo.conState === 1) {
					return ['已连接', 'success']
				} else {
					return ['未连接', 'warning']
				}
			},
			statustextB() {
				if (this.batInfoTwoVo.conState === 1) {
					return ['已连接', 'success']
				} else {
					return ['未连接', 'warning']
				}
			},
			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, ' 无法获取']
				}
			},
			chargerStateA() {
				if (this.chargerInfoOneVo.chgState === 1) {
					return [3, ' 准备充电']
				} else if (this.chargerInfoOneVo.chgState === 2) {
					return [1, ' 充电中']
				} else if (this.chargerInfoOneVo.chgState === 3) {
					return [2, ' 充电完成']
				} else if (this.chargerInfoOneVo.chgState === 4) {
					return [8, ' 充电失败']
				} else if (this.chargerInfoOneVo.chgState === 5) {
					return [6, ' 预约']
				} else if (this.chargerInfoOneVo.chgState === 6) {
					return [5, ' 故障']
				} else if (this.chargerInfoOneVo.chgState === 0) {
					return [7, ' 空闲']
				} else {
					return [4, ' 无法获取']
				}
			},
			chargerStateB() {
				if (this.chargerInfoTwoVo.chgState === 1) {
					return [3, ' 准备充电']
				} else if (this.chargerInfoTwoVo.chgState === 2) {
					return [1, ' 充电中']
				} else if (this.chargerInfoTwoVo.chgState === 3) {
					return [2, ' 充电完成']
				} else if (this.chargerInfoTwoVo.chgState === 4) {
					return [8, ' 充电失败']
				} else if (this.chargerInfoTwoVo.chgState === 5) {
					return [6, ' 预约']
				} else if (this.chargerInfoTwoVo.chgState === 6) {
					return [5, ' 故障']
				} else if (this.chargerInfoTwoVo.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'
				}
			},
			chargerColorA() {
				if (this.chargerInfoOneVo.chgState === 3) {
					return 'background-color:rgb(19,33,39,0.9);border:#477c62 solid 1px'
				} else if (this.chargerInfoOneVo.chgState === 1 || this.chargerInfoOneVo.chgState === 5) {
					return 'background-color:rgb(20,38,50,0.9);border:#4a9dab solid 1px'
				} else if (this.chargerInfoOneVo.chgState === 2 || this.chargerInfoOneVo.chgState === 0) {
					return ''
				} else {
					return 'background-color:rgb(32,25,36,0.9);border:#94494d solid 1px'
				}
			},
			chargerColorB() {
				if (this.chargerInfoTwoVo.chgState === 3) {
					return 'background-color:rgb(19,33,39,0.9);border:#477c62 solid 1px'
				} else if (this.chargerInfoTwoVo.chgState === 1 || this.chargerInfoTwoVo.chgState === 5) {
					return 'background-color:rgb(20,38,50,0.9);border:#4a9dab solid 1px'
				} else if (this.chargerInfoTwoVo.chgState === 2 || this.chargerInfoTwoVo.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;
				}
			}
			.topBox{
				height: 688rpx;
			}
			.container-code {
				display: flex;
				margin-bottom: 10px;
				justify-content: space-between;

				.container-code-one {
					font-size: 16px;
					color: #91FDB9;
				}

				.success {
					color: #92fdb9;
				}

				.warning {
					color: #ff4d4f;
				}

				.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;
			}
			.disabled{
				background: #606266;
				margin-left: 20px;
			}
		}
	}
</style>