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

<template>
	<view class="recharge_box">
		<view class="search_box box">
			<uni-forms :modelValue="rechargeData" class="search_box_from">
				<uni-forms-item label="电池编号:" label-width="85px" label-align="right" name="chgSn">
					<uni-easyinput type="text" v-model="rechargeData.chgSn" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="充电机ID:" name="chargerId" label-width="85px" label-align="right">
					<uni-data-select v-model="rechargeData.chargerId" :localdata="chargerList" @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">
			<!-- <PublicTable :loading="loading" :tableData="tableData"></PublicTable> -->
			<view style="margin: 20px;">
				<lyy-table :headerFixed="true" :battery="1" :showLoadMore="showLoadMore" :loadMore="loadMore"
					:columnFixed=1 :contents="contents" :headers="headers" @onPullup="pullup" @charging="charging">
				</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="drawer_main">
						<rechargeDrawer :infodata="dataInfo"></rechargeDrawer>
					</view>
				</PublicDrawer>
			</scroll-view>
		</uni-drawer>
		<!-- 右侧抽屉结束 -->
	</view>
</template>

<script>
	import lyyTable from '@/components/lyy-table/lyy-table.vue'
	import rechargeDrawer from "../components/rechargeDrawer.vue"
	export default {
		name: 'recharge',
		components: {
			lyyTable,
			rechargeDrawer
		},
		data() {
			return {

				rechargeData: {
					chgSn: undefined, //电池编号
					chargerId: undefined, //充电机id号

					chgBeginTime: undefined, //开始时间
					chgEndTime: undefined, //结束时间
					// 每页数据量
					pageSize: 10,
					// 当前页
					page: 1,
					orderByWays: "desc", //降序
				},
				dataInfo: [], //弹出框数据
				titlenum: '充电明细',
				time: [], //时间
				chargerList: [], //充电机数据
				// 数据总量
				total: 0,
				loading: false,
				headers: [{
						label: '充电流水号',
						key: 'chgId',
						widtd: 200
					}, {
						label: '充电机ID',
						key: 'chargerId',
						widtd: 100
					}, {
						label: '电池编号',
						key: 'chgSn',
						widtd: 150
					}, {
						label: '充电开始时间',
						key: 'chgBeginTime',
						widtd: 200,
					}, {
						label: '充电结束时间',
						key: 'chgEndTime',
						widtd: 200,

					}, {
						label: '充电时长(秒)',
						key: 'chgDuration',
						widtd: 150,
						sort: true
					}, {
						label: '开始SOC',
						key: 'chgBeginSoc',
						widtd: 125,
					}, {
						label: '结束SOC',
						key: 'chgEndSoc',
						widtd: 125,
					},
					{
						label: '充电前电表数',
						key: 'chgBeginAmmeter',
						widtd: 125,
					},
					{
						label: '充电后电表数',
						key: 'chgEndAmmeter',
						widtd: 125,
					},
					{
						label: '充电量(kW·h)',
						key: 'chgCapacity',
						widtd: 125,
					},
					{
						label: '时段明细',
						key: 'id',
						widtd: 98,
					}
				],
				contents: [],
				showLoadMore: false,
				loadMore: 'more',

			}
		},
		mounted() {
			this.ChargeCode()
			this.getchargeList()
		},
		methods: {
			//关闭抽屉
			closeDrawer() {
				this.$refs.showRight.close();
			},
			//抽屉
			charging(item) {
				this.$refs.showRight.open();
				this.dataInfo = item.interval;
				// console.log(item, 'item')
			},
			//充电机下拉选择事件
			changeId(e) {
				console.log(e, 'e')
				this.rechargeData.chargerId = e;
			},
			//重置
			reset() {
				this.rechargeData.chgSn = undefined;
				this.rechargeData.chargerId = undefined;
				this.time = [];
				this.rechargeData.pageSize = 10;
				this.rechargeData.page = 1;
				this.rechargeData.chgBeginTime = undefined;
				this.rechargeData.chgEndTime = undefined;
				this.contents = []
				this.getchargeList()
			},
			//查询
			search() {
				if (this.time.length>0) {
					this.rechargeData.chgBeginTime = this.time[0]+' ' +'00:00:00';
					this.rechargeData.chgEndTime = this.time[1]+' ' +'23:59:59';
					// this.rechargeData.time = undefined;
				}
				this.rechargeData.page = 1
				this.contents = []
				this.getchargeList()
				console.log(this.rechargeData, 'rechargedata')
			},
			//上拉加载事件
			pullup() {
				this.showLoadMore = true
				if (this.total == this.contents.length) {
					this.loadMore = 'no-more'
					return
				} else {
					this.rechargeData.page++
					this.getchargeList()
					this.loadMore = 'loading'
				}

			},
			//请求数据列表
			getchargeList() {
				uni.showLoading({
					title:'数据加载中...'
				})
				this.$http.chargeList(this.rechargeData)
					.then(res => {
						if (res.code == 0) {
							this.showLoadMore = false
							this.contents.push(...res.data.records);
							this.total = res.data.total
							setTimeout(()=>{
								uni.hideLoading()
							},1000)
						}

					}).catch(err => {
						console.error(err)
						uni.hideLoading()
					})
			},
			//请求充电机下拉框数据
			ChargeCode() {
				this.$http.getChargeCode()
					.then(res => {
						if (res.code == 0) {
							res.data.forEach(item => {
								this.chargerList.push({
									value: item,
									text: item + '号充电机'
								})
							})

						}
					}).catch(err => {
						console.error(err)
					})
			}
		}
	}
</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;
	}
</style>