waterElectricityMinApp/pagesElectric/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/images/show.png"></image>
				</view>
				<view class="show-item-label">消费走势图</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts :canvasId="canvas_Electric_id" type="line" :chartData="chartData" :opts="chartOpts"
					:ontouch="true" :canvas2d="false" id="chartsElectric" />
			</view>
			<view class="select-show">
				<button :class="[btn ? 'first-button-bg' : 'first-button']"
					@tap="getEnergyConsumption('month')">月</button>
				<button :class="[btn ? 'first-button' : 'first-button-bg']"
					@tap="getEnergyConsumption('year')">年</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/images/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>
						<image :src="require('./images/icon-arrow-down.png')"
							style="width: 30rpx; height: 38rpx;" mode="aspectFit">
						</image>
						<!-- <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>
							<view class="info-txt">
								<view class="up-txt">
									<text class="item-list-txt">{{item.school}}</text>
									<text class="item-list-txt">{{item.room}}</text>
								</view>
								<view class="bottom-txt">
									<text class="item-list-txt">{{item.re_time}}</text>
								</view>
							</view>
						</view>
						<text class="item-list-txt show-money">{{item.account}}</text>
					</view>
				</view>

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

<script>
	export default {
		data() {
			return {
				btn: false,
				canvasId: 'canvas_Electric_id',
				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
						}
					}
				},
				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(options) {
			try {
				this.stu_number = uni.getStorageSync('stu_number');
				this.roomSelect = uni.getStorageSync('roomSelect');
				if (this.stu_number == '' || this.roomSelect == '' || typeof(this.stu_number) == 'undefined' || typeof(this
						.roomSelect) == 'undefined') {
					// console.log(options);
					this.stu_number = options.card_number;
					this.roomSelect = options.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: '../../pages/index/index'
						})

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

						return
					}
				}
				// console.log(this.stu_number);
				// console.log(this.roomSelect);
				// 缴费记录
				this.get_jiaofeijilu()
			} catch (e) {
				console.log(e);
			}
		},
		mounted() {
			// 消费走势
			this.getEnergyConsumption('month')
		},
		methods: {
			/**
			 * 按月、年获取消费记录
			 */
			getEnergyConsumption(dayOrMonth) {
				// 按月、年获取消费记录
				this.get_nenghaojilu(dayOrMonth)
			},
			/**
			 * 获取选择日期
			 */
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.changeDate = true
				// 缴费记录
				this.get_jiaofeijilu()
			},
			/**
			 * 获取缴费记录
			 */
			async get_jiaofeijilu() {
				// console.log(this.stu_number);
				var _this = this;
				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
								}
							});

							_this.list = []
						}
					} 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(dayOrMonth) {
				// console.log(this.roomSelect);
				var reg = /[\u4e00-\u9fa5]/g;
				var str = this.roomSelect;
				var dom = str.replace(reg, "");
				var _this = this;
				if (dom != '' && typeof dom != 'undefined') {
					let res = null;
					if (dayOrMonth == 'month') {
						_this.btn = true
						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
						}
						
						var rows = res.data.rows;
						// 过滤掉重复数据
						rows = rows.filter(function(item, index, self) {
							return index === self.findIndex(function(t) {
								return t.dataTime === item.dataTime;
							});
						});

						let chrt_data = {
							categories: [],
							series: [],
						}
						let elc_max = -1.0
						let dt = ''
						let temp = 0
						let data = []
						for (var i = 0; i < rows.length; i++) {
							dt = rows[i].dataTime
							// chrt_data.categories.push(dt.substr(dt.indexOf('-') + 1, dt.length) + '月')
							chrt_data.categories.push(parseInt(dt.substr(dt.indexOf('-') + 1, dt.length)) + '月')
							temp = (rows[i].totalMoney).toFixed(2)
							// temp = temp
							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;
							}, 500);
						} else {
							setTimeout(() => {
								_this.chartOpts.yAxis.data[0].max = parseInt(m + 10)
								_this.chartData = chrt_data;
							}, 500);
						}
					} else {
						_this.btn = false
						uni.showToast({
							mask: true,
							title: '年消费更新中…',
							success() {
								_this.btn = true
							}
						})
						return
						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>