352 lines
7.9 KiB
Vue
352 lines
7.9 KiB
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> |