jp-housekeep-hall/pages/deductionRecord/monthlyPush.vue

<template>
	<view>
		<u-navbar title="电费月度账单" :isBack="isBack" title-color="#101010"></u-navbar>
		<view class="background">
			<view class="recharge-details1">
				<view class="headline">
					{{thisparseUnixTime(queryYearMonth)}}电费月度账单
				</view>
				<view class="sum">
					{{detail.kwhMap.fee}}<span>元</span>
				</view>

				<view class="details">
					<view class="item">
						<view class="item-title">
							承租方
						</view>
						<view class="item-value">
							{{detail.tenantInfo.name}}
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							租住地址
						</view>
						<view class="item-value">
							{{detail.tenantContract.address}}
						</view>
					</view>
					<!-- <view class="item">
						<view class="item-title">
							收费标准
						</view>
						<view class="item-value">
								{{detail.kwhMap.kwh}}元/度
						</view>
					</view> -->
					<template v-if="detail.childKwhMap">
						
						<table class="table1" >
							<tr class="tr1">
								<td></td>
								<td>起止码</td>
								<td>度数</td>
							</tr>
							<tr>
								<td class="td1">{{detail.meter.name}}</td>
								<td>
									{{detail.kwhMap.startMeter}}-{{detail.kwhMap.endMeter}}
															
								</td>
								<td class="td3" >{{detail.kwhMap.totalKwh}}度</td>
							</tr>
							<tr v-for="(item,i) in detail.childKwhMap" :key="i">
								<td class="td1">{{i}}</td>
								<td>{{item.startMeter}}-{{item.endMeter}}</td>
								<td class="td3">{{item.kwh}}度</td>
							</tr>
							<tr style="font-weight: bold;color:#fff;background-color:#307af6 ;height: 80rpx;" >
								<td   class="td1" colspan="2">扣除后用电量</td>
						
									<td>{{detail.kwhMap.kwh}}度</td>
							</tr>
						</table>
					</template>
						<template v-else>
						<view class="item">
							<view class="item-title">
								用电量
							</view>
							<view class="item-value">
						
								{{detail.kwhMap.kwh}}度
						
						
						
							</view>
						</view>
						
						<view class="item" v-if="detail.tenantSharedKwh">
							<view class="item-title">
								分摊用电
							</view>
							<view class="item-value">
						
								{{detail.tenantSharedKwh}}度
						
						
						
							</view>
						</view>
						
						<view class="item">
							<view class="item-title">
								起止码
							</view>
							<view class="item-value">
						
								{{detail.kwhMap.startMeter}}-{{detail.kwhMap.endMeter}}
						
						
						
							</view>
						</view>
					</template>
					
					
					
					
					<view class="item">
						<view class="item-title">
							可用余额
						</view>
						<view class="item-value">

							{{detail.balance}}元
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							统计截止日期
						</view>
						<view class="item-value">
							{{detail.endTime}}
						</view>
					</view>
				</view>


			</view>
			<!-- 返回 -->
			<!-- <button class="back">返回</button> -->
			<view class="recharge-details2">
				<view class="details">
					<view class="title">
						{{thisparseUnixTime(queryYearMonth)}}用电量趋势
					</view>
					<view id="pieEcharts">

					</view>
				</view>
			</view>
			<u-divider   nonetext="没有找到相关内容" style="margin-top: 20rpx;"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		


	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/deduction.js'
	import {
		parseUnixTime,newDate
	} from '@/apis/utils'
	import * as echarts from "echarts";
	export default {
		data() {
			return {
				isBack: false,
				id: "",
				queryYearMonth: "",
				detail: {
					tenantInfo: {},
					tenantContract: {},
					kwhMap: {},
					endTime: {},
					balance: {},
					childKwhMap:null,
					meter:{},
				},
				myChart: null,
			}
		},
		onLoad(op) {
			if (op.site) {
				this.isBack = true
			}
			if (op.id) {
				this.id = op.id
				this.queryYearMonth = op.m
				this.getDetail()
			}
		},
		methods: {
			thisparseUnixTime(time) {
				if (!time) {
					return ''
				}
				return parseUnixTime(newDate(time), '{y}年{m}月')
			},
			getDetail() {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				API.monthlyElectricity({
					contractId: this.id,
					queryYearMonth: this.queryYearMonth
				}).then((response) => {
					uni.hideLoading();
					this.detail = response.data;
					if(JSON.stringify(this.detail.childKwhMap)=="{}"){
						this.detail.childKwhMap=null
					}
					this.getPle(this.detail.graphMap)

					//this.transferAccountsInfo=this.detail.accountInfo;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: error
					})
				})
			},
			getPle(list) {

				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'), null, {
						width: uni.upx2px(650),
						height: uni.upx2px(420)
					});
				}
				var data1 = [];
				var data2 = [];
				this.myChart.clear();
				for (var i in list) {
					data1.push(i)
					data2.push(list[i].kwh)
				}

				var headitemby = ""
				var showkey = "";
				var option = {
					tooltip: {
						trigger: 'axis',
						formatter: (value) => {
							var time=this.thisparseUnixTime(this.queryYearMonth);
							var name = value[0].name;
							var obj = list[name]
							var text = `<p>${time}${name}日</p>`

						
							if (obj.kwh != undefined) {
								text += `<p>电量：${obj.kwh}度</p>`
							}
							if (obj.fee != undefined) {
								text += ` <p>电费：${obj.fee}元</p>`
							}
							return text

						}
					},
					grid: {
						top: 40,
						left: 5,
						right: 5,
						bottom: 20,
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: {

							textStyle: {
								color: "#333"
							}
						},
					
					},
					yAxis: {
						type: 'value',
						name: '电量',
					},
					series: [{
						name: '电量',
						data: data2,
						type: 'line'
					}]
				}
				console.log(option)
				this.myChart.setOption(option);


			},
		}
	}
</script>

<style lang="scss" scoped>
	.table1{
			padding-bottom: 20rpx;
		width: 100%;
		   border-collapse: collapse;
		td{
			border: 1px solid #e7e7e7;
			text-align: end;
			padding: 16rpx 16rpx;
		}
		.td1{
			text-align: start;
			min-width: 20%;
			max-width: 30%;
		}
		.td3{
			
			white-space: pre;
		}
		tr{
			 background-color:#f5f5f6 
		}
		.tr1{
			text-align: end;
				font-weight: bold;
		}
		 tr:nth-child(even) {  
		    background-color: #fff;  
		  }  
	}
	.background {
		padding: 24rpx 24rpx;
		height: 400rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);

		.recharge-details1 {
			padding: 40rpx 32rpx;
			border-radius: 8px 8px 0 0;
		}

		.recharge-details2 {
			border-radius:  0 0 8px 8px;
			padding: 5rpx 20rpx 40rpx 20rpx;
		
			.details {
				border-radius: 8px ;
			background: linear-gradient(180deg, rgba(208,236,255,1) 0%,rgba(208,236,236,0) 100%);
			}
			#pieEcharts{
				text-align: start;
			}
			
		}

		.recharge-details1,
		.recharge-details2 {

			background-color: #fff;
			

			text-align: center;

			.headline {
				color: rgb(16, 16, 16);
				font-size: 36rpx;

			}

			.sum {
				color: rgb(16, 16, 16);
				font-size: 48rpx;
				margin-top: 32rpx;
				span{
					font-size: 28rpx;
				}

			}

			.details {
				margin-top: 40rpx;
				padding-top: 40rpx;
				border-top: 1px solid rgba(241, 241, 241, 1);

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

					.item-title {
						color: rgb(119, 119, 119);
						white-space: pre;
					}

					.item-value {
						color: rgb(48, 48, 48);
					}
				}

				.chart-box {
					background-color: rgba(208, 236, 255, 1);
					border-radius: 8px;

					.title {
						text-align: left;
						padding: 24rpx 28rpx;
						color: rgba(16, 16, 16, 1);
					}
				}

				.img {
					width: 622rpx;
					height: 304rpx;
				}
			}
		}
	}

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