Skip to content

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

1

parent 9d13127c
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 138 deletions
src/components/FinancialModule/ReportForm/dianshangannualRatio.vue
View file @ c20d748c
<template>
<div class="dianshangyeardata">
<div class="dianshangannualRatio" ref="barparent">
<div class="el-card__header">
<span>电商年度比数据</span>
<div style="display: flex;flex-direction: row;align-items: center">
......@@ -36,66 +36,108 @@
</div>
</div>
<div style="padding: 15px ;background: #FFF;">
<div style="padding: 15px ;background: #FFF;margin-bottom: 50px;" >
<div style="width: 100%;display: flex;" v-if='YearSList && YearSList.length>0 '>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
<!-- 第一张 -->
<div style="width: 100%;" class="tablestyle" v-if='YearSList && YearSList.length>0 '>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
</div>
<div style="width:1px; overflow-x:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td style="font-size: 12px;" v-for='(x,y) in YearSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData' :key = 'index'>
<td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;" v-for='(x,y) in YearSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
</td>
</tr>
</table>
</div>
</div>
<div style="width:1px; overflow:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td style="font-size: 12px;" v-for='(x,y) in YearSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData' :key = 'index'>
<td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
</td>
</tr>
</table>
</div>
</div>
<div style="width: 100%;display: flex;" v-if='YearAvgSList && YearAvgSList.length>0 '>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td class="qthuanbicheng" style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData_t' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
<!-- 第二张 -->
<div style="width: 100%;" class="tablestyle" v-if='YearAvgSList && YearAvgSList.length>0 && type == 0'>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData_t' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
</div>
<div style="width:1px; overflow-x:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData_t' :key = 'index'>
<td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
</td>
</tr>
</table>
</div>
</div>
<div style="width:1px; overflow:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData_t' :key = 'index'>
<td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
</td>
</tr>
</table>
<!-- 第三张 -->
<div style="width: 100%;display: flex;" v-if='YearRateSList && YearRateSList.length>0 && type == 0'>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData_tr' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
</div>
<div style="width:1px; overflow-x:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData_tr' :key = 'index'>
<td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="width: 100%;display: flex;" v-if='YearRateSList && YearRateSList.length>0 '>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td class="qthuanbicheng" style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData_tr' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
<div v-if='type ==1' style="display: flex;align-items: flex-start;">
<!-- 第二张 -->
<div style="width: 100%;" class="tablestyle" v-if='YearAvgSList && YearAvgSList.length>0 '>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData_t' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
</div>
<div style="width:1px; overflow-x:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData_t' :key = 'index'>
<td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;" v-for='(x,y) in YearAvgSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}</span>
</td>
</tr>
</table>
</div>
</div>
<div style="width:1px; overflow:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData_tr' :key = 'index'>
<td class="qthuanbicheng" style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
</td>
</tr>
</table>
<!-- 第三张 -->
<div style="width: 100%;display: flex;" v-if='YearRateSList && YearRateSList.length>0 '>
<div style="width: 150px;">
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: '150px'}">
<tr > <td style="width: 150px;">年份</td> </tr>
<tr v-for='(x,y) in leftData_tr' :key = 'y'> <td class="qthuanbicheng">{{x.Name}}</td></tr>
</table>
</div>
<div style="width:1px; overflow-x:scroll;flex:1" >
<table class="singeRowTable TcNewTable" border="1" cellspacing="0" cellpadding="0" :style="{width: YearSListwidth+'px'}">
<tr > <td style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>{{x.Date}}</td></tr>
<tr v-for='(item,index) in leftData_tr' :key = 'index'>
<td :class="x.Date.indexOf('成長率')!=-1?'growthrate':'yearstyle'" style="font-size: 12px;" v-for='(x,y) in YearRateSList' :key = 'y'>
<span :style="{color: getisred(x[item.DataObj]) == true?'#FD0F05':'#111111'}">{{x[item.DataObj]}}%</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
......@@ -107,12 +149,15 @@
</template>
<script>
export default {
name: "dianshangyeardata",
name: "dianshangannualRatio",
data() {
return {
value: '',
tableHeight: window.innerHeight - 50 - 41 - 69 -74 - 30, //窗口的高度减去你需要减去的高度
tablewidth:window.innerWidth - 124,//等到表格的宽度
msg: {
StartYear:'',//开始年
EndYear:'',
......@@ -172,12 +217,18 @@
{Name:'金象会员成长率',DataObj:'PAvgJXNum'},
{Name:'会员成长率',DataObj:'PAvgTotalMNum'},
],
parentClientWidth:0,
type:0,
}
},
mounted(){
},
created() {
let nowtime = new Date()
this.msg.StartYear = (nowtime.getFullYear()-1).toString()
this.msg.StartYear = (nowtime.getFullYear()-2).toString()
this.msg.EndYear = nowtime.getFullYear().toString()
this.getDateList()
},
methods: {
......@@ -223,6 +274,7 @@
}
})
this.YearSListwidth = (this.YearSList.length * 120);
//第二张表
this.YearAvgSList = res.data.data.YearAvgSList;
this.YearAvgSList.forEach(x=>{
......@@ -238,7 +290,6 @@
x.PAvgUnitPrice = x.PAvgUnitPrice+'%';
x.PAvgMemberNum = x.PAvgMemberNum+'%';
x.PAvgPaymentNum = x.PAvgPaymentNum+'%';
x.PAvgMOrderRate = x.PAvgMOrderRate+'%';
x.PAvgReBuyNum = x.PAvgReBuyNum+'%';
x.PAvgReBuyRate = x.PAvgReBuyRate+'%';
x.PAvgNewPeopleNum = x.PAvgNewPeopleNum+'%';
......@@ -246,6 +297,9 @@
}
})
this.YearAvgSListwidth = (this.YearAvgSList.length * 120)
if(this.tablewidth>(this.YearAvgSListwidth + this.YearSListwidth + 300)+50){
this.type = 1
}
//第三张表
this.YearRateSList = res.data.data.YearRateSList;
this.YearRateSListwidth = (this.YearRateSList.length * 120)
......@@ -284,6 +338,13 @@
}
},
gechengzhangv(dataInfo){
if((dataInfo.toString()).indexOf('-')!=-1){
return true
}else{
return false
}
},
onInput() {
this.$forceUpdate()
......@@ -309,7 +370,7 @@
</script>
<style>
.dianshangyeardata .el-card__header {
.dianshangannualRatio .el-card__header {
display: flex;
flex-direction: row;
align-items: center;
......@@ -317,25 +378,28 @@
background: #fff;
padding: 18px 20px;
}
.dianshangannualRatio .tablestyle{
display: flex;
}
.dianshangyeardata .el-button--small {
.dianshangannualRatio .el-button--small {
padding: 9px 15px;
}
.dianshangyeardata .content .searchInput {
.dianshangannualRatio .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
margin-left: 20px;
}
.dianshangyeardata .content .searchInput .el-input__inner {
.dianshangannualRatio .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.dianshangyeardata .content .searchInput {
.dianshangannualRatio .content .searchInput {
line-height: normal;
display: inline-table;
border-collapse: separate;
......@@ -345,43 +409,43 @@
}
.dianshangyeardata .content {
.dianshangannualRatio .content {
background: #fff;
margin-top: 10px;
padding: 15px;
box-sizing: border-box;
}
.dianshangyeardata .el-icon-date {
.dianshangannualRatio .el-icon-date {
line-height: 24px;
}
.dianshangyeardata .el-range-separator {
.dianshangannualRatio .el-range-separator {
line-height: 24px;
}
.dianshangyeardata .just {
.dianshangannualRatio .just {
color: rgb(104, 207, 61)
}
.dianshangyeardata .negative {
.dianshangannualRatio .negative {
color: red
}
.dianshangyeardata .el-input__icon {
.dianshangannualRatio .el-input__icon {
line-height: 24px;
}
.dianshangyeardata .el-table td,
.dianshangannualRatio .el-table td,
.el-table th {
padding: 3px 0;
}
.dianshangyeardata .el-table {
.dianshangannualRatio .el-table {
font-size: 13px;
}
.dianshangyeardata .el-select__tags-text {
.dianshangannualRatio .el-select__tags-text {
display: inline-block;
width: 40px;
overflow: hidden;
......@@ -389,11 +453,11 @@
white-space: nowrap;
}
.dianshangyeardata .el-select__tags {
.dianshangannualRatio .el-select__tags {
max-width: 400px;
}
.dianshangyeardata .Subtotal {
.dianshangannualRatio .Subtotal {
width: 100%;
margin: 10px 0;
display: flex;
......@@ -403,7 +467,7 @@
font-size: 12px;
}
.dianshangyeardata .Subtotal_item {
.dianshangannualRatio .Subtotal_item {
display: flex;
flex-direction: column;
align-items: flex-start;
......@@ -412,66 +476,73 @@
padding: 20px;
}
.dianshangyeardata .Subtotal_item .Subtotal_t {
.dianshangannualRatio .Subtotal_item .Subtotal_t {
margin: 3px 0;
font-size: 12px;
width: 90px;
display: inline-block;
}
.dianshangyeardata .ProfitLoss {
.dianshangannualRatio .ProfitLoss {
display: flex;
flex-direction: row;
align-items: center;
background: #fff;
}
.dianshangyeardata .ProfitLoss_xbox {
.dianshangannualRatio .ProfitLoss_xbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background: #fff;
}
.dianshangyeardata .diaBox{
.dianshangannualRatio .diaBox{
display: flex;
flex-direction: column;
align-items: center;
}
.dianshangyeardata .angclass{
.dianshangannualRatio .angclass{
background: #FDC022;
}
.dianshangyeardata .el-table .huanbichengz{
.dianshangannualRatio .el-table .huanbichengz{
background: #EB60BB;
}
.dianshangyeardata .qthuanbicheng{
.dianshangannualRatio .qthuanbicheng{
background: #FEFF30;
width: 90px;
width: 120px;
}
.dianshangyeardata .el-table .monthstyel{
.dianshangannualRatio .el-table .monthstyel{
background: #F6C8AB;
}
.dianshangyeardata .el-table .monthstyel2{
.dianshangannualRatio .el-table .monthstyel2{
background: #F6CAAD;
}
.dianshangyeardata .el-table .monthstyel3{
.dianshangannualRatio .el-table .monthstyel3{
background: #FE9A6B;
}
.dianshangyeardata .el-table .whitestyle{
.dianshangannualRatio .el-table .whitestyle{
background: #FFF;
}
.dianshangyeardata .el-date-editor.el-input, .el-date-editor.el-input__inner {
.dianshangannualRatio .el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 360px;
}
.dianshangyeardata .singeRowTable{
.dianshangannualRatio .singeRowTable{
background: rgb(255, 255, 255);
margin-top: 20px;
}
.dianshangyeardata .growthrate{
.dianshangannualRatio .growthrate{
background: #FFF2CD;
width: 120px;
}
.dianshangannualRatio .yearstyle{
background: #FE99FD;
width: 120px;
}
.dianshangannualRatio tr{
height: 30px !important;
}
</style>
\ No newline at end of file
src/components/FinancialModule/ReportForm/dianshangyeardata.vue
View file @ c20d748c
......@@ -36,7 +36,7 @@
</div>
</div>
<div style="padding: 15px ;background: #FFF;">
<div style="padding: 15px ;background: #FFF;margin-bottom: 50px;">
<el-table :data="DataList" v-loading="loading" header-cell-class-name="headClass" header-row-class-name='angclass' style="width: 100%;" border :row-class-name="tableRowClassName" :cell-style="columnStyle">
<el-table-column label="月份" prop="Date" width='80' fixed>
......@@ -607,7 +607,9 @@
background: rgb(255, 255, 255);
margin-top: 20px;
}
.dianshangyeardata tr{
height: 30px !important;
}
</style>
\ No newline at end of file
src/components/FinancialModule/ReportForm/onlineRetailersdata.vue
View file @ c20d748c
......@@ -31,42 +31,8 @@
</div>
</div>
<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>
</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'>
<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'>
<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" 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> -->
<div style="padding: 15px ;background: #FFF;margin-bottom: 50px;">
<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">
......@@ -184,21 +150,30 @@
</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>
<div style="display: flex;margin-top: 20px;">
<el-table :data="averageData" v-loading="loading" header-cell-class-name="headClass" style="width: 580px !important;" border header-row-class-name='angclass' row-class-name="angclass">
<el-table-column label="" prop="OrderNo" fixed>
<template slot-scope="scope">
<span>月小计</span>
</template>
</el-table-column>
<el-table-column label="付款人数累计" prop='TotalPeopleNum' ></el-table-column>
<el-table-column label="付款单数累计" prop="TotalOrderNum" ></el-table-column>
<el-table-column label="付款金额累计" prop="TotalPayMoney" ></el-table-column>
<el-table-column label="购买件数累计" prop="TotalBuyNum" ></el-table-column>
</el-table>
<el-table :data="averageData" v-loading="loading" header-cell-class-name="headClass" style="width: 580px !important;margin-left: 20px;" border header-row-class-name='angclass' row-class-name="angclass">
<el-table-column label="普象累计" prop="TotalPXNum" fixed></el-table-column>
<el-table-column label="VIP累计" prop='TotalVIPNum' ></el-table-column>
<el-table-column label="银象累計" prop="TotalYXNum" ></el-table-column>
<el-table-column label="金象累计" prop="TotalJXNum" ></el-table-column>
<el-table-column label="会员总数" prop="TotalBuyNum" ></el-table-column>
</el-table>
</div>
</div>
......
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