<template>
|
<view class="container">
|
<view class="wrap">
|
<view class="title">
|
{{beginTime}} 至 {{endTime}}
|
</view>
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
|
<view class="total">
|
总计：￥{{total | formatNum}}
|
</view>
|
</view>
|
<view class="wrap">
|
<view class="list-item" v-for="item in list">
|
<template v-for="(value, key) in item">
|
<text>{{key}}</text>
|
<text>￥{{value | formatNum}}</text>
|
</template>
|
</view>
|
</view>
|
<fillter :isShow="isShowFilter" @change="changeFilter"></fillter>
|
</view>
|
</template>
|
|
<script>
|
import uCharts from '../../../components/u-charts/u-charts/u-charts.js';
|
import fillter from './filter'
|
let canvaLineA = null;
|
export default {
|
components:{
|
fillter
|
},
|
data() {
|
return {
|
prePage: 1,//公司门店收益分析，2 员工收益分析
|
type: 1, //1-营业收入 2-现金收入 3-余额划扣 4-本金消耗 5-赠送消耗 6-现金退款 7-卡项退款 8-欠款
|
shopId: '',
|
staffId: '',
|
isShowFilter: false,
|
unit: '日',
|
beginTime: '',
|
endTime: '',
|
list: []
|
}
|
},
|
computed:{
|
total(){
|
let total = 0;
|
this.list.forEach((item) => {
|
total += Number(Object.values(item)[0]);
|
});
|
return total
|
}
|
},
|
onLoad(options) {
|
this.beginTime = this.$utils.formmatTime('YY-mm')+'-01';
|
this.endTime = this.$utils.formmatTime('YY-mm-dd')
|
this.shopId = options.shopId;
|
this.staffId = options.staffId;
|
if(options.type){
|
this.type = Number(options.type)
|
}
|
if(options.page){
|
this.prePage = options.page;
|
}
|
uni.setNavigationBarTitle({
|
title: '专项分析-'+ options.title
|
});
|
this.getlineData();
|
},
|
onNavigationBarButtonTap() {
|
this.isShowFilter = !this.isShowFilter;
|
},
|
methods: {
|
changeFilter(obj){
|
this.beginTime = obj.beginTime;
|
this.endTime = obj.endTime;
|
this.unit = obj.unit;
|
this.getlineData();
|
},
|
getlineData(){
|
let url = '';
|
let param = {
|
beginTime: this.beginTime,
|
endTime: this.endTime,
|
statisticsUnit: this.unit,
|
type: this.type
|
}
|
if(this.prePage == 1){
|
url = '/api/statistics/findBusinessInCome'
|
Object.assign(param, {shopId: this.shopId})
|
}else{
|
url = '/api/statistics/findVipBusinessData'
|
Object.assign(param, {staffId: this.staffId})
|
}
|
this.$httpUtils.request(url, {
|
beginTime: this.beginTime,
|
endTime: this.endTime,
|
shopId: this.shopId,
|
statisticsUnit: this.unit,
|
type: this.type
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
this.list = res.rows;
|
let result = res.mapInfo;
|
let xAxis = result.xAxis;
|
if(this.unit == '日' && xAxis.length){
|
xAxis = xAxis.map((item) => {
|
return item.slice(5)
|
})
|
}
|
this.initLine("canvasLineA", {categories: xAxis, series: result.series});
|
}
|
});
|
},
|
initLine(canvasId,chartData){
|
canvaLineA=new uCharts({
|
$this:this,
|
canvasId: canvasId,
|
type: 'area',
|
fontSize:10,
|
legend:{
|
show:false
|
},
|
background:'#ffffff',
|
dataLabel:false,
|
dataPointShape:true,
|
dataPointShapeType: 'hollow',
|
padding: [10, 28, 10, 0],
|
categories: chartData.categories,
|
series: chartData.series,
|
animation: true,
|
xAxis: {
|
type:'grid',
|
disableGrid:true,
|
fontColor:'#333333',
|
axisLine: false,
|
labelCount: 8
|
},
|
yAxis: {
|
gridType:'dash',
|
gridColor:'#EDEAF4',
|
dashLength:8,
|
data: [
|
{
|
fontColor:'#333333',
|
axisLine: false,
|
min: 0
|
}
|
]
|
},
|
width: uni.upx2px(710),
|
height: uni.upx2px(360),
|
extra: {
|
area:{
|
type: 'curve',
|
opacity:0.2,
|
addLine:true,
|
width:2
|
},
|
tooltip:{
|
gridType:'dash',//辅助线类型（虚线）
|
dashLength:7,//虚线单段长度
|
gridColor:'#EDEAF4',//辅助线颜色
|
}
|
}
|
});
|
|
},
|
touchLineA(e){
|
canvaLineA.showToolTip(e, {
|
format: function (item, category) {
|
return category + '：' + item.data
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
background: #F6F6F8;
|
}
|
.container{
|
padding: 10px;
|
}
|
.wrap{
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
background: #FFFFFF;
|
margin-bottom: 10px;
|
padding: 0 10px;
|
font-size: 14px;
|
}
|
.title{
|
text-align: center;
|
padding: 10px 0 5px;
|
}
|
.charts{
|
width: 100%;
|
height: 200px;
|
}
|
.total{
|
padding: 10px 0 15px;
|
text-align: right;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
.list-item{
|
display: flex;
|
justify-content: space-between;
|
border-bottom: 1px solid #EDEAF4;
|
padding: 10px 0;
|
}
|
.list-item:nth-last-child(1){
|
border: 0;
|
}
|
</style>
|
