jp-housekeep-manage/pages/platformRevenueStatistics/saveUtilityIncome.vue

<template>
	<view>
		<u-navbar :title="typeName+'电费收入'" title-color="#101010"></u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-picker v-model="tabsFrom.show1" :default-selector="[tabsFrom.show1Index]" mode="selector"
				:range="tabsFrom.selector1" range-key="label" @confirm="selector1confirm"></u-picker>
			<u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
				:noselect="false" mode="time" :params="params" @confirm="selector2confirm"
				@reset="selector2reset"></u-picker-select>
		
			<view class="tabsItem" v-if="!companyIdSet" @click="tabsFrom.show1=!tabsFrom.show1">{{tabsFrom.show1Text}} <u-icon
					name="arrow-up" v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
				<view v-else >
					{{tabsFrom.show1Text}} 
				</view>	
					
			<view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">{{tabsFrom.show2Text}} <u-icon
					name="arrow-up" v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
		</view>
		<!-- 统计 -->
		<view class="statistics">
			<view class="total-group">
				<view class="statistics-total1">
					<view class="total-title">
						{{typeName}}电费（100%）
					</view>
					<view class="total-number">
						{{info.totalFee}}元
					</view>
				</view>
				<view class="statistics-total2">
					<view class="total-title">
						{{typeName}}电量
					</view>
					<view class="total-number">
						{{info.totalKwh}}度
					</view>
				</view>
			</view>




			<view class="statistics-group">
				<view class="statistics-item"  v-for="(item,i) in info.list"  :key="i"
				 @click="showBtn(item)" >
					<view class="item-top">
						<view class="content">
							<!-- 电费 -->
							<view class="electricity">
								<view class="electricity-title">
									{{item.tenantName}}
								</view>
								<view class="electricity-number">
									{{item.fee}}元
								</view>
							</view>
							<!-- 节省度数 -->
							<view class="electric-quantity">
								<view class="electric-quantity-title">
									{{typeName}}度数
								</view>
								<view class="electric-quantity-number">
									{{item.kwh}}度
								</view>
							</view>
						</view>

						<view class="icon"   >
							
							<u-icon name="arrow-up" v-if="item.show"   color="#acacac" size="24"></u-icon>
						<u-icon name="arrow-down" v-else color="#acacac" size="24"></u-icon>
						</view>
					</view>


                <!-- 详情 -->
					<view class="detail" v-show="item.show">
						<view class="item" v-for="(it,j) in item.recordList" :key="j" >
							<!-- 时间段 -->
							<view class="time-slot">
								<view class="title">
									{{get(it.createTime,0)}}
								</view>
								<view class="value">
									{{it.fee}}元
								</view>
							</view>
							<!-- 总计 -->
							<view class="total">
								<view class="total-time">
									{{get(it.createTime,1)}}
								</view>
								<view class="total-degrees">
									{{it.kwh}}度
								</view>
							</view>
						</view>
					</view>
				</view>
					<u-divider :isnone="info.list.length==0" nonetext="没有找到相关内容"
					border-color="#CFD2D5">已经到底了</u-divider>

			
			</view>
	
		</view>


	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/revenue.js'
	import {
			newDate,hourDistance
		} from '@/apis/utils'
		
	export default {
		data() {
			return {
				tabShow1: false,
				tabShow2: false,
				detail:true,
				selector: [1, 2, 3],
				id: "",
				companyId: "",
				companyIdSet: "",
				info: {
					list:[]
				},
				list: [],
				queryDate: "",
				queryMonth: "",
				monthQuery: "",
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部",
					show2Text: "全部时间",
					selector1: [
					]
				},
				endYear: "",
				type:0,
				 
				
			}
		},
		computed:{
			typeName(){
				//type 1分摊2线损3停电
				if(this.type==1){
					return '分摊'
				}
				if(this.type==2){
					return '线损'
				}
				if(this.type==3){
					return '节约'
				}
				return ''
			}
		},
		onLoad(op) {
			this.endYear = new Date().getFullYear()
			this.id = op.id
			this.companyId = op.companyId
			this.companyIdSet = op.companyId
			
			this.type = op.type
			var date =  newDate(op.query)
			this.queryDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
			this.queryMonth = date.getFullYear() + "年" + (date.getMonth() + 1) + "月"
			this.tabsFrom.show2Index =  date.getFullYear() + "-" + (date.getMonth() + 1) 
			
			this.tabsFrom.show2Text = this.queryMonth
			this.monthQuery = (date.getMonth() + 1)
			//this.getInfo()
			this.getCompanyList()
		},
		methods: {
			showBtn(item){
				console.log(1)
				if(item.show==null){
					item.show=false
				}
				
				
				item.show=!item.show
				this.$forceUpdate()
			},
			get(time,t){
				//time="2024-08-01 11:11-2024-08-03 12:21"
				
				var str=''
				try{
					
					var sz1=time.substring(0,16)
					var sz2=time.substring(17)
					var time1=newDate(sz1)
					var time2=newDate(sz2)
					if(time1.getFullYear()!=time2.getFullYear()){
						if(!t){
							str='开始时间：'+sz1
						}else{
							str='结束时间：'+sz2
						}
					}else if(time1.getMonth()!=time2.getMonth()){
						if(!t){
							str=sz1+"至"+sz2.substring(5)
						}else{
							str=hourDistance(time1,time2,1)
						}
					}else {
						if(!t){
							str=sz1.substring(5)+"至"+sz2.substring(5)
						}else{
							str=hourDistance(time1,time2,1)
						}
					}
					
				}catch(e){
					//TODO handle the exception
					
					if(!t){
						str=time
					}else{
						str=''
					}
				}
				
				return str
			},
			selector2confirm(e) {
			
				this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
			
				this.tabsFrom.show2Index = e.year + "-" + e.month
				this.queryMonth = e.year + "年" + e.month + "月"
				this.queryDate = e.year + "-" + e.month + "-1"
			
				
				this.getInfo()
			},
			selector1confirm(e, b) {
			
				var index = e[0]
				this.tabsFrom.show1Index = index
				this.tabsFrom.show1Text = this.tabsFrom.selector1[index].label
				this.companyId = this.tabsFrom.selector1[index].value;
			
				if (!b) {
					this.getInfo()
				}
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.platformRevenueTypeList({
					companyId: this.companyId,
					queryDate: this.queryDate,
					type:this.type
				}).then((response) => {
					uni.hideLoading();
					var list = response.data.incomeList
					if (list.length) {
						this.info = list[0]
						
					}else{
						this.info = {}
					}
			
			
			
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getCompanyList() {
			
				API.platformCompanyList({
					parentId:this.id
				}).then((response) => {
					//uni.hideLoading();
					var list = response.data.companyInfoList;
					
					if(list.length){
						this.companyId=list[0].id
						var i = 0;
						var k = 0
						
						this.tabsFrom.selector1 = list.map((item) => {
								
								if (item.id == this.companyIdSet) {
									k = i
								}
								i++;	
							return {
								label: item.name,
								value: item.id
							}
						})
						
						this.selector1confirm([k], true)
						this.getInfo()
					}
					
			
			
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 100px;
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	// 标签
	.tabs {

		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241, 241, 241, 1);
		display: flex;
		justify-content: space-around;

	}

	// 统计
	.statistics {

		.total-group {
			background-color: rgba(22, 119, 255, 1);
			padding: 24rpx 32rpx
		}

		.statistics-total1 {

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


			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 4rpx;
		}

		.statistics-total2 {

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


			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			font-weight: bold;

		}


		.statistics-group {

			.statistics-item {


				border-bottom: 1px solid rgba(245, 245, 245, 1);

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 32rpx;
				}

				.content {
					flex: 0.99;

					// 电费
					.electricity {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 32rpx;
						font-weight: bold;

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

						}

						.electricity-number {
							color: rgba(22, 119, 255, 1);
							white-space: pre;

						}
					}

					// 电量
					.electric-quantity {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: rgba(119, 119, 119, 1);

					}

				}
			}

		}

		.detail {
			background-color: rgba(242, 242, 242, 1);

			.item {
				padding: 24rpx 48rpx 24rpx 76rpx;
				border-bottom: 1px solid rgba(234,234,234,1);
				// 时间段
				.time-slot{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: bold;
					.title{
						color: rgba(51,51,51,1);
						
					}
					.value{
						color: rgba(22,119,255,1);
					}
				}
				// 总计
				.total{
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.total-time{
						font-size: 32rpx;
						color: rgba(51,51,51,1);
						//color: rgba(119,119,119,1);
						
					}
					.total-degrees{
						color: rgba(119,119,119,1);
					}
				}
			}
		}
	}
</style>