<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-20 15:53:43
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-19 10:06:23
|
* @Description:
|
-->
|
<template>
|
<div class="home-box">
|
<v-scroll-x class="head" :style="{background:$store.state.backColor}">
|
<p class="product-item" :class="[navIndex===index?'active':'']" v-for="(item, index) in productList"
|
:key="index" @click="toggleProduct(item, index, false)">{{item.typeName}}</p>
|
</v-scroll-x>
|
|
<!-- 折线图 -->
|
<div class="chart-box">
|
<div class="flex-between-g title-top">
|
<p class="text under-text" @click="$router.push(jumpParams)">全部订单</p>
|
<p class="flex-start-g" @click="openTimeModal(false)">
|
<span class="font-12-g c-text-999-g">{{startDay}}至{{endDay}}</span>
|
<svg class="icon" aria-hidden="true" style="width:15px;height:15px;" :style="{fill:$store.state.backColor}">
|
<use xlink:href="#iconrili"></use>
|
</svg>
|
</p>
|
|
</div>
|
<section class="data-box flex-around-g text-center-g">
|
<div>
|
<h4 class="title">{{orderData.amtNum}}</h4>
|
<p class="label">{{zfblxLabel? '待确认' : '交易额'}}</p>
|
</div>
|
<div>
|
<h4 class="title" :style="{color: zfblxLabel ?'#19be6b':'#333333'}">{{orderData.orderNum}}</h4>
|
<p class="label">{{zfblxLabel? '拉新' : '交易单数'}}</p>
|
</div>
|
<div>
|
<h4 class="title" :style="{color: zfblxLabel ?'#ed4014':'#333333'}">{{calcMerNum(orderData.merNum)}}</h4>
|
<p class="label">{{dataLabel}} </p>
|
</div>
|
</section>
|
</div>
|
|
<van-popup v-model="isShoTime" position="bottom">
|
<div class="text-center-g flex-around-g time-label">
|
<p class="flex-1-g" :class="[timeIndex===0 ? 'active':'']" @click="setTimeIndex(0)">开始：{{ isMerTime ? merStartDay : startDay}}</p>
|
<p class="flex-1-g" :class="[timeIndex===1 ? 'active':'']" @click="setTimeIndex(1)">结束：{{ isMerTime ? merEndDay : endDay}}</p>
|
</div>
|
<van-datetime-picker ref='timepicker' :max-date="maxDate" :min-date="minDate" :show-toolbar="false" v-model="currentDate" @change="setTime" type="date" />
|
<van-button :color="$store.state.backColor" class="btn-time" @click="refreshData">确定</van-button>
|
</van-popup>
|
|
|
<div class="h-44"></div>
|
|
</div>
|
</template>
|
<script>
|
import { mapState, mapGetters } from 'vuex';
|
export default {
|
data() {
|
return {
|
isMerTime: false, //判断打开的是 商户统计的时间弹窗还是订单统计的
|
startDay: '', // 开始时间
|
endDay: '', //结束时间
|
merStartDay: '', // 商户统计开始时间
|
merEndDay: '', //商户统计结束时间
|
zfblxLabel: '', //拉新统计数据判断条件
|
lxWait: [], //拉新待开通
|
lxValue: [], //拉新
|
lxAdd: [], //拉新+绑卡
|
orderData:{ //订单统计数据
|
amtNum: 0,
|
merNum: 0,
|
orderNum: 0
|
},
|
merData:{ //商户统计数据
|
passNum: 0,
|
refuNum: 0,
|
sumNum: 0,
|
waitNum: 0
|
},
|
time: 0,
|
timeIndex: 0,
|
isShoTime: false,
|
currentDate: new Date(),
|
navIndex: 0,
|
productList: [], //产品列表
|
jumpParams: {}, //跳转参数
|
opt: {
|
grid: {
|
top: 30,
|
right: 0,
|
bottom: 30,
|
left: 40,
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter:function (params) {
|
if(params[0].color == '#855CFE'){
|
return String(params[0].value) + '万'
|
}else{
|
return params[0].value
|
}
|
},
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#896EDB',
|
formatter:'{value}'
|
}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
axisLine: {
|
show: false,
|
lineStyle: {
|
color: '#666'
|
}
|
}, //轴线不显示
|
axisTick: {
|
show: false
|
},
|
data: ['10日', '11日', '12日', '13日', '14日', '15日', '16日']
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
show: false,
|
lineStyle: {
|
color: '#666'
|
}
|
}, //轴线不显示
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
//纵坐标内容格式化
|
axisLabel:{
|
formatter: function (value) {
|
if (value > 10000) {
|
val = (value/10000).toFixed(2);
|
return val;
|
}
|
return value
|
}
|
}
|
},
|
series: [
|
//支付宝拉新时为待确认数据
|
{
|
data: [0, 0, 0, 0, 0, 0, 0],
|
type: 'line',
|
smooth: true,
|
symbol: 'circle', //设定为实心点
|
symbolSize: 8, //设定实心点的大小
|
itemStyle: {
|
normal: {
|
color: '#8760ff',
|
label: {
|
show: true,
|
}
|
}
|
},
|
lineStyle: {
|
normal: {
|
// color: '#333333',
|
}
|
},
|
label: {
|
formatter:function (params) {
|
// if (params[0].data > 1000) {
|
// // let data = (params[0].data/1000).toFixed(2)
|
// let value = (params[0].data/1000).toFixed(2)
|
// return String(value) + '万'
|
// } else {
|
// return value
|
// }
|
},
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: '#e7e0fd'
|
}, {
|
offset: 1,
|
color: '#fff'
|
}])
|
}
|
},
|
},
|
//拉新
|
{
|
data: [0, 0, 0, 0, 0, 0, 0],
|
type: 'line',
|
smooth: true,
|
symbol: 'circle', //设定为实心点
|
symbolSize: 8, //设定实心点的大小
|
itemStyle: {
|
normal: {
|
color: '#8760ff',
|
label: {
|
show: true,
|
}
|
}
|
},
|
lineStyle: {
|
normal: {
|
color: '#19be6b',
|
}
|
},
|
label: {
|
formatter:function (params) {
|
// if (params[0].data > 1000) {
|
// // let data = (params[0].data/1000).toFixed(2)
|
// let value = (params[0].data/1000).toFixed(2)
|
// return String(value) + '万'
|
// } else {
|
// return value
|
// }
|
},
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: '#e7e0fd'
|
}, {
|
offset: 1,
|
color: '#fff'
|
}])
|
}
|
},
|
},
|
//拉新+绑卡
|
{
|
data: [0, 0, 0, 0, 0, 0, 0],
|
type: 'line',
|
smooth: true,
|
symbol: 'circle', //设定为实心点
|
symbolSize: 8, //设定实心点的大小
|
itemStyle: {
|
normal: {
|
color: '#8760ff',
|
label: {
|
show: true,
|
}
|
}
|
},
|
lineStyle: {
|
normal: {
|
color: '#ed4014',
|
}
|
},
|
label: {
|
formatter:function (params) {
|
// if (params[0].data > 1000) {
|
// // let data = (params[0].data/1000).toFixed(2)
|
// let value = (params[0].data/1000).toFixed(2)
|
// return String(value) + '万'
|
// } else {
|
// return value
|
// }
|
},
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: '#e7e0fd'
|
}, {
|
offset: 1,
|
color: '#fff'
|
}])
|
}
|
},
|
}
|
]
|
},
|
opt2: {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
}
|
},
|
grid: {
|
top: 30,
|
right: 0,
|
bottom: 30,
|
left: 40,
|
},
|
xAxis: [{
|
type: 'category',
|
axisTick: {
|
show: false
|
},
|
axisLine: {
|
show: false,
|
lineStyle: {
|
color: '#666'
|
}
|
}, //轴线不显示
|
data: ['10日', '11日', '12日', '13日', '14日', '15日', '16日']
|
}],
|
yAxis: [{
|
type: 'value',
|
axisLine: {
|
show: false,
|
lineStyle: {
|
color: '#666'
|
}
|
}, //轴线不显示
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
}],
|
series: [{
|
name: '通过',
|
type: 'bar',
|
stack: '广告',
|
data: [0, 0, 0, 0, 0, 0, 0],
|
barWidth: 10, //柱图宽度
|
itemStyle: {
|
normal: {
|
color: '#D5C7FF',
|
}
|
},
|
},
|
{
|
name: '拒绝',
|
type: 'bar',
|
stack: '广告',
|
data: [0, 0, 0, 0, 0, 0, 0],
|
itemStyle: {
|
normal: {
|
color: '#FFB5D0',
|
}
|
},
|
},
|
{
|
name: '待审批',
|
type: 'bar',
|
stack: '广告',
|
data: [0, 0, 0, 0, 0, 0, 0],
|
itemStyle: {
|
normal: {
|
barBorderRadius: [7, 7, 0, 0],
|
color: '#FFE0C2',
|
}
|
},
|
},
|
]
|
},
|
timePicker:null,
|
}
|
},
|
computed:{
|
...mapState(['userinfo']),
|
...mapGetters(['orgType']),
|
prodId(){
|
return this.productList[this.navIndex].prodId || ''
|
},
|
// 是否是代理 或 渠道角色，只有这两个角色才显示 商户统计的数据
|
isAgent(){
|
let orgType= this.userinfo.orgType
|
return orgType ===1 || orgType ===2;
|
},
|
minDate(){
|
if(this.timeIndex===1){
|
if(this.isMerTime){
|
return new Date(this.merStartDay)
|
}else{
|
return new Date(this.startDay)
|
}
|
}
|
return new Date('2010-01-01');
|
},
|
maxDate(){
|
return new Date()
|
},
|
dataLabel(){
|
if(this.zfblxLabel == 'zfblx') {
|
return "拉新+绑卡"
|
} else {
|
if(this.orgType===1 || this.orgType===2){
|
return "交易商户数"
|
}else if(this.orgType ===3){
|
return "交易门店数"
|
}else{
|
return "交易门店数"
|
}
|
}
|
}
|
},
|
created() {
|
if(this.$route.query){
|
this.navIndex = this.$route.query.navIndex
|
this.jumpParams = {
|
path:'/order/xyg-hb',
|
query:{
|
typeId:200011,
|
prodId:30000012
|
}
|
}
|
}
|
this.initTime()
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
calcMerNum(v){
|
if(this.orgType==4 && this.zfblxLabel !='zfblx'){
|
return "—";
|
}
|
return v
|
},
|
// 初始化 统计数据
|
init() {
|
this.$api.prodListTitle().then((res) => {
|
this.productList = res.body || [];
|
// this.productList.push({
|
// icon: "https://t.finlean.com/czjc/img/prod_icon/spfx.png",
|
// mgrIsOpen: null,
|
// openStatus: "",
|
// prodId: "",
|
// statusType: "",
|
// typeId: "210000",
|
// typeName: "支付宝拉新"
|
// })
|
console.log(this.productList)
|
if (this.productList.length) {
|
let prodId = this.productList[0].prodId;
|
this.toggleProduct(this.productList[0],0,true)
|
}else{
|
let myChart = echarts.init(this.$refs.lineChart);
|
myChart.setOption(this.opt);
|
}
|
}).catch((err) => {
|
|
});
|
},
|
setTimeIndex(index){
|
this.timeIndex = index;
|
this.setPickerValue()
|
},
|
// 设置日期的值
|
setPickerValue(){
|
if(this.timePicker){
|
let timeArr = [];
|
if(this.isMerTime){
|
if(this.timeIndex===0){
|
timeArr = this.merStartDay
|
}else{
|
timeArr = this.merEndDay
|
}
|
}else{
|
if(this.timeIndex===0){
|
timeArr = this.startDay
|
}else{
|
timeArr = this.endDay
|
}
|
}
|
this.currentDate = new Date(timeArr)
|
}
|
},
|
// 初始化时间
|
initTime() {
|
let d = new Date();
|
if (d.getHours() >= 10) {
|
this.time = d.getTime()
|
} else {
|
this.time = d.getTime() - 24 * 60 * 60 * 1000
|
}
|
let h = d.getHours(),
|
day =d.getDate();
|
if(h<10){
|
day = day-1;
|
}
|
let m = d.getMonth() + 1;
|
if(m<10){
|
m ='0'+m;
|
}
|
if(day<10){
|
day ='0'+day;
|
}
|
let time = d.getFullYear() + '-' + m + '-' + day;
|
this.endDay = time;
|
this.startDay = time;
|
this.merStartDay = time;
|
this.merEndDay = time;
|
this.currentDate = new Date(time);
|
},
|
// 显示时间选择组件
|
openTimeModal(isB) {
|
console.log(111)
|
this.setPickerValue()
|
this.$nextTick(()=>{
|
this.isShoTime = true;
|
this.isMerTime = isB;
|
})
|
},
|
//设置时间
|
setTime(picker,arr) {
|
if(!this.timepicker && picker){
|
this.timePicker = picker;
|
}
|
let v =arr ? arr : picker.getValues(),
|
start = '',
|
end = '',
|
time = v[0] + '-' + v[1] + '-' + v[2];
|
if (this.isMerTime) {
|
start = 'merStartDay';
|
end = 'merEndDay';
|
|
} else {
|
start = 'startDay';
|
end = 'endDay';
|
}
|
if (this.timeIndex === 0) {
|
this[start] = time;
|
} else {
|
this[end] = time;
|
}
|
},
|
// 获取折线图统计数据
|
getAmtReport(id, lx) {
|
// console.log(lx == 'zfblx')
|
if(lx == 210000) {
|
this.$api.zfbLxWeekReport().then(res => {
|
console.log('zfbLxWeekReport')
|
this.opt.series[0].data = []
|
this.opt.series[1].data = []
|
this.opt.series[2].data = []
|
this.opt.xAxis.data = []
|
res.body.map( item => {
|
this.lxWait.push(item.dqrNum || 0)
|
this.lxValue.push(item.lxNum || 0)
|
this.lxAdd.push(item.lxAndBkNum || 0)
|
this.opt.xAxis.data.push(item.reportDate + '日')
|
})
|
this.opt.series[0].data = this.lxWait
|
this.opt.series[1].data = this.lxValue
|
this.opt.series[2].data = this.lxAdd
|
this.opt.series[0].lineStyle.normal.color = '#333333'
|
this.$forceUpdate();
|
let myChart = echarts.init(this.$refs.lineChart);
|
myChart.setOption(this.opt);
|
console.log(this.opt.series[0].data)
|
console.log(this.opt.series[1].data)
|
console.log(this.opt.series[2].data)
|
})
|
} else {
|
this.$api.getAmtReport(id).then((res) => {
|
let list = res.body || [];
|
// let list = [
|
// {timeStr: 1, amtNum: 10001},
|
// {timeStr: 2, amtNum: 10055},
|
// {timeStr: 3, amtNum: 33333},
|
// {timeStr: 4, amtNum: 4441},
|
// ]
|
this.opt.xAxis.data = [];
|
this.opt.series[0].data = [];
|
let result = list.some(function (item) {
|
return item.amtNum > 10000
|
})
|
if(result){
|
this.opt.series[0].itemStyle.normal.color = '#855CFE';
|
}else{
|
this.opt.series[0].itemStyle.normal.color = '#8760FF';
|
}
|
list.forEach(item => {
|
|
this.opt.xAxis.data.push(item.timeStr + '日')
|
// this.opt.series[0].data.push(item.amtNum)
|
// this.opt.series[0].data.push(item.amtNum)
|
if (result) {
|
this.opt.series[0].data.push((item.amtNum/10000).toFixed(2))
|
// this.opt.series[0].data.push(item.amtNum)
|
} else {
|
this.opt.series[0].data.push(item.amtNum)
|
}
|
})
|
let myChart = echarts.init(this.$refs.lineChart);
|
myChart.setOption(this.opt);
|
}).catch((err) => {
|
|
});
|
}
|
},
|
// 获取 柱状图数据
|
getMerWeeksReport() {
|
this.$api.getMerWeeksReport().then((res) => {
|
let list = res.body || [];
|
this.opt2.xAxis[0].data = [];
|
this.opt2.series[0].data = [];
|
this.opt2.series[1].data = [];
|
this.opt2.series[2].data = [];
|
list.forEach(item => {
|
this.opt2.xAxis[0].data.push(item.dd + '日')
|
this.opt2.series[0].data.push(item.merReport.passNum || 0)
|
this.opt2.series[1].data.push(item.merReport.refuNum || 0)
|
this.opt2.series[2].data.push(item.merReport.waitNum || 0)
|
})
|
var barChart = echarts.init(this.$refs.barChart);
|
barChart.setOption(this.opt2);
|
}).catch((err) => {
|
|
});
|
},
|
// 时间切换刷新统计数据
|
refreshData(){
|
if(this.timePicker){
|
let arr = this.timePicker.getValues()
|
this.setTime(null,arr)
|
}
|
if(this.isMerTime){
|
this.getMerReport(this.merStartDay,this.merEndDay)
|
}else{
|
this.getOrderReport(this.prodId,this.startDay,this.endDay)
|
}
|
},
|
// 获取订单统计
|
getOrderReport(prodId,startDay,endDay, lx){
|
if(this.zfblxLabel == 'zfblx') {
|
this.$api.zfbLxReport({
|
endTime: endDay,
|
staTime: startDay
|
}).then(({body}) => {
|
this.orderData = {
|
amtNum: body.dqrNum || 0,
|
merNum: body.lxAndBkNum || 0,
|
orderNum: body.lxNum || 0
|
}
|
this.isShoTime = false;
|
})
|
} else {
|
this.$api.getOrderReport({
|
startDay,
|
endDay,
|
prodId,
|
pageType:1,
|
}).then(({body}) => {
|
this.orderData = {
|
amtNum: body.amtNum || 0,
|
merNum: body.merNum || 0,
|
orderNum: body.orderNum || 0
|
}
|
this.isShoTime = false;
|
}).catch((err) => {
|
|
})
|
}
|
},
|
// 商户统计
|
getMerReport(staTime,endTime){
|
|
this.$api.getMerReport({
|
staTime,
|
endTime,
|
}).then(({body}) => {
|
this.merData = {
|
passNum: body.passNum || 0,
|
refuNum: body.refuNum || 0,
|
sumNum: body.sumNum || 0,
|
waitNum: body.waitNum || 0
|
}
|
this.isShoTime = false;
|
}).catch((err) => {
|
|
});
|
|
},
|
//切换产品
|
toggleProduct(item, index,isGetChartData) {
|
console.log(item)
|
this.zfblxLabel = ''
|
this.opt.series[0].data = []
|
this.opt.series[1].data = []
|
this.opt.series[2].data = []
|
if (item.typeId == 200015) {
|
this.$router.push({
|
path: "/order/order-lthyj",
|
query: {
|
typeId: item.typeId,
|
id:this.$route.query.id,
|
prodId:item.prodId
|
}
|
})
|
}
|
if(item.typeId == 210000) {
|
this.zfblxLabel = 'zfblx'
|
// console.log(this.zfblxLabel)
|
}
|
this.navIndex = index;
|
// return
|
let path = "";
|
// 200000- 支付宝拉新 200001-信用卡分期 200002-花呗分期 200003-裸机分期 200004-购机直降 200005-智享花 200008-商户收款 200009-花呗合约机 200010-商户贴息,200011信用购
|
switch (item.typeId * 1) {
|
case 210000:
|
path = "/order/lxOredr";
|
break;
|
case 200001:
|
path = "/order/credit";
|
break;
|
case 200002:
|
path = "/order/hb";
|
break;
|
case 200003:
|
path = "/order/phone";
|
break;
|
case 200004:
|
path = "/order/gjzj";
|
break;
|
case 200005:
|
path = "/order/zxh";
|
break;
|
case 200008:
|
path = "/order/dmf";
|
break;
|
case 200009:
|
path = "/order/hb";
|
break;
|
case 200010:
|
path = "/order/shtx";
|
break;
|
case 200014:
|
path = "/order/hbjl";
|
break;
|
case 200016:
|
path = "/order/wxScore";
|
break;
|
case 200017:
|
path = "/order/gzzj";
|
break;
|
}
|
switch (item.prodId * 1) {
|
case 30000011:
|
path='/order/xyg';
|
break;
|
case 30000012:
|
path='/order/xyg-hb';
|
break;
|
}
|
this.jumpParams = {
|
path,
|
query: {
|
typeId: item.typeId,
|
id:this.$route.query.id,
|
prodId:item.prodId
|
}
|
}
|
// console.log(this.jumpParams)
|
this.getAmtReport(item.prodId, item.typeId)
|
this.getOrderReport(this.prodId,this.startDay,this.endDay, item.typeId)
|
if(this.isAgent && isGetChartData){
|
this.getMerReport(this.merStartDay,this.merEndDay)
|
this.getMerWeeksReport()
|
}
|
}
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.home-box {
|
padding-bottom: 15px;
|
}
|
|
.h-44{
|
/*height: 44px;*/
|
background-color: transparent;
|
}
|
|
|
.head {
|
background: @c-bg-black;
|
padding-left: 20px;
|
height: 45px;
|
|
.product-item {
|
.lh(25px);
|
border-radius: 4px;
|
padding: 0 15px;
|
margin: 10px 0;
|
margin-right: 10px;
|
background-color: rgba(255, 255, 255, 0.2);
|
color: rgba(255, 255, 255, 0.4);
|
|
&.active {
|
background-color: @c-bg-fff;
|
color: @c-text-333;
|
}
|
}
|
}
|
|
|
|
|
.chart-box {
|
padding: 0 20px 10px;
|
background-color: @c-bg-fff;
|
|
.title-top {
|
.lh(44px);
|
|
.icon-left {
|
margin-right: 5px;
|
}
|
|
.icon {
|
margin-left: 5px;
|
}
|
|
.text {
|
font-weight: bold;
|
}
|
.under-text{
|
line-height: 15px;
|
/*text-decoration: underline;*/
|
border-bottom: 1px solid #000;
|
}
|
}
|
|
.data-box {
|
height: 80px;
|
|
.title {
|
font-size: @font-20;
|
margin-bottom: 10px;
|
}
|
|
.label {
|
font-size: @font-12;
|
color: @c-text-999;
|
}
|
}
|
|
.foot {
|
font-size: @font-12;
|
color: @c-text-999;
|
line-height: 40px;
|
|
.status {
|
margin-left: 12px;
|
|
&::before {
|
content: '';
|
display: inline-block;
|
height: 12px;
|
width: 12px;
|
border-radius: 50%;
|
margin-right: 4px;
|
}
|
|
&.success {
|
&::before {
|
background-color: #D5C7FF;
|
}
|
}
|
|
&.error {
|
&::before {
|
background-color: #FFB5D0;
|
}
|
}
|
|
&.warning {
|
&::before {
|
background-color: #FFE0C2;
|
}
|
}
|
}
|
}
|
}
|
|
|
.chart-b2{
|
padding: 10px 8px;
|
background-color: #F5F5F7;
|
}
|
|
.chart-box-bg{
|
padding: 5px 12px;
|
border-radius: 4px;
|
background-color: @c-bg-fff;
|
}
|
|
|
.lineChart {
|
height: 250px;
|
margin: 0 auto;
|
}
|
|
.btn-time {
|
display: block;
|
width: 320px;
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
border-radius: 22px;
|
margin: 15px auto;
|
|
}
|
|
.time-label {
|
.lh(65px);
|
color: @c-text-999;
|
|
.active {
|
color: @c-text-default;
|
}
|
}
|
</style>
|
