|
@@ -1,163 +1,333 @@
|
|
-<template>
|
|
|
|
- <view>
|
|
|
|
- <u-navbar title="电费月度账单" title-color="#101010" ></u-navbar>
|
|
|
|
- <view class="background">
|
|
|
|
- <view class="recharge-details">
|
|
|
|
- <view class="headline">
|
|
|
|
- 2024年1月电费月度账单
|
|
|
|
- </view>
|
|
|
|
- <view class="sum">
|
|
|
|
- 1000.00
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="details">
|
|
|
|
- <view class="item">
|
|
|
|
- <view class="item-title">
|
|
|
|
- 用户信息
|
|
|
|
- </view>
|
|
|
|
- <view class="item-value">
|
|
|
|
- 3~6楼联通公司
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="item">
|
|
|
|
- <view class="item-title">
|
|
|
|
- 户号
|
|
|
|
- </view>
|
|
|
|
- <view class="item-value">
|
|
|
|
- 00880088
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="item">
|
|
|
|
- <view class="item-title">
|
|
|
|
- 收费标准
|
|
|
|
- </view>
|
|
|
|
- <view class="item-value">
|
|
|
|
- 1.3元/度C
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="item">
|
|
|
|
- <view class="item-title">
|
|
|
|
- 度数
|
|
|
|
- </view>
|
|
|
|
- <view class="item-value">
|
|
|
|
-
|
|
|
|
- 61.53度 (起止码100-161.53)
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="item">
|
|
|
|
- <view class="item-title">
|
|
|
|
- 可用余额
|
|
|
|
- </view>
|
|
|
|
- <view class="item-value">
|
|
|
|
-
|
|
|
|
- 650.51元
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="item">
|
|
|
|
- <view class="item-title">
|
|
|
|
- 统计截止日期
|
|
|
|
- </view>
|
|
|
|
- <view class="item-value">
|
|
|
|
- 2024-01-02 00:00:01
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
- <view class="details">
|
|
|
|
- <view class="chart-box">
|
|
|
|
- <view class="title">
|
|
|
|
- 1月用电量趋势
|
|
|
|
- </view>
|
|
|
|
- <image class="img" src="@/assets/img/jVzkNKE@1x.png" mode=""></image>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
|
|
+<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}}元
|
|
|
|
+ </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> -->
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-title">
|
|
|
|
+ 度数
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-value">
|
|
|
|
+
|
|
|
|
+ {{detail.kwhMap.kwh}}度
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item">
|
|
|
|
+ <view class="item-title">
|
|
|
|
+ 起止码
|
|
|
|
+ </view>
|
|
|
|
+ <view class="item-value">
|
|
|
|
+
|
|
|
|
+ {{detail.kwhMap.startMeter}}-{{detail.kwhMap.endMeter}}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <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>
|
|
</view>
|
|
- <!-- 返回 -->
|
|
|
|
- <button class="back">返回</button>
|
|
|
|
|
|
+ <u-divider nonetext="没有找到相关内容" style="margin-top: 20rpx;"
|
|
|
|
+ border-color="#CFD2D5">已经到底了</u-divider>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
- .background{
|
|
|
|
- padding: 24rpx 32rpx;
|
|
|
|
- height: 400rpx;
|
|
|
|
- background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
|
|
|
|
- .recharge-details{
|
|
|
|
-
|
|
|
|
- background-color: #fff;
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import * as API from '@/apis/pagejs/deduction.js'
|
|
|
|
+ import {
|
|
|
|
+ parseUnixTime
|
|
|
|
+ } from '@/apis/utils'
|
|
|
|
+ import * as echarts from "echarts";
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ isBack: false,
|
|
|
|
+ id: "",
|
|
|
|
+ queryYearMonth: "",
|
|
|
|
+ detail: {
|
|
|
|
+ tenantInfo: {},
|
|
|
|
+ tenantContract: {},
|
|
|
|
+ kwhMap: {},
|
|
|
|
+ endTime: {},
|
|
|
|
+ balance: {},
|
|
|
|
+ },
|
|
|
|
+ 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(new Date(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;
|
|
|
|
+ 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: 20,
|
|
|
|
+ left: 5,
|
|
|
|
+ right: 5,
|
|
|
|
+ bottom: 20,
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: data1,
|
|
|
|
+ axisLabel: {
|
|
|
|
+
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: "#333"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value'
|
|
|
|
+ },
|
|
|
|
+ series: [{
|
|
|
|
+ name: '电量',
|
|
|
|
+ data: data2,
|
|
|
|
+ type: 'line'
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ console.log(option)
|
|
|
|
+ this.myChart.setOption(option);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .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;
|
|
padding: 40rpx 32rpx;
|
|
- text-align: center;
|
|
|
|
- .headline{
|
|
|
|
- color: rgb(16,16,16);
|
|
|
|
- font-size: 36rpx;
|
|
|
|
-
|
|
|
|
|
|
+ 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%);
|
|
}
|
|
}
|
|
- .sum{
|
|
|
|
- color: rgb(16,16,16);
|
|
|
|
- font-size: 48rpx;
|
|
|
|
- margin-top: 32rpx;
|
|
|
|
-
|
|
|
|
|
|
+ #pieEcharts{
|
|
|
|
+ text-align: start;
|
|
}
|
|
}
|
|
|
|
|
|
- .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);
|
|
|
|
- }
|
|
|
|
- .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>
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .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;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .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>
|