materialAppletApp/pages/Charts/equipmentStatistics.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">用户：{{pname}}</font>
			</view>
			<view class="company">
				<font style="color: #BDD6F3;font-size:28upx">申泽智能物联</font>
			</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: 'equipmentStatistics',
		props: {
			adminId: '',
		},
		data() {
			return {
				pname:'',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				startDate1: '',
				endDate1: '',
				startDate2: '',
				endDate2: '',
				startDate3: '',
				endDate3: '',
				startDate4: '',
				endDate4: '',
			}
		},
		computed: {
			...mapState(['loginUser']),
		},
		onLoad(option){
			console.log("onLoad");
			this.adminId = option['adminId'];
			this.pname = option['pname'];
			this.init();
		},
		mounted() {
			console.log("mounted");
			this.init();
		},
		methods: {
			...mapActions('chart', ['getEquipmentStatistics','getMainStatistics','getMachineNum']),
			async init(){
				if(this.pname===''){
					this.pname = uni.getStorageSync("name");
				}
				console.log("adminId:" + this.adminId)
				_self = this;
				//图表中图
				this.cWidth = uni.upx2px(600);
				this.cHeight = uni.upx2px(430);

				await this.initDateRang(new Date(),'day');
				await this.initDateRang(new Date(),'week');
				await this.initDateRang(new Date(),'month');
				await 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');
				}
				
				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'];
				}
				if (this.equipmentId) {
					param['equipmentId'] = this.equipmentId;
				}
				
				return this.getEquipmentStatistics(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){
				return new uCharts({
					$this: _self,
					canvasId: canvasId,
					enableScroll: true,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#E5FDC3',//y轴颜色
					pixelRatio: 1,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						itemCount: 4, //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
						}
					}
				});
			},
			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
						}
					});
				}
			},
		}
	}
</script>
<style>
	page {
		/* background: #F2F2F2; */
		background:#FFFFFF;
		width: 750upx;
		overflow-x: hidden;
	}
	.head{
		display: flex;
		flex-direction: row;
		background:#206DC3;
		width: 750upx;
		height: 80upx;
		margin-bottom: 20upx;
	}
	.company{
		width: 48%;
		text-align:right;
	}
	.pname{
		display: flex;
		flex-direction: row;
		width: 40%;
	}
	.userFlagimg{
		padding-left: 10upx;
		padding-top: 10upx;
		width: 26upx;
		height: 28upx;
	}
	.wenzi{
		padding-right: 0upx;
		/* 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: 200upx;
	}
	
	.qiun-bg-white {
		background: #FFFFFF;
	}
	
	.qiun-title-bar {
		width: 100%;
		/* padding: 10upx 2%; */
		flex-wrap: nowrap;
		border-radius: 15upx;
	}
	.qiun-title-dot-light {
		border-left: 30upx solid #0ea391;
		padding-top: 20upx;
		/* border-left: 20upx; */
		padding-left: 10upx;
		height: 85upx;
		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 32upx;
		color: #363D44;
	}
	.shijian{
		padding-top: 30upx;
		height: 80upx;
		width: 690upx;
		margin: auto;
		box-shadow:0upx 0upx 10upx #D3D3D3;
	}
	.qiun-charts {
		width: 690upx;
		height: 370upx;
		padding-top: 30upx;
		background-color: #FFFFFF;
		margin: auto;
	}
	.charts {
		width: 690upx;
		height: 370upx;
		background-color: #FFFFFF;
		margin: auto;
	}
	.preImg {
		position: absolute;left: 40upx; width: 27upx;height: 45upx;
	}
	.nextImg {
		position: absolute;right: 40upx; width: 27upx;height: 45upx;
	}
</style>