Skip to content

S
SuperMan
Commit 770e3256 authored by Mac's avatar Mac
Browse files
Options

月度报表

parent e644e2d1
Hide whitespace changes
Inline Side-by-side
Showing with 604 additions and 1 deletion
src/components/FinancialModule/ReportForm/dianshangyeardata.vue 0 → 100644
View file @ 770e3256
<template>
<div class="dianshangyeardata">
<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">
<el-date-picker
v-model="msg.StartTime"
type="month"
format='yyyy-MM'
value-format="yyyy-MM"
@change='getmonth'
placeholder="选择开始月份">
</el-date-picker>
<span style="margin: 0 10px;">-</span>
<el-date-picker
v-model="msg.EndTime"
type="month"
format='yyyy-MM'
value-format="yyyy-MM"
@change='getmonth'
placeholder="选择结束月份">
</el-date-picker>
</div>
</div>
</div>
<div style="padding: 15px ;background: #FFF;">
<el-table :data="DataList" v-loading="loading" header-cell-class-name="headClass" style="width: 100%;" border :row-class-name="tableRowClassName" :cell-style="columnStyle">
<el-table-column label="月份" prop="Date" width='80' fixed>
</el-table-column>
<el-table-column label="平均付款人数(天)" prop='MAvgPeopleNum' width='125'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.MAvgPeopleNum) == true" style="color: #FD0F05;">{{scope.row.MAvgPeopleNum}}</span>
<span v-else>{{scope.row.MAvgPeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均付款单数" prop="MAvgOrderNum" width='125'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.MAvgOrderNum) == true" style="color: #FD0F05;">{{scope.row.MAvgOrderNum}}</span>
<span v-else>{{scope.row.MAvgOrderNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均付款金额" prop="MAvgPayMoney" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.MAvgPayMoney) == true" style="color: #FD0F05;">{{scope.row.MAvgPayMoney}}</span>
<span v-else>{{scope.row.MAvgPayMoney}}</span>
</template>
</el-table-column>
<el-table-column label="平均付款件数" prop="MAvgBuyNum" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.MAvgBuyNum) == true" style="color: #FD0F05;">{{scope.row.MAvgBuyNum}}</span>
<span v-else>{{scope.row.MAvgBuyNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均每人购买单数" prop="PAvgOrderNum" width='125'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgOrderNum) == true" style="color: #FD0F05;">{{scope.row.PAvgOrderNum}}</span>
<span v-else>{{scope.row.PAvgOrderNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均每人购买件数" prop="PAvgBuyNum" width='125'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgBuyNum) == true" style="color: #FD0F05;">{{scope.row.PAvgBuyNum}}</span>
<span v-else>{{scope.row.PAvgBuyNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均每单单价" prop="PAvgUnitPrice" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgUnitPrice) == true" style="color: #FD0F05;">{{scope.row.PAvgUnitPrice}}</span>
<span v-else>{{scope.row.PAvgUnitPrice}}</span>
</template>
</el-table-column>
<el-table-column label="平均每人购买单价" prop="PAvgBuyPrice" width='125'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgBuyPrice) == true" style="color: #FD0F05;">{{scope.row.PAvgBuyPrice}}</span>
<span v-else>{{scope.row.PAvgBuyPrice}}</span>
</template>
</el-table-column>
<el-table-column label="平均会员累计数" prop="PAvgMemberNum" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgMemberNum) == true" style="color: #FD0F05;">{{scope.row.PAvgMemberNum}}</span>
<span v-else>{{scope.row.PAvgMemberNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均付款累计人数(月)" prop="PAvgPaymentNum" width='150'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgPaymentNum) == true" style="color: #FD0F05;">{{scope.row.PAvgPaymentNum}}</span>
<span v-else>{{scope.row.PAvgPaymentNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均会员下订单转换率" prop="PAvgMOrderRate" width='155'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgMOrderRate) == true" style="color: #FD0F05;">{{scope.row.PAvgMOrderRate}}</span>
<span v-else>{{scope.row.PAvgMOrderRate}}</span>
</template>
</el-table-column>
<el-table-column label="平均复购人数" prop="PAvgReBuyNum" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgReBuyNum) == true" style="color: #FD0F05;">{{scope.row.PAvgReBuyNum}}</span>
<span v-else>{{scope.row.PAvgReBuyNum}}</span>
</template>
</el-table-column>
<el-table-column label="平均复购率" prop="PAvgReBuyRate" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgReBuyRate) == true" style="color: #FD0F05;">{{scope.row.PAvgReBuyRate}}</span>
<span v-else>{{scope.row.PAvgReBuyRate}}</span>
</template>
</el-table-column>
<el-table-column label="平均新人下单" prop="PAvgNewPeopleNum" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgNewPeopleNum) == true" style="color: #FD0F05;">{{scope.row.PAvgNewPeopleNum}}</span>
<span v-else>{{scope.row.PAvgNewPeopleNum}}</span>
</template>
</el-table-column>
<el-table-column label="毛利率" prop="PAvgProfitRate" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.PAvgProfitRate) == true" style="color: #FD0F05;">{{scope.row.PAvgProfitRate}}</span>
<span v-else>{{scope.row.PAvgProfitRate}}</span>
</template>
</el-table-column>
<el-table-column label="付款人数累计" prop="PeopleNum" width='120'>
<template slot-scope="scope">
<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='120'>
<template slot-scope="scope">
<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'>
<template slot-scope="scope">
<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'>
<template slot-scope="scope">
<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="TotalPayPeople" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.TotalPayPeople) == true" style="color: #FD0F05;">{{scope.row.TotalPayPeople}}</span>
<span v-else>{{scope.row.TotalPayPeople}}</span>
</template>
</el-table-column>
<el-table-column label="普象" prop="PXNum" width='120'>
<template slot-scope="scope">
<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" width='120'>
<template slot-scope="scope">
<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" width='120'>
<template slot-scope="scope">
<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" width='120'>
<template slot-scope="scope">
<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-column label="会员总数" prop="TotalMNum" width='120'>
<template slot-scope="scope">
<span v-if="getisred(scope.row.TotalMNum) == true" style="color: #FD0F05;">{{scope.row.TotalMNum}}</span>
<span v-else>{{scope.row.TotalMNum}}</span>
</template>
</el-table-column>
</el-table>
<!-- <div style="width: 100%;display: flex;">
<div style="width: 130px;">
</div>
</div> -->
<div style="width:100%; overflow:scroll;" v-if='RateList && RateList.length>0 && loading'>
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: tablewidth+'px'}">
<tr >
<td class="qthuanbicheng" style="width: 150px;"></td>
<td class="qthuanbicheng" style="width:90px;font-size: 12px;" v-for='(x,y) in RateList' :key = 'y'>{{x.Date}}</td>
</tr>
<tr>
<td class="qthuanbicheng">平均付款人数成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.MAvgPeopleNum) == true?'#FD0F05':'#111111'}">{{x.MAvgPeopleNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">平均付款单数成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.MAvgOrderNum) == true?'#FD0F05':'#111111'}">{{x.MAvgOrderNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">平均付款金额成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.MAvgPayMoney) == true?'#FD0F05':'#111111'}">{{x.MAvgPayMoney}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">平均付款件数成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.MAvgBuyNum) == true?'#FD0F05':'#111111'}">{{x.MAvgBuyNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">平均每人购买单数成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgOrderNum) == true?'#FD0F05':'#111111'}">{{x.PAvgOrderNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">平均每人购买件数成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgBuyNum) == true?'#FD0F05':'#111111'}">{{x.PAvgBuyNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">平均每单单价成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgUnitPrice) == true?'#FD0F05':'#111111'}">{{x.PAvgUnitPrice}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">平均每人购买单价成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgBuyPrice) == true?'#FD0F05':'#111111'}">{{x.PAvgBuyPrice}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">毛利率成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgProfitRate) == true?'#FD0F05':'#111111'}">{{x.PAvgProfitRate}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">毛利成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgProfit) == true?'#FD0F05':'#111111'}">{{x.PAvgProfit}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">会员下订单成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgMOrderRate) == true?'#FD0F05':'#111111'}">{{x.PAvgMOrderRate}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">普象会员成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgPXNum) == true?'#FD0F05':'#111111'}">{{x.PAvgPXNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">VIP会员成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgVipNum) == true?'#FD0F05':'#111111'}">{{x.PAvgVipNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">银象会员成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgYXNum) == true?'#FD0F05':'#111111'}">{{x.PAvgYXNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">金象会员成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgJXNum) == true?'#FD0F05':'#111111'}">{{x.PAvgJXNum}}%</span>
</td>
</tr>
<tr>
<td class="qthuanbicheng">会员总成长率</td>
<td v-for='(x,y) in RateList' :key = 'y'>
<span :style="{color: getisred(x.PAvgTotalMNum) == true?'#FD0F05':'#111111'}">{{x.PAvgTotalMNum}}%</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "dianshangyeardata",
data() {
return {
value: '',
tableHeight: window.innerHeight - 50 - 41 - 69 -74 - 30, //窗口的高度减去你需要减去的高度
msg: {
StartTime:'2021-01',//开始月份
EndTime:'',
},
loading: false,
DataList:[],
RateList:[],
tablewidth:0,
}
},
created() {
let nowtime = new Date()
this.msg.StartTime = (nowtime.getFullYear()-1) + '-' +((nowtime.getMonth()+1)<10 ?'0'+(nowtime.getMonth()+1):nowtime.getMonth()+1)
this.msg.EndTime = nowtime.getFullYear() + '-' +((nowtime.getMonth()+1)<10 ?'0'+(nowtime.getMonth()+1):nowtime.getMonth()+1)
this.getDateList()
},
methods: {
getmonth(e){
this.getDateList()
},
getDateList() {
if(this.msg.StartTime =='' || this.msg.EndTime ==''){
this.Info('请选择结束或者结束月份')
return
}
if((new Date(this.msg.StartTime).getTime())>=(new Date(this.msg.EndTime)).getTime()){
this.msg.EndTime='';
this.Info('请选择结束月份')
return
}
this.loading = true;
this.mallapipost("/api/LiveHouse/GetDSMoreMonthStatistics", this.msg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
if(res.data.data){
this.DataList = res.data.data.DataList;
this.DataList.forEach(x=>{
x.PAvgMOrderRate = x.PAvgMOrderRate +'%';
x.PAvgReBuyRate = x.PAvgReBuyRate +'%';
x.PAvgProfitRate = x.PAvgProfitRate +'%';
})
this.RateList = res.data.data.RateList;
this.tablewidth = (this.RateList.length * 90)+150
}
} else {
this.Info(res.data.message);
}
})
},
Export() {
let msg = this.msg
msg = JSON.parse(JSON.stringify(msg));
this.GetMallLocalFile(
"/api/LiveHouse/GetDSMoreMonthStatisticsToExcel",
msg,
"电商每月统计.xls"
);
},
getisred(dataInfo){
if((dataInfo.toString()).indexOf('-')!=-1){
return true
}else{
return false
}
},
onInput() {
this.$forceUpdate()
},
tableRowClassName({row, rowIndex}){
if(row.hasOwnProperty('Date') && row.Date=='平均' ){
return 'huanbichengz'
}else{
return 'monthstyel'
}
},
columnStyle({row, column, rowIndex, columnIndex}){
if(row.hasOwnProperty('DateStr') && (columnIndex==1|| columnIndex==2||columnIndex==3||columnIndex==4)){
return 'background:#FFF;'
}
}
}
}
</script>
<style>
.dianshangyeardata .el-card__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 18px 20px;
}
.dianshangyeardata .el-button--small {
padding: 9px 15px;
}
.dianshangyeardata .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
margin-left: 20px;
}
.dianshangyeardata .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.dianshangyeardata .content .searchInput {
line-height: normal;
display: inline-table;
border-collapse: separate;
border-spacing: 0;
width: 250px;
margin-right: 20px;
}
.dianshangyeardata .content {
background: #fff;
margin-top: 10px;
padding: 15px;
box-sizing: border-box;
}
.dianshangyeardata .el-icon-date {
line-height: 24px;
}
.dianshangyeardata .el-range-separator {
line-height: 24px;
}
.dianshangyeardata .just {
color: rgb(104, 207, 61)
}
.dianshangyeardata .negative {
color: red
}
.dianshangyeardata .el-input__icon {
line-height: 24px;
}
.dianshangyeardata .el-table td,
.el-table th {
padding: 3px 0;
}
.dianshangyeardata .el-table {
font-size: 13px;
}
.dianshangyeardata .el-select__tags-text {
display: inline-block;
width: 40px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dianshangyeardata .el-select__tags {
max-width: 400px;
}
.dianshangyeardata .Subtotal {
width: 100%;
margin: 10px 0;
display: flex;
flex-direction: row;
align-items: center;
background: #f2f2f2;
font-size: 12px;
}
.dianshangyeardata .Subtotal_item {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 50px;
background: #fff;
padding: 20px;
}
.dianshangyeardata .Subtotal_item .Subtotal_t {
margin: 3px 0;
font-size: 12px;
width: 90px;
display: inline-block;
}
.dianshangyeardata .ProfitLoss {
display: flex;
flex-direction: row;
align-items: center;
background: #fff;
}
.dianshangyeardata .ProfitLoss_xbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: #fff;
}
.dianshangyeardata .diaBox{
display: flex;
flex-direction: column;
align-items: center;
}
.dianshangyeardata .el-table .angclass{
background: #FDC022;
}
.dianshangyeardata .el-table .huanbichengz{
background: #EB60BB;
}
.dianshangyeardata .qthuanbicheng{
background: #FEFF30;
width: 90px;
}
.dianshangyeardata .el-table .monthstyel{
background: #F6C8AB;
}
.dianshangyeardata .el-table .whitestyle{
background: #FFF;
}
.dianshangyeardata .el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 360px;
}
.dianshangyeardata .singeRowTable{
background: rgb(255, 255, 255);
margin-top: 20px;
}
</style>
\ No newline at end of file
src/components/FinancialModule/ReportForm/onlineRetailersdata.vue
View file @ 770e3256
......@@ -345,7 +345,7 @@
this.GetMallLocalFile(
"/api/LiveHouse/GetDSMonthStatisticsToExcel",
msg,
"电商数据.xls"
"电商月统计.xls"
);
},
......
src/router/config.js
View file @ 770e3256
......@@ -3951,6 +3951,14 @@ export default {
title: '电商数据'
},
},
{ //财务 年度电商数据
path: '/dianshangyeardata',
name: 'dianshangyeardata',
component: resolve => require(['@/components/FinancialModule/ReportForm/dianshangyeardata'], resolve),
meta: {
title: '电商数据'
},
},
{ //财务 线路收客
path: '/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