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

<template>
	<view>
		<u-navbar :title="(companyId?'园区营增':'平台')+'收入统计'" 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 v-if="!companyId" class="tabsItem" @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 >
				{{info.companyName}}
			</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="statistics-total">
				<view class="total-title">
					{{monthQuery}}月预计收入
				</view>
				<view class="total-number">
					{{info.totalFee}}元
				</view>
			</view>

			<view class="statistics-group">
				<view  @click="gotoInfo(2)"
				class="statistics-item">
					<view class="content">
						<!-- 收入 -->
						<view class="income">
							<view class="income-title">
								线损电费收入（{{info.ratio}}%）
							</view>
							<view class="income-number">
								{{info.lineLossFee}}元
							</view>
						</view>
						<!-- 电量 -->
						<view class="electric-quantity">
							<view class="electric-quantity-title">
								线损电量
							</view>
							<view class="electric-quantity-number">
								{{info.lineLossKwh}}度
							</view>
						</view>
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
					</view>
				</view>
				<view   @click="gotoInfo(1)" class="statistics-item">
					<view class="content">
						<!-- 收入 -->
						<view class="income">
							<view class="income-title">
								分摊电费收入（{{info.ratio}}%）
							</view>
							<view class="income-number">
								{{info.sharedFee}}元
							</view>
						</view>
						<!-- 电量 -->
						<view class="electric-quantity">
							<view class="electric-quantity-title">
								分摊电量
							</view>
							<view class="electric-quantity-number">
								{{info.sharedKwh}}度
							</view>
						</view>
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
					</view>
				</view>
				<view   @click="gotoInfo(3)" class="statistics-item">
					<view class="content">
						<!-- 收入 -->
						<view class="income">
							<view class="income-title">
								节约电费收入（{{info.ratio}}%）
							</view>
							<view class="income-number">
								{{info.switchFee}}元
							</view>
						</view>
						<!-- 电量 -->
						<view class="electric-quantity">
							<view class="electric-quantity-title">
								节约电量
							</view>
							<view class="electric-quantity-number">
								{{info.switchKwh}}度
							</view>
						</view>
					</view>
					<view class="icon">
						<u-icon name="arrow-right" color="#acacac" size="24"></u-icon>
					</view>
				</view>
			</view>

		</view>
		<!-- 图表 -->
	
		<view class="chart">
			<view id="pieEcharts" >
			
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/revenue.js'
	import * as echarts from "echarts";

	export default {
		data() {
			return {
				tabShow1: false,
				tabShow2: false,
				selector: [1, 2, 3],
				id: "",
				info: {},
				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: [{
							label: '全部类型',
							value: '',
						},
						{
							label: '线上充值',
							value: '1',
						},
						{
							label: '线下充值',
							value: '2',
						},
					]
				},
				endYear: "",
				myChart: null,
				companyId:"",
				
			}
		},
		onLoad(op) {
			this.endYear = new Date().getFullYear()
			this.id = op.id
			
			this.companyId = op.companyId
			var date = new Date()
			this.queryDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
			this.queryMonth = date.getFullYear() + "年" + (date.getMonth() + 1) + "月"
			this.tabsFrom.show2Text = this.queryMonth
			this.monthQuery = (date.getMonth() + 1)
			if(this.id){
				this.getInfo()
			}
			
			this.getCompanyList()
		},
		methods: {
			gotoInfo(i){
			
				var url="/pages/platformRevenueStatistics/saveUtilityIncome?id="+this.id+"&type="+i+"&query="+this.queryDate
				if(this.companyId ){
					url+="&companyId="+this.info.companyId
				}
				
				
				uni.navigateTo({
					url:url
				})
			},
			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.id = this.tabsFrom.selector1[index].value;

				if (!b) {
					
					this.getInfo()
				}
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.platformRevenue({
					companyId: this.id,
					queryDate: this.queryDate
				}).then((response) => {
					uni.hideLoading();
					var list = response.data.incomeList
					if (list.length) {
						this.info = list[0]
						this.getPle()
					} else {
						this.info = {}
						if (this.myChart) {
							this.myChart.clear()
						}
					}



				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getPle(list) {

				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'), null, {
						width: uni.upx2px(700),
						height: uni.upx2px(480)
					});
				}
				this.myChart.clear();


				var option = {
					tooltip: {
						trigger: 'item'
					},
					grid: {
							top: 30,
							left: 20,
							right: 30,
							bottom: 20,
							containLabel: true
						},
					series: [{
					
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						
						label: {
							show: true,
							
							formatter: '{b}\n\t{c}元'
						},
						
						
						data: [{
								value: this.info.lineLossFee,
								name: '线损电费',
								itemStyle:{
									color:"#ef8132"
								}
							},
							{
								value: this.info.sharedFee,
								name: '分摊电费',
								itemStyle:{
									color:"#99bd3a"
								}
							},
							{
								value: this.info.switchFee,
								name: '节约电费',
								itemStyle:{
									color:"#53b56b"
								}
							}
						]
					}]
				};
				console.log(option)
				this.myChart.setOption(option);


			},
			getCompanyList() {

				API.platformCompanyList({
					// parentId:this.companyId
				}).then((response) => {
					//uni.hideLoading();
					var list = response.data.companyInfoList;
					if(!this.id){
						
						this.id=list[0].id
						this.getInfo()
					}
					var i = 0;
					var k = 0
					this.tabsFrom.selector1 = list.map((item) => {

						if (item.id == this.id) {
							k = i
						}
						i++;
						return {
							label: item.name,
							value: item.id
						}
					})
					this.selector1confirm([k], true)


				}).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 {
		.statistics-total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 36rpx 32rpx;
			//background-color: rgba(22, 119, 255, 1);
			background: linear-gradient(88.25deg, rgba(31,85,255,1) 0.65%,rgba(39,171,255,1) 99.34%);
			color: rgba(255, 255, 255, 1);
			font-size: 40rpx;
			font-weight: bold;
		}

		.statistics-group {
			.statistics-item {
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid rgba(245, 245, 245, 1);

				.content {
					flex: 0.99;

					// 收入
					.income {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 32rpx;
						font-weight: bold;

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

						}

						.income-number {
							color: rgba(22, 119, 255, 1);

						}
					}

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

					}

				}
			}

		}
	}

	// 图表
	.chart {
		margin-top: 40rpx;
		padding: 0 15rpx;

		img {
			width: 100%;
			height: 600rpx;
		}
	}
</style>