hotelHomestayWx/pages/statistics/index.vue

<template>
	<view class="page" :style="{'padding-top':mt+'px'}">
		<c-nav-bar title="统计" :showIcon="false"></c-nav-bar>
		<view class="hander" @click="DateTimes">
			<!-- 2024年1月 -->
			<view
				class="tn-flex tn-flex-col-center  tn-margin-right tn-padding-xs tn-text-sm tn-bg-gray--light tn-radius tn-color-gray--dark"
				style="border-radius: 12rpx; width: 380rpx;">
				<!-- 	<picker @change="bindDateChange" mode="date" :value="date" :start="startDate" :end="endDate"
					fields="month">

				</picker> -->
				<text class="tn-padding-left-xs tn-padding-right-xs">{{dateTime}}
				</text>

			</view>
			<view style="width: 60rpx; line-height: 48rpx; height: 48rpx; margin: 15rpx 0 ; ">
				<u-icon name="arrow-down" color="#000000" size="20"></u-icon>
			</view>
		</view>

		<view class="hander-price">
			<view class="one">
				<view class="left">
					总营业额
				</view>
				<view class="right">
					共{{list.totalNums==null?'0':list.totalNums}}笔
				</view>
			</view>
			<view class="two">
				<text>￥</text>
				<text>{{list.totalAmount==null?'0':list.totalAmount}}</text>
			</view>
		</view>
		<view class="echarts-one">
			<view class="title">
				营业概况
			</view>
			<view class="hander-content">
				<view class="list">
					<view class="title">
						房费
					</view>
					<view class="price">
						{{list.roomAmount==null?'0':list.roomAmount}}
					</view>
				</view>
				<view class="list">
					<view class="title">
						餐饮
					</view>
					<view class="price">
						{{list.repastAmount==null?'0':list.repastAmount}}
					</view>
				</view>
				<view class="list">
					<view class="title">
						其他
					</view>
					<view class="price">
						{{list.othersAmount==null?'0':list.othersAmount}}
					</view>
				</view>

			</view>
			<view class="Pie_charts" style="min-height: 580rpx;">
				<!-- <PieCharts></PieCharts> -->
				<qiun-data-charts :canvas2d='true' type="ring" :opts="optsPied" :chartData="chartDataPied" />

			</view>
		</view>
		<view class="echarts-two">

			<view class="title">
				交易趋势
			</view>
			<view class="title1">
				单位：元
			</view>
			<view class="line_charts_one">
				<qiun-data-charts :ontouch="true" canvas2d='true' type="line" :opts="revenueOptsone"
					:chartData="revenueChartDataOne" />
			</view>
		</view>
		<view class="echarts-three">
			<view>
				<view class="title">
					入住率
				</view>
				<view class="title1">
					入住率(%)
				</view>
			</view>
			<view class="line_charts_two">
				<qiun-data-charts type="line" canvas2d='true' :ontouch="true" :opts="revenueOptstwo"
					:chartData="revenueChartDataTwo" />
			</view>
		</view>
		<Tabbar :tabbarIndex="2"></Tabbar>

		<u-calendar class="u-time" confirmDisabledText="确定" :show="showTime" mode="range" @confirm="confirm"
			@close="closeDate" :defaultDate="calendar.defaultDate" :maxDate="calendar.maxDate" :closeable="true"
			:minDate="calendar.minDate" :monthNum="calendar.monthNum" :closeOnClickOverlay="true"></u-calendar>




	</view>
</template>

<script>
	// import uCharts from '@/utils/u-charts.js';
	// import PieCharts from "@/components/Charts/PieCharts.vue"
	// import LineOne from "@/components/Charts/LineOne.vue"
	// import LineTwo from "@/components/Charts/LineTwo.vue"
	export default {
		components: {
			// PieCharts,
			// LineOne,
			// LineTwo
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 54,
				date: '',
				fromData: {
					dateDayStart: '', //开始 
					dateDayEnd: '', //结束 
					homestayId: '',

				},
				// 营业概况
				chartDataPied: {},
				optsPied: {
					rotate: false,
					rotateLock: false,
					color: ['#1372FF', '#F89F2A', '#02C493'],
					padding: [30, 30, 30, 35],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 25,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 10,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					},
				},
				PieChartsList: {},
				// 交易趋势
				revenueChartDataOne: {},
				revenueOptsone: {
					color: ["#4B98FE"],
					padding: [15, 15],
					dataLabel: false,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						gridType: "solid",
						itemCount: 6,
						scrollShow: true,
						axisLineColor: "#EFEFEF",
					},
					legend: {
						show: false
					},
					yAxis: {
						gridType: "solid",
						gridColor: "#EFEFEF",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				dataListOne: [],
				// 入住率
				revenueChartDataTwo: {},
				revenueOptstwo: {
					color: ["#4B98FE"],
					padding: [15, 15],
					dataLabel: false,
					enableScroll: true,
					xAxis: {
						disableGrid: true,
						gridType: "solid",
						itemCount: 6,
						scrollShow: true,
						axisLineColor: "#EFEFEF",
					},
					legend: {
						show: false
					},
					yAxis: {
						gridType: "solid",
						gridColor: "#EFEFEF",
						dashLength: 2,
						data: [{
							axisLineColor: "#FFFFFF",
							min: 0,
							max: 1
						}],
					},

					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				dataListTwo: [],


				list: {},
				showTime: false,
				dateTime: '',
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: '',
					monthNum: 13,
				},
			}
		},
		onReady() {
			// this.fromData.dateDay = e.detail.value
			this.fromData.homestayId = wx.getStorageSync('homestayId')
			if (this.fromData.homestayId !== '') {
				this.getList()
			}


		},
		onLoad() {
			// this.getDays(0)


			this.dateTime = new Date().Format('yyyy-MM-dd');
			this.fromData.dateDayStart = new Date().Format('yyyy-MM-dd');
			this.fromData.dateDayEnd = new Date().Format('yyyy-MM-dd');
			this.chooseTimed()

		},
		methods: {

			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = String(date.getMonth() + 3);
				let day = String(date.getDate());
				month = month.padStart(2, '0');
				day = day.padStart(2, '0');
				this.calendar.maxDate = year + '-' + month + '-' + day;
				// this.calendar.defaultDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = new Date().Format('yyyy-MM-dd');

				let nowTime = date.getTime();
				let preTime = nowTime - 30 * 24 * 60 * 60 * 1000;
				let preDate = new Date(preTime);
				let preYear = preDate.getFullYear();
				let preMonth = String(preDate.getMonth());
				let preDay = String(preDate.getDate());
				preMonth = preMonth.padStart(2, '0');
				preDay = preDay.padStart(2, '0');
				this.calendar.minDate = preYear + '-' + preMonth + '-' + preDay;
				console.log(this.calendar);
			},




			confirm(e) {
				console.log(e);
				this.showTime = false
				this.dateTime = e[0] + '~' + e[e.length - 1]
				this.fromData.dateDayStart = e[0]
				this.fromData.dateDayEnd = e[e.length - 1]
				this.getList()
			},
			closeDate() {
				console.log('456789');
				this.showTime = false
			},
			DateTimes() {
				console.log('123456');
				this.showTime = true
			},

			getDays(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				console.log('------', tYear + '-' + tMonth);
				this.date = tYear + '年' + tMonth + '月'
				this.fromData.dateDay = tYear + '-' + tMonth
				return tYear + '-' + tMonth
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},


			// 时间
			startDate() {
				return this.getDate('start')
			},
			endDate() {
				return this.getDate('end')
			},

			getList() {
				this.$api.get('/merchant/hotel/mine/getHotelCountInfo', this.fromData).then(res => {
					this.list = res.data.data
					this.dataListOne = []
					this.dataListTwo = []
					//  营业概况
					this.getServerData();
					//  入住率
					let x = [],
						y = [],
						//  交易趋势
						x1 = [],
						y1 = [];
					console.log(res.data)
					if (res.data.code === 0) {
						this.list = res.data.data;
						for (let i = 0; i < res.data.data.checkedInChant.length; i++) {
							x.push(res.data.data.checkedInChant[i].dateDay);
							y.push(res.data.data.checkedInChant[i].checkedInRatio);
						}
						for (let i = 0; i < res.data.data.dealLineChant.length; i++) {
							x1.push(res.data.data.dealLineChant[i].dateDay);
							y1.push(res.data.data.dealLineChant[i].orderAmount);
						}
					} else {
						this.list = []
					}
					setTimeout(() => {
						this.drawRevenueChartstwo(x, y);
						this.drawRevenueChartsOne(x1, y1)
					}, 500)
				})
			},


			// 环图 营业概况
			getServerData() {
				this.PieChartsList = this.list
				this.PieChartsList = {
					series: [{
						data: [{
								"name": "房费",
								"value": this.PieChartsList.roomAmount == null ? '0' : this.PieChartsList
									.roomAmount,
								"labelText": "房费" + this.PieChartsList.roomRatio + '%'
							},
							{
								"name": "餐饮",
								"value": this.PieChartsList.repastAmount == null ? '0' : this.PieChartsList
									.repastAmount,
								"labelText": "餐饮" + this.PieChartsList.repastRatio + '%'
							},
							{
								"name": "其他",
								"value": this.PieChartsList.othersAmount == null ? '0' : this
									.PieChartsList.othersAmount,
								"labelText": "其他" + this.PieChartsList.othersRatio + '%',
							},

						],

					}],
				}
				this.chartDataPied = JSON.parse(JSON.stringify(this.PieChartsList));
			},

			// 交易趋势
			drawRevenueChartsOne(x, y) {
				let list1 = {
					categories: x,
					series: [{
						name: "收入",
						data: y,
						legendShape: "circle",
						color: "#4088FE",
						pointShape: "none",
					}, ],
				}
				this.revenueChartDataOne = JSON.parse(JSON.stringify(list1));
			},

			// 入住率
			drawRevenueChartstwo(x, y) {
				console.log(x);
				console.log(y)
				let list2 = {
					categories: x,
					series: [{
						name: "入住率",
						data: y,
						legendShape: "circle",
						color: "#600EFF",
						pointShape: "none",
					}, ],
				}
				this.revenueChartDataTwo = JSON.parse(JSON.stringify(list2));
			},



		}
	}
</script>
<style lang="scss">
	.u-calendar scroll-view {
		height: 600rpx !important;
	}

	.uicon-close {
		font-size: 35rpx !important;
		z-index: 99999 !important;
	}

	.u-popup__content__close--top-right {
		width: 40rpx !important;
		height: 40rpx !important;
		z-index: 99999 !important;
	}

	// .data-v-b73440ae {
	// 	height: 400rpx !important;
	// }

	// .u-slide-up-enter-active {
	// 	height: 60vh !important;
	// }

	.u-popup__content {
		z-index: 99999 !important;
	}

	.u-calendar-month__days__day {
		height: 100rpx !important;
	}

	.u-reset-button,
	.u-button--active {
		width: 100% !important;
	}

	.chartsview {
		z-index: 1 !important;
	}

	.u-calendar {
		z-index: 999 !important;
	}

	.u-time {
		height: 75vh !important;
	}
</style>

<style scoped lang="less">
	.charts-box {
		width: 100%;
		height: 630rpx;
	}

	.page {
		background: #F3F4F4;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		// overflow-y: auto;
		padding: 20rpx 30rpx;
		// height: 100%;
	}

	.hander {
		height: 48rpx;
		width: 380rpx;
		border-radius: 8rpx;
		background-color: #fff;
		text-align: center;
		line-height: 48rpx;
		display: flex !important;
		justify-content: space-between !important;

	}

	.hander-price {
		margin-top: 20rpx;
		width: 100%;
		height: 192rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;

		.one {
			display: flex;
			justify-content: space-between;

			.left {
				font-size: 32rpx;
				color: #333333;
				font-weight: Heavy;
				font-family: PingFang SC-Heavy;
			}

			.right {
				font-size: 24rpx;
				color: #333333;
				font-weight: Regular;
				font-family: PingFang SC-Regular;
			}
		}

		.two {
			margin-top: 20rpx;
			font-size: 48rpx;
			color: #1372FF;
			font-weight: Heavy;
			font-family: PingFang SC-Heavy;
		}
	}

	.echarts-one {
		box-sizing: border-box;
		width: 100%;
		height: 829rpx;
		background-color: #fff;
		margin: 20rpx 0;
		border-radius: 10rpx;
		padding: 30rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: Heavy;
			font-family: PingFang SC-Heavy;
		}

		.hander-content {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			height: 110rpx;

			.title {
				font-size: 28rpx;
				color: #777777;
				font-weight: Regular;
				font-family: PingFang SC-Regular;
			}

			.price {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #333;
				font-weight: Bold;
				font-family: PingFang SC-Bold;
			}

		}

		.Pie_charts {
			width: 600rpx !important;
			height: 560rpx !important;
			// background-color: aqua;

		}

	}

	.echarts-two {
		box-sizing: border-box;
		width: 100%;
		height: 543rpx;
		background-color: #fff;
		margin: 20rpx 0;
		border-radius: 10rpx;
		padding: 30rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: Heavy;
			font-family: PingFang SC-Heavy;
		}

		.title1 {
			margin-left: 20rpx;
			margin-top: 20rpx;
			font-size: 20rpx;
			color: #333333;
			font-weight: Regular;
			font-family: PingFang SC-Regular;
		}

		.line_charts_one {
			width: 630rpx;
			height: 388rpx;

			// background-color: aqua;
		}

	}

	.echarts-three {
		box-sizing: border-box;
		width: 100%;
		height: 540rpx;
		background-color: #fff;
		margin: 20rpx 0;
		border-radius: 10rpx;
		padding: 30rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: Heavy;
			font-family: PingFang SC-Heavy;
		}

		.title1 {
			margin-left: 20rpx;
			margin-top: 20rpx;
			font-size: 20rpx;
			color: #333333;
			font-weight: Regular;
			font-family: PingFang SC-Regular;
		}

		.line_charts_two {
			width: 630rpx;
			height: 388rpx;
			// background-color: aqua;
		}

	}
</style>