materialAppletApp/pages/Charts/mainStatistics.vue

<template>
	<view>
		<view class="qiun-title-bar">
			<view class="qiun-title-dot-light">今日收入总额: {{dayTotalMoney}}</view>
			<view class="qiun-title-dot-light">本周收入总额: {{weekTotalMoney}}</view>
			<view class="qiun-title-dot-light">本月收入总额: {{monthTotalMoney}}</view>
			<view class="qiun-title-dot-light">本年度收入总额: {{yearTotalMoney}}</view>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">今日销售情况</view>
				<view style="text-align: center;position: relative;">
					<image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
					<span>{{startDate1}}</span>
					<image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
				</view>
			</view>
			<view class="qiun-charts" style="background-color: #E5FDC3;">
				<canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true @touchstart="touchLine1" @touchmove="moveLine1"
				 @touchend="touchEndLine1" style="background-color: #E5FDC3;"></canvas>
			</view>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">本周销售情况</view>
				<view style="text-align: center;position: relative;">
					<image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
					<span>{{startDate2}} 至 {{endDate2}}</span>
					<image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
				</view>
			</view>
			<view class="qiun-charts" style="background-color: #E5FDC3;">
				<canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true @touchstart="touchLine2" @touchmove="moveLine2"
				 @touchend="touchEndLine2" style="background-color: #E5FDC3;"></canvas>
			</view>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">本月销售情况</view>
				<view style="text-align: center;position: relative;">
					<image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
					<span>{{startDate3}} 至 {{endDate3}}</span>
					<image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
				</view>
			</view>
			<view class="qiun-charts" style="background-color: #E5FDC3;">
				<canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true @touchstart="touchLine3" @touchmove="moveLine3"
				 @touchend="touchEndLine3" style="background-color: #E5FDC3;"></canvas>
			</view>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">本年销售情况</view>
				<view style="text-align: center;position: relative;">
					<image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
					<span>{{startDate4}} 至 {{endDate4}}</span>
					<image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
				</view>
			</view>
			<view class="qiun-charts" style="background-color: #E5FDC3;">
				<canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true @touchstart="touchLine4" @touchmove="moveLine4"
				 @touchend="touchEndLine4" style="background-color: #E5FDC3;"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions, mapMutations } from 'vuex';
	import uCharts from '@/components/u-charts/u-charts.js';
	import {dateUtils} from '@/common/util.js';
	var _self;
	var canvaColumn1=null;
	var canvaColumn2=null;
	var canvaColumn3=null;
	var canvaColumn4=null;
	export default {
		name: 'mainStatistics',
		props: {
			equipmentId: '',
			adminId: '',
		},
		data() {
			return {
				dayTotalMoney:0,
				weekTotalMoney:0,
				monthTotalMoney:0,
				yearTotalMoney:0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				startDate1: '',
				startDate2: '',
				endDate2: '',
				startDate3: '',
				endDate3: '',
				startDate4: '',
				endDate4: '',
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		onLoad(state){
			this.init();
		},
		mounted() {
		},
		methods: {
			...mapActions('chart', ['getStatistics','getMainStatistics']),
			init(){
				_self = this;
				this.cWidth = uni.upx2px(750);
				this.cHeight = uni.upx2px(500);
				
				this.getMainStatisticsData();
				
				this.initDateRang(new Date(),'day');
				this.initDateRang(new Date(),'week');
				this.initDateRang(new Date(),'month');
				this.initDateRang(new Date(),'year');
			},
			initDateRang(day,chartType) {
				const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
				if(chartType === 'day'){
					this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
				}
				if (chartType === 'week') {
					this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
					this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
				}
				if (chartType === 'month') {
					this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
					this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
				}
				if (chartType === 'year') {
					this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
					this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
				}
				
				this.getStatisticsData(chartType);
			},
			/**上一个 */
			pre(chartType) {
				let day;
				if (chartType === 'day') { // 日
					day = new Date(this.startDate1);
					day.setDate(day.getDate() - 1);
				}
				if(chartType === 'week'){ // 周
					day = new Date(this.startDate2);
					day.setDate(day.getDate() - 7);
				}
				if (chartType === 'month') { // 月
					day = new Date(this.startDate3);
					day.setMonth(day.getMonth() - 1);
				}
				if (chartType === 'year') { // 年
					day = new Date(this.startDate4);
					day.setFullYear(day.getFullYear() - 1);
				}
				this.initDateRang(day,chartType);				
			},
			/**下一个 */
			next(chartType) {
				let day;
				if (chartType === 'day') { // 日
					day = new Date(this.startDate1);
					day.setDate(day.getDate() + 1);
				}
				if(chartType === 'week'){ // 周
					day = new Date(this.startDate2);
					day.setDate(day.getDate() + 7);
				}
				if (chartType === 'month') { // 月
					day = new Date(this.startDate3);
					day.setMonth(day.getMonth() + 1);
				}
				if (chartType === 'year') { // 年
					day = new Date(this.startDate4);
					day.setFullYear(day.getFullYear() + 1);
				}
				
				this.initDateRang(day,chartType);
			},
			getStatisticsData(chartType) {
				const param = {
					'chartType': chartType
				};
				if(chartType=='day'){
					param['startDate'] = this.startDate1;
					param['endDate'] = this.startDate1;
				}
				if(chartType=='week'){
					param['startDate'] = this.startDate2;
					param['endDate'] = this.endDate2;
				}
				if(chartType=='month'){
					param['startDate'] = this.startDate3;
					param['endDate'] = this.endDate3;
				}
				if(chartType=='year'){
					param['startDate'] = this.startDate4;
					param['endDate'] = this.endDate4;
				}
				if(this.adminId){ // 子组件，则拿传过来的参
					param['adminId'] = this.adminId;
				}else if ('admin' !== this.loginUser['username']) { //否则为主页，拿登录用户
					param['adminId'] = this.loginUser['id'];
				}
				if (this.equipmentId) {
					param['equipmentId'] = this.equipmentId;
				}
				setTimeout(() => {
					this.getStatistics(param)
						.then(data => {
								uni.stopPullDownRefresh();
								if(param['chartType']=='day'){
									canvaColumn1 = this.initChart('canvaColumn1',data);
								}
								if(param['chartType']=='week'){
									canvaColumn2 = this.initChart('canvaColumn2',data);
								}
								if(param['chartType']=='month'){
									canvaColumn3 = this.initChart('canvaColumn3',data);
								}
								if(param['chartType']=='year'){
									canvaColumn4 = this.initChart('canvaColumn4',data);
								}
							}
						, _ => {
								uni.stopPullDownRefresh();
								if(param['chartType']=='day'){
									canvaColumn1 = this.initChart('canvaColumn1',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
								}
								if(param['chartType']=='week'){
									canvaColumn2 = this.initChart('canvaColumn2',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
								}
								if(param['chartType']=='month'){
									canvaColumn3 = this.initChart('canvaColumn3',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
								}
								if(param['chartType']=='year'){
									canvaColumn4 = this.initChart('canvaColumn4',{categories:['暂无数据'],series:[{name: '销售个数',data:[0]}]});
								}
							}
						);
				}, 0);
			},
			initChart(canvasId, chartData){
				return new uCharts({
					$this: _self,
					canvasId: canvasId,
					enableScroll: true,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#E5FDC3',
					pixelRatio: 1,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
						// disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							// width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
							width: 30
						}
					}
				});
			},
			getMainStatisticsData(){
				setTimeout(() => {
					const param = {};
					if(this.adminId){ // 子组件，则拿传过来的参
						param['adminId'] = this.adminId;
					}else if ('admin' !== this.loginUser['username']) { //否则为主页，拿登录用户
						param['adminId'] = this.loginUser['id'];
					}
					if (this.equipmentId) {
						param['equipmentId'] = this.equipmentId;
					}
					console.log('getMainStatisticsData:{}',param)
					this.getMainStatistics(param)
						.then(data => {
							for (let bean of data) {
								if(bean['categorie']==='day'){
									this.dayTotalMoney=bean['salePrice'];
								}
								if(bean['categorie']==='week'){
									this.weekTotalMoney=bean['salePrice'];
								}
								if(bean['categorie']==='month'){
									this.monthTotalMoney=bean['salePrice'];
								}
								if(bean['categorie']==='year'){
									this.yearTotalMoney=bean['salePrice'];
								}
							}
							uni.stopPullDownRefresh();
						}
						, _ => void uni.stopPullDownRefresh());
				}, 0);
			},
			touchLine1(e) {
				canvaColumn1.scrollStart(e);
			},
			moveLine1(e) {
				canvaColumn1.scroll(e);
			},
			touchEndLine1(e) {
				canvaColumn1.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn1.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchLine2(e) {
				canvaColumn2.scrollStart(e);
			},
			moveLine2(e) {
				canvaColumn2.scroll(e);
			},
			touchEndLine2(e) {
				canvaColumn2.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn2.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchLine3(e) {
				canvaColumn3.scrollStart(e);
			},
			moveLine3(e) {
				canvaColumn3.scroll(e);
			},
			touchEndLine3(e) {
				canvaColumn3.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn3.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchLine4(e) {
				canvaColumn4.scrollStart(e);
			},
			moveLine4(e) {
				canvaColumn4.scroll(e);
			},
			touchEndLine4(e) {
				canvaColumn4.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn4.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}
	
	.qiun-padding {
		padding: 2%;
		width: 96%;
	}
	
	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}
	
	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}
	
	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}
	
	.qiun-common-mt {
		margin-top: 10upx;
	}
	
	.qiun-bg-white {
		background: #FFFFFF;
	}
	
	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}
	
	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}
	
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.preImg {
		position: absolute;left: 40upx; width: 40upx;height: 40upx;
	}
	.nextImg {
		position: absolute;right: 40upx; width: 40upx;height: 40upx;
	}
</style>