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>
		
		<MyChartsColumn canvasId="column1" chartTitle="今日销售情况" chartType='day' :adminId="this.adminId" :equipmentId="this.equipmentId"></MyChartsColumn>
		<MyChartsColumn canvasId="column2" chartTitle="本周销售情况" chartType='week' :adminId="this.adminId" :equipmentId="this.equipmentId"></MyChartsColumn>
		<MyChartsColumn canvasId="column3" chartTitle="本月销售情况" chartType='month' :adminId="this.adminId" :equipmentId="this.equipmentId"></MyChartsColumn>
		<MyChartsColumn canvasId="column4" chartTitle="本年销售情况" chartType='year' :adminId="this.adminId" :equipmentId="this.equipmentId"></MyChartsColumn>
	</view>
</template>

<script>
	import { mapState, mapActions, mapMutations } from 'vuex';
	export default {
		name: 'mainStatistics',
		props: {
			equipmentId: '',
			adminId: '',
		},
		data() {
			return {
				dayTotalMoney:0,
				weekTotalMoney:0,
				monthTotalMoney:0,
				yearTotalMoney:0,
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		onLoad(state){
			this.getMainStatisticsData();
		},
		mounted() {
			this.getMainStatisticsData();
		},
		methods: {
			...mapActions('chart', ['getStatistics','getMainStatistics']),
			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);
			}
		}
	}
</script>
<style>
	.qiun-title-dot-light {
		border-left: 10upx solid #ca8019;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}
	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}
</style>