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">
				<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="120px" 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="120px" 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="120px" 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':'kWh'}}
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>

</template>

<script>
	export default {
		props: ['infodata'],
		data() {
			return {
				
				fromData: {
					arr: [{
						text: 'A枪',
						value: '0'
					}, {
						text: 'B枪',
						value: '1'
					}],
					arrType: [{
							text: '桩自主控制功率',
							value: '0'
						},
						{
							text: '功率值',
							value: '1'
						},
						{
							text: '功率百分比',
							value: '2'
						}, {
							text: '输出电流',
							value: '3'
						}
					],
					gunNo: '',
					comState: 1, //充电类型
					Guncall: '',
					setType: '',
					cangnum:0,//仓号
					powerNum:'',
				},


			}
		},
		methods: {
			//下拉事件
			changeId() { 
				console.log(123)
			},
			//下拉事件
			changegun() {

			},
			//取消
			close() {
				this.$emit('closeDrawer')
			},
			// 保存
			SubmitPublic() {
				this.$emit('save',this.fromData)
			}
		},
		mounted() {
			this.fromData.comState = this.infodata.chgType
			if(this.fromData.comState == 0){ //0是插枪充电 1是线束充电
				this.fromData.arr = [ {text: "A枪",value: "0",},{text: "B枪",value: "1",}]
			}else{
				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;
		}
	}

	.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: #606266;
		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;
	}

	.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>