You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
447 lines
9.9 KiB
447 lines
9.9 KiB
3 months ago
|
<template>
|
||
|
|
<view class="pagebox">
|
||
|
|
<!-- #ifdef MP || APP-PLUS -->
|
||
|
|
<NavBar titleText="数据统计" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack></NavBar>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="headerBg">
|
||
|
|
<view :style="{ height: `${getHeight.barTop}px` }"></view>
|
||
|
|
<view :style="{ height: `${getHeight.barHeight}px` }"></view>
|
||
|
|
<view class="inner"></view>
|
||
|
|
</view>
|
||
|
|
<view class="order-index" ref="container">
|
||
|
|
<view class="wrapper">
|
||
|
|
<view class="header acea-row row-between-wrapper">
|
||
|
|
<view class="title">数据统计</view>
|
||
|
|
<view class="tab">
|
||
|
|
<view class="box" :class="item.id== current ? 'on':''" v-for="item in dataList" @click="detailtab(item.id)">{{item.name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list acea-row">
|
||
|
|
<view class="item" :class="orderType == item.type?'on':''" v-if="item.isManager" @click="orderNum(item.type)" v-for="item in statistics">
|
||
|
|
<view>{{item.name}}</view>
|
||
|
|
<view class="num">{{ item.price }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="canvas">
|
||
|
|
<canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll @touchstart="touchMix" @touchmove="moveMix" @touchend="touchEndMix">
|
||
|
|
</canvas>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="public-wrapper">
|
||
|
|
<view class="title">
|
||
|
|
详细数据
|
||
|
|
</view>
|
||
|
|
<view class="nav acea-row row-between-wrapper">
|
||
|
|
<view class="num">日期</view>
|
||
|
|
<view class="num" :class="[3,9,10].indexOf(orderType) == -1?'on':''">数量</view>
|
||
|
|
<view class="num price" v-if="[3,9,10].indexOf(orderType) == -1">金额</view>
|
||
|
|
</view>
|
||
|
|
<view class="conter">
|
||
|
|
<view class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
|
||
|
|
<view class="num">{{item.day}}</view>
|
||
|
|
<view class="num" :class="[3,9,10].indexOf(orderType) == -1?'on':''">{{item.count}}</view>
|
||
|
|
<view class="num price" v-if="[3,9,10].indexOf(orderType) == -1">{{item.price}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="safe-area-inset-bottom"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let _self;
|
||
|
|
let canvaMix = null;
|
||
|
|
import {
|
||
|
|
statisticsMenuApi,
|
||
|
|
getStoreChart,
|
||
|
|
getStatisticsListApi
|
||
|
|
} from "@/api/admin";
|
||
|
|
import uCharts from '../components/ucharts/ucharts'
|
||
|
|
// #ifdef MP || APP-PLUS
|
||
|
|
import NavBar from '@/components/NavBar.vue';
|
||
|
|
// #endif
|
||
|
|
export default {
|
||
|
|
name: 'adminOrder',
|
||
|
|
components: {
|
||
|
|
// #ifdef MP ||APP-PLUS
|
||
|
|
NavBar,
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
iconColor: '#FFFFFF',
|
||
|
|
isScrolling: false,
|
||
|
|
getHeight: this.$util.getWXStatusHeight(),
|
||
|
|
dataList:[
|
||
|
|
{id:'today',name:'今日'},
|
||
|
|
{id:'yesterday',name:'昨日'},
|
||
|
|
{id:'month',name:'本月'}
|
||
|
|
],
|
||
|
|
current:'today',
|
||
|
|
statistics:[],
|
||
|
|
isManager:0,
|
||
|
|
orderType:1,
|
||
|
|
cWidth: '',
|
||
|
|
cHeight: '',
|
||
|
|
list: [],
|
||
|
|
pixelRatio: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.isManager = parseInt(options.isManager);
|
||
|
|
this.getstatisticsMenu();
|
||
|
|
this.getOrderChart();
|
||
|
|
this.cWidth = uni.upx2px(710);
|
||
|
|
this.cHeight = uni.upx2px(500);
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
onPageScroll(e) {
|
||
|
|
// #ifdef MP
|
||
|
|
if (e.scrollTop > 50) {
|
||
|
|
this.isScrolling = true;
|
||
|
|
this.iconColor = '#333333';
|
||
|
|
} else if (e.scrollTop < 50) {
|
||
|
|
this.isScrolling = false;
|
||
|
|
this.iconColor = '#FFFFFF';
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
beforeMount() {
|
||
|
|
canvaMix = null
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
orderNum(num){
|
||
|
|
this.orderType = num;
|
||
|
|
this.getOrderChart();
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
getstatisticsMenu(){
|
||
|
|
let data = {
|
||
|
|
is_manager:this.isManager,
|
||
|
|
data:this.current
|
||
|
|
}
|
||
|
|
statisticsMenuApi(data).then(res=>{
|
||
|
|
let data = res.data;
|
||
|
|
this.statistics = [
|
||
|
|
{name:'销售额',price:data.price,type:1,isManager:1},
|
||
|
|
{name:'配送订单额',price:data.send_price,type:2,isManager:this.isManager},
|
||
|
|
{name:'收银订单额',price:data.cashier_price,type:5,isManager:1},
|
||
|
|
{name:'核销订单额',price:data.writeoff_price,type:6,isManager:1},
|
||
|
|
{name:'配送订单数',price:data.send_count,type:3,isManager:this.isManager},
|
||
|
|
{name:'付费会员额',price:data.svip_price,type:7,isManager:1},
|
||
|
|
{name:'充值订单额',price:data.recharge_price,type:8,isManager:1},
|
||
|
|
{name:'退款订单额',price:data.refund_price,type:4,isManager:this.isManager},
|
||
|
|
{name:'推广用户数',price:data.spread_count,type:9,isManager:1},
|
||
|
|
{name:'激活会员卡',price:data.card_count,type:10,isManager:1}
|
||
|
|
]
|
||
|
|
}).catch(err=>{
|
||
|
|
this.$util.Tips({
|
||
|
|
title: err
|
||
|
|
});
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getOrderChart() {
|
||
|
|
let data = {
|
||
|
|
is_manager:this.isManager,
|
||
|
|
time:this.current
|
||
|
|
}
|
||
|
|
getStoreChart(this.orderType,data).then(res => {
|
||
|
|
const data = res.data;
|
||
|
|
let Mix = {
|
||
|
|
categories: [],
|
||
|
|
series: []
|
||
|
|
};
|
||
|
|
let series = [{
|
||
|
|
"name": '销售额',
|
||
|
|
"type": "line",
|
||
|
|
"data": [],
|
||
|
|
}];
|
||
|
|
data.forEach(({
|
||
|
|
num,
|
||
|
|
number,
|
||
|
|
time
|
||
|
|
}) => {
|
||
|
|
series[0].data.push(number);
|
||
|
|
Mix.categories.push(time);
|
||
|
|
});
|
||
|
|
Mix.series = series;
|
||
|
|
this.chartData = data;
|
||
|
|
if (canvaMix) {
|
||
|
|
canvaMix.updateData(Mix);
|
||
|
|
} else {
|
||
|
|
this.showLineA("canvasMix", Mix);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 创建charts
|
||
|
|
showLineA(canvasId, chartData) {
|
||
|
|
let _self = this
|
||
|
|
canvaMix = new uCharts({
|
||
|
|
$this: _self,
|
||
|
|
canvasId: canvasId,
|
||
|
|
type: 'line',
|
||
|
|
fontSize: 11,
|
||
|
|
padding: [5, 5, 0, 5],
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
position: 'bottom',
|
||
|
|
float: 'center',
|
||
|
|
padding: 5,
|
||
|
|
lineHeight: 11,
|
||
|
|
margin: 6,
|
||
|
|
},
|
||
|
|
background: '#FFFFFF',
|
||
|
|
pixelRatio: _self.pixelRatio,
|
||
|
|
categories: chartData.categories,
|
||
|
|
series: chartData.series,
|
||
|
|
animation: true,
|
||
|
|
enableScroll: true, //开启图表拖拽功能
|
||
|
|
xAxis: {
|
||
|
|
disableGrid: false,
|
||
|
|
type: 'grid',
|
||
|
|
gridType: 'dash',
|
||
|
|
itemCount: 6,
|
||
|
|
scrollShow: true,
|
||
|
|
scrollAlign: 'left',
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
data: [{
|
||
|
|
calibration: true,
|
||
|
|
position: 'left',
|
||
|
|
title: '销售额(元)',
|
||
|
|
titleFontSize: 12,
|
||
|
|
format: (val) => {
|
||
|
|
return val.toFixed(0)
|
||
|
|
}
|
||
|
|
}, ],
|
||
|
|
showTitle: true,
|
||
|
|
gridType: 'dash',
|
||
|
|
dashLength: 4,
|
||
|
|
splitNumber: 7,
|
||
|
|
},
|
||
|
|
width: _self.cWidth * _self.pixelRatio,
|
||
|
|
height: _self.cHeight * _self.pixelRatio,
|
||
|
|
dataLabel: true,
|
||
|
|
dataPointShape: true,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
touchMix(e) {
|
||
|
|
canvaMix.scrollStart(e);
|
||
|
|
},
|
||
|
|
moveMix(e) {
|
||
|
|
canvaMix.scroll(e);
|
||
|
|
},
|
||
|
|
touchEndMix(e) {
|
||
|
|
var index = canvaMix.getCurrentDataIndex(e);
|
||
|
|
canvaMix.scrollEnd(e);
|
||
|
|
//下面是toolTip事件，如果滚动后不需要显示，可不填写
|
||
|
|
canvaMix.touchLegend(e);
|
||
|
|
canvaMix.showToolTip(e, {
|
||
|
|
textList: [{
|
||
|
|
text: this.chartData[index].time,
|
||
|
|
color: null
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "销售额：" + this.chartData[index].price,
|
||
|
|
color: "#1890FF"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "订单量：" + this.chartData[index].num,
|
||
|
|
color: "#91CB74"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 统计菜单
|
||
|
|
detailtab: function(type) {
|
||
|
|
this.current = type
|
||
|
|
this.getstatisticsMenu();
|
||
|
|
this.getOrderChart();
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
getList: function() {
|
||
|
|
let data = {
|
||
|
|
is_manager:this.isManager,
|
||
|
|
time:this.current
|
||
|
|
}
|
||
|
|
getStatisticsListApi(this.orderType,data).then(res=>{
|
||
|
|
this.list = res.data;
|
||
|
|
}).catch(err=>{
|
||
|
|
this.$util.Tips({
|
||
|
|
title: err
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.pagebox {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.safe-area-inset-bottom {
|
||
|
|
height: 0;
|
||
|
|
height: constant(safe-area-inset-bottom);
|
||
|
|
height: env(safe-area-inset-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
.headerBg {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: -25%;
|
||
|
|
width: 150%;
|
||
|
|
border-bottom-right-radius: 100%;
|
||
|
|
border-bottom-left-radius: 100%;
|
||
|
|
background: linear-gradient(270deg, #01ABF8 0%, #2A7EFB 100%);
|
||
|
|
|
||
|
|
.inner {
|
||
|
|
height: 356rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*订单首页*/
|
||
|
|
.order-index {
|
||
|
|
position: relative;
|
||
|
|
padding: 0 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-index .wrapper {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
padding-top: 30rpx;
|
||
|
|
margin-top: 40rpx;
|
||
|
|
|
||
|
|
.canvas{
|
||
|
|
padding: 0 40rpx;
|
||
|
|
margin-top: 26rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header{
|
||
|
|
padding: 0 24rpx;
|
||
|
|
.title{
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.tab{
|
||
|
|
width: 288rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
background: #F5F5F5;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999999;
|
||
|
|
font-size: 24rpx;
|
||
|
|
.box{
|
||
|
|
width: 96rpx;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 48rpx;
|
||
|
|
}
|
||
|
|
.on{
|
||
|
|
background: #1890FF;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.chart-title {
|
||
|
|
padding: 40rpx 0 6rpx 42rpx;
|
||
|
|
font-size: 22rpx;
|
||
|
|
line-height: 26rpx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charts {
|
||
|
|
width: 100%;
|
||
|
|
height: 514rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-index .wrapper .list{
|
||
|
|
margin-top: 16rpx;
|
||
|
|
padding: 0 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-index .wrapper .list .item {
|
||
|
|
padding: 24rpx 0;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 24rpx;
|
||
|
|
line-height: 34rpx;
|
||
|
|
color: #999;
|
||
|
|
width: 150rpx;
|
||
|
|
margin-right: 90rpx;
|
||
|
|
&:nth-of-type(3n){
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
&.on{
|
||
|
|
color: #2A7EFB;
|
||
|
|
.num{
|
||
|
|
color: #2A7EFB;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-index .wrapper .list .item .num {
|
||
|
|
margin-top: 12rpx;
|
||
|
|
font-family: SemiBold;
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-wrapper .title {
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 30rpx;
|
||
|
|
line-height: 42rpx;
|
||
|
|
color: #333333;
|
||
|
|
padding: 32rpx 0 40rpx 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-wrapper {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-wrapper .nav {
|
||
|
|
padding: 0 40rpx;
|
||
|
|
line-height: 34rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-wrapper .conter {
|
||
|
|
padding: 0 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.public-wrapper .conter .item,.public-wrapper .nav {
|
||
|
|
border-bottom: 1px solid #F1F1F1;
|
||
|
|
height: 74rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
.num {
|
||
|
|
flex: 1;
|
||
|
|
word-break: break-all;
|
||
|
|
|
||
|
|
&.price{
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.on{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover-view {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
</style>
|