jp-housekeep-electric/pages/equipmentDataMonitoring/electricityStatistics.vue

<template>
	<view>
		<u-navbar title="用电统计" title-color="#101010">
		</u-navbar>

		<!-- 折线图 -->
		<view class="chat-box">
			<view class="title">
				<view class="month">
					{{queryDate}}年 共用电
				</view>
				<view class="month-pick" @click="show = true">
					{{queryDate}}年<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="degree">
				{{sumQuantity}}<text class="unit">度</text>
			</view>
			<view class="chat">
				<view id="lineEcharts" style="min-height:240rpx;">

				</view>
				<!-- <image class="img" src="@/assets/img/jVzkNKE@1x.png" mode=""></image> -->
			</view>
		</view>

		<u-picker mode="time" :defaultTime="defaultTime" v-model="show" :params="params" @confirm="timeChange"></u-picker>

		<!-- 记录 -->
		<view class="record">
			<view class="total">
				
			</view>
			<view class="record-item" v-for="(item,index) in electricityList" :key="index"
				@click="toElectricityDetails(index)">
				<view class="item-left">
					<view class="number">
						{{index+1}}月 用电 {{item.kwh}} 度
					</view>
					<view class="date">
						<!-- 01-03 00:01 -->
					</view>
				</view>
				<view class="money">
					{{item.fee}}元
					<!-- 箭头 -->
					<view class="more">
						<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
	import * as echarts from 'echarts';

	export default {
		data() {
			return {
				show: false, // 时间选择
				defaultTime: '',
				params: {
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: false
				},
				queryDate: '',
				meterId: '',
				myLineChart: null,
				sumQuantity: 0,
				electricityList: [],
				graphMap: {}
			}
		},
		onLoad(op) {
			var date = new Date();
			var year = date.getFullYear();
			this.queryDate = year;

			if (op.id) {
				this.meterId = op.id;
				this.getElectricityConsumptionStatistics();
			}
		},
		methods: {
			getLineCharts(list) {
				if (!this.myLineChart) {
					this.myLineChart = echarts.init(document.getElementById('lineEcharts'), null, {
						width: uni.upx2px(700),
						height: uni.upx2px(240)
					});
				}
				this.myLineChart.clear();

				var data1 = [];
				var data2 = [];
				var sumQuantity = 0;
				var electricityList = [];
				for (var i in list) {
					data1.push(i+'月');
					data2.push(list[i].kwh);
					sumQuantity += list[i].kwh;
					electricityList.push(list[i]);
				}
				this.sumQuantity = sumQuantity;
				this.electricityList = electricityList;
				
				var axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				}
				
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: '6%',
						left: '3%',
						right: '8%',
						bottom: '8%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: axisLabel
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '电量',
						type: 'line',
						data: data2
					}]
				};

				this.myLineChart.setOption(option);
			},
			getElectricityConsumptionStatistics() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.electricityConsumptionStatistics({
					meterId: this.meterId,
					queryDate: this.queryDate+'-01-01'
				}).then((res) => {
					uni.hideLoading();
					this.graphMap = res.data.graphMap;
					this.getLineCharts(this.graphMap);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			timeChange(params) {
				this.queryDate = params.year;
				
				this.getElectricityConsumptionStatistics();
			},
			toElectricityDetails(index) {
				var month = index+1 >= 10 ? index+1 : '0'+(index+1);
				var date = this.queryDate + '-' + month;
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/electricityDetails?id='+this.meterId+'&queryDate='+date
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 折线图
	.chat-box {
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 75%);
		padding: 24rpx 32rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.month {
				color: rgba(16, 16, 16, 1);

			}

			.month-pick {
				color: rgba(51, 51, 51, 1);
			}
		}

		.degree {
			color: rgb(51, 51, 51);
			font-size: 64rpx;

			.unit {
				color: rgb(16, 16, 16);
				font-size: 28rpx;
				margin-left: 8rpx;
			}
		}

		.chat {
			width: 100%;
			height: 240rpx;
			margin-top: 8rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

	}

	// 记录
	.record {
		.total {
			color: rgba(119, 119, 119, 1);
			font-size: 32rpx;
			padding: 24rpx 32rpx;
		}

		.record-item {
			background-color: #fff;
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid rgba(244, 244, 244, 1);

			.item-left {
				.number {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.date {
					color: rgb(153, 153, 153);
					font-size: 24rpx;
					margin-top: 4rpx;
				}
			}

			.money {
				color: rgb(16, 16, 16);
				font-size: 40rpx;
				display: flex;
				align-items: center;

				.more {
					margin-left: 8rpx;
				}
			}
		}
	}
</style>