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" />
			</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.name}}</text>
							<text class="item-list-txt">{{item.tdate}} {{item.time}}</text>
						</view>
						<text class="item-list-txt show-money">{{item.money}}</text>
					</view>
				</view>

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

<script>
	export default {
		data() {
			return {
				chartData: {
					categories: [],
					series: [{
						data: [],
					}],
				},
				date: this.$getDate({
					format: true
				}),
				startDate: this.$getDate('start_date'),
				endDate: this.$getDate('end_date'),
				all_data: '', //所有数据
				list: [], //消费列表
				code: '',
				ceshi: 'code',
				stu_number: 0, //用户卡号
			}
		},
		onLoad() {
			// 获取学号
			this.stu_number = this.$store.state.stu_number

			this.get_xiaofeijilu()
			
			this.get_chongzhijilu()
		},
		methods: {
			/**
			 * 获取选择日期
			 * @param {Object} e
			 */
			bindDateChange: function(e) {
				this.date = e.detail.value
				
				this.get_chongzhijilu()
			},
			/**
			 * 获取充值记录
			 */
			async get_chongzhijilu() {
				console.log(this.$store.state.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.$store.state.stu_number,
						're_time': this.date 
					}
				})
				
				console.log(res);				
				if (res.data.mess == '未查到记录') {
					uni.showToast({
						title: '该月无充值记录',
						icon: 'success'
					});
				}
				
				// this.list = this.all_data.data[0].xiaofei
			},
			async get_xiaofeijilu() {
				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.$store.state.building.roomSelect
					}
				})

				console.log(res);
				let tmparr_date_time = []
				let tmparr_use_elec = []
				for (var i = 0; i < res.data.date_time.length; i++) {
					tmparr_date_time.push(res.data.date_time[i])
				}
				for (var i = 0; i < res.data.use_elc.length; i++) {
					tmparr_use_elec.push(res.data.use_elc[i])
				}
				
				let chrt_data = {
					categories: [],
					series: [{
						data: [],
					}],
				}
				chrt_data.categories = tmparr_date_time
				chrt_data.series[0].data = tmparr_use_elec
				console.log(chrt_data);
				setTimeout(() => {
					this.chartData = chrt_data;
				}, 30)
			}
		}
	}
</script>

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