|
@@ -51,7 +51,7 @@
|
|
|
</el-card>
|
|
|
<el-card class="box-card" style="background:#FFC341">
|
|
|
<div class="num">{{orderMoneyAverage}}</div>
|
|
|
- <div class="num_txt">今日平均充值金额(元)</div>
|
|
|
+ <div class="num_txt">今日平均充值金额(元)</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
<div class="middle">
|
|
@@ -61,11 +61,11 @@
|
|
|
<div class="introduce">
|
|
|
<div class="round zfbbor"></div>
|
|
|
<div class="name">{{payTypeCollectList[0].payType ==1?"微信":""}}</div>
|
|
|
- <div class="ratio zfbc">{{payTypeCollectList[0].money}} ({{payTypeCollectList[0].ratio}})</div>
|
|
|
+ <div class="ratio zfbc">{{payTypeCollectList[0].money}} ({{payTypeCollectList[0].radio}})</div>
|
|
|
</div>
|
|
|
- <div class="tiao">
|
|
|
- <div class="tiao1 zfbbg"></div>
|
|
|
- <div class="tiao2 zfbbg"></div>
|
|
|
+ <div class="progress">
|
|
|
+ <div class="progress1 zfbbg"></div>
|
|
|
+ <div class="progress2 zfbbg" :style="progressWidth[0]"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -73,11 +73,11 @@
|
|
|
<div class="introduce">
|
|
|
<div class="round wxbor"></div>
|
|
|
<div class="name">{{payTypeCollectList[1].payType==2?"支付宝":""}}</div>
|
|
|
- <div class="ratio wxbc">{{payTypeCollectList[1].money}} ({{payTypeCollectList[1].ratio}})</div>
|
|
|
+ <div class="ratio wxbc">{{payTypeCollectList[1].money}} ({{payTypeCollectList[1].radio}})</div>
|
|
|
</div>
|
|
|
- <div class="tiao">
|
|
|
- <div class="tiao1 wxbg"></div>
|
|
|
- <div class="tiao2 wxbg"></div>
|
|
|
+ <div class="progress">
|
|
|
+ <div class="progress1 wxbg"></div>
|
|
|
+ <div class="progress2 wxbg" :style="progressWidth[1]"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -85,11 +85,11 @@
|
|
|
<div class="introduce">
|
|
|
<div class="round xjbor"></div>
|
|
|
<div class="name">{{payTypeCollectList[2].payType==3?"现金":""}}</div>
|
|
|
- <div class="ratio xjbc">{{payTypeCollectList[2].money}} ({{payTypeCollectList[2].ratio}})</div>
|
|
|
+ <div class="ratio xjbc">{{payTypeCollectList[2].money}} ({{payTypeCollectList[2].radio}})</div>
|
|
|
</div>
|
|
|
- <div class="tiao">
|
|
|
- <div class="tiao1 xjbg"></div>
|
|
|
- <div class="tiao2 xjbg"></div>
|
|
|
+ <div class="progress">
|
|
|
+ <div class="progress1 xjbg"></div>
|
|
|
+ <div class="progress2 xjbg" :style="progressWidth[2]"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -97,11 +97,11 @@
|
|
|
<div class="introduce">
|
|
|
<div class="round qtbor"></div>
|
|
|
<div class="name">{{payTypeCollectList[3].payType==4?"其他":""}}</div>
|
|
|
- <div class="ratio qtbc">{{payTypeCollectList[3].money}} ({{payTypeCollectList[3].ratio}})</div>
|
|
|
+ <div class="ratio qtbc">{{payTypeCollectList[3].money}} ({{payTypeCollectList[3].radio}})</div>
|
|
|
</div>
|
|
|
- <div class="tiao">
|
|
|
- <div class="tiao1 qtbg"></div>
|
|
|
- <div class="tiao2 qtbg"></div>
|
|
|
+ <div class="progress">
|
|
|
+ <div class="progress1 qtbg"></div>
|
|
|
+ <div class="progress2 qtbg" :style="progressWidth[3]"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
@@ -111,7 +111,7 @@
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</el-card>
|
|
|
<el-card class="box-card card4">
|
|
|
<div class="title">
|
|
@@ -123,29 +123,22 @@
|
|
|
<span class="el-dropdown-link">
|
|
|
{{year}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item command="2021">2021年</el-dropdown-item>
|
|
|
- <el-dropdown-item command="2022">2022年</el-dropdown-item>
|
|
|
+ <el-dropdown-menu slot="dropdown" class="dropdown">
|
|
|
+ <template v-for="item in yearList" >
|
|
|
+ <el-dropdown-item :command="item.id" :key="item.id">{{item.value}}</el-dropdown-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
<el-dropdown @command="handleMonth" class="data_type">
|
|
|
<span class="el-dropdown-link">
|
|
|
{{month}}<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
|
- <el-dropdown-menu slot="dropdown" style="height:100px;overflow-y:scroll;" >
|
|
|
- <el-dropdown-item command="1">1月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="2">2月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="3">3月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="4">4月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="5">5月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="6">6月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="7">7月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="8">8月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="9">9月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="10">10月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="11">11月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="12">12月</el-dropdown-item>
|
|
|
- <el-dropdown-item command="所有">所有</el-dropdown-item>
|
|
|
+ <el-dropdown-menu slot="dropdown" class="dropdown">
|
|
|
+ <template v-for="item in monthList" >
|
|
|
+ <el-dropdown-item :command="item.id" :key="item.id">{{item.value}}</el-dropdown-item>
|
|
|
+ </template>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
@@ -153,7 +146,7 @@
|
|
|
<div id="statistics" style="width: 100%;height:300px;margin-top:0px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -172,11 +165,12 @@ export default {
|
|
|
personnelRatioList:[], //注册人员比例
|
|
|
channelOrderMoneList:[], //渠道订单金额
|
|
|
payTypeCollectList:[
|
|
|
- {payType:null,money:null,ratio:null},
|
|
|
- {payType:null,money:null,ratio:null},
|
|
|
- {payType:null,money:null,ratio:null},
|
|
|
- {payType:null,money:null,ratio:null}
|
|
|
+ {payType:null,money:null,radio:null},
|
|
|
+ {payType:null,money:null,radio:null},
|
|
|
+ {payType:null,money:null,radio:null},
|
|
|
+ {payType:null,money:null,radio:null}
|
|
|
], //支付方式数据
|
|
|
+ progressWidth:[], //支付方式进度条
|
|
|
payTypeCollectListCount:null,
|
|
|
orderMoney:null, //今日充值金额
|
|
|
orderCount:null, //今日充值次数
|
|
@@ -190,8 +184,24 @@ export default {
|
|
|
startTime:null, // 开始时间
|
|
|
endTime:null, // 结束时间
|
|
|
month:"月",
|
|
|
+ monthList:[
|
|
|
+ {id:'1', value:'1月'},
|
|
|
+ {id:'2', value:'2月'},
|
|
|
+ {id:'3', value:'3月'},
|
|
|
+ {id:'4', value:'4月'},
|
|
|
+ {id:'5', value:'5月'},
|
|
|
+ {id:'6', value:'6月'},
|
|
|
+ {id:'7', value:'7月'},
|
|
|
+ {id:'8', value:'8月'},
|
|
|
+ {id:'9', value:'9月'},
|
|
|
+ {id:'10', value:'10月'},
|
|
|
+ {id:'11', value:'11月'},
|
|
|
+ {id:'12', value:'12月'},
|
|
|
+ {id:'所有', value:'所有'},
|
|
|
+ ],
|
|
|
monthParameter:'',
|
|
|
year:"年",
|
|
|
+ yearList:[],
|
|
|
tj1:tj1Img,
|
|
|
tj2:tj2Img,
|
|
|
dataOrderTime:[],//充值数据统计 --日期
|
|
@@ -202,15 +212,15 @@ export default {
|
|
|
loading: true,
|
|
|
// 导出遮罩层
|
|
|
open: false,
|
|
|
-
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
|
|
|
created(){
|
|
|
-
|
|
|
+ this.yearListCreate()
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.employeesCount()
|
|
|
+ this.employeesCount()
|
|
|
this.personnelRatio()
|
|
|
this.channelOrderMoney()
|
|
|
this.payTypeCollect()
|
|
@@ -219,6 +229,20 @@ export default {
|
|
|
this.dateCollect()
|
|
|
},
|
|
|
methods: {
|
|
|
+ yearListCreate(){ // 获取年列表
|
|
|
+ let startYear = 2021;
|
|
|
+ let endYear = new Date().getFullYear();
|
|
|
+ let arr = []
|
|
|
+ for(let i = startYear; i<=endYear; i++){
|
|
|
+ arr.push(i)
|
|
|
+ }
|
|
|
+ this.yearList = arr.map(item=>{
|
|
|
+ return {
|
|
|
+ id:item,
|
|
|
+ value:item + '年'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
employeesCount() {//注册总人数
|
|
|
employeesCountApi().then(response => {
|
|
|
this.employeesCountNum = response.data;
|
|
@@ -244,7 +268,7 @@ export default {
|
|
|
}else{
|
|
|
this.personnelRatioList[i].ratio = ((this.personnelRatioList[i].value / total) *100).toFixed(2) + '%'
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
this.drawLine1();
|
|
|
});
|
|
@@ -268,9 +292,8 @@ export default {
|
|
|
}else{
|
|
|
this.channelOrderMoneyList[i].ratio = ((this.channelOrderMoneyList[i].value / total) *100).toFixed(2) + '%'
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
- console.log(this.channelOrderMoneyList)
|
|
|
this.drawLine3();
|
|
|
});
|
|
|
},
|
|
@@ -282,8 +305,13 @@ export default {
|
|
|
total = Number(total) + Number(this.payTypeCollectList[i].money)
|
|
|
}
|
|
|
for(let i = 0; i<this.payTypeCollectList.length; i++){
|
|
|
- this.payTypeCollectList[i].ratio = ((this.payTypeCollectList[i].money / total) * 100).toFixed(2) + '%'
|
|
|
+ this.payTypeCollectList[i].radio = ((this.payTypeCollectList[i].money / total) * 100).toFixed(2) + '%'
|
|
|
}
|
|
|
+ this.progressWidth = this.payTypeCollectList.map(item=>{
|
|
|
+ return {
|
|
|
+ width:item.radio
|
|
|
+ }
|
|
|
+ })
|
|
|
});
|
|
|
},
|
|
|
orderMoneyList() {// 今日充值信息
|
|
@@ -295,14 +323,11 @@ export default {
|
|
|
}else{
|
|
|
this.orderMoneyAverage = (this.orderMoney / this.orderCount).toFixed(2) + '%'
|
|
|
}
|
|
|
- console.log(response)
|
|
|
-
|
|
|
});
|
|
|
},
|
|
|
collect() {// 消费数据统计
|
|
|
collectApi().then(response => {
|
|
|
this.collectList = response.data
|
|
|
- console.log(response)
|
|
|
});
|
|
|
},
|
|
|
handleMonth(month) {
|
|
@@ -338,7 +363,7 @@ export default {
|
|
|
let lastDay= new Date(2019,month1,0).getDate()
|
|
|
this.resetDataAndStartEnd(0, this.year, this.monthParameter, this.monthParameter, lastDay)
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
resetDataAndStartEnd(type, year, monthStart, monthEnd, lastDay){
|
|
@@ -416,7 +441,7 @@ export default {
|
|
|
lineStyle: {
|
|
|
color: '#000',
|
|
|
width: 1, //这里是为了突出显示加上的
|
|
|
- opacity: .5
|
|
|
+ opacity: .5
|
|
|
}
|
|
|
},
|
|
|
},
|
|
@@ -426,12 +451,12 @@ export default {
|
|
|
lineStyle: {
|
|
|
color: '#000',
|
|
|
width: 1, //这里是为了突出显示加上的
|
|
|
- opacity: .5
|
|
|
+ opacity: .5
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
|
|
|
-
|
|
|
+
|
|
|
series: [
|
|
|
{
|
|
|
// name: 'Email',
|
|
@@ -450,10 +475,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
]
|
|
|
};
|
|
|
statistics.setOption(option4);
|
|
@@ -464,7 +489,7 @@ export default {
|
|
|
window.onresize = function() {
|
|
|
channel.resize();
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
// 指定图表的配置项和数据
|
|
|
var option3 = {
|
|
|
title: {
|
|
@@ -478,7 +503,7 @@ export default {
|
|
|
bottom: '0%',
|
|
|
left: 'left',
|
|
|
left: '25%'
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
// series: [
|
|
|
// {
|
|
@@ -532,7 +557,7 @@ export default {
|
|
|
window.onresize = function() {
|
|
|
user.resize();
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
// 指定图表的配置项和数据
|
|
|
var option1 = {
|
|
|
tooltip: {
|
|
@@ -560,12 +585,12 @@ export default {
|
|
|
// show: false,
|
|
|
// position: 'inside',
|
|
|
// formatter: '{b}: {c}({d}%)'
|
|
|
-
|
|
|
+
|
|
|
// },
|
|
|
// },
|
|
|
// label: {
|
|
|
// show: false,
|
|
|
-
|
|
|
+
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// label: {
|
|
@@ -596,8 +621,8 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
user.setOption(option1);
|
|
|
},
|
|
|
}
|
|
@@ -665,12 +690,10 @@ export default {
|
|
|
margin:30px auto 0;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
+ width:100%;
|
|
|
&>div{
|
|
|
display: inline-block;
|
|
|
}
|
|
|
- // .el-icon-s-custom{
|
|
|
- // font-size:30px;
|
|
|
- // }
|
|
|
.num{
|
|
|
font-size: 30px;
|
|
|
margin:0 16px;
|
|
@@ -679,7 +702,7 @@ export default {
|
|
|
width:100%;
|
|
|
margin-left:-20%;
|
|
|
text-align: center;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
.num_txt{
|
|
|
font-size: 12px;
|
|
@@ -690,7 +713,7 @@ export default {
|
|
|
width:100%;
|
|
|
margin-left:-20%;
|
|
|
text-align: center;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -722,7 +745,7 @@ export default {
|
|
|
font-size: 26px;
|
|
|
margin-top:5px;
|
|
|
width:100%;
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
.num_txt{
|
|
|
font-size: 14px;
|
|
@@ -731,15 +754,15 @@ export default {
|
|
|
margin-right:14px;
|
|
|
width:100%;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.box-card:nth-child(2){
|
|
|
margin-left:20px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -767,7 +790,7 @@ export default {
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
color:#fff;
|
|
|
-
|
|
|
+
|
|
|
.num{
|
|
|
font-size: 20px;
|
|
|
display: block;
|
|
@@ -783,11 +806,11 @@ export default {
|
|
|
.box-card:nth-child(2),.box-card:nth-child(3){
|
|
|
margin-left:12.5%;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
.middle{
|
|
|
.el-card{
|
|
|
- width:45%;
|
|
|
+ width:48%;
|
|
|
float: left;
|
|
|
padding:0 !important;
|
|
|
.el-card__body{
|
|
@@ -803,10 +826,10 @@ export default {
|
|
|
background-color: #FAFAFA;
|
|
|
// padding:10px 20px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
.el-card:nth-child(2){
|
|
|
- margin-left:10%;
|
|
|
+ margin-left:4%;
|
|
|
}
|
|
|
}
|
|
|
.bottom{
|
|
@@ -823,7 +846,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.card4{
|
|
@@ -849,11 +872,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
.zf{
|
|
|
// padding:0 20px;
|
|
@@ -917,7 +940,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
- .tiao{
|
|
|
+ .progress{
|
|
|
margin-top:0px;
|
|
|
position: relative;
|
|
|
height:8px;
|
|
@@ -928,23 +951,34 @@ export default {
|
|
|
top:0;
|
|
|
left:0;
|
|
|
}
|
|
|
- .tiao1{
|
|
|
+ .progress1{
|
|
|
width:100%;
|
|
|
z-index: 0;
|
|
|
opacity: .2;
|
|
|
}
|
|
|
- .tiao2{
|
|
|
- width:20%;
|
|
|
+ .progress2{
|
|
|
+ width:0%;
|
|
|
+ transition-property:width;
|
|
|
+ transition-duration:1s;
|
|
|
z-index: 1;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
.zf:nth-child(1){
|
|
|
margin-top:-20px !important;
|
|
|
}
|
|
|
+.data_type{
|
|
|
+ border:1px solid #E4E4E4 !important;
|
|
|
+ color:#999;
|
|
|
|
|
|
+}
|
|
|
+.dropdown{
|
|
|
+ max-height:150px;
|
|
|
+ overflow-y:scroll;
|
|
|
+ color:#999;
|
|
|
+}
|
|
|
+.el-dropdown-menu__item{
|
|
|
+ color:#999;
|
|
|
+}
|
|
|
</style>
|
|
|
-
|