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

<template>
	<view>
		<u-navbar title="用电详情" title-color="#101010">

			<view class="slot" slot="right" @click="toBillingRules">
				计费规则
			</view>
		</u-navbar>
		<view class="background">
			<!-- 用电记录 -->
			<view class="details">
				<view class="headline">
					{{month}}月用电记录
				</view>
				<view class="infos">
					<view class="infos-item">
						<view class="item-title">
							用电量
						</view>
						<view class="item-value">
							{{kwhMap.kwh}}度
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							电费
						</view>
						<view class="item-value">
							{{kwhMap.fee}}元
						</view>
					</view>
					<view class="infos-item" v-if="meterPhase=='3' && chargeType=='2'">
						<view class="item-title">
							峰时用电 ({{kwhMap.fengPrice}}元/度)

						</view>
						<view class="item-value">
							{{kwhMap.fengKwh}}度 {{kwhMap.fengFee}}元

						</view>
					</view>
					<view class="infos-item"  v-if="meterPhase=='3' && chargeType=='2'">
						<view class="item-title">
							谷时用电 ({{kwhMap.guPrice}}元/度)

						</view>
						<view class="item-value">
							{{kwhMap.guKwh}}度 {{kwhMap.guFee}}元

						</view>
					</view>
					<view class="infos-item" v-if="meterPhase=='3' && chargeType=='2'">
						<view class="item-title">
							平时用电 ({{kwhMap.pingPrice}}元/度)

						</view>
						<view class="item-value">
							{{kwhMap.pingKwh}}度 {{kwhMap.pingFee}}元

						</view>
					</view>
					<view class="infos-item" v-if="meterPhase=='3' && chargeType=='2'" >
						<view class="item-title">
							尖时用电 ({{kwhMap.jianPrice}}元/度)
						</view>
						<view class="item-value">
							{{kwhMap.jianKwh}}度 {{kwhMap.jianFee}}元
						</view>
					</view>
					<view class="infos-item">
						<view class="item-title">
							用户
						</view>
						<view class="item-value">
							{{name}}
						</view>
					</view>
				</view>
				<!-- 折线图 -->
				<view class="chat-box">
					<view class="title">
						{{month}}月 用电量趋势
					</view>
					<view class="chat">
						<view id="barEcharts" style="min-height:322rpx;">

						</view>
					</view>
				</view>
			</view>
			<button class="back" @click="toBack">返回</button>
		</view>

	</view>
</template>

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

	export default {
		data() {
			return {
				myChart: null,
				queryDate: '',
				meterId: '',
				graphMap: {},
				kwhMap: {},
				month: '',
				name: '',
				meterPhase: '',
				chargeType: ''
			}
		},
		onLoad(op) {
			if(op.id) {
				this.meterId = op.id;
				this.queryDate = op.queryDate;
				this.month = parseInt(this.queryDate.slice(5));
				this.getElectricityConsumptionDetails();
			}
		},
		methods: {
			getElectricityConsumptionDetails() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.electricityConsumptionDetails({
					meterId: this.meterId,
					queryDate: this.queryDate+'-01'
				}).then((res) => {
					uni.hideLoading();
					this.graphMap = res.data.graphMap;
					this.kwhMap = res.data.kwhMap;
					this.name = res.data.name;
					this.meterPhase = res.data.meterPhase;
					this.chargeType = res.data.chargeType;
					
					this.getBarCharts(this.graphMap);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getBarCharts(list) {
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
						width: uni.upx2px(666),
						height: uni.upx2px(322)
					});
				}
				this.myChart.clear();

				var data1 = [];
				var data2 = [];
				for (var i in list) {
					data1.push(i+'日');
					data2.push(list[i].kwh);
				}

				var axisLabel = {
					rotate: 40,
					interval: 0,
					textStyle: {
						color: "#333"
					}
				}
				if (data1.length < 7) {
					axisLabel = {
						interval: 0,
						textStyle: {
							color: "#333"
						},
					}
				} else {
					axisLabel.interval = 2;
				}

				var headitemby = "";
				var showkey = "";
				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: '电量',
						data: data2,
						type: 'bar',
						// label: {
						// 	show: true,
						// 	position: 'top',
						// 	color: '#5C7BD9'
						// }
					}]
				}

				this.myChart.setOption(option);
			},
			toBack() {
				uni.navigateBack();
			},
			toBillingRules() {
				var date = this.queryDate;
				uni.navigateTo({
					url: '/pages/equipmentDataMonitoring/billingRules?id='+this.meterId+'&queryDate='+date
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		height: 400rpx;
		padding-top: 32rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);

		// 用电记录
		.details {

			background-color: #fff;
			border-radius: 8px;
			padding: 32rpx;
			margin: 0rpx 32rpx;

			.headline {
				color: rgb(16, 16, 16);
				font-size: 40rpx;
				text-align: center;
			}

			.infos {
				margin-top: 32rpx;
				border-bottom: 1px solid rgba(241, 241, 241, 1);

				.infos-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.item-title {
						color: rgba(51, 51, 51, 1);
					}

					.item-value {
						color: rgba(16, 16, 16, 1);
					}
				}
			}
		}

		// 折线图
		.chat-box {
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(214, 238, 255, 1) 0%, rgba(208, 236, 236, 0) 100%);

			.title {
				color: rgba(16, 16, 16, 1);
				padding: 24rpx;
			}

			.chat-box {
				width: 100%;
				height: 322rpx;

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

	}

	// 返回
	.back {
		border: 1px solid rgba(205, 205, 205, 1);
		line-height: 88rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(119, 119, 119, 1);
		font-size: 32rpx;
		margin: 32rpx;
	}
</style>