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 justify-content-item tn-margin-right tn-padding-xs tn-text-sm tn-bg-gray--light tn-radius tn-color-gray--dark"
				style="border-radius: 12rpx;">
				<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>
		<view class="hander-price">
			<view class="one">
				<view class="left">
					总营业额
				</view>
				<view class="right">
					共124笔
				</view>
			</view>
			<view class="two">
				<text>￥</text>
				<text>15424.00</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">
						{{}}￥21964.00
					</view>
				</view>
				<view class="list">
					<view class="title">
						商品
					</view>
					<view class="price">
						{{}}￥6514.00
					</view>
				</view>
				<view class="list">
					<view class="title">
						其他
					</view>
					<view class="price">
						{{}}￥2514.00
					</view>
				</view>

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

			<view class="title">
				交易趋势
			</view>
			<view class="title1">
				单位：元
			</view>
			<view class="line_charts_one">
				<LineOne />

			</view>
		</view>
		<view class="echarts-three">
			<view>
				<view class="title">
					入住率
				</view>
				<view class="title1">
					入住率(%)
				</view>
			</view>
			<view class="line_charts_two">
				<LineTwo />
			</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: '2023-07',
			}
		},
		onReady() {},
		methods: {

			bindDateChange(e) {
				this.date = e.detail.value
			},
			// 时间
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		}
	};
</script>

<style scoped lang="less">
	// .charts {
	// 	width: 700rpx;
	// 	height: 630rpx;
	// }
	.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;
	}

	.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 {
			height: 95%;
			width: 100%;
			// 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 {
			height: 95%;
			width: 100%;
			// 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 {
			height: 95%;
			width: 100%;
			// background-color: aqua;
		}

	}
</style>