init
This commit is contained in:
MeSHard
9
src/views/reports/activation.vue
Normal file
9
src/views/reports/activation.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
9
src/views/reports/backup_and_repair.vue
Normal file
9
src/views/reports/backup_and_repair.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
183
src/views/reports/caiwu_reports.vue.vue
Normal file
183
src/views/reports/caiwu_reports.vue.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="用户">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="类型">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="起止时间">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</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 { getCaiWuData } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: 'Id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '用户',
|
||||
key: 'openid',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
key: 'type_text',
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
key: 'money',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
key: 'mark',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
key: 'createtime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
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() {
|
||||
await getCaiWuData({
|
||||
page: this.page,
|
||||
pageSize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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>
|
||||
9
src/views/reports/income_analysis.vue
Normal file
9
src/views/reports/income_analysis.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
9
src/views/reports/rate.vue
Normal file
9
src/views/reports/rate.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>11</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
9
src/views/reports/yunwei_reports.vue
Normal file
9
src/views/reports/yunwei_reports.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<view>322534</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
203
src/views/reports/yunying_reports.vue
Normal file
203
src/views/reports/yunying_reports.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="search-area">
|
||||
<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
|
||||
<FormItem prop="user" label="站点">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="充电桩">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem prop="user" label="起止时间">
|
||||
<Input type="text" v-model="formInline.user" placeholder="" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="handleSubmit('formInline')">搜索</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 } from '@/api'
|
||||
|
||||
export default {
|
||||
name: 'charging_station',
|
||||
data() {
|
||||
return {
|
||||
show_modal: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
tableHeight: 500,
|
||||
formInline: {
|
||||
user: '',
|
||||
password: '',
|
||||
},
|
||||
ruleInline: {},
|
||||
columns: [{
|
||||
title: '充电站名称',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '桩类型',
|
||||
key: 'out_trade_no',
|
||||
},
|
||||
{
|
||||
title: '桩数量',
|
||||
key: 'openid',
|
||||
},
|
||||
{
|
||||
title: '枪数量',
|
||||
key: 'total',
|
||||
},
|
||||
{
|
||||
title: '充电次数',
|
||||
key: 'total_used',
|
||||
},
|
||||
{
|
||||
title: '充电电量(度)',
|
||||
key: 'trade_state',
|
||||
},
|
||||
{
|
||||
title: '充电金额(元)',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '电费',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '服务费',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '总时长',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '尖峰平谷电量',
|
||||
key: 'success_time',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
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() {
|
||||
await getYunYingData({
|
||||
page: this.page,
|
||||
pageSize: this.pageSize,
|
||||
}).then((res) => {
|
||||
this.total = res.total
|
||||
this.data = res.data
|
||||
this.page = res.current_page
|
||||
})
|
||||
},
|
||||
handleSubmit(name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('Success!')
|
||||
} else {
|
||||
this.$Message.error('Fail!')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset(name) {
|
||||
this.$refs[name].resetFields()
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user