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>
	// import data from '../../static/test_xiaofei.js'
	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: [], //消费列表
				card_number: 0, //用户卡号
			}
		},
		onLoad(options) {
			// console.log(this.chartData.series[0].data)

			// this.list = this.all_data.data[0].xiaofei;
			// this.name = this.all_data.data[0].xiaofei.name;
			// console.log(this.date)
			this.card_number = options.card_number
			// console.log(this.card_number)

			this.get_data()
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			async get_data() {
				//http://ecu9ys.natappfree.cc/HotWaters/buildgetMonthBill.action
				const res = await this.$myRequest({
					host: 'ceshi',
					url: 'http://ecu9ys.natappfree.cc/HotWaters/buildgetMonthBill.action',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						'roomSelect': this.$store.state.building.roomSelect
						// 'roomSelect': '墨轩湖校区1101'
					}
				})

				// console.log(res.data);
				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])
				}

				setTimeout(() => {
					this.chartData.categories = tmparr_date_time;
					this.chartData.series[0].data = tmparr_use_elec;
				}, 300)
			}
		}
	}
</script>

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