Commit 557c6fe6 authored by Mac's avatar Mac

报表

parent a44fadf7
<template>
<div class="onlineRetailersdata">
<div class="el-card__header">
<span>电商数据</span>
<div style="display: flex;flex-direction: row;align-items: center">
<!---->
<el-button type="primary" class="el-button--small" @click="Export">导出全部</el-button>
</div>
</div>
<div class="content">
<div style="display: flex;flex-direction: row;align-items: center">
<!-- <div class="block" style="margin-left: 10px;">
<el-date-picker style="padding: 3px 10px;width: 380px;height: 32px" v-model="value" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
@change="change" align="right">
</el-date-picker>
</div> -->
<div class="block">
<el-date-picker
v-model="msg.Month"
type="month"
format='yyyy-MM'
value-format="yyyy-MM"
@change='getmonth'
placeholder="选择月">
</el-date-picker>
</div>
</div>
</div>
<div style="padding: 20px ;background: #FFF;">
<el-table :data="averageData" v-loading="loading" header-cell-class-name="headClass" style="width: 100%" border header-row-class-name='angclass' row-class-name="angclass">
<el-table-column label="" prop="OrderNo" width='80' fixed>
<template slot-scope="scope">
<span>平均</span>
</template>
</el-table-column>
<el-table-column label="平均付款人数(天)" prop='AvgPeopleNum' width='125'></el-table-column>
<el-table-column label="平均付款单数" prop="AvgOrderNum" width='125'></el-table-column>
<el-table-column label="平均付款金额" prop="AvgPayMoney" width='120'></el-table-column>
<el-table-column label="平均购买件数" prop="AvgBuyNum" width='120'></el-table-column>
<el-table-column label="平均每人购买单数" prop="AvgAvgOrderNum" width='125'></el-table-column>
<el-table-column label="平均每人购买件数" prop="AvgAvgBuyNum" width='125'></el-table-column>
<el-table-column label="平均每单单价" prop="AvgAvgUnitPrice" width='120'></el-table-column>
<el-table-column label="平均每人购买单价" prop="AvgAvgBuyPrice" width='125'></el-table-column>
<el-table-column label="平均会员累计数" prop="AvgMemberNum" width='120'></el-table-column>
<el-table-column label="平均付款累计人数" prop="AvgPaymentNum" width='125'></el-table-column>
<el-table-column label="平均会员下订单转换率" prop="AvgMOrderRate" width='155'></el-table-column>
<el-table-column label="平均复购人数" prop="AvgReBuyNum" width='120'></el-table-column>
<el-table-column label="平均复购率" prop="AvgReBuyRate" width='120'></el-table-column>
<el-table-column label="平均新人下单" prop="AvgNewPeopleNum" width='120'></el-table-column>
<el-table-column label="平均普象" prop="AvgPXNum" ></el-table-column>
<el-table-column label="平均VIP" prop="AvgVipNum" ></el-table-column>
<el-table-column label="平均银象" prop="AvgYXNum" ></el-table-column>
<el-table-column label="平均金象" prop="AvgJXNum" ></el-table-column>
</el-table>
<el-table :data="RList" v-loading="loading" header-cell-class-name="headClass" style="width: 100%;margin-top: 20px;" border :row-class-name="tableRowClassName" :cell-style="columnStyle">
<el-table-column label="日期" prop="DateStr" width='80' fixed>
<template slot-scope="scope">
<span>{{scope.row.hasOwnProperty('DateStr')?scope.row.DateStr:scope.row.Date}}</span>
</template>
</el-table-column>
<el-table-column label="付款人数" prop='PeopleNum' width='125'>
<template slot-scope="scope">
<span v-if='scope.row.PeopleNum>=0'>{{scope.row.PeopleNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.PeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="付款单数" prop="OrderNum" width='125'>
<template slot-scope="scope">
<span v-if='scope.row.OrderNum>=0'>{{scope.row.OrderNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.OrderNum}}</span>
</template>
</el-table-column>
<el-table-column label="付款金额" prop="PayMoney" width='120'>
<template slot-scope="scope">
<span v-if='scope.row.PayMoney>=0'>{{scope.row.PayMoney}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.PayMoney}}</span>
</template>
</el-table-column>
<el-table-column label="购买件数" prop="BuyNum" width='120'>
<template slot-scope="scope">
<span v-if='scope.row.BuyNum>=0'>{{scope.row.BuyNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.BuyNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均每人购买单数" prop="AvgOrderNum" width='125'>
<template slot-scope="scope">
<span v-if='scope.row.AvgOrderNum>=0'>{{scope.row.AvgOrderNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.AvgOrderNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均每人购买件数" prop="AvgBuyNum" width='125'>
<template slot-scope="scope">
<span v-if='scope.row.AvgBuyNum>=0'>{{scope.row.AvgBuyNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.AvgBuyNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均每单单价" prop="AvgUnitPrice" width='120'>
<template slot-scope="scope">
<span v-if='scope.row.AvgUnitPrice>=0'>{{scope.row.AvgUnitPrice}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.AvgUnitPrice}}</span>
</template>
</el-table-column>
<el-table-column label="平均每人购买单价" prop="AvgBuyPrice" width='125'>
<template slot-scope="scope">
<span v-if='scope.row.AvgBuyPrice>=0'>{{scope.row.AvgBuyPrice}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.AvgBuyPrice}}</span>
</template>
</el-table-column>
<el-table-column label="会员累计数" prop="MemberNum" width='120'>
<template slot-scope="scope">
<span v-if='scope.row.MemberNum>=0'>{{scope.row.MemberNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.MemberNum}}</span>
</template>
</el-table-column>
<el-table-column label="付款累计人数" prop="PaymentNum" width='125'>
<template slot-scope="scope">
<span v-if='scope.row.PaymentNum>=0'>{{scope.row.PaymentNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.PaymentNum}}</span>
</template>
</el-table-column>
<el-table-column label="会员下订单转换率" prop="MOrderRate" width='155'>
<template slot-scope="scope">
<span v-if='scope.row.MOrderRate>=0'>{{scope.row.MOrderRate}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.MOrderRate}}</span>
</template>
</el-table-column>
<el-table-column label="复购人数" prop="ReBuyNum" >
<template slot-scope="scope">
<span v-if='scope.row.ReBuyNum>=0'>{{scope.row.ReBuyNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.ReBuyNum}}</span>
</template>
</el-table-column>
<el-table-column label="复购率" prop="ReBuyRate" >
<template slot-scope="scope">
<span v-if='scope.row.PeopleNum>=0'>{{scope.row.PeopleNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.PeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="新人下单" prop="NewPeopleNum" >
<template slot-scope="scope">
<span v-if='scope.row.NewPeopleNum>=0'>{{scope.row.NewPeopleNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.NewPeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="普象" prop="PXNum" >
<template slot-scope="scope">
<span v-if='scope.row.PeopleNum>=0'>{{scope.row.PeopleNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.PeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="VIP" prop="VipNum" >
<template slot-scope="scope">
<span v-if='scope.row.VipNum>=0'>{{scope.row.VipNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.VipNum}}</span>
</template>
</el-table-column>
<el-table-column label="银象" prop="YXNum" >
<template slot-scope="scope">
<span v-if='scope.row.YXNum>=0'>{{scope.row.YXNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.YXNum}}</span>
</template>
</el-table-column>
<el-table-column label="金象" prop="JXNum" >
<template slot-scope="scope">
<span v-if='scope.row.JXNum>=0'>{{scope.row.JXNum}}</span>
<span v-else style="color: #FD0F05;">{{scope.row.JXNum}}</span>
</template>
</el-table-column>
</el-table>
<el-table :data="averageData" v-loading="loading" header-cell-class-name="headClass" style="width: 580px;margin-top: 20px;" border header-row-class-name='angclass' row-class-name="angclass">
<el-table-column label="" prop="OrderNo" width='80' fixed>
<template slot-scope="scope">
<span>月小计</span>
</template>
</el-table-column>
<el-table-column label="付款人数累计" prop='TotalPeopleNum' width='125'></el-table-column>
<el-table-column label="付款单数累计" prop="TotalOrderNum" width='125'></el-table-column>
<el-table-column label="付款金额累计" prop="TotalPayMoney" width='120'></el-table-column>
<el-table-column label="购买件数累计" prop="TotalBuyNum" ></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "onlineRetailersdata",
data() {
return {
value: [],
msg: {
Month:'',//月份
},
tableData: [],//总数据
RList:[],//月份数据
averageData:[],//平均数据
loading: false,
}
},
created() {
let nowtime = new Date()
this.msg.Month = nowtime.getFullYear() + '-' +((nowtime.getMonth()+1)<10 ?'0'+(nowtime.getMonth()+1):nowtime.getMonth()+1)
this.getDateList()
},
methods: {
getmonth(e){
this.getDateList()
},
getDateList() {
this.loading = true;
this.mallapipost("/api/LiveHouse/GetDSMonthStatistics", this.msg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.tableData = res.data.data;
// this.List = []
this.RList = this.tableData.RList;
// let data = JSON.push(JSON.stringify(this.RList))
// data.forEach((x,i)=>{
// })
this.averageData = [];
this.averageData.push(this.tableData)
} else {
this.Info(res.data.message);
}
})
},
Export() {
let msg = this.msg
msg = JSON.parse(JSON.stringify(msg));
this.GetMallLocalFile(
"/api/LiveHouse/GetDSMonthStatisticsToExcel",
msg,
"电商数据.xls"
);
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getDateList();
},
change(val) {
if (val == null) {
this.value = '';
this.msg.StartDate = '';
this.msg.EndDate = '';
}
this.msg.pageIndex = 1;
this.getTotalOrderProfitLoss()
},
tableRowClassName({row, rowIndex}){
if(row.hasOwnProperty('Date') && row.Date=='环比成长' ){
return 'huanbichengz'
}else if((row.hasOwnProperty('Date') && row.Date=='平均')|| row.hasOwnProperty('DateStr')){
return 'qthuanbicheng'
}else if(row.hasOwnProperty('Date') && row.Date=='月平均'){
return 'monthstyel'
}
},
columnStyle({row, column, rowIndex, columnIndex}){
if(row.hasOwnProperty('DateStr') && (columnIndex==1|| columnIndex==2||columnIndex==3||columnIndex==4)){
return 'background:#FFF;'
}
}
}
}
</script>
<style>
.onlineRetailersdata .el-card__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 18px 20px;
}
.onlineRetailersdata .el-button--small {
padding: 9px 15px;
}
.onlineRetailersdata .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
margin-left: 20px;
}
.onlineRetailersdata .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.onlineRetailersdata .content .searchInput {
line-height: normal;
display: inline-table;
border-collapse: separate;
border-spacing: 0;
width: 250px;
margin-right: 20px;
}
.onlineRetailersdata .content {
background: #fff;
margin-top: 10px;
padding: 15px;
box-sizing: border-box;
}
.onlineRetailersdata .el-icon-date {
line-height: 24px;
}
.onlineRetailersdata .el-range-separator {
line-height: 24px;
}
.onlineRetailersdata .just {
color: rgb(104, 207, 61)
}
.onlineRetailersdata .negative {
color: red
}
.onlineRetailersdata .el-input__icon {
line-height: 24px;
}
.onlineRetailersdata .el-table td,
.el-table th {
padding: 3px 0;
}
.onlineRetailersdata .el-table {
font-size: 13px;
}
.onlineRetailersdata .el-select__tags-text {
display: inline-block;
width: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.onlineRetailersdata .el-select__tags {
max-width: 400px;
}
.onlineRetailersdata .Subtotal {
width: 100%;
margin: 10px 0;
display: flex;
flex-direction: row;
align-items: center;
background: #f2f2f2;
font-size: 12px;
}
.onlineRetailersdata .Subtotal_item {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 50px;
background: #fff;
padding: 20px;
}
.onlineRetailersdata .Subtotal_item .Subtotal_t {
margin: 3px 0;
font-size: 12px;
width: 90px;
display: inline-block;
}
.onlineRetailersdata .ProfitLoss {
display: flex;
flex-direction: row;
align-items: center;
background: #fff;
}
.onlineRetailersdata .ProfitLoss_xbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: #fff;
}
.onlineRetailersdata .diaBox{
display: flex;
flex-direction: column;
align-items: center;
}
.onlineRetailersdata .el-table .angclass{
background: #FDC022;
}
.onlineRetailersdata .el-table .huanbichengz{
background: #9DC2E4;
}
.onlineRetailersdata .el-table .qthuanbicheng{
background: #FEFF30;
}
.onlineRetailersdata .el-table .monthstyel{
background: #F6CAAD;
}
.onlineRetailersdata .el-table .whitestyle{
background: #FFF;
}
</style>
\ No newline at end of file
...@@ -3943,6 +3943,14 @@ export default { ...@@ -3943,6 +3943,14 @@ export default {
title: '粉象损益核算' title: '粉象损益核算'
}, },
}, },
{ //财务 电商数据
path: '/onlineRetailersdata',
name: 'onlineRetailersdata',
component: resolve => require(['@/components/FinancialModule/ReportForm/onlineRetailersdata'], resolve),
meta: {
title: '电商数据'
},
},
{ //财务 线路收客 { //财务 线路收客
path: '/LineReceiver', path: '/LineReceiver',
name: 'LineReceiver', name: 'LineReceiver',
......
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