Skip to content

S
SuperMan
Commit 2b4e3448 authored by Mac's avatar Mac
Browse files
Options

修改电商报表

parent 5a802e93
Show whitespace changes
Inline Side-by-side
Showing with 225 additions and 133 deletions
src/components/FinancialModule/ReportForm/onlineRetailersdata.vue
View file @ 2b4e3448
......@@ -31,9 +31,9 @@
</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>
<div style="padding: 15px ;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' >
<template slot-scope="scope">
<span>平均</span>
</template>
......@@ -49,132 +49,142 @@
<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="AvgMOrderRate" width='155'>
<template slot-scope="scope">
<span>{{scope.row.AvgMOrderRate}}%</span>
</template>
</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="AvgReBuyRate" width='120'>
<template slot-scope="scope">
<span>{{scope.row.AvgReBuyRate}}%</span>
</template>
</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>
<el-table-column label="平均普象" prop="AvgPXNum" width='90'></el-table-column>
<el-table-column label="平均VIP" prop="AvgVipNum" width='90'></el-table-column>
<el-table-column label="平均银象" prop="AvgYXNum" width='90'></el-table-column>
<el-table-column label="平均金象" prop="AvgJXNum" width='90'></el-table-column>
</el-table> -->
<el-table :data="RList" v-loading="loading" header-cell-class-name="headClass" style="width: 100%;" 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>
<span v-if="scope.row.hasOwnProperty('Date')&&scope.row.Date=='隐藏'" style="opacity: 0;">{{scope.row.Date}}</span>
<span v-else>{{scope.row.hasOwnProperty('DateStr')?scope.row.DateStr:scope.row.Date}}</span>
</template>
</el-table-column>
<el-table-column label="付款人数" prop='PeopleNum' width='125'>
<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>
<span v-if="getisred(scope.row.PeopleNum) == true" style="color: #FD0F05;">{{scope.row.PeopleNum}}</span>
<span v-else>{{scope.row.PeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="付款单数" prop="OrderNum" width='125'>
<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>
<span v-if="getisred(scope.row.OrderNum) == true" style="color: #FD0F05;">{{scope.row.OrderNum}}</span>
<span v-else>{{scope.row.OrderNum}}</span>
</template>
</el-table-column>
<el-table-column label="付款金额" prop="PayMoney" width='120'>
<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>
<span v-if="getisred(scope.row.PayMoney) == true" style="color: #FD0F05;">{{scope.row.PayMoney}}</span>
<span v-else>{{scope.row.PayMoney}}</span>
</template>
</el-table-column>
<el-table-column label="购买件数" prop="BuyNum" width='120'>
<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>
<span v-if="getisred(scope.row.BuyNum) == true" style="color: #FD0F05;">{{scope.row.BuyNum}}</span>
<span v-else>{{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>
<span v-if="getisred(scope.row.AvgOrderNum) == true" style="color: #FD0F05;">{{scope.row.AvgOrderNum}}</span>
<span v-else>{{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>
<span v-if="getisred(scope.row.AvgBuyNum) == true" style="color: #FD0F05;">{{scope.row.AvgBuyNum}}</span>
<span v-else>{{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>
<span v-if="getisred(scope.row.AvgUnitPrice) == true" style="color: #FD0F05;">{{scope.row.AvgUnitPrice}}</span>
<span v-else>{{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>
<span v-if="getisred(scope.row.AvgBuyPrice) == true" style="color: #FD0F05;">{{scope.row.AvgBuyPrice}}</span>
<span v-else>{{scope.row.AvgBuyPrice}}</span>
</template>
</el-table-column>
<el-table-column label="会员累计数" prop="MemberNum" width='120'>
<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>
<span v-if="getisred(scope.row.MemberNum) == true" style="color: #FD0F05;">{{scope.row.MemberNum}}</span>
<span v-else>{{scope.row.MemberNum}}</span>
</template>
</el-table-column>
<el-table-column label="付款累计人数" prop="PaymentNum" width='125'>
<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>
<span v-if="getisred(scope.row.PaymentNum) == true" style="color: #FD0F05;">{{scope.row.PaymentNum}}</span>
<span v-else>{{scope.row.PaymentNum}}</span>
</template>
</el-table-column>
<el-table-column label="会员下订单转换率" prop="MOrderRate" width='155'>
<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>
<span v-if="getisred(scope.row.MOrderRate) == true" style="color: #FD0F05;">{{scope.row.MOrderRate}}</span>
<span v-else>{{scope.row.MOrderRate}}</span>
</template>
</el-table-column>
<el-table-column label="复购人数" prop="ReBuyNum" >
<el-table-column label="平均复购人数" prop="ReBuyNum" width='120'>
<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>
<span v-if="getisred(scope.row.ReBuyNum) == true" style="color: #FD0F05;">{{scope.row.ReBuyNum}}</span>
<span v-else>{{scope.row.ReBuyNum}}</span>
</template>
</el-table-column>
<el-table-column label="复购率" prop="ReBuyRate" >
<el-table-column label="平均复购率" prop="ReBuyRate" width='120'>
<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>
<span v-if="getisred(scope.row.ReBuyRate) == true" style="color: #FD0F05;">{{scope.row.ReBuyRate}}</span>
<span v-else>{{scope.row.ReBuyRate}}</span>
</template>
</el-table-column>
<el-table-column label="新人下单" prop="NewPeopleNum" >
<el-table-column label="平均新人下单" prop="NewPeopleNum" width='120'>
<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>
<span v-if="getisred(scope.row.NewPeopleNum) == true" style="color: #FD0F05;">{{scope.row.NewPeopleNum}}</span>
<span v-else>{{scope.row.NewPeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="普象" prop="PXNum" >
<el-table-column label="平均普象" prop="PXNum" width='90'>
<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>
<span v-if="getisred(scope.row.PXNum) == true" style="color: #FD0F05;">{{scope.row.PXNum}}</span>
<span v-else>{{scope.row.PXNum}}</span>
</template>
</el-table-column>
<el-table-column label="VIP" prop="VipNum" >
<el-table-column label="平均VIP" prop="VipNum" width='90'>
<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>
<span v-if="getisred(scope.row.VipNum) == true" style="color: #FD0F05;">{{scope.row.VipNum}}</span>
<span v-else>{{scope.row.VipNum}}</span>
</template>
</el-table-column>
<el-table-column label="银象" prop="YXNum" >
<el-table-column label="平均银象" prop="YXNum" width='90'>
<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>
<span v-if="getisred(scope.row.YXNum) == true" style="color: #FD0F05;">{{scope.row.YXNum}}</span>
<span v-else>{{scope.row.YXNum}}</span>
</template>
</el-table-column>
<el-table-column label="金象" prop="JXNum" >
<el-table-column label="平均金象" prop="JXNum" width='90'>
<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>
<span v-if="getisred(scope.row.JXNum) == true" style="color: #FD0F05;">{{scope.row.JXNum}}</span>
<span v-else>{{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">
......@@ -204,6 +214,7 @@
data() {
return {
value: [],
tableHeight: window.innerHeight - 50 - 41 - 69 -74 - 30, //窗口的高度减去你需要减去的高度
msg: {
Month:'',//月份
},
......@@ -211,6 +222,7 @@
RList:[],//月份数据
averageData:[],//平均数据
loading: false,
allList:[],
}
},
created() {
......@@ -230,12 +242,85 @@
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)=>{
// })
let data = this.tableData.RList;
this.RList = [];
let obj = {
Date:'日期',
PeopleNum:'付款人数',
OrderNum:'付款单数',
PayMoney:'付款金额',
BuyNum:'购买件数',
AvgOrderNum:'平均每人购买单数',
AvgBuyNum:'平均每人购买件数',
AvgUnitPrice:'平均每单单价',
AvgBuyPrice:'平均每人购买单价',
MemberNum:'会员累计数',
PaymentNum:'付款累计人数',
MOrderRate:'会员下订单转换率',
ReBuyNum:'复购人数',
ReBuyRate:'复购率',
NewPeopleNum:'新人下单',
PXNum:'普象',
VipNum:'VIP',
YXNum:'银象',
JXNum:'金象',
}
let obj2 = {
Date:'隐藏',
PeopleNum:'',
OrderNum:'',
PayMoney:'',
BuyNum:'',
AvgOrderNum:'',
AvgBuyNum:'',
AvgUnitPrice:'',
AvgBuyPrice:'',
MemberNum:'',
PaymentNum:'',
MOrderRate:'',
ReBuyNum:'',
ReBuyRate:'',
NewPeopleNum:'',
PXNum:'',
VipNum:'',
YXNum:'',
JXNum:'',
}
data.forEach((x,i)=>{
if(x.hasOwnProperty('Date') && x.Date == '环比成长'){
x.Date=x.Date;
x.PeopleNum=x.PeopleNum+'%';
x.OrderNum=x.OrderNum+'%';
x.PayMoney=x.PayMoney+'%';
x.BuyNum=x.BuyNum+'%';
x.AvgOrderNum=x.AvgOrderNum+'%';
x.AvgBuyNum=x.AvgBuyNum+'%';
x.AvgUnitPrice=x.AvgUnitPrice+'%';
x.AvgBuyPrice=x.AvgBuyPrice+'%';
x.MemberNum=x.MemberNum+'%';
x.PaymentNum=x.PaymentNum+'%';
x.MOrderRate=x.MOrderRate+'%';
x.ReBuyNum=x.ReBuyNum+'%';
x.ReBuyRate=x.ReBuyRate+'%';
x.NewPeopleNum=x.NewPeopleNum+'%';
x.PXNum=x.PXNum+'%';
x.VipNum=x.VipNum+'%';
x.YXNum=x.YXNum+'%';
x.JXNum=x.JXNum+'%';
this.RList.push(x)
this.RList.push(obj2)
this.RList.push(obj)
}else if(x.hasOwnProperty('Date') && x.Date == '上期平均'){
this.RList.push(x)
this.RList.push(obj2)
this.RList.push(obj)
}else{
x.MOrderRate = x.MOrderRate+'%';
x.ReBuyRate = x.ReBuyRate+'%';
this.RList.push(x)
}
})
this.averageData = [];
this.averageData.push(this.tableData)
} else {
......@@ -246,7 +331,14 @@
},
getisred(dataInfo){
if((dataInfo.toString()).indexOf('-')!=-1){
return true
}else{
return false
}
},
Export() {
let msg = this.msg
msg = JSON.parse(JSON.stringify(msg));
......@@ -278,9 +370,9 @@
tableRowClassName({row, rowIndex}){
if(row.hasOwnProperty('Date') && row.Date=='环比成长' ){
return 'huanbichengz'
}else if((row.hasOwnProperty('Date') && row.Date=='平均')|| row.hasOwnProperty('DateStr')){
}else if((row.hasOwnProperty('Date') && (row.Date=='平均'|| row.Date=='日期'))|| row.hasOwnProperty('DateStr')){
return 'qthuanbicheng'
}else if(row.hasOwnProperty('Date') && row.Date=='月平均'){
}else if(row.hasOwnProperty('Date') && (row.Date=='月平均'||row.Date == '上期平均')){
return 'monthstyel'
}
},
......
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