waterElectricityMinApp/pages/show/show.vue

<template>
	<view class="container">
		<view class="show-item">
			<view class="show-elec-label">
				<view class="show-item-logol">
					<image class="show-item-logo-left" src="/static/image/show.png"></image>
				</view>
				<view class="show-item-label">能耗走势图</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="demotype" :chartData="chartData" :opts="chartOpts"
					tooltipFormat="tooltipDemo1" />
			</view>
			<view class="select-show">
				<button class="first-button">月</button>
			</view>
		</view>
		<view class="show-item-date">
			<view class="show-elec-label">
				<view class="show-item-logol">
					<image class="show-item-logo-left" src="/static/image/record.png"></image>
				</view>
				<view class="show-item-label show-label">缴费记录</view>
			</view>
			<view class="select-date">
				<picker mode="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">
						<text class="uni-input-label">{{date}}</text>
						<text class="iconfont icon-arrow-down"></text>
					</view>
				</picker>
				<view class="uni-list">
					<view class="item-list" v-for="(item, i) in list" :key="i">
						<view class="item-list-left">
							<text class="item-list-txt">{{item.user_name}}</text>
							<text class="item-list-txt">{{item.re_time}}</text>
						</view>
						<text class="item-list-txt show-money">{{item.account}}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					categories: [],
					series: [{
						data: [],

					}]
				},
				chartOpts: {
					yAxis: {
						data: [{
							max: 0
						}]
					}
				},
				date: this.$getDate({
					format: true
				}),
				startDate: this.$getDate('start_date'),
				endDate: this.$getDate('end_date'),
				all_data: '', // 所有数据
				list: [], // 消费列表
				code: '',
				ceshi: 'code',
				stu_number: '', // 学号
				roomSelect: '', // 选择的宿舍号
				changeDate: false // 是否是手动选择日期
			}
		},
		onLoad() {
			try {
				// 获取学号
				this.stu_number = this.$store.state.userInfo.card_number
				this.roomSelect = this.$store.state.building.roomSelect

				if (this.stu_number == '' || this.roomSelect == '' || typeof(this.stu_number) == 'undefined' || typeof(this
						.roomSelect) == 'undefined') {
					const userinfo = uni.getStorageSync('userinfo_storage_key')
					if (userinfo) {
						this.stu_number = userinfo.card_number
						this.roomSelect = userinfo.campus + userinfo.dorm_number
					} else {
						uni.redirectTo({
							url: '../index/index'
						})

						uni.showToast({
							icon: 'none',
							title: '学号或宿舍号为空，请授权',
							duration: 3000
						})

						return
					}
				}
				// console.log(this.stu_number);
				// console.log(this.roomSelect);
				// 能耗记录
				this.get_nenghaojilu()
				// 缴费记录
				this.get_jiaofeijilu()
			} catch (e) {
				console.log(e);
			}
		},
		methods: {
			/**
			 * 获取选择日期
			 */
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.changeDate = true
				// 缴费记录
				this.get_jiaofeijilu()
			},
			/**
			 * 获取缴费记录
			 */
			async get_jiaofeijilu() {
				// console.log(this.stu_number);
				if (this.stu_number != '') {
					const res = await this.$myRequest({
						host: this.ceshi,
						url: '/HotWaters/elqueyRecordEle.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'stu_number': this.stu_number,
							're_time': this.date
						}
					})

					// console.log(res);
					if (res.data.mess == '未查到记录') {
						if (this.changeDate) {
							uni.showToast({
								title: '该月无缴费记录',
								icon: 'success',
								success: (res) => {
									this.changeDate = false
								}
							});
						}
					} else {
						// 充值绑定显示到界面
						for (var i = 0; i < res.data.data.length; i++) {
							this.list.push(res.data.data[i])
						}
					}
				} else {
					uni.showToast({
						title: '学号为空',
						icon: 'success'
					});
				}
			},
			/**
			 * 能耗记录
			 */
			async get_nenghaojilu() {
				if (this.roomSelect != '' && typeof(this.roomSelect) != 'undefined') {
					const res = await this.$myRequest({
						host: this.ceshi,
						url: '/HotWaters/buildgetMonthBill.action',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'roomSelect': this.roomSelect
						}
					})

					// console.log(res);
					if (res.data.mess == '未查询到数据') {
						return
					}
					let chrt_data = {
						categories: [],
						series: [{
							data: [],
						}],
					}
					let elc_max = 0.0
					for (var i = 0; i < res.data.date_time.length; i++) {
						chrt_data.categories.push(res.data.date_time[i])
						chrt_data.series[0].data.push(res.data.use_elc[i])
						if (parseFloat(res.data.use_elc[i]) > parseFloat(elc_max)) {
							elc_max = res.data.use_elc[i]
						}
					}
					let m = parseFloat(Math.abs(elc_max))
					// console.log(chrt_data);
					setTimeout(() => {
						this.chartOpts.yAxis.data[0].max = parseInt(m + (m / 4.0))
						this.chartData = chrt_data;
					}, 1000);
				} else {
					uni.showToast({
						title: '宿舍号为空',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style>
	@import url("show.css");
</style>