waterElectricityMinApp/pagesAir/stdBookMgr/stdBookMgr.vue

<template>
	<view class="container">
		<view class="line"></view>
		<view class="picker-box">
			<picker @change="bindYearPickerChange" :value="selYearIndex" :range="years" class="picker-input">
				<view class="txt-picker">
					<view>{{years[selYearIndex]}}</view>
					<uni-icons type="bottom" size="22"></uni-icons>
				</view>
			</picker>
			<picker @change="bindMonthPickerChange" :value="selMonthindex" :range="months" class="picker-input">
				<view class="txt-picker">
					<view>{{months[selMonthindex]}}</view>
					<uni-icons type="bottom" size="22"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="line"></view>
		<view class="show-charts">
			<view class="show-label">
				<image class="show-logo-left" src="../static/images/dt.png"></image>
				<view class="show-txt-label">消费走势图</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="line" :chartData="chartData" :opts="chartOpts" :ontouch="true"
					tooltipFormat="tooltipDemo1" />
			</view>
		</view>
		<view class="line"></view>
		<view class="xfjl">
			<view class="xfjl-title">
				<image class="show-logo-left" src="../static/images/xfjl.png"></image>
				<view class="show-txt-label">消费记录</view>
			</view>
			<scroll-view scroll-y="true" :style="{height: screenHeight}" @scrolltoupper="scroll_to_upper"
				@scrolltolower="scroll_to_lower">
				<view class="items" v-for="(item, index) in consumeRecords" :key="index">
					<view class="item">
						<view class="item-left">
							<image src="../static/images/item-icon.png" mode=""></image>
							<view class="item-desc">
								<view class="item-title">{{item.loudong}}</view>
								<view class="item-time">开始时间：{{item.startTime}}</view>
								<view class="item-time">结束时间：{{item.endTime}}</view>
							</view>
						</view>
						<view class="item-right">{{item.amount.toFixed(2)}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenHeight: 0,
				ceshi: 'code',
				years: ['2021年', '2022年'], // 候选年份
				months: ['全部', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 候选月份
				selYearIndex: 0, // 选择的年份
				selMonthindex: 0, // 选择的月份
				chartData: {
					categories: [],
					series: []
				},
				chartOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858"],
					padding: [15, 10, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							max: 0
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					}
				},
				consumeRecords: [{
						loudong: '科技楼-5F-101',
						startTime: '2022-03-12 12:12:15',
						endTime: '2022-03-12 13:12:15',
						amount: -20.0
					},
					{
						loudong: '科技楼-5F-101',
						startTime: '2022-03-12 12:12:15',
						endTime: '2022-03-12 13:12:15',
						amount: -20.0
					},
					{
						loudong: '科技楼-5F-101',
						startTime: '2022-03-12 12:12:15',
						endTime: '2022-03-12 13:12:15',
						amount: -20.0
					},
					{
						loudong: '科技楼-5F-101',
						startTime: '2022-03-12 12:12:15',
						endTime: '2022-03-12 13:12:15',
						amount: -20.0
					},
					{
						loudong: '科技楼-5F-101',
						startTime: '2022-03-12 12:12:15',
						endTime: '2022-03-12 13:12:15',
						amount: -20.0
					}
				]
			}
		},
		onLoad() {
			this.get_xiaofiezoushi()
		},
		onShow() {
			// 从新计算高度
			// setTimeout(() => {
			this.calc_screen_height()
			// }, 1500)
		},
		methods: {
			/**
			 * 滚动到顶部提示
			 */
			scroll_to_upper() {
				uni.showToast({
					title: '到顶了！',
					icon: 'none',
					duration: 500
				})
			},
			/**
			 * 滚动到底部提示
			 */
			scroll_to_lower() {
				uni.showToast({
					title: '到底了！',
					icon: 'none',
					duration: 500
				})
			},
			/**
			 * 选择年份
			 * @param {Object} e
			 */
			bindYearPickerChange(e) {
				// console.log(e);
				this.selYearIndex = e.target.value
				console.log(this.years[this.selYearIndex]);
			},
			/**
			 * 选择月份
			 * @param {Object} e
			 */
			bindMonthPickerChange(e) {
				// console.log(e);
				this.selMonthindex = e.target.value
				console.log(this.months[this.selMonthindex]);
			},
			/**
			 * 按月、年获取消费记录
			 */
			async get_xiaofiezoushi() {
				// console.log(this.roomSelect);
				var reg = /[\u4e00-\u9fa5]/g;
				var str = '墨轩湖校区1-302';
				var dom = str.replace(reg, "");
				if (dom != '' && typeof(dom) != 'undefined') {
					let res = null;
					res = await this.$myRequest({
						host: this.ceshi,
						// url: '/HotWaters/elqueryDayPower.action',
						url: '/HotWaters/elMonthlist.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'dom': dom,
							'page': 1,
							'rows': 12
						}
					})

					// console.log(res.data.rows);
					// console.log(res.data);
					if (res.data.rows.length == 0) {
						return
					}

					if (typeof res.data.rows === 'undefined') {
						uni.showToast({
							title: '加载数据异常',
							duration: 1500
						})
						return
					}

					let chrt_data = {
						categories: [],
						series: [],
					}
					let elc_max = -1.0
					let dt = ''
					let temp = 0
					let data = []
					for (var i = 0; i < res.data.rows.length; i++) {
						dt = res.data.rows[i].dataTime
						chrt_data.categories.push(parseInt(dt.substr(dt.indexOf('-') + 1, dt.length)) + '月')
						temp = res.data.rows[i].totalMoney
						temp = temp.toFixed(2)
						data.push(temp)
						if (parseFloat(temp) > parseFloat(elc_max)) {
							elc_max = temp
						}
					}
					let items = {
						name: '金额',
						data: data
					}
					chrt_data.series.push(items)
					let m = parseFloat(Math.abs(elc_max))
					// console.log(chrt_data);
					if (elc_max == 0.0) {
						setTimeout(() => {
							this.chartOpts.yAxis.data[0].max = parseInt(10)
							this.chartData = chrt_data;
						}, 1000);
					} else {
						setTimeout(() => {
							this.chartOpts.yAxis.data[0].max = parseInt(m + 5)
							this.chartData = chrt_data;
						}, 1000);
					}
				} else {
					uni.showToast({
						title: '宿舍号为空',
						icon: 'success'
					});
				}
			},
			/**
			 * 计算屏幕的高度
			 */
			calc_screen_height() {
				uni.getSystemInfo({
					success: res => {
						let h = ((res.screenHeight * (750 / res.windowWidth)) - 820) //将px 转换rpx
						this.screenHeight = Math.floor(h) + 'rpx'
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		font-family: "Microsoft YaHei-3970(82674968)";
		width: 730rpx;
		padding: 10rpx;

		.line {
			height: 20rpx;
		}

		.picker-box {
			display: flex;
			justify-content: space-between;
			width: 375rpx;

			.picker-input {
				display: flex;
				justify-content: space-around;
				align-items: center;
				border: 2rpx solid #CCCCCC;
				border-radius: 6rpx;

				.txt-picker {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 175rpx;
					height: 60rpx;
				}
			}
		}

		.show-charts {
			display: flex;
			flex-direction: column;

			.show-label {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin: 0 10rpx 0;
				}

				.show-txt-label {
					font-size: 32upx;
				}
			}
		}

		.xfjl {
			display: flex;
			flex-direction: column;

			.xfjl-title {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin: 0 10rpx 0;
				}

				.show-txt-label {
					font-size: 32upx;
				}
			}

			.items {
				display: flex;
				flex-direction: column;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 120rpx;
					margin: 10rpx;
					padding: 15rpx 0;
					border-bottom: 1px solid #CCCCCC;

					.item-left {
						display: flex;
						align-items: center;

						image {
							width: 90rpx;
							height: 90rpx;
							margin: 0 20rpx 0 0;
						}

						.item-desc {
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.item-title {
								font-size: 32upx;
								font-weight: bold;
							}

							.item-time {
								font-size: 24upx;
								color: #c8cdd8;
							}
						}
					}

					.item-right {
						font-size: 36upx;
						font-weight: bold;
						color: #4456fb;
					}
				}
			}
		}
	}
</style>