shenzeeUniApp/pages/Charts/mainStatistics.vue

<template>
	<view>
		<view class="head">
			<view class="">
				<image class="userFlagimg" src="../../static/img/userFlag.png" mode=""></image>
			</view>
			<view class="pname">
				<font class="wenzi" style="color: #BDD6F3;font-size:28upx"> {{$t('mainStatistics.name')}}: {{pnameData}}
				</font>
			</view>
			<view class="company">
				<font style="color: #BDD6F3;font-size:28upx">{{$t('mainStatistics.company')}}</font>
			</view>
		</view>
		<view class="ri">
			<view class="riShell">
				<view class="riImg">
					<image style="width: 64upx;height: 64upx;padding-top: 20upx;" :src="$t('mainStatistics.dayImg')">
					</image>
				</view>
				<view class="riTitle">
					<view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{dayTotalMoney}}</font>
					</view>
					<view style="text-align:left;font-size:28upx;font-family:PingFang-SC-Medium">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.dayTotalNum')}}:</font>
						<font style="color: #ED341F;">{{dayTotalNum}}</font>
					</view>
				</view>
			</view>
			<view class="riqi">
				<view style="text-align:right" class="tody">
					<font style="color: #596D83;">{{today}}</font>
				</view>
				<view style="text-align:right" class="xingqi">
					<font style="color: #596D83;">{{week}}</font>
				</view>
			</view>
		</view>
		<view class="fourTitle">
			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.weekImg')"
						mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{weekTotalMoney}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.weekTotalNum')}}:</font>
						<font style="color: #ED341F;">{{weekTotalNum}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.monthImg')"
						mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{monthTotalMoney}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.monthTotalNum')}}:</font>
						<font style="color: #ED341F;">{{monthTotalNum}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.yearImg')"
						mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalMoney')}}:</font>
						<font style="color: #ED341F;">{{yearTotalMoney}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.yearTotalNum')}}:</font>
						<font style="color: #ED341F;">{{yearTotalNum}}</font>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="fourImg">
					<image style="width: 54upx;height: 54upx;padding-top: 20upx;" :src="$t('mainStatistics.allImg')"
						mode=""></image>
				</view>
				<view class="fourShell">
					<view class="one">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineTotalNum')}}:</font>
						<font style="color: #ED341F;">{{machineTotalNum}}</font>
					</view>
					<view class="two">
						<font class="fontLeft" style="color: #596D83;">{{$t('mainStatistics.machineUseNum')}}:</font>
						<font style="color: #ED341F;">{{machineUseNum}}</font>
					</view>
				</view>
			</view>
		</view>
		<!-- 商家选择 -->
		<view v-if="id!=1&&type<4&&length>0" class="td-right">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						当前商家：
					</view>
					<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
						<picker @change="changeAdmin" :value="index" :range="adminList">
							<view class="uni-input">{{adminList[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">
					<view class="dis">{{$t('mainStatistics.day')}}</view>
				</view>
				<view class="shijian" 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: #FFFFFF;">
				<canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true
					@touchstart="touchLine1" @touchmove="moveLine1" @touchend="touchEndLine1"
					style="background-color: #FFFFFF;"></canvas>
			</view>
		</view>
		<view class="line"></view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">
					<view class="dis">{{$t('mainStatistics.week')}}</view>
				</view>
				<view class="shijian" 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: #FFFFFF;">
				<canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true
					@touchstart="touchLine2" @touchmove="moveLine2" @touchend="touchEndLine2"
					style="background-color: #FFFFFF;"></canvas>
			</view>
		</view>
		<view class="line"></view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">
					<view class="dis">{{$t('mainStatistics.month')}}</view>
				</view>
				<view class="shijian" 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: #FFFFFF;">
				<canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true
					@touchstart="touchLine3" @touchmove="moveLine3" @touchend="touchEndLine3"
					style="background-color: #FFFFFF;"></canvas>
			</view>
		</view>
		<view class="line"></view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">
					<view class="dis">{{$t('mainStatistics.year')}}</view>
				</view>
				<view class="shijian" 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: #FFFFFF;">
				<canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true
					@touchstart="touchLine4" @touchmove="moveLine4" @touchend="touchEndLine4"
					style="background-color: #FFFFFF;"></canvas>
			</view>
		</view>
		<view>
			<uni-popup id="popupDialog" ref="popupDialog" type="dialog">
				<uni-popup-dialog :type="msgType" title="通知" content="欢迎使用 unisdfdd-popup!"
								  :before-close="true" @confirm="dialogConfirm" @close="dialogClose">
					<scroll-view  scroll-y="true" class="scroll-Y" :style="{height:scrollHeight*0.8+'px'}">
						<view class="scroll-view-item ">
							投诉处理通知书 <br/>
							背景：消费者投诉是指消费者在买糖之后，在微信或者支付宝平台对该笔订单发起投诉。该功能是微信及支付宝所拥有的功能。
							消费者投诉后，支付宝或者微信会通知到我们公司，我们公司再通知到商家。商家接到消费者投诉后需要进行处理。
							如果商家在收到短信24小时后还不处理，我们将会进行退款处理。<br/>
							处理需知：我们申泽会以短信的信息通知到商家，通知的内容里我们会加上消费者的联系方式，以供商家去核实情况，如果没有消费者的联系方式，可以在微信群联系我们，然后把商家的联系方式发送到我们这边，我们公司会把商家的联系方式发送到消费者的微信上，让消费者自己去联系商家。
							以下是处理方式：<br/>
							1，退款<br/>
							退款一般是在消费者离开机器现场后，在微信或者支付平台上投诉的情况。<br/>
							1.1在小程序“申泽智能物联”上退款<br/>
							我们推荐使用这种方式，因为在我们申泽的平台上退款后，我们会有已退款的记录凭证，以免后续不必要的纠纷。
							如果商家在我们公司的账户里没钱，可推荐红包或转账的方式<br/>
							1.2用红包或转账的方式<br/>
							商家可用红包或转账的方式给消费者退款，但是需要收集3个资料：消费者的支付凭证，截图红包或者转账的界面（红包最好写上备注），
							聊天界面-消费者同意用红包或转账的方式退款。商家收集这3个资料给到我们公司，由我们公司反馈上去。<br/>
							2，不退款<br/>
							不退款一般发生在消费者还在机器的情况下，商家和消费者取得了联系，用其他方式补偿。<br/>
							2.1重新做糖<br/>
							商家可以用重新做糖给消费者的形式补偿，但是商家也需要收集证据。
								需要收集：1消费者的支付凭证；2聊天界面-消费者同意截图；商家需要把这些收集好。
								如果消费者投诉了这个有重新做糖的订单，可以把这些信息发送到我们申泽这边，这样就可以不用退款。<br/>
							2.2消费者提供不了证据<br/>
							这个情况是在商家与消费者取得联系后，消费者无法提供证据说明商品有问题。
							商家可以把聊天记录--确认消费者提供不了证据的界面的截图提供到我们这边。由我们把情况反馈上去。<br/>
						</view>
					
					</scroll-view>
				</uni-popup-dialog>
			</uni-popup>
		</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: '',
			pname: '',
		},
		data() {
			return {
				machineTotalNum: 0,
				machineUseNum: 0,
				dayTotalMoney: 0,
				dayTotalNum: 0,
				weekTotalMoney: 0,
				weekTotalNum: 0,
				monthTotalMoney: 0,
				monthTotalNum: 0,
				yearTotalMoney: 0,
				yearTotalNum: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				startDate1: '',
				startDate2: '',
				endDate2: '',
				startDate3: '',
				endDate3: '',
				startDate4: '',
				endDate4: '',
				today: '',
				week: '',
				adminList: [],
				admins: [],
				index: 0,
				id: 0,
				length:0,
				// type:null,
				type: 'top',
				msgType: 'success',
				value: '默认输入的内容',
				scrollHeight:uni.getSystemInfoSync().windowHeight - 130,
			}
		},
		onReady() {
			// 页面打开自动打开对话框
			setTimeout(() => {
				// this.msgType = 'success'
				this.$refs.popupDialog.open()
			}, 500)
		},
		computed: {
			...mapState(['loginUser']),
			pnameData: {
				get() {
					return this.pname;
				}
			},
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('mainStatistics.title')
			});
			uni.setTabBarItem({
				index: 0,
				text: this.$t('tabs.tab1')
			});
			this.id = 0;
			this.index = 0;
			var token = uni.getStorageSync("token");
			if (token.toString().length > 1) {
				this.init();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
			// console.log("onShow");
			var test = uni.getStorageSync('test');
			var globalUser = uni.getStorageSync("globalUser");
			if (globalUser.toString().length > 1) {
				//判断是不是初次登陆
				// if (test == 2) {
				// 	this.init();
				// }
				if (globalUser.type > 0&&globalUser.type<4) {
					this.getAdmin();
				}
				this.id = globalUser.id;
				this.type = globalUser.type;
			}
			// var id = this.adminId;

			this.day();
			// this.equipmentStatus();
		},
		mounted() {
			var token = uni.getStorageSync("token");
			if (token.toString().length > 1) {
				this.init();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
			// this.day();
			this.equipmentStatus();
		},
		methods: {
			// open() {
			// 	this.show = true;
			// },
			...mapActions('chart', ['getStatistics', 'getMachineNum']),
			async init() {
				if (!this.pname) {
					this.pname = this.loginUser.name;
				}
				_self = this;
				//图表中图
				this.cWidth = uni.upx2px(690);
				this.cHeight = uni.upx2px(370);

				await this.getMainStatisticsData();

				await this.initDateRang(new Date(), 'day');
				await this.initDateRang(new Date(), 'week');
				await this.initDateRang(new Date(), 'month');
				await this.initDateRang(new Date(), 'year');

				//初次登陆跳转后，把test变成2
				uni.setStorageSync('test', '2');

			},
			day() {
				var date = new Date();
				// var daystr = dateUtils.formateDate(date, 'yyyy年MM月dd日');
				var daystr = dateUtils.formateDate(date, 'yyyy-MM-dd');
				this.today = daystr;
				// var str= '星期'+'日一二三四五六'.charAt(date.getDay());
				this.week = this.$t('mainStatistics.week' + date.getDay());

			},
			//查询下级用户
			getAdmin() {
				var param = {};
				var token = uni.getStorageSync("token");
				var globalUser = uni.getStorageSync("globalUser");
				param['id'] = globalUser.id;
				uni.request({
					url: this.serverurl + '/TAdmin/selectLowAdmin',
					data: param,
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {
						if (res.data.code) {
							var admins = res.data.data;
							this.admins = admins;
							var adminList = [];
							adminList.push('本商户');
							if (admins.length > 0) {
								this.length = admins.length;
								adminList.push('所有下级');
								for (var i = 1; i < admins.length; i++) {
									// console.log(admins[i].name)
									if (admins[i].name != null || admins[i].name != '') {
										adminList.push(admins[i].name);
									} else {
										adminList.push(admins[i].username);
									}
								}
							}
							this.adminList = adminList;
						} else {
							uni.showToast({
								title: `获取信息失败：` + res.data.message,
								icon: 'none'
							})
						}
					},
				});
				// this.selectLowAdmin(param)
				// 	.then(res => {
				// 		if (res.code) {
				// 			var admins = res.data;
				// 			this.admins = admins;
				// 			var adminList = [];
				// 			adminList.push('本商户');
				// 			if (admins.length > 0) {
				// 				this.length = admins.length;
				// 				adminList.push('所有下级');
				// 				for (var i = 1; i < admins.length; i++) {
				// 					// console.log(admins[i].name)
				// 					if (admins[i].name != null || admins[i].name != '') {
				// 						adminList.push(admins[i].name);
				// 					} else {
				// 						adminList.push(admins[i].username);
				// 					}
				// 				}
				// 			}
				// 			this.adminList = adminList;
				// 		} else {
				// 			uni.showToast({
				// 				title: `获取信息失败：` + res.message,
				// 				icon: 'none'
				// 			})
				// 		}
				// 	});
			},
			// 改变商家
			changeAdmin: function(e){
				this.index = e.target.value;
				var id = '';
				if(e.target.value>1){
					id = this.admins[e.target.value-1].id;
				}
				if(e.target.value==1){
					id = 'all';
				}
				if(e.target.value==0){
					id = 0;
				}
				// console.log("adminID="+id);
				this.id = id;
				this.init();
				 
			},
			equipmentStatus() {
				var that = this;
				var id = uni.getStorageSync("globalUser").id;
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TEquipment/equipmentStatus',
					data: {
						"adminId": id
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {
						setTimeout(function() {
							that.checkEquipmentStatus(id);
						}, 5000);
					},
				});
			},
			checkEquipmentStatus(id) {
				var token = uni.getStorageSync("token");
				uni.request({
					url: this.serverurl + '/TEquipment/checkEquipmentStatus',
					data: {
						"adminId": id
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {

					},
				});
			},
			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');
				}

				return 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'];
				}
				var globalUser = uni.getStorageSync("globalUser");
				if (globalUser.id != 1) {
					if (param.adminId == null || param.adminId == undefined) {
						param['adminId'] = globalUser.id;
					}
				}

				if (this.equipmentId) {
					param['equipmentId'] = this.equipmentId;
				}
				if (this.id!=1) {
					var id = this.id;
				}else{
					var id = 0;
				}
				if(id=='all'){
					param['adminId'] = null;
					if(this.type==1){
						param['agencyId'] = globalUser.id;
					}
					if(this.type==2){
						param['merchantId'] = globalUser.id;
					}
				}else if(id==0){
					
				}else{
					param['adminId'] = id;
				}
				return 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]
								}]
							});
						}
					});
			},
			initChart(canvasId, chartData) {
				if (this.$t('lang') != null && this.$t('lang') != '') {
					if (this.$t('lang') != 'zh') {
						chartData.categories = chartData.categories.map(e => {
							if (e.indexOf('点') >= 0) {
								return e.replace('点', this.$t('mainStatistics.oclock'));
							}
							if (e.indexOf('周') >= 0) {
								const weekNum = e.substring(e.length - 1) == '日' ? '0' : e.substring(e.length - 1);
								return this.$t('mainStatistics.week' + weekNum);
							}
							if (e.indexOf('月') >= 0) {
								var res = e.toString();
								if (res.length > 3) {
									return e.replace('月', this.$t('mainStatistics.mon'));
								} else {
									return e.replace('月', this.$t('mainStatistics.y'));
								}
							}
							return e;
						});

						chartData.series = chartData.series.map(e => {
							if (e['name'] == '销售个数') {
								e['name'] = this.$t('mainStatistics.saleNum');
							}
							if (e['name'] == '销售额') {
								e['name'] = this.$t('mainStatistics.saleroom');
							}
							return e;
						});
					}
				}

				return new uCharts({
					$this: _self,
					canvasId: canvasId,
					enableScroll: true,
					type: 'column',
					legend: true,
					fontSize: 10,
					background: '#FFFFFF', //y轴颜色
					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: {

						type: 'grid',
						gridType: 'soild',
						// disabled:true
						// disableGrid: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: 18
						}
					}
				});
			},
			getMainStatisticsData() {
				const param = {};
				if (this.adminId) { // 子组件，则拿传过来的参
					param['adminId'] = this.adminId;
				} else if ('admin' !== this.loginUser['username']) { //否则为主页，拿登录用户
					param['adminId'] = this.loginUser['id'];
				}
				var globalUser = uni.getStorageSync("globalUser");
				if (globalUser.id != 1) {
					if (param.adminId == null || param.adminId == undefined) {
						param['adminId'] = globalUser.id;
					}
				}
				if (this.equipmentId) {
					param['equipmentId'] = this.equipmentId;
				}
				if (this.id!=1) {
					var id = this.id;
				}else{
					var id = 0;
				}
				var aid = param.adminId;
				if(id=='all'){
					param['adminId'] = null;
					if(this.type==1){
						param['agencyId'] = globalUser.id;
					}
					if(this.type==2){
						param['merchantId'] = globalUser.id;
					}
				}else if(id==0){
					
				}else{
					param['adminId'] = id;
					aid = id;
				}
				// console.log('getMainStatisticsData:{}', param);
				var adminId = param.adminId;
				var equipmentId = this.equipmentId;
				var serverurl = this.serverurl;
				var token = uni.getStorageSync("token");
				uni.request({
					url: serverurl + '/TEquipment/getMachineNum',
					data: {
						"adminId": aid,
						"equipmentId": equipmentId
					},
					method: "POST",
					header: {
						'token': token
					},
					success: (res) => {
						var list = res.data.data;
						this.machineTotalNum = list[0];
						this.machineUseNum = list[1];
					}
				});
				uni.request({
					url: serverurl + '/TOrder/getMainStatistics',
					data: param,
					method: "POST",
					header: {
						'token': token
					},
					success: (res) => {
						var list = res.data.data;
						for (let bean of list) {
							if (bean['categorie'] === 'day') {
								this.dayTotalMoney = bean['salePrice'];
								this.dayTotalNum = bean['saleNum'];
							}
							if (bean['categorie'] === 'week') {
								this.weekTotalMoney = bean['salePrice'];
								this.weekTotalNum = bean['saleNum'];
							}
							if (bean['categorie'] === 'month') {
								this.monthTotalMoney = bean['salePrice'];
								this.monthTotalNum = bean['saleNum'];
							}
							if (bean['categorie'] === 'year') {
								this.yearTotalMoney = bean['salePrice'];
								this.yearTotalNum = bean['saleNum'];
							}
						}
					}
				});
				// return this.getMainStatistics(param)
				// 	.then(data => {
				// 		for (let bean of data) {
				// 			if (bean['categorie'] === 'day') {
				// 				this.dayTotalMoney = bean['salePrice'];
				// 				this.dayTotalNum = bean['saleNum'];
				// 			}
				// 			if (bean['categorie'] === 'week') {
				// 				this.weekTotalMoney = bean['salePrice'];
				// 				this.weekTotalNum = bean['saleNum'];
				// 			}
				// 			if (bean['categorie'] === 'month') {
				// 				this.monthTotalMoney = bean['salePrice'];
				// 				this.monthTotalNum = bean['saleNum'];
				// 			}
				// 			if (bean['categorie'] === 'year') {
				// 				this.yearTotalMoney = bean['salePrice'];
				// 				this.yearTotalNum = bean['saleNum'];
				// 			}
				// 		}
				// 		uni.stopPullDownRefresh();
				// 	}, _ => void uni.stopPullDownRefresh());
					
			},

			touchLine1(e) {
				if (canvaColumn1) {
					canvaColumn1.scrollStart(e);
				}
			},
			moveLine1(e) {
				if (canvaColumn1) {
					canvaColumn1.scroll(e);
				}
			},
			touchEndLine1(e) {
				if (canvaColumn1) {
					canvaColumn1.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn1.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine2(e) {
				if (canvaColumn2) {
					canvaColumn2.scrollStart(e);
				}
			},
			moveLine2(e) {
				if (canvaColumn2) {
					canvaColumn2.scroll(e);
				}
			},
			touchEndLine2(e) {
				if (canvaColumn2) {
					canvaColumn2.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn2.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine3(e) {
				if (canvaColumn3) {
					canvaColumn3.scrollStart(e);
				}
			},
			moveLine3(e) {
				if (canvaColumn3) {
					canvaColumn3.scroll(e);
				}
			},
			touchEndLine3(e) {
				if (canvaColumn3) {
					canvaColumn3.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn3.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine4(e) {
				if (canvaColumn4) {
					canvaColumn4.scrollStart(e);
				}
			},
			moveLine4(e) {
				if (canvaColumn4) {
					canvaColumn4.scroll(e);
				}
			},
			touchEndLine4(e) {
				if (canvaColumn4) {
					canvaColumn4.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn4.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			// 点击确定
			dialogConfirm(done){
				this.$refs.popupDialog.close()
			},
			//点击取消
			dialogClose(done){
				// this.msgType = 'success'
				// 需要执行 done 才能关闭对话框
				this.$refs.popupDialog.close()
			}	
		}
	}
</script>
<style>
	page {
		/* background: #F2F2F2; */
		background: #FFFFFF;
		width: 750upx;
		overflow-x: hidden;
	}

	.head {
		display: flex;
		flex-direction: row;
		background: #206DC3;
		width: 750upx;
		height: 180upx;
	}

	.company {
		width: 48%;
		text-align: right;
	}

	.pname {
		display: flex;
		flex-direction: row;
		width: 40%;
	}

	.userFlagimg {
		padding-left: 30upx;
		padding-top: 10upx;
		width: 26upx;
		height: 28upx;
	}

	.wenzi {
		padding-left: 5upx;
		/* text-align:right; */
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
	}

	.ri {
		width: 690upx;
		height: 180upx;
		background: #FFFFFF;
		border-radius: 15upx;
		/* 上移 */
		transform: translateY(-90upx);
		text-align: center;
		margin: auto;
		display: flex;
		flex-direction: row;
		/* 阴影 */
		box-shadow: 0upx -1upx 20upx #D3D3D3;
		/* box-shadow:0px 0px  10px 5px #aaa; */
	}

	.riShell {
		display: flex;
		flex-direction: row;
		margin: auto;
	}

	.riTitle {
		display: flex;
		flex-direction: column;
		margin: auto;
	}

	.riqi {
		display: flex;
		flex-direction: column;
		margin: auto;
	}

	.fourTitle {
		width: 690upx;
		height: 294upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: #FFFFFF;
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		margin: auto;
		border-radius: 15upx;
		transform: translateY(-60upx);
	}

	.four {
		display: flex;
		flex-direction: row;
		margin: auto;
		width: 48%;
	}

	.fourImg {
		width: 54upx;
		height: 54upx;
	}

	.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: 0upx;
		height: 160upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 100%;
		/* padding: 10upx 2%; */
		flex-wrap: nowrap;
		border-radius: 15upx;
	}

	.qiun-title-dot-light {
		width: 92%;
		border-left: 20upx;
		border-left: 10upx solid #206DC3;
		padding-left: 10upx;
		height: 32upx;
		/* padding-bottom: 40upx; */
		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 32upx;
		color: #363D44;
		transform: translateY(20upx);
	}

	.dis {
		transform: translateY(-13upx);
		font-size: 32upx;
		font-family: "PingFang-SC-Bold";
		color: #363D44;
	}

	.shijian {
		transform: translateY(40upx);
		padding-top: 30upx;
		height: 80upx;
		width: 690upx;
		margin: auto;
		box-shadow: 0upx 0upx 10upx #D3D3D3;
	}

	.line {
		background: #ECECEC;
		height: 20upx;
	}

	.qiun-charts {
		width: 690upx;
		height: 370upx;
		padding-top: 50upx;
		background-color: #FFFFFF;
		margin: auto;
	}

	.charts {
		width: 690upx;
		height: 370upx;
		background-color: #FFFFFF;
		margin: auto;
	}

	.preImg {
		position: absolute;
		left: 30upx;
		width: 71upx;
		height: 57upx;
	}

	.nextImg {
		position: absolute;
		right: 30upx;
		width: 71upx;
		height: 57upx;
	}

	.fontLeft {
		margin-right: 6upx;
	}

	.tr {
		padding-top: 15upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}

	.td-left {
		font-family: "PingFang-SC-Bold";
		margin: auto;
		font-size: 26upx;
		width: 30%;
		text-align: right;
	}

	.td-right {
		font-family: "PingFang-SC-Bold";
		/* font-weight: bold; */
		margin: auto;
		/* font-size: 26upx; */
		width: 70%;
		text-align: left;
	}
</style>