app-station-control-frontend_v1/pages/service-recode/components/change.vue

<template>
	<view class="recharge_box">
		<view class="search_box box">
			<uni-forms :modelValue="changeData" class="search_box_from">
				<uni-forms-item label="车牌号码:" label-width="85px" label-align="right" name="vehiclePlate">
					<uni-easyinput type="text" v-model="changeData.vehiclePlate" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="换电结果:" name="swapState" label-width="85px" label-align="right" >
					<uni-data-select v-model="changeData.swapState" :localdata="range" @change="changeId"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="换电日期:" name="time" label-width="85px" label-align="right" class="last_box">
					<uni-datetime-picker v-model="time" type="daterange" rangeSeparator="至"/>
				</uni-forms-item>
			</uni-forms>
			<view class="box_btn">
				<view class="cx_btn" @click="search">
					查询
				</view>
				<view class="cz_btn" @click="reset">
					重置
				</view>
			</view>
		</view>
		<view class="main_table box">
			<view style="margin: 20px;">
				<lyy-table @drawer='drawer' :headerFixed="true" :battery="1" :showLoadMore="showLoadMore" :loadMore="loadMore" :columnFixed = 1 :contents="changelist" :headers="headers" @onPullup="pullup"></lyy-table>
			</view>
		</view>
		<!--右侧抽屉 -->
		<uni-drawer ref="showRight" mode="right" :width="400" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<PublicDrawer :flag="true" :title="titlenum" @closeDrawer="closeDrawer">
					<view class="header_drawer_btn">
						<view class="header_drawer_btn_left" :class="batteryInfoActive == 0?'active':''" @click="batteryInfoActive = 0">
							基本信息
						</view>
						<view class="header_drawer_btn_right" :class="batteryInfoActive == 1?'active':''" @click="batteryInfoActive = 1">
							车辆信息
						</view>
						<view class="header_drawer_btn_right" :class="batteryInfoActive == 2?'active':''" @click="batteryInfoActive = 2">
							预选电池
						</view>
						<view class="header_drawer_btn_right" :class="batteryInfoActive == 3?'active':''" @click="batteryInfoActive = 3">
							同步信息
						</view>
					</view>
					<view class="drawer_main">
						<changeDrawer :batteryInfoActive = 'batteryInfoActive' :infodata = "dataInfo"></changeDrawer>
					</view>
				</PublicDrawer>
			</scroll-view>
		</uni-drawer>
		<!-- 右侧抽屉结束 -->
	</view>
</template>

<script>
	import lyyTable from '@/components/lyy-table/lyy-table.vue'
	import changeDrawer from "../components/changeDrawer.vue"
	export default {
		name: 'change',
		components:{
			lyyTable,changeDrawer
		},
		data() {
			return {
				changeData: {
					 vehiclePlate: undefined, // 车牌号
					swapState: undefined, //换电结果
					// 每页数据量
					pageSize: 10,
					// 当前页
					page: 1,
					swapBeginTime: undefined,
					swapEndTime: undefined,
					 orderByWays: 'desc'// 排序方式
				},
				dataInfo:{},
				batteryInfoActive:0,//0代表基本信息1代表车辆信息2预选电池3同步信息
				titlenum:'换电详情',
				time:[],//换电日期
				range: [
					{
						value: 4,
						text: "全部"
					},{
						value: 0,
						text: "不完整"
					},
					{
						value: 1,
						text: "成功"
					},
					{
						value: 2,
						text: "失败"
					},
					{
						value: 3,
						text: "换电错误"
					},
					
				],
				headers:[{
					label: '换电编号',
					key: 'swapId',
					widtd: 150
				}, {
					label: '车牌号',
					key: 'vehiclePlate',
					widtd: 100
				}, 
				{
					label: '车辆识别码',
					key: 'vehicleVin',
					widtd: 100
				},{
					label: '换电开始时间',
					key: 'swapBeginTime',
					widtd: 200
				}, {
					label: '安装满电时长',
					key: 'fullDuration',
					widtd: 150,
				},{
					label:'换电时长',
					key:'swapDuration',
					widtd:130,
					
				},{
					label: '亏电电池SN',
					key: 'vehicleSn',
					widtd: 200,
				}, {
					label: '亏电电池SOC',
					key: 'vehicleSoc',
					widtd: 125,
				}, {
					label: '亏电电池SOH',
					key: 'vehicleSoh',
					widtd: 125,
				},  {
					label: '满电电池SN',
					key: 'swapSn',
					widtd: 200,
				},  {
					label: '满电电池SOC',
					key: 'swapSoc',
					widtd: 125,
				},  {
					label: '满电电池SOH',
					key: 'swapSoh',
					widtd: 125,
				},  {
					label: '换电结果',
					key: 'swapState',
					widtd: 125,
				}, 
				{
					label: '操作',
					key: 'id',
					widtd: 98,
				}],
				changelist:[],
				
				// 数据总量
				total: 0,
				loading: false,
				showLoadMore: false,
				loadMore: 'more',
			}
		},
		mounted() {
			this.getswapList()
		},
		methods: {
			//关闭抽屉
			closeDrawer() {
				this.$refs.showRight.close();
			},
			//充电机下拉选择事件
			changeId(e) {
				if(e == 4){
					e = ''
				}
				this.changeData.swapState = e
				console.log(e, 'e')
			},
			//请求数据列表
			getswapList(){
				this.$http.swapList(this.changeData)
					.then(res => {
						if(res.code == 0){
							this.showLoadMore = false
							res.data.records.forEach(item=>{
								if(item.swapState == 0){
									item.swapState = '不完整'
								}else if(item.swapState == 1){
									item.swapState = '换电成功'
								}else if(item.swapState == 2){
									item.swapState = '换电失败'
								}else{
									item.swapState = '换电错误'
								}
							})
							this.changelist.push(...res.data.records)
							this.total = res.data.total;
						}
					}).catch(err => {
						console.error(err)
					})
			},
			//重置
			reset(){
				this.changeData.page = 1;
				this.changeData.swapState = undefined;
				this.changeData.swapBeginTime = undefined;
				this.changeData.swapEndTime = undefined;
				this.changeData.vehiclePlate = undefined;
				this.time = [];
				this.changelist = []
				this.getswapList()
			},
			//查询
			search(){
				if(this.time.length>0){
					this.changeData.swapBeginTime = this.time[0] +' ' +'00:00:00';
					this.changeData.swapEndTime = this.time[1]+' ' +"23:59:59";
				}
				this.changeData.page = 1
				this.changelist = []
				this.getswapList()
			},
			//下拉加载
			pullup(){
				this.showLoadMore = true
				if (this.total == this.changelist.length) {
					this.loadMore = 'no-more'
					return
				} else {
					this.changeData.page++
					this.getswapList()
					this.loadMore = 'loading'
				}
			},
			//抽屉
			drawer(item) {
				// console.log(1111111111111111)
				this.$refs.showRight.open();
				this.dataInfo = item;
				// console.log(item, 'item')
			},
			//关闭抽屉
			closeDrawer(){
				this.$refs.showRight.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 1040px;
		height: 66px;
		background: #111827;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		border-radius: 2px 2px 2px 2px;
		border: 1px solid #192337;
		// margin-top: 20px;
	}
	::v-deep .search_box_from{
		padding-top: 15px;
		span{
			display: flex;
		}
	}
	.search_box{
		display: flex;
		justify-content: space-between;
		.box_btn{
			display: flex;
			margin-top: 16px;
			padding-right: 16px;
			.cx_btn{
				width: 60px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				background: #91FDB9;
				border-radius: 2px 2px 2px 2px;
				color: black;
				font-size: 14px;
				margin-right: 5px;
			}
			.cz_btn{
				width: 60px;
				height: 34px;
				text-align: center;
				line-height: 34px;
				border-radius: 2px 2px 2px 2px;
				border: 1px solid #263042;
				color: #fff;
				font-size: 14px;
			}
		}
	}
	.main_table {
		height: 574px;
		margin-top: 20px;
	}
	::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;
		}
	}
	::v-deep .uni-select__selector{
		background: #111827;
		border:1px solid #263042;
		color: #606266;
		z-index: 9999999;
	}
	::v-deep .uni-date-x{
		background: none;
	}
	::v-deep .uni-date-x--border{
		border: none;
	}
	::v-deep .uni-select{
		border: none;
	}
	::v-deep .uni-forms-item{
		width: 250px;
	}
	::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-date-x{
		color:#fff;
	}
	.last_box{
		width: 390px;
	}
	.header_drawer_btn{
		display: flex;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		.header_drawer_btn_left{
			width: 74px;
			height: 32px;
			background: #263042;
			border-radius: 2px 0px 0px 2px;
			line-height: 32px;
			text-align: center;
		}
		.header_drawer_btn_right{
			line-height: 32px;
			text-align: center;
			width: 74px;
			height: 32px;
			background: #263042;
			border-radius: 0px 2px 2px 0px;
		}
		.active{
			color: black;
			background: #91FDB9;
		}
	}
	.drawer_main{
		padding-top: 20px;
	}
</style>