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">
			<!-- 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: 160rpx;">
				<picker @change="bindDateChange" mode="date" :value="date" :start="startDate" :end="endDate"
					fields="month">
					<text class="tn-padding-left-xs tn-padding-right-xs">{{date}}
					</text>
				</picker>
			</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}}笔
				</view>
			</view>
			<view class="two">
				<text>￥</text>
				<text>{{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}}
					</view>
				</view>
				<view class="list">
					<view class="title">
						商品
					</view>
					<view class="price">
						{{list.breakfastAmount}}
					</view>
				</view>
				<view class="list">
					<view class="title">
						其他
					</view>
					<view class="price">
						{{list.othersAmount}}
					</view>
				</view>

			</view>
			<view class="Pie_charts" style="min-height: 580rpx;">
				<!-- <PieCharts></PieCharts> -->
				<qiun-data-charts 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 type="area" :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="area" :opts="revenueOptstwo" :chartData="revenueChartDataTwo" />
			</view>
		</view>
		<Tabbar :tabbarIndex="2"></Tabbar>
	</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: '2024-01',
				fromData: {
					dateDay: '2024-01',
					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,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						// gridColor: "rgba(230,230,230,0.6)",
						gridColor: "rgba(200,200,200,0.6)",
						disabled: false,
						disableGrid: false,
						gridType: 'dash',
						dashLength: '4',
						data: [{
							axisLineColor: "#FFFFFF",
							min: 0,
						}],
					},
					legend: {
						show: false,
						position: "top",
						float: "right",
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 1,
							gradient: true,
						},
					},
				},
				dataListOne: [],


				// 公司营收
				revenueChartDataTwo: {},
				revenueOptstwo: {
					color: ["#4B98FE"],
					padding: [15, 15],
					dataLabel: false,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						// gridColor: "rgba(230,230,230,0.6)",
						gridColor: "rgba(200,200,200,0.6)",
						disabled: false,
						disableGrid: false,
						gridType: 'dash',
						dashLength: '4',
						data: [{
							axisLineColor: "#FFFFFF",
							min: 0,
							max: 1
						}],
					},
					legend: {
						show: false,
						position: "top",
						float: "right",
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 1,
							gradient: true,
						},
					},
				},
				dataListTwo: [],


				list: {}
			}
		},
		onReady() {
			// this.fromData.dateDay = e.detail.value
			this.fromData.homestayId = wx.getStorageSync('homestayId')
			if (this.fromData.homestayId !== '') {
				this.getList()
			}

		},
		methods: {
			bindDateChange(e) {
				this.date = e.detail.value
				this.fromData.dateDay = e.detail.value
				this.getList()
			},
			// 时间
			startDate() {
				return this.getDate('start')
			},
			endDate() {
				return this.getDate('end')
			},

			getList() {
				this.$api.get('/merchant/hotel/mine/getHotelCountInfo', this.fromData).then(res => {
					console.log(res);
					this.list = res.data.data
					// 环图 营业概况
					this.getServerData();
					// 交易趋势
					this.drawRevenueChartsOne()
					// 入住率
					this.drawRevenueChartstwo()
				})
			},


			// 环图 营业概况
			getServerData() {
				this.PieChartsList = this.list
				console.log('环图2222', this.PieChartsList);
				this.PieChartsList = {
					series: [{
						data: [{
								"name": "房费",
								"value": this.PieChartsList.roomAmount,
								"labelText": "房费" + this.PieChartsList.roomRatio + '%'
							},
							{
								"name": "商品",
								"value": this.PieChartsList.othersAmount,
								"labelText": "商品" + this.PieChartsList.othersRatio + '%'
							},
							{
								"name": "其他",
								"value": this.PieChartsList.breakfastAmount,
								"labelText": "其他" + this.PieChartsList.breakfastRatio + '%',
							},

						],

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

			// 交易趋势
			drawRevenueChartsOne() {
				// this.list = this.objList
				// console.log('交易趋势33333333', this.list);
				this.list.checkedInChant.forEach(item => {
					this.dataListOne.push(item.checkedInRatio)
				})
				let list1 = {
					categories: [
						"01-01", "", "", "", "", "", "",
						"01-08", "", "", "", "", "", "",
						"01-15", "", "", "", "", "", "",
						"01-22", "", "", "", "", "", "",
						"01-29", "", ""
					],
					series: [{
						name: "收入",
						data: this.dataListOne,
						legendShape: "circle",
						color: "#4088FE",
						pointShape: "none",
					}, ],
				}
				this.revenueChartDataOne = JSON.parse(JSON.stringify(list1));
			},

			// 入住率
			drawRevenueChartstwo() {
				this.list.checkedInChant.forEach(item => {
					this.dataListTwo.push(item.checkedInRatio)
				})

				let list2 = {
					categories: ["01-01", "", "", "", "", "", "", "01-08", "", "", "", "", "", "", "01-15",
						"", "", "", "", "", "", "01-22", "", "", "", "", "", "", "01-29", "", "",
					],
					series: [{
						name: "入住率",
						data: this.dataListTwo,
						legendShape: "circle",
						color: "#600EFF",
						pointShape: "none",
					}, ],
				}
				this.revenueChartDataTwo = JSON.parse(JSON.stringify(list2));
			},



		}
	}
</script>

<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: 216rpx;
		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>