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

<template>
	<view class="">
		<view class="drawerBox">
			<view class="top">
				<view class="title">充电设置</view>
				<view class="handler">
					<view class="cancel" @click="close">取消</view>
					<view class="save" @click="SubmitPublic">保存</view>
				</view>
			</view>
		</view>
		<view class="main_drawe">
			<uni-forms :modelValue="fromData">
				<view class="chargeAway">充电方式【{{fromData.chargerAway}}】</view>
				<view class="chargeCont">
					<view class="gunleft" v-if="infodata.showCode==2 && infodata.chgType==1">
						<view class="gun">B</view>
						<view class="power">
							<view>{{$checks.powerFitler(fromData.powerObj.powerType)}}</view>
							<view>{{fromData.powerObj.power?fromData.powerObj.power+'kW':'—'}}</view>
						</view>
					</view>
					<view class="gunleft" v-else>
						<view class="gun">A</view>
						<view class="power">
							<view>{{$checks.powerFitler(fromData.powerObj.powerType)}}</view>
							<view>{{fromData.powerObj.power?fromData.powerObj.power+'kW':'—'}}</view>
						</view>
					</view>
				</view>
				<view class="chargeAway">设置</view>
				<!-- <uni-forms-item label="当前充电:" name="name" label-align="right" label-width="120px">
					<uni-easyinput type="text" v-model="fromData.comState== 0 ?'线束充电':'插枪充电'"
						placeholder="请输入" disabled />
				</uni-forms-item> -->

				<uni-forms-item label="枪号:" name="arr" label-width="66px" label-align="right">
					<uni-data-select v-model="fromData.Guncall" :localdata="fromData.arr"
						@change="changegun">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="类型:" name="arrType" label-width="66px" label-align="right">
					<uni-data-select v-model="fromData.setType" :localdata="fromData.arrType"
						@change="changeId">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="功率:" name="name" label-align="right" label-width="66px" v-if="fromData.setType !=0">
					<uni-easyinput type="number" v-model="fromData.powerNum" placeholder="请输入"
						maxlength="4" />
					<view class="kwh">
						{{fromData.setType == 2 ?'%': fromData.setType == 3 ?'A':'kW'}}
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>

</template>

<script>
	export default {
		props: ['infodata'],
		data() {
			return {

				fromData: {
					arr: [],
					arrType: [{
							text: '桩自主控制功率',
							value: '0'
						},
						{
							text: '功率值',
							value: '1'
						},
						// {
						// 	text: '功率百分比',
						// 	value: '2'
						// }, {
						// 	text: '输出电流',
						// 	value: '3'
						// }
					],
					gunNo: '',
					comState: 1, //充电类型
					Guncall: '',
					setType: '',
					cangnum: 0, //仓号
					powerNum: '',
					powerObj: {
						type: null,
						power: null,
						powerType: null
					}, //充电设置功率
					chargerAway:null,
				},


			}
		},
		methods: {
			//获取充个设置数据
			getChargePower(){
				let type=null
				  if(this.infodata.chgType==0){
					type=1
				  }else{
					  if(this.infodata.showCode==1){
						type=3
					  }else{
						type=4
					  }
				  }
				this.$http.getChargePower({chargerId:this.infodata.chargerInfoVo.chargerCode,type}).then(res=>{
					if(res.code===0){
					  this.fromData.powerObj=res.data
					}
				  })
			},
			//下拉事件
			changeId() {

			},
			//下拉事件
			changegun() {

			},
			//取消
			close() {
				this.$emit('closeDrawer')
			},
			// 保存
			SubmitPublic() {
				this.$emit('save', this.fromData)
			}
		},
		mounted() {
			this.getChargePower()
			this.fromData.comState = this.infodata.chgType
			if (this.fromData.comState == 1) { //1是插枪充电 0是线束充电
				this.fromData.chargerAway='插枪充电'
				if(this.infodata.showCode==1){
					this.fromData.arr = [{
						text: "A枪",
						value: "0",
					}]
				}else{
					this.fromData.arr = [{
						text: "B枪",
						value: "1",
					}]
				}
				
			} else {
				this.fromData.chargerAway='线束充电'
				this.fromData.arr = [{
					text: "A枪",
					value: "0",
				}]
			}
			this.fromData.cangnum = this.infodata.chargerInfoVo.chargerCode
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep .uni-forms-item__content {
		background: rgba(255, 255, 255, 0);
		border-radius: 2px 2px 2px 2px;
		border: 1px solid #263042;

		.uni-easyinput__content {
			background: none !important;
			border: none !important;
			color: #fff;
		}
	}
	.chargeAway{
	    background-color: #1c263a;
	    width: 100%;
	    height: 34px;
	    line-height: 34px;
	    color: white;
	    font-weight: 600;
	    font-size: 15px;
	    text-indent: 15px;
	    margin-bottom: 26px;
	  }
	  .chargeCont{
	    display: flex;
	    margin-left: 15px;
		margin-bottom: 26px;
	    .gunleft{
	      display: flex;
	      width: 50%;
	      .gun{
	        width: 56px;
	        height: 56px;
	        line-height: 56px;
	        text-align: center;
	        border: #1c263a solid 1px;
	        color: white;
	        font-size: 24px;
	        font-weight: 600;
	      }
	      .power{
	        display: flex;
	        flex-direction: column;
	        color: white;
	        font-size: 16px;
	        padding-left: 18px;
	        justify-content: space-around;
	      }
	    }
	
	  }
	.kwh {
		width: 50px;
		height: 35px;
		background: #263042;
		font-size: 14px;
		font-weight: 400;
		color: #4C5D71;
		line-height: 35px;
		position: absolute;
		right: 0;
		top: 0px;
		text-align: center;
	}

	::v-deep .uni-select__selector {
		background: #111827;
		border: 1px solid #263042;
		color: white;
		z-index: 9999999;
	}

	::v-deep .uni-select {
		border: none;
	}

	::v-deep .uni-popper__arrow::after {
		display: none;
	}

	::v-deep .uni-popper__arrow {
		display: none;
	}

	::v-deep .uni-select__input-text {
		color: #fff;
	}
	::v-deep .uni-forms-item__label{
		color: white;
		font-weight: bold;
	}
	.main_drawe {
		padding: 20px;
		margin-top: 80px;
	}

	.drawerBox {
		display: flex;
		flex-direction: column;
		height: 100%;

		.top {
			width: 100%;
			height: 74px;
			line-height: 54px;
			border-bottom: 1px solid rgba(65, 74, 99, 0.5);
			box-sizing: border-box;
			z-index: 999;
			padding: 0px 20px;
			display: flex;
			padding-top: 20px;
			background-color: #141A25;
			position: fixed;
			top: 0;

			.title {
				min-width: 74px;
				white-space: nowrap;
				font-size: 16px;
				font-weight: 500;
				color: #FFFFFF;
				position: relative;
			}

			.title::before {
				content: '';
				width: 100%;
				position: absolute;
				height: 2px;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
				bottom: -1px;
			}

			.close {
				width: 24px;
				height: 24px;
				color: #FFFFFF;
				margin-left: auto;
				font-size: 14px;
				text-align: center;
				vertical-align: middle;
			}

			.handler {
				display: flex;
				margin-left: auto;
				height: 54px;
				align-items: center;

				.cancel {
					width: 60px;
					height: 54px;
					border-radius: 2px;
					border: 1px solid #263042;
					font-size: 14px;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 54px;
				}

				.save {
					width: 60px;
					height: 54px;
					background: #91FDB9;
					border-radius: 2px;
					text-align: center;
					line-height: 54px;
					font-size: 14px;
					font-weight: 400;
					color: black;
				}
			}
		}
	}
</style>