1
This commit is contained in:
MeSHard
@@ -2,17 +2,40 @@
|
||||
<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="站点">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
<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="充电桩">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
<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="起止时间">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
<DatePicker type="daterange" placement="bottom-end" placeholder="请选择时间" style="width: 200px"
|
||||
@on-change="chage" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
|
||||
<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>
|
||||
@@ -30,7 +53,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getYunYingData } from '@/api'
|
||||
import {
|
||||
getYunYingData,
|
||||
getStationList,
|
||||
getPileList,
|
||||
} from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
@@ -42,11 +69,15 @@
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
animal: 1,
|
||||
charge_station_id: '',
|
||||
charge_pile_id: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
columns: [],
|
||||
columns_1: [{
|
||||
title: '充电站名称',
|
||||
key: 'charge_station_name',
|
||||
},
|
||||
@@ -93,11 +124,90 @@
|
||||
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)
|
||||
},
|
||||
@@ -113,25 +223,51 @@
|
||||
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
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
async getStationList() {
|
||||
await getStationList({
|
||||
page: 1,
|
||||
pageSize: 999,
|
||||
}).then((res) => {
|
||||
this.stationData = res.data.data
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
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({
|
||||
@@ -152,6 +288,24 @@
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user