Ci2Order.vue/App/pages/center/report/report.vue

<template>
	<view>
		<z-navbar title="报表统计" back>
			<view slot="right" class="iconfont iconxuanzhong2x" @click="showSearch=true"></view>
		</z-navbar>
		<!-- <z-tabs :tabs="['近七天','近30天','自定义时间']" v-model="stateTab" @change="changeTabs"></z-tabs> -->
		<!-- <view class="flex-n fac fjb data-search-range mt-10" v-if="stateTab==2">
			<view class="flex-n fac">
				<view class="flex-n fac fjb">
					<view class="data-search-range-item" @click="lookBeginTime=true" v-if="!beginTime">开始日期</view>
					<div class="data-search-range-itemselect" @click="lookBeginTime=true" v-else>{{beginTime}}</div>
					<view class="">
						-
					</view>
					<view class="data-search-range-item" @click="lookEndTime=true" v-if="!endTime">结束日期</view>
					<div class="data-search-range-itemselect" @click="lookEndTime=true" v-else>{{endTime}}</div>
				</view>
				<view class="iconfont iconjuxing27kaobei" v-if="beginTime||endTime" @click="beginTime='';endTime=''"></view>
			</view>
			<view class="data-search-btn" @click="searchList">
				确定
			</view>
		</view> -->

		<!-- 		<z-date-select :visible.sync="lookBeginTime" v-model="beginTime" :endDate="endTime"></z-date-select>
		<z-date-select :visible.sync="lookEndTime" v-model="endTime" :startDate="beginTime"></z-date-select> -->
		<search :visible.sync="showSearch" @searchData="searchData"></search>
		<view class="report-content mt-20">
			<view class="report-content-item flex-n fac">
				<view>订单数量：{{reportOrderCalc.orderCount}}场</view>
				<view>预计收入：{{reportOrderCalc.orderMoney}}元</view>
			</view>
			<view class="report-content-item flex-n fac">
				<view>桌数：{{reportOrderCalc.deskCount}}桌</view>
				<view>人数：{{reportOrderCalc.personCount}}人</view>
			</view>
		</view>
		<view class="flex-n fac fjb report-top">
			<view class="report-top-title">预定场地统计</view>
			<view class="report-top-subtitle">单位：百分比</view>
		</view>
		<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn"
		 @touchmove="touchmove" @touchend="touchendOne"></canvas>
		<view class="flex-n fac fjb report-top">
			<view class="report-top-title">销售预定统计</view>
			<view class="report-top-subtitle">单位：百分比</view>
		</view>
		<canvas canvas-id="canvasColumn2" id="canvasColumn2" class="charts" disable-scroll=true @touchstart="touchColumn2"
		 @touchmove="touchmove2" @touchend="touchendTwo"></canvas>
		<view class="report-content">
			<view class="report-content-item flex-n fac">
				<view>预定桌数：{{reportOrderClear.deskCount}}桌</view>
				<view>预计人数：{{reportOrderClear.personCount}}人</view>
			</view>
			<view class="report-content-item flex-n fac">
				<view>结算桌数：{{reportOrderClear.clearDeskCount}}桌</view>
				<view>结算人数：{{reportOrderClear.clearPersonCount}}人</view>
			</view>
			<view class="report-content-item flex-n fac">
				<view>预计收入：{{reportOrderClear.orderMoney}}元</view>
				<view>订单数量：{{reportOrderClear.orderCount}}单</view>
			</view>
			<view class="report-content-item flex-n fac">
				<view>实际收入：{{reportOrderClear.realMoney}}元</view>
				<view>收入差额：{{reportOrderClear.differenceMoney}}元</view>
			</view>
		</view>



		<view class="flex-n fac fjb report-top">
			<view class="report-top-title">结算场地统计</view>
			<view class="report-top-subtitle">单位：百分比</view>
		</view>
		<canvas canvas-id="canvasColumn3" id="canvasColumn3" class="charts" disable-scroll=true @touchstart="touchColumn3"
		 @touchmove="touchmove3" @touchend="touchendThree"></canvas>

		<view class="flex-n fac fjb report-top">
			<view class="report-top-title">销售结算统计</view>
			<view class="report-top-subtitle">单位：百分比</view>
		</view>
		<canvas canvas-id="canvasColumn4" id="canvasColumn4" class="charts" disable-scroll=true @touchstart="touchColumn4"
		 @touchmove="touchmove4" @touchend="touchendFour"></canvas>


		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	import search from './sub/search.vue';
	const app = getApp({
		allowDefault: true
	});
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	var canvaColumn = null,
		canvaColumn2 = null,
		canvaColumn3 = null,
		canvaColumn4 = null;
	export default {
		components: {
			search
		},
		data() {
			return {
				stateTab: 0,
				showSearch: false,
				lookBeginTime: false,
				lookEndTime: false,
				beginTime: '',
				endTime: '',
				reportOrderHouseList: [],
				reportOrderSalesList: [],
				reportOrderHouseConfirmList: [],
				reportOrderSalesConfirmList: [],
				reportOrderCalc: {},
				reportOrderClear: {},

				createStartTime: null,
				createEndTime: null,
				orderStartTime: null,
				orderEndTime: null,
				orderStates: null,
				packageIds: null,
				houseIds: null,
				createUserIds: null,
			}
		},
		mounted() {
			this.getReportOrderHouse();
			this.getReportOrderSales();
			this.getReportOrderHouseConfirm();
			this.getReportOrderSalesConfirm();
			this.getReportOrderCalc();
			this.getReportOrderClear();
		},
		methods: {
			changeTabs(idx) {
				console.log(idx)
				this.stateTab = idx;
			},
			searchData(data) {
				this.createStartTime = data.createStartTime||null;
				this.createEndTime = data.createEndTime||null;
				this.orderStartTime = data.orderStartTime||null;
				this.orderEndTime = data.orderEndTime||null;
				this.orderStates = data.orderStates||null;
				this.packageIds = data.packageIds.join(',')||null;
				this.houseIds = data.houseIds.join(',')||null;
				this.createUserIds = data.createUserIds.join(',')||null;
				console.log(data)
				this.getReportOrderHouse();
				this.getReportOrderSales();
				this.getReportOrderHouseConfirm();
				this.getReportOrderSalesConfirm();
				this.getReportOrderCalc();
				this.getReportOrderClear();
			},
			searchList() {
				if (this.beginTime != '' && this.endTime == '' || this.beginTime == '' && this.endTime != '') {
					return uni.showToast({
						title: '请选择完整时间段',
						icon: 'none'
					})
				}
			},
			//预定场地统计
			getReportOrderHouse() {
				this.$axios.post('app/report/reportOrderHouse', {
					"storeId": uni.getStorageSync('storeId'),
					createStartTime: this.createStartTime,
					createEndTime: this.createEndTime,
					orderStartTime: this.orderStartTime,
					orderEndTime: this.orderEndTime,
					orderStates: this.orderStates,
					packageIds: this.packageIds,
					houseIds: this.houseIds,
					createUserIds: this.createUserIds
				}).then(res => {
					console.log(res.data)
					this.reportOrderHouseList = res.data.list;
					var reportOrderHouseList = res.data.list;
					var categories = [],
						data1 = [],
						data2 = [];
					for (var i = 0; i < reportOrderHouseList.length; i++) {
						categories.push(reportOrderHouseList[i].houseName);
						data1.push({
							value: Number(Number(reportOrderHouseList[i].orderRate) * 100).toFixed(2),
							orderCount: reportOrderHouseList[i].orderCount
						});
						data2.push({
							value: Number(Number(reportOrderHouseList[i].moneyRate) * 100).toFixed(2),
							orderMoney: reportOrderHouseList[i].orderMoney
						});
					}
					this.getReportOrderHouseChart(categories, data1, data2);
				}).catch(err => {

				})
			},
			getReportOrderHouseChart(categories, data1, data2) {
				var that = this;
				canvaColumn = new uCharts({
					$this: this,
					canvasId: 'canvasColumn',
					type: 'column',
					padding: [15, 15, 0, 15],
					colors: ['#2da9fa', '#1ec695'],
					enableScroll: true,
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					animation: true,
					categories: categories,
					series: [{
						"name": '预定场地数量/占比',
						"data": data1
					}, {
						"name": '预订场地业绩/占比',
						"data": data2
					}],
					xAxis: {
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						disableGrid: true,
					},
					yAxis: {
						data: [{
							// max: 100,
							min: 0,
							axisLine: false,
							// format:(val)=>{return val.toFixed(0)+'元'},
						}]
					},
					dataLabel: true,
					width: uni.upx2px(750),
					height: uni.upx2px(600),
					pixelRatio: 1,
					extra: {
						column: {
							type: 'group',
							width: 30
						}
					}
				});

			},
			touchColumn(e) {
				canvaColumn.scrollStart(e);
			},
			touchmove(e) {
				let distance = canvaColumn.scroll(e);
				if (distance !== undefined) {
					canvaColumn.translate(distance);
				}
			},
			touchendOne(e) {
				canvaColumn.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						console.log(item, category)
						if (item.name == "预定场地数量/占比") {
							return category + ':' + item.data.orderCount + '场/' + item.data.value + '%'
						} else {
							return category + ':' + item.data.orderMoney + '元/' + item.data.value + '%'
						}
					}
				});
			},

			//销售预定统计
			getReportOrderSales() {
				this.$axios.post('app/report/reportOrderSales', {
					"storeId": uni.getStorageSync('storeId'),
					createStartTime: this.createStartTime,
					createEndTime: this.createEndTime,
					orderStartTime: this.orderStartTime,
					orderEndTime: this.orderEndTime,
					orderStates: this.orderStates,
					packageIds: this.packageIds,
					houseIds: this.houseIds,
					createUserIds: this.createUserIds
				}).then(res => {
					console.log(res.data)
					this.reportOrderSalesList = res.data.list;
					var reportOrderSalesList = res.data.list;
					var categories = [],
						data1 = [],
						data2 = [];
					for (var i = 0; i < reportOrderSalesList.length; i++) {
						categories.push(reportOrderSalesList[i].userName);
						data1.push({
							value: Number(Number(reportOrderSalesList[i].orderRate) * 100).toFixed(2),
							orderCount: reportOrderSalesList[i].orderCount
						});
						data2.push({
							value: Number(Number(reportOrderSalesList[i].moneyRate) * 100).toFixed(2),
							orderMoney: reportOrderSalesList[i].orderMoney
						});
					}
					this.getReportOrderSalesChart(categories, data1, data2);
				}).catch(err => {

				})
			},
			getReportOrderSalesChart(categories, data1, data2) {
				var that = this;
				canvaColumn2 = new uCharts({
					$this: this,
					canvasId: 'canvasColumn2',
					type: 'column',
					padding: [15, 15, 0, 15],
					colors: ['#2da9fa', '#1ec695'],
					enableScroll: true,
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					animation: true,
					categories: categories,
					series: [{
						"name": '销售预订场地数量/占比',
						"data": data1
					}, {
						"name": '销售预订场地业绩/占比',
						"data": data2
					}],
					xAxis: {
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						disableGrid: true,
					},
					yAxis: {
						data: [{
							// max: 100,
							min: 0,
							axisLine: false,
							// format:(val)=>{return val.toFixed(0)+'元'},
						}]
					},
					dataLabel: true,
					width: uni.upx2px(750),
					height: uni.upx2px(600),
					pixelRatio: 1,
					extra: {
						column: {
							type: 'group',
							width: 30
						}
					}
				});

			},
			touchColumn2(e) {
				canvaColumn2.scrollStart(e);
			},
			touchmove2(e) {
				let distance = canvaColumn2.scroll(e);
				if (distance !== undefined) {
					canvaColumn2.translate(distance);
				}
			},
			touchendTwo(e) {
				canvaColumn2.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn2.showToolTip(e, {
					format: function(item, category) {
						console.log(item, category)
						if (item.name == "销售预订场地数量/占比") {
							return category + ':' + item.data.orderCount + '场/' + item.data.value + '%'
						} else {
							return category + ':' + item.data.orderMoney + '元/' + item.data.value + '%'
						}
					}
				});
			},
			//结算场地统计
			getReportOrderHouseConfirm() {
				this.$axios.post('app/report/reportOrderHouseConfirm', {
					"storeId": uni.getStorageSync('storeId'),
					createStartTime: this.createStartTime,
					createEndTime: this.createEndTime,
					orderStartTime: this.orderStartTime,
					orderEndTime: this.orderEndTime,
					orderStates: this.orderStates,
					packageIds: this.packageIds,
					houseIds: this.houseIds,
					createUserIds: this.createUserIds
				}).then(res => {
					console.log(res.data)
					this.reportOrderHouseConfirmList = res.data.list;
					var reportOrderHouseConfirmList = res.data.list;
					var categories = [],
						data1 = [],
						data2 = [];
					for (var i = 0; i < reportOrderHouseConfirmList.length; i++) {
						categories.push(reportOrderHouseConfirmList[i].houseName);
						data1.push({
							value: Number(Number(reportOrderHouseConfirmList[i].orderRate) * 100).toFixed(2),
							orderCount: reportOrderHouseConfirmList[i].orderCount
						});
						data2.push({
							value: Number(Number(reportOrderHouseConfirmList[i].realMoneyRate) * 100).toFixed(2),
							orderMoney: reportOrderHouseConfirmList[i].orderRealMoney
						});
					}
					this.getReportOrderHouseConfirmChart(categories, data1, data2);
				}).catch(err => {

				})
			},
			getReportOrderHouseConfirmChart(categories, data1, data2) {
				var that = this;
				canvaColumn3 = new uCharts({
					$this: this,
					canvasId: 'canvasColumn3',
					type: 'column',
					padding: [15, 15, 0, 15],
					colors: ['#2da9fa', '#1ec695'],
					enableScroll: true,
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					animation: true,
					categories: categories,
					series: [{
						"name": '结算场地数量/占比',
						"data": data1
					}, {
						"name": '结算场地业绩/占比',
						"data": data2
					}],
					xAxis: {
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						disableGrid: true,
					},
					yAxis: {
						data: [{
							// max: 100,
							min: 0,
							axisLine: false,
							// format:(val)=>{return val.toFixed(0)+'元'},
						}]
					},
					dataLabel: true,
					width: uni.upx2px(750),
					height: uni.upx2px(600),
					pixelRatio: 1,
					extra: {
						column: {
							type: 'group',
							width: 30
						}
					}
				});

			},
			touchColumn3(e) {
				canvaColumn3.scrollStart(e);
			},
			touchmove3(e) {
				let distance = canvaColumn3.scroll(e);
				if (distance !== undefined) {
					canvaColumn3.translate(distance);
				}
			},
			touchendThree(e) {
				canvaColumn3.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn3.showToolTip(e, {
					format: function(item, category) {
						console.log(item, category)
						if (item.name == "结算场地数量/占比") {
							return category + ':' + item.data.orderCount + '场/' + item.data.value + '%'
						} else {
							return category + ':' + item.data.orderMoney + '元/' + item.data.value + '%'
						}
					}
				});
			},

			//销售结算统计
			getReportOrderSalesConfirm() {
				this.$axios.post('app/report/reportOrderHouse', {
					"storeId": uni.getStorageSync('storeId'),
					createStartTime: this.createStartTime,
					createEndTime: this.createEndTime,
					orderStartTime: this.orderStartTime,
					orderEndTime: this.orderEndTime,
					orderStates: this.orderStates,
					packageIds: this.packageIds,
					houseIds: this.houseIds,
					createUserIds: this.createUserIds
				}).then(res => {
					console.log(res.data)
					this.reportOrderSalesConfirmList = res.data.list;
					var reportOrderSalesConfirmList = res.data.list;
					var categories = [],
						data1 = [],
						data2 = [];
					for (var i = 0; i < reportOrderSalesConfirmList.length; i++) {
						categories.push(reportOrderSalesConfirmList[i].houseName);
						data1.push({
							value: Number(Number(reportOrderSalesConfirmList[i].orderRate) * 100).toFixed(2),
							orderCount: reportOrderSalesConfirmList[i].orderCount
						});
						data2.push({
							value: Number(Number(reportOrderSalesConfirmList[i].moneyRate) * 100).toFixed(2),
							orderMoney: reportOrderSalesConfirmList[i].orderMoney
						});
					}
					this.getReportOrderSalesConfirmChart(categories, data1, data2);
				}).catch(err => {

				})
			},

			getReportOrderSalesConfirmChart(categories, data1, data2) {
				var that = this;
				canvaColumn4 = new uCharts({
					$this: this,
					canvasId: 'canvasColumn4',
					type: 'column',
					padding: [15, 15, 0, 15],
					colors: ['#2da9fa', '#1ec695'],
					enableScroll: true,
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					animation: true,
					categories: categories,
					series: [{
						"name": '销售结算场地数量/占比',
						"data": data1
					}, {
						"name": '销售结算场地业绩/占比',
						"data": data2
					}],
					xAxis: {
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						disableGrid: true,
					},
					yAxis: {
						data: [{
							// max: 100,
							min: 0,
							axisLine: false,
							// format:(val)=>{return val.toFixed(0)+'元'},
						}]
					},
					dataLabel: true,
					width: uni.upx2px(750),
					height: uni.upx2px(600),
					pixelRatio: 1,
					extra: {
						column: {
							type: 'group',
							width: 30
						}
					}
				});

			},
			touchColumn4(e) {
				canvaColumn4.scrollStart(e);
			},
			touchmove4(e) {
				let distance = canvaColumn4.scroll(e);
				if (distance !== undefined) {
					canvaColumn4.translate(distance);
				}
			},
			touchendFour(e) {
				canvaColumn4.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn4.showToolTip(e, {
					format: function(item, category) {
						console.log(item, category)
						if (item.name == "销售结算场地数量/占比") {
							return category + ':' + item.data.orderCount + '场/' + item.data.value + '%'
						} else {
							return category + ':' + item.data.orderMoney + '元/' + item.data.value + '%'
						}
					}
				});
			},
			//预定统计
			getReportOrderCalc() {
				this.$axios.post('app/report/reportOrderCalc', {
					"storeId": uni.getStorageSync('storeId'),
					createStartTime: this.createStartTime,
					createEndTime: this.createEndTime,
					orderStartTime: this.orderStartTime,
					orderEndTime: this.orderEndTime,
					orderStates: this.orderStates,
					packageIds: this.packageIds,
					houseIds: this.houseIds,
					createUserIds: this.createUserIds
				}).then(res => {
					this.reportOrderCalc = res.data.list[0];
				}).catch(err => {

				})
			},
			//预定统计结算
			getReportOrderClear() {
				this.$axios.post('app/report/reportOrderClear', {
					"storeId": uni.getStorageSync('storeId'),
					createStartTime: this.createStartTime,
					createEndTime: this.createEndTime,
					orderStartTime: this.orderStartTime,
					orderEndTime: this.orderEndTime,
					orderStates: this.orderStates,
					packageIds: this.packageIds,
					houseIds: this.houseIds,
					createUserIds: this.createUserIds
				}).then(res => {
					this.reportOrderClear = res.data.list[0];
				}).catch(err => {

				})
			},

		}
	}
</script>

<style scoped lang="scss">
	#canvasColumn,
	#canvasColumn2,
	#canvasColumn3,
	#canvasColumn4 {
		width: 100vw;
		height: 600rpx;
	}

	.report-content {
		border-radius: 10rpx;
		background: #F1F1F1;
		margin: 0 40rpx;
		padding: 10rpx;
		color: #999999;
		font-size: 24rpx;
		font-weight: bold;

		.report-content-item {
			line-height: 40rpx;

			view {
				flex: 1;
				margin-left: 40rpx;
			}
		}
	}

	.report-top {
		padding: 20rpx 30rpx;

		.report-top-title {
			color: #2DA9FA;
			font-weight: 700;
			font-size: 32rpx;
		}

		.report-top-subtitle {
			color: #666666;
			font-size: 24rpx;
		}
	}

	.data-search-range {
		width: calc(100% - 20rpx);
		padding: 10rpx;
		background: #eff1f6;

		.data-search-range-item {
			color: #ccc;
			font-size: 32rpx;
			width: 200rpx;
			text-align: center;
		}

		.data-search-range-itemselect {
			font-size: 32rpx;
			width: 200rpx;
			text-align: center;
		}

		.data-search-btn {
			width: calc(100% - 500rpx);
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			background-color: #007AFF;
		}
	}
</style>