Skip to content

C
cloud-platform-ui
Commit bc540816 authored by guoyou's avatar guoyou
Browse files
Options

..

parent 7a1137ef
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 195 deletions
src/views/order/orderStatistics/index.vue
View file @ bc540816
<template>
<div class="app-container calendar-list-container">
<div class="filter-container">
<el-form ref="queryForm" :model="listQuery" label-width="100px">
<el-row>
<el-col :span="5">
<el-form-item label="统计时间:">
<el-date-picker
v-model="listQuery.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changeTime"
placeholder="请选择统计时间"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="统计方式:" class="wayMsg">
<span
v-for="(item,index) in way"
:key="index"
:class="{active:isactive==item.label}"
@click="changeWay(item)"
>{{item.label}}</span>
</el-form-item>
</el-col>
<el-col :span="5" style="float:right;text-align:right">
<el-button class="filter-item" type="primary" v-waves @click="handleFilter">导出为Excel</el-button>
</el-col>
</el-row>
</el-form>
<el-table
:data="list"
border
fit
highlight-current-row
style="width: 100%"
v-loading="loading"
>
<el-table-column align="center" label="时间">
<template scope="scope">
<span>{{scope.row.timeSlot}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="普通会员购买量">
<template scope="scope">
<span>{{scope.row.pNumber}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="支付金额(普通会员)">
<template scope="scope">
<span>{{scope.row.pAmount}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="黄金会员购买量">
<template scope="scope">
<span>{{scope.row.goldNumber}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="支付金额(黄金会员)">
<template scope="scope">
<span>{{scope.row.goldAmount}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="钻石会员购买量">
<template scope="scope">
<span>{{scope.row.hNumber}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="支付金额(钻石会员)">
<template scope="scope">
<span>{{scope.row.hAmount}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="总支付金额">
<template scope="scope">
<span>{{scope.row.totalPayment}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="app-container calendar-list-container">
<div class="filter-container">
<el-form ref="queryForm" :model="listQuery" label-width="100px">
<el-row>
<el-col :span="5">
<el-form-item label="统计时间:">
<el-date-picker
v-model="listQuery.time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changeTime"
placeholder="请选择统计时间"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="统计方式:" class="wayMsg">
<span
v-for="(item,index) in way"
:key="index"
:class="{active:isactive==item.label}"
@click="changeWay(item)"
>{{item.label}}</span>
</el-form-item>
</el-col>
<el-col :span="5" style="float:right;text-align:right">
<el-button class="filter-item" type="primary" v-waves @click="handleFilter">导出为Excel</el-button>
</el-col>
</el-row>
</el-form>
<el-table :data="list" border fit highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="时间">
<template scope="scope">
<span>{{scope.row.timeSlot}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="普通会员购买量">
<template scope="scope">
<span>{{scope.row.pNumber}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="支付金额(普通会员)">
<template scope="scope">
<span>{{scope.row.pAmount}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="黄金会员购买量">
<template scope="scope">
<span>{{scope.row.goldNumber}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="支付金额(黄金会员)">
<template scope="scope">
<span>{{scope.row.goldAmount}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="钻石会员购买量">
<template scope="scope">
<span>{{scope.row.hNumber}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="支付金额(钻石会员)">
<template scope="scope">
<span>{{scope.row.hAmount}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="总支付金额">
<template scope="scope">
<span>{{scope.row.totalPayment}}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin-top:20px"
></el-pagination>
</div>
</div>
</template>
<script>
import { orderStatistics, downloadExcel } from "api/order/rentVehicle";
import { orderStatistics, downloadExcel } from 'api/order/rentVehicle'
export default {
created() {
this.getList();
},
data() {
return {
loading: false,
list: [],
// 统计时间筛选
listQuery: {
time: "null",
type: "1",
startTime: null,
endTime: null
},
//统计方式筛选
way: [
{
label: "日统计",
id: "1"
},
{
label: "周统计",
id: "2"
},
{
label: "月统计",
id: "3"
}
],
isactive: "日统计"
};
},
methods: {
//统计时间筛选
changeTime() {
!!this.listQuery.time[0]
? (this.listQuery.startTime = this.listQuery.time[0].getTime())
: (this.listQuery.startTime = null);
!!this.listQuery.time[1]
? (this.listQuery.endTime = this.listQuery.time[1].getTime())
: (this.listQuery.endTime = null);
this.getList();
},
//统计方式筛选
changeWay(val) {
this.isactive = val.label;
this.listQuery.type = val.id;
this.getList();
},
//导出
handleFilter() {
downloadExcel(this.listQuery).then(res => {
const content = res;
const blob = new Blob([content]);
const fileName = "导出信息.xlsx";
if ("download" in document.createElement("a")) {
// 非IE下载
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
});
},
//列表
getList() {
let params = {};
this.loading = true;
orderStatistics(this.listQuery).then(data => {
console.log(data);
if (data.status == 200) {
data.data.forEach(element => {
for (let i in element.members) {
if (element.members[i].level == 1) {
element.pAmount = element.members[i].amount;
element.plevel = element.members[i].level;
element.pMemberName = element.members[i].memberName;
element.pNumber = element.members[i].number;
} else if (element.members[i].level == 2) {
element.goldAmount = element.members[i].amount;
element.goldlevel = element.members[i].level;
element.goldMemberName = element.members[i].memberName;
element.goldNumber = element.members[i].number;
} else if (element.members[i].level == 3) {
element.hAmount = element.members[i].amount;
element.hlevel = element.members[i].level;
element.hMemberName = element.members[i].memberName;
element.hNumber = element.members[i].number;
}
}
});
this.list = data.data;
}
setTimeout(() => {
this.loading = false;
}, 300);
});
}
}
};
created() {
this.getList()
},
data() {
return {
loading: false,
total: null,
list: [],
// 统计时间筛选
listQuery: {
time: 'null',
type: '1',
startTime: null,
endTime: null,
time: '',
limit: 10,
page: 1
},
//统计方式筛选
way: [
{
label: '日统计',
id: '1'
},
{
label: '周统计',
id: '2'
},
{
label: '月统计',
id: '3'
}
],
isactive: '日统计'
}
},
methods: {
//统计时间筛选
changeTime() {
!!this.listQuery.time[0]
? (this.listQuery.startTime = this.listQuery.time[0].getTime())
: (this.listQuery.startTime = null)
!!this.listQuery.time[1]
? (this.listQuery.endTime = this.listQuery.time[1].getTime())
: (this.listQuery.endTime = null)
this.getList()
},
//统计方式筛选
changeWay(val) {
this.isactive = val.label
this.listQuery.type = val.id
this.getList()
},
//导出
handleFilter() {
downloadExcel(this.listQuery).then(res => {
const content = res
const blob = new Blob([content])
const fileName = '导出信息.xlsx'
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
//列表
getList() {
let params = {}
this.loading = true
orderStatistics(this.listQuery).then(data => {
console.log(data.data.list)
if (data.status == 200) {
data.data.list.forEach(element => {
for (let i in element.members) {
if (element.members[i].level == 1) {
element.pAmount = element.members[i].amount
element.plevel = element.members[i].level
element.pMemberName =
element.members[i].memberName
element.pNumber = element.members[i].number
} else if (element.members[i].level == 2) {
element.goldAmount = element.members[i].amount
element.goldlevel = element.members[i].level
element.goldMemberName =
element.members[i].memberName
element.goldNumber = element.members[i].number
} else if (element.members[i].level == 3) {
element.hAmount = element.members[i].amount
element.hlevel = element.members[i].level
element.hMemberName =
element.members[i].memberName
element.hNumber = element.members[i].number
}
}
})
this.total = data.data.total;
this.list = data.data.list
}
setTimeout(() => {
this.loading = false
}, 300)
})
}
}
}
</script>
<style>
.wayMsg span {
margin: 10px;
cursor: pointer;
margin: 10px;
cursor: pointer;
}
.active {
color: #409eff;
font-weight: bold;
color: #409eff;
font-weight: bold;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment