shenzeeUniApp/pages/Charts/equipmentStatistics.vue

<!-- 机器销售排行 -->
<template>
	<view>
		<view class="head">
		</view>
		<view class="ri">
			<font class="title">{{$t('equipmentStatics.title')}}</font>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					{{$t('equipmentStatics.changeType')}}：
				</view>
				<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
					<picker @change="changeType"  :value="index" :range="changeTypeList">
						<view class="uni-input">{{changeTypeList[index]}}</view>
					</picker>
				</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('equipmentStatics.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('equipmentStatics.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('equipmentStatics.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('equipmentStatics.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 v-if="show">
			<view class="qiun-columns">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">
						<view class="dis">全国平均日销售排行(某省日销售总额/省机器数量)</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre2('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate5}}</span>
						<image @click="next2('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn5" id="canvaColumn5" class="charts2" disable-scroll=true
						@touchstart="touchLine5" @touchmove="moveLine5" @touchend="touchEndLine5"
						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">全国平均周销售排行</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre2('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate6}} 至 {{endDate6}}</span>
						<image @click="next2('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn6" id="canvaColumn6" class="charts2" disable-scroll=true
						@touchstart="touchLine6" @touchmove="moveLine6" @touchend="touchEndLine6"
						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">全国平均月销售排行</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre2('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate7}} 至 {{endDate7}}</span>
						<image @click="next2('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn7" id="canvaColumn7" class="charts2" disable-scroll=true
						@touchstart="touchLine7" @touchmove="moveLine7" @touchend="touchEndLine7"
						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">全国平均年销售排行</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre2('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate8}} 至 {{endDate8}}</span>
						<image @click="next2('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn8" id="canvaColumn8" class="charts2" disable-scroll=true
						@touchstart="touchLine8" @touchmove="moveLine8" @touchend="touchEndLine8"
						style="background-color: #FFFFFF;"></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 class="dis">全国日销售排行(全省当日销售总额)</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre3('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate9}}</span>
						<image @click="next3('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn9" id="canvaColumn9" class="charts2" disable-scroll=true
						@touchstart="touchLine9" @touchmove="moveLine9" @touchend="touchEndLine9"
						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">全国周销售排行</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre3('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate10}} 至 {{endDate10}}</span>
						<image @click="next3('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn10" id="canvaColumn10" class="charts2" disable-scroll=true
						@touchstart="touchLine10" @touchmove="moveLine10" @touchend="touchEndLine10"
						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">全国月销售排行</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre3('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate11}} 至 {{endDate11}}</span>
						<image @click="next3('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn11" id="canvaColumn11" class="charts2" disable-scroll=true
						@touchstart="touchLine11" @touchmove="moveLine11" @touchend="touchEndLine11"
						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">全国年销售排行</view>
					</view>
					<view class="shijian" style="text-align: center;position: relative;">
						<image @click="pre3('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
						<span>{{startDate12}} 至 {{endDate12}}</span>
						<image @click="next3('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
					</view>
				</view>
				<view class="qiun-charts2" style="background-color: #FFFFFF;">
					<canvas canvas-id="canvaColumn12" id="canvaColumn12" class="charts2" disable-scroll=true
						@touchstart="touchLine12" @touchmove="moveLine12" @touchend="touchEndLine12"
						style="background-color: #FFFFFF;"></canvas>
				</view>
			</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;

	var canvaColumn5 = null;
	var canvaColumn6 = null;
	var canvaColumn7 = null;
	var canvaColumn8 = null;

	var canvaColumn9 = null;
	var canvaColumn10 = null;
	var canvaColumn11 = null;
	var canvaColumn12 = null;
	export default {
		name: 'equipmentStatistics',
		props: {
			adminId: '',
			pname: '',
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				tese: 0,
				type:0,
				index:0,
				changeTypeList:[this.$t('equipmentStatics.sales'),this.$t('equipmentStatics.flowers')],
				startDate1: '',
				endDate1: '',
				startDate2: '',
				endDate2: '',
				startDate3: '',
				endDate3: '',
				startDate4: '',
				endDate4: '',

				startDate5: '',
				endDate5: '',
				startDate6: '',
				endDate6: '',
				startDate7: '',
				endDate7: '',
				startDate8: '',
				endDate8: '',

				startDate9: '',
				endDate9: '',
				startDate10: '',
				endDate10: '',
				startDate11: '',
				endDate11: '',
				startDate12: '',
				endDate12: '',
				show: false
			}
		},
		computed: {
			...mapState(['loginUser']),
		},

		mounted() {
			// this.init2();
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('equipmentStatics.title')
			});
			uni.setTabBarItem({
				index: 2,
				text: this.$t('tabs.tab3')
			});
			this.tese = this.tese + 1;
			var globalUser = uni.getStorageSync("globalUser");
			if (globalUser.id == '1') {
				this.show = true
			}
			var token = uni.getStorageSync("token");
			if (token.length > 1) {
				this.init();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
		},

		methods: {
			...mapActions('chart', ['getProvince', 'getProvinceAll', 'getEquipmentStatistics', 'getMainStatistics',
				'getMachineNum'
			]),
			async init() {
				if (this.pname === '') {
					this.pname = uni.getStorageSync("name");
				}
				// console.log("adminId:" + this.adminId)
				_self = this;
				//图表中图
				this.cWidth = uni.upx2px(690);
				this.cHeight = uni.upx2px(500);

				await this.initDateRang(new Date(), 'day');
				await this.initDateRang(new Date(), 'week');
				if (this.tese == 1) {
					await this.initDateRang(new Date(), 'month');
					await this.initDateRang(new Date(), 'year');
				}
				setTimeout(function() {
					_self.init2();
				}, 3000);
				// await this.init2();

			},
			async init2() {
				if (this.pname === '') {
					this.pname = uni.getStorageSync("name");
				}
				_self = this;
				//图表中图
				this.cWidth2 = uni.upx2px(690);
				this.cHeight2 = uni.upx2px(370);
				if (this.show == true) {
					await this.initDateRang2(new Date(), 'day');
					await this.initDateRang2(new Date(), 'week');
					if (this.tese == 1) {
						await this.initDateRang2(new Date(), 'month');
						await this.initDateRang2(new Date(), 'year');
					}

				}
				setTimeout(function() {
					_self.init3();
				}, 9000);
				// await this.init3();
			},
			async init3() {
				if (this.pname === '') {
					this.pname = uni.getStorageSync("name");
				}
				_self = this;
				//图表中图
				this.cWidth3 = uni.upx2px(690);
				this.cHeight3 = uni.upx2px(370);
				if (this.show == true) {
					await this.initDateRang3(new Date(), 'day');
					await this.initDateRang3(new Date(), 'week');
					if (this.tese == 1) {
						await this.initDateRang3(new Date(), 'month');
						await this.initDateRang3(new Date(), 'year');
					}

				}
			},
		 changeType: function(e){
			 this.index = e.target.value;
				this.type = e.target.value;
				this.tese = 1;
				this.init();
			},
			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);
			},
			initDateRang2(day, chartType) {
				const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
				if (chartType === 'day') {
					this.startDate5 = dateUtils.formateDate(day, 'yyyy/MM/dd');
				}
				if (chartType === 'week') {
					this.startDate6 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
					this.endDate6 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
				}
				if (chartType === 'month') {
					this.startDate7 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
					this.endDate7 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
				}
				if (chartType === 'year') {
					this.startDate8 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
					this.endDate8 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
				}

				return this.getProvinceData(chartType);
			},
			initDateRang3(day, chartType) {
				const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
				if (chartType === 'day') {
					this.startDate9 = dateUtils.formateDate(day, 'yyyy/MM/dd');
				}
				if (chartType === 'week') {
					this.startDate10 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
					this.endDate10 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
				}
				if (chartType === 'month') {
					this.startDate11 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
					this.endDate11 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
				}
				if (chartType === 'year') {
					this.startDate12 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
					this.endDate12 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
				}

				return this.getProvinceAllData(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);
			},
			pre2(chartType) {
				let day;
				if (chartType === 'day') { // 日
					day = new Date(this.startDate5);
					day.setDate(day.getDate() - 1);
				}
				if (chartType === 'week') { // 周
					day = new Date(this.startDate6);
					day.setDate(day.getDate() - 7);
				}
				if (chartType === 'month') { // 月
					day = new Date(this.startDate7);
					day.setMonth(day.getMonth() - 1);
				}
				if (chartType === 'year') { // 年
					day = new Date(this.startDate8);
					day.setFullYear(day.getFullYear() - 1);
				}
				this.initDateRang2(day, chartType);
			},
			pre3(chartType) {
				let day;
				if (chartType === 'day') { // 日
					day = new Date(this.startDate9);
					day.setDate(day.getDate() - 1);
				}
				if (chartType === 'week') { // 周
					day = new Date(this.startDate10);
					day.setDate(day.getDate() - 7);
				}
				if (chartType === 'month') { // 月
					day = new Date(this.startDate11);
					day.setMonth(day.getMonth() - 1);
				}
				if (chartType === 'year') { // 年
					day = new Date(this.startDate12);
					day.setFullYear(day.getFullYear() - 1);
				}
				this.initDateRang3(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);
			},
			next2(chartType) {
				let day;
				if (chartType === 'day') { // 日
					day = new Date(this.startDate5);
					day.setDate(day.getDate() + 1);
				}
				if (chartType === 'week') { // 周
					day = new Date(this.startDate6);
					day.setDate(day.getDate() + 7);
				}
				if (chartType === 'month') { // 月
					day = new Date(this.startDate7);
					day.setMonth(day.getMonth() + 1);
				}
				if (chartType === 'year') { // 年
					day = new Date(this.startDate8);
					day.setFullYear(day.getFullYear() + 1);
				}

				this.initDateRang2(day, chartType);
			},
			next3(chartType) {
				let day;
				if (chartType === 'day') { // 日
					day = new Date(this.startDate9);
					day.setDate(day.getDate() + 1);
				}
				if (chartType === 'week') { // 周
					day = new Date(this.startDate10);
					day.setDate(day.getDate() + 7);
				}
				if (chartType === 'month') { // 月
					day = new Date(this.startDate11);
					day.setMonth(day.getMonth() + 1);
				}
				if (chartType === 'year') { // 年
					day = new Date(this.startDate12);
					day.setFullYear(day.getFullYear() + 1);
				}

				this.initDateRang3(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.type=!''){
					param['changeType'] = this.type;
				}

				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]
								}]
							});
						}
					});
			},
			getProvinceData(chartType) {
				const param = {
					'chartType': chartType
				};
				if (chartType == 'day') {
					param['startDate'] = this.startDate5;
					param['endDate'] = this.startDate5;
				}
				if (chartType == 'week') {
					param['startDate'] = this.startDate6;
					param['endDate'] = this.endDate6;
				}
				if (chartType == 'month') {
					param['startDate'] = this.startDate7;
					param['endDate'] = this.endDate7;
				}
				if (chartType == 'year') {
					param['startDate'] = this.startDate8;
					param['endDate'] = this.endDate8;
				}
				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.getProvince(param)
					.then(data => {
						uni.stopPullDownRefresh();
						if (param['chartType'] == 'day') {
							canvaColumn5 = this.initChart2('canvaColumn5', data);
						}
						if (param['chartType'] == 'week') {
							canvaColumn6 = this.initChart2('canvaColumn6', data);
						}
						if (param['chartType'] == 'month') {
							canvaColumn7 = this.initChart2('canvaColumn7', data);
						}
						if (param['chartType'] == 'year') {
							canvaColumn8 = this.initChart2('canvaColumn8', data);
						}

					}, _ => {
						uni.stopPullDownRefresh();
						if (param['chartType'] == 'day') {
							canvaColumn5 = this.initChart2('canvaColumn5', {
								categories: ['暂无数据'],
								series: [{
									name: '平均销售额',
									data: [0]
								}]
							});
						}
						if (param['chartType'] == 'week') {
							canvaColumn6 = this.initChart2('canvaColumn6', {
								categories: ['暂无数据'],
								series: [{
									name: '平均销售额',
									data: [0]
								}]
							});
						}
						if (param['chartType'] == 'month') {
							canvaColumn7 = this.initChart2('canvaColumn7', {
								categories: ['暂无数据'],
								series: [{
									name: '平均销售额',
									data: [0]
								}]
							});
						}
						if (param['chartType'] == 'year') {
							canvaColumn8 = this.initChart2('canvaColumn8', {
								categories: ['暂无数据'],
								series: [{
									name: '平均销售额',
									data: [0]
								}]
							});
						}
					});
			},

			getProvinceAllData(chartType) {
				const param = {
					'chartType': chartType
				};
				if (chartType == 'day') {
					param['startDate'] = this.startDate9;
					param['endDate'] = this.startDate9;
				}
				if (chartType == 'week') {
					param['startDate'] = this.startDate10;
					param['endDate'] = this.endDate10;
				}
				if (chartType == 'month') {
					param['startDate'] = this.startDate11;
					param['endDate'] = this.endDate11;
				}
				if (chartType == 'year') {
					param['startDate'] = this.startDate12;
					param['endDate'] = this.endDate12;
				}
				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.getProvinceAll(param)
					.then(data => {
						uni.stopPullDownRefresh();
						if (param['chartType'] == 'day') {
							canvaColumn9 = this.initChart3('canvaColumn9', data);
						}
						if (param['chartType'] == 'week') {
							canvaColumn10 = this.initChart3('canvaColumn10', data);
						}
						if (param['chartType'] == 'month') {
							canvaColumn11 = this.initChart3('canvaColumn11', data);
						}
						if (param['chartType'] == 'year') {
							canvaColumn12 = this.initChart3('canvaColumn12', data);
						}

					}, _ => {
						uni.stopPullDownRefresh();
						if (param['chartType'] == 'day') {
							canvaColumn9 = this.initChart3('canvaColumn9', {
								categories: ['暂无数据'],
								series: [{
									name: '销售额',
									data: [0]
								}]
							});
						}
						if (param['chartType'] == 'week') {
							canvaColumn10 = this.initChart3('canvaColumn10', {
								categories: ['暂无数据'],
								series: [{
									name: '销售额',
									data: [0]
								}]
							});
						}
						if (param['chartType'] == 'month') {
							canvaColumn11 = this.initChart3('canvaColumn11', {
								categories: ['暂无数据'],
								series: [{
									name: '销售额',
									data: [0]
								}]
							});
						}
						if (param['chartType'] == 'year') {
							canvaColumn12 = this.initChart3('canvaColumn12', {
								categories: ['暂无数据'],
								series: [{
									name: '销售额',
									data: [0]
								}]
							});
						}
					});
			},
			initChart(canvasId, chartData) {
				return new uCharts({
					$this: _self,
					canvasId: canvasId,
					enableScroll: true,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#FFFFFF', //y轴颜色
					pixelRatio: 1,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						rotateLabel: true,
						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: 18
						}
					}
				});
			},
			initChart2(canvasId, chartData) {
				return new uCharts({
					$this: _self,
					canvasId: canvasId,
					enableScroll: true,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#FFFFFF', //y轴颜色
					pixelRatio: 1,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						rotateLabel: true,
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF  滚动条颜色底色
						scrollColor: '#DEE7F7', //默认为 #A6A6A6  滚动条颜色
						// disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth2 * _self.pixelRatio,
					height: _self.cHeight2 * _self.pixelRatio,
					extra: {
						column: {
							width: 18
						}
					}
				});
			},
			initChart3(canvasId, chartData) {
				return new uCharts({
					$this: _self,
					canvasId: canvasId,
					enableScroll: true,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#FFFFFF', //y轴颜色
					pixelRatio: 1,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						rotateLabel: true,
						itemCount: 4, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF  滚动条颜色底色
						scrollColor: '#DEE7F7', //默认为 #A6A6A6  滚动条颜色
						// disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth3 * _self.pixelRatio,
					height: _self.cHeight3 * _self.pixelRatio,
					extra: {
						column: {
							width: 18
						}
					}
				});
			},
			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
						}
					});
				}
			},
			touchLine5(e) {
				if (canvaColumn5) {
					canvaColumn5.scrollStart(e);
				}
			},
			moveLine5(e) {
				if (canvaColumn5) {
					canvaColumn5.scroll(e);
				}
			},
			touchEndLine5(e) {
				if (canvaColumn5) {
					canvaColumn5.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn5.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine6(e) {
				if (canvaColumn6) {
					canvaColumn6.scrollStart(e);
				}
			},
			moveLine6(e) {
				if (canvaColumn6) {
					canvaColumn6.scroll(e);
				}
			},
			touchEndLine6(e) {
				if (canvaColumn6) {
					canvaColumn6.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn6.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine7(e) {
				if (canvaColumn7) {
					canvaColumn7.scrollStart(e);
				}
			},
			moveLine7(e) {
				if (canvaColumn7) {
					canvaColumn7.scroll(e);
				}
			},
			touchEndLine7(e) {
				if (canvaColumn7) {
					canvaColumn7.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn7.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine8(e) {
				if (canvaColumn8) {
					canvaColumn8.scrollStart(e);
				}
			},
			moveLine8(e) {
				if (canvaColumn8) {
					canvaColumn8.scroll(e);
				}
			},
			touchEndLine8(e) {
				if (canvaColumn8) {
					canvaColumn8.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn8.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},

			touchLine9(e) {
				if (canvaColumn9) {
					canvaColumn9.scrollStart(e);
				}
			},
			moveLine9(e) {
				if (canvaColumn9) {
					canvaColumn9.scroll(e);
				}
			},
			touchEndLine9(e) {
				if (canvaColumn9) {
					canvaColumn9.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn9.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine10(e) {
				if (canvaColumn10) {
					canvaColumn10.scrollStart(e);
				}
			},
			moveLine10(e) {
				if (canvaColumn10) {
					canvaColumn10.scroll(e);
				}
			},
			touchEndLine10(e) {
				if (canvaColumn10) {
					canvaColumn10.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn10.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine11(e) {
				if (canvaColumn11) {
					canvaColumn11.scrollStart(e);
				}
			},
			moveLine11(e) {
				if (canvaColumn11) {
					canvaColumn11.scroll(e);
				}
			},
			touchEndLine11(e) {
				if (canvaColumn11) {
					canvaColumn11.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn11.showToolTip(e, {
						format: function(item, category) {
							return category + ' ' + item.name + ':' + item.data
						}
					});
				}
			},
			touchLine12(e) {
				if (canvaColumn12) {
					canvaColumn12.scrollStart(e);
				}
			},
			moveLine12(e) {
				if (canvaColumn12) {
					canvaColumn12.scroll(e);
				}
			},
			touchEndLine12(e) {
				if (canvaColumn12) {
					canvaColumn12.scrollEnd(e);
					//下面是toolTip事件，如果滚动后不需要显示，可不填写
					canvaColumn12.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: 120upx;
	}

	.title {
		/* border-left: 10upx solid #0ea391; */
		color: #363D44;
		font-size: 62upx;
		font-family: "PingFang-SC-Bold";
		text-align: center;
		margin: auto;
	}

	.ri {
		width: 690upx;
		height: 210upx;
		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;

		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 32upx;
		color: #363D44;
	}

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

	.shijian {
		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: 550upx;
		padding-top: 50upx;
		background-color: #FFFFFF;
		margin: auto;
	}

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

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

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

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

	.nextImg {
		position: absolute;
		right: 30upx;
		width: 71upx;
		height: 57upx;
	}
	.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>