charge-pile-system/src/views/reports/yunying_reports.vue

<template>
	<div class="container">
		<div class="search-area">
			<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
				<div>
					<FormItem prop="user" label="报表类型">
						<Space direction="vertical" size="large">
							<RadioGroup v-model="formInline.animal" @on-change="changeRadio">
								<Radio :label="1">充电桩分类运营统计</Radio>
								<Radio :label="2">充电桩单桩统计</Radio>
								<Radio :label="3" disabled>VIN充电统计</Radio>
								<Radio :label="4" disabled>二维码充电统计</Radio>
								<Radio :label="5">充电订单流水</Radio>
							</RadioGroup>
						</Space>
					</FormItem>
				</div>
				<FormItem prop="user" label="站点">
					<Select v-model="formInline.charge_station_id" style="width:200px" @on-change="changeStation">
						<Option v-for="item in stationData" :value="item.charge_station_id"
							:key="item.charge_station_id">{{ item.charge_station_name }}</Option>
					</Select>
				</FormItem>
				<FormItem prop="user" label="充电桩" v-if="formInline.animal == 2">
					<Select v-model="formInline.charge_pile_id" style="width:200px">
						<Option v-for="item in pileData" :value="item.charge_pile_id" :key="item.charge_pile_id">
							{{ item.ConnectorID }}
						</Option>
					</Select>
				</FormItem>
				<FormItem prop="user" label="起止时间">
					<DatePicker type="daterange" placement="bottom-end" placeholder="请选择时间" style="width: 200px"
						@on-change="chage" />
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formInline')"><Icon type="ios-search" />生成报表</Button>
					<Button style="margin-left: 8px" @click="resetSearch"><Icon type="md-refresh" />重置</Button>
					<!-- <Button style="margin-left: 8px" @click="report"><Icon type="md-arrow-down" />导出报表</Button> -->
				</FormItem>
			</Form>
		</div>
		<div class="table-container">
			<Table border :columns="columns" stripe :height="tableHeight" :data="data">
				<template #action="{ row, index }">
					<!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> -->
				</template>
			</Table>
			<Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
				@on-page-size-change="onChangePageSize" />
		</div>

	</div>
</template>

<script>
	import {
		getYunYingData,
		getStationList,
		getPileList,
	} from '@/api'

	export default {
		name: 'charging_station',
		data() {
			return {
				show_modal: false,
				page: 1,
				pageSize: 10,
				total: 100,
				tableHeight: 500,
				formInline: {
					animal: 1,
					charge_station_id: '',
					charge_pile_id: '',
					start_time: '',
					end_time: '',
				},
				ruleInline: {},
				columns: [],
				columns_1: [{
						title: '充电站名称',
						key: 'charge_station_name',
					},
					{
						title: '桩类型',
						key: 'type',
					},
					{
						title: '桩数量',
						key: 'pile_num_2',
					},
					{
						title: '枪数量',
						key: 'pile_num',
					},
					{
						title: '充电次数(次)',
						key: 'order_num',
					},
					{
						title: '充电电量(度)',
						key: 'power',
					},
					{
						title: '充电金额(元)',
						key: 'money',
					},
					{
						title: '电费(元)',
						key: 'elec',
					},
					{
						title: '服务费(元)',
						key: 'sevice',
					},
					{
						title: '总时长(小时)',
						key: 'length',
					},
					{
						title: '操作',
						slot: 'action',
						width: 150,
						align: 'center',
					},
				],
				columns_2: [{
						title: '充电桩ID',
						key: 'charge_pile_id',
					},
					{
						title: '桩名称',
						key: 'ConnectorID',
					},
					{
						title: '充电站名称',
						key: 'charge_station_name',
					},
					{
						title: '枪数量',
						key: 'pile_num',
					},
					{
						title: '充电次数(次)',
						key: 'order_num',
					},
					{
						title: '充电电量(度)',
						key: 'power',
					},
					{
						title: '充电金额(元)',
						key: 'money',
					},
					{
						title: '电费(元)',
						key: 'elec',
					},
					{
						title: '服务费(元)',
						key: 'sevice',
					},
					{
						title: '总时长(小时)',
						key: 'length',
					},
					{
						title: '操作',
						slot: 'action',
						width: 150,
						align: 'center',
					},
				],
				columns_5: [{
						title: '充电订单号',
						key: 'order_number',
					},
					{
						title: '充电站名称',
						key: 'charge_station_name',
					},
					{
						title: '桩名称',
						key: 'ConnectorID',
					},
					{
						title: '充电停止原因',
						key: 'stop_type_text',
					},
					{
						title: '车架号',
						key: 'vin',
					},
					{
						title: '操作',
						slot: 'action',
						width: 150,
						align: 'center',
					},
				],
				data: [],
				phone: '',
				stationData: [],
				pileData: [],
			}
		},
		mounted() {
			this.getList()
			this.getStationList()
			this.getPileList()
			this.calculateTableHeight()
			window.addEventListener('resize', this.calculateTableHeight)
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.calculateTableHeight)
		},
		methods: {
			calculateTableHeight() {
				// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
				const searchHeight = document.querySelector('.search-area').offsetHeight
				const pageHeight = 32 // 分页组件大约高度
				const margins = 40 // 上下边距总和
				this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 130
			},
			async getList() {
				if (this.formInline.animal == 1) {
					this.columns = this.columns_1
				} else if (this.formInline.animal == 2) {
					this.columns = this.columns_2
				} else if (this.formInline.animal == 5) {
					this.columns = this.columns_5
				}
				await getYunYingData({
					page: this.page,
					pageSize: this.pageSize,
					...this.formInline,
				}).then((res) => {
					this.total = res.data.total
					this.data = res.data.data
				})
			},
			async getStationList() {
				await getStationList({
					page: 1,
					pageSize: 999,
				}).then((res) => {
					this.stationData = res.data.data
				})
			},
			async getPileList() {
				await getPileList({
					page: 1,
					pageSize: 999,
					charge_station_id: this.formInline.charge_station_id,
				}).then((res) => {
					this.pileData = res.data.data
				})
			},
			handleSubmit() {
				this.getList()
			},
			resetSearch() {
				this.formInline = {
					animal: 1,
					charge_station_id: '',
					charge_pile_id: '',
					start_time: '',
					end_time: '',
				}
				this.getList()
			},
			show(index) {
				this.$Modal.info({
					title: 'User Info',
					content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
				})
			},
			onChangePage(e) {
				if (this.page != e) {
					this.page = e
					this.getList()
				}
			},
			onChangePageSize(e) {
				if (this.pageSize != e) {
					this.page = 1
					this.pageSize = e
					this.getList()
				}
			},
			changeStation() {
				if (this.formInline.animal == 2) {
					this.getPileList()
				}
			},
			chage(e) {
				this.formInline.start_time = ''
				this.formInline.end_time = ''
				this.formInline.start_time = e[0]
				this.formInline.end_time = e[1]
			},
			changeRadio(e) {
				this.page = 1
				this.pageSize = 10
			},
			report() {
				this.$Message.info('测试中')
			},
		},
	}
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}

	.action-btn {
		margin: 20px 0;
		background-color: white;
		padding: 20px;
		border: 1px solid #F3F7FD;
		border-radius: 15px;
		display: flex;
		align-items: center;

		button {
			margin-right: 20px;
		}
	}

	.table-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.page {
		margin-top: 10px;
		text-align: right;
	}

	.search-area {
		background-color: white;
		padding-top: 20px;
		border: 1px solid #F3F7FD;
		border-radius: 15px;
	}
</style>