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