jp-charge/pagesFinance/statistics/index.vue

<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false" :background="background">
			<view class="navbar-tit">{{title}}</view>
		</u-navbar>
		<view class="statisticsData" v-if="!iswuye">
			<view class="statisticsData-item">
				<view class="statisticsData-head" @click="gotoUrl('pagesFinance/detailed/index')">
					<p>今日充电收益(元)</p>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="24"></u-icon>
					
				</view>
				<view class="statisticsData-main">
					<h2>{{indexData.todayAmount}}</h2>
				</view>
				<view class="statisticsData-foot">
					<p>昨日收益</p>
					<h4>{{indexData.yesterdayAmount}}</h4>
				</view>
			</view>
			<view class="statisticsData-item">
				<view class="statisticsData-head">
					<p>今日充电单量(笔)</p>
				</view>
				<view class="statisticsData-main">
					<h2>{{indexData.todayNum}}</h2>
				</view>
				<view class="statisticsData-foot">
					<p>累计收益</p>
					<h4>{{indexData.withdrawnAmount}}</h4>
				</view>
			</view>
		</view>
		
		<view class="statisticsData" v-if="iswuye">
			<view class="statisticsData-item">
				<view class="statisticsData-head"  @click="gotoUrl('pagesFinance/detailed/index')" >
					<p>今日充电电费(元)</p>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="24"></u-icon>
				</view>
				<view class="statisticsData-main">
					<h2>{{indexData.todayCost}}</h2>
				</view>
				<view class="statisticsData-foot">
					<p>昨日电费</p>
					<h4>{{indexData.yesterdayCost}}</h4>
				</view>
			</view>
			<view class="statisticsData-item">
				<view class="statisticsData-head">
					<p>今日充电度数(kW/h)</p>
				</view>
				<view class="statisticsData-main">
					<h2>{{indexData.todayElectricity/10000}}</h2>
				</view>
				<view class="statisticsData-foot">
					<p>累计收益</p>
					<h4>{{indexData.withdrawnAmount}}</h4>
				</view>
			</view>
		</view>
		
		<view class="statisticsChart">
			<view class="statisticsChart-head">
				<h4 v-if="!iswuye">充电桩收益占比</h4>
				<h4 v-if="iswuye">充电桩电费占比</h4>
				<view class="statisticsChart-time">
					<u-calendar v-model="showdate" mode="range" @change="changedate"></u-calendar>
					<p @click="showdate = true">{{startTime}} 至 {{endTime}}</p>
					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="36"></u-icon>

				</view>
			</view>
			<view class="statisticsChart-main">
				<u-subsection :list="subsection" @change="changesub" :current="current" button-color="#2E7Dff"
					active-color="#fff"></u-subsection>
				<view id="pieEcharts" style="min-height:250px;">

				</view>
			</view>
		</view>
			<Tabbar :current="0"></Tabbar>
<!-- 		<u-tabbar v-model="current" :list="tabbarList" active-color="#185ac6"></u-tabbar>
 -->	</view>
</template>

<script>
	import Tabbar from '@/components/TabbarFinance.vue'
	import * as API from '@/apis/finance.js'
	
	import * as echarts from "echarts";
	import {
		beforeTimeStamp,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	export default {
		data() {
			return {
				title:"",
				showdate: false,
				startTime: "",
				indexData:{},
				endTime: "",
				myChart: null,
				subsection: [{
						name: '金额'
					},
					{
						name: '单量'
					}
				],
				tabbarList: [{
						iconPath: "bar-chart-box-fill",
						selectedIconPath: "bar-chart-box-fill",
						text: '统计',
						count: 0,
						isDot: true,
						customIcon: true,
					},
					{
						iconPath: "article-fill",
						selectedIconPath: "article-fill",
						text: '明细',
						midButton: true,
						customIcon: true,
					},

					{
						iconPath: "account-pin-box-fill",
						selectedIconPath: "account-pin-box-fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: true,
					},
				],
				current: 0,
				background: {
					background: 'none'
				},
				iswuye:false,
			}
		},
		onLoad() {
			this.title="收益统计"
			var obj=this.carhelp.getPersonInfoPlus("merchantUser");
			if(obj&&obj.role){
				var  role=obj.role;
				if(role.id=="4"){
					this.title="电费统计"
					this.iswuye=true;
				}
			}
		},
		components: {
			Tabbar
		
		},
		onReady() {
			this.startTime = parseUnixTime(beforeTimeStamp(7), '{y}-{m}-{d}')
			this.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
			this.getData()
		},
		methods: {
			getData(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				//this.form.pageIndex=this.pageIndex
				
				API.spIncomeStatistics(this.iswuye,{
					startDate:this.startTime,
					endDate:this.endTime 
				}).then((res) => {
					
					this.indexData = res.data
					this.getPie()
					
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
					
						title: error
					})
				})
			},
			changesub(e){
				console.log(e)
				this.current=e
				this.getPie()
			},
			changedate(e) {
				this.startTime = e.startDate
				this.endTime = e.endDate
				this.getData()
				 
			},
			getPie() {
				var list=this.indexData.pieChart;
				var getData=[];
				list.forEach(item=>{
					 var value=(this.iswuye?(item.electricity/10000):item.amountNums)
					getData.push({
						value: this.current?value:item.amount,
						name: item.deviceName
					})
				})
				
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'));

				}
				// 指定图表的配置项和数据
				var option = {
					
					tooltip: {
						trigger: 'item'
					},
					legend: {

						bottom: '0%',
						left: 'center'
					},
					series: [{
						//name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: getData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						itemStyle:{
							normal:{
								color:function(colors){
									
									var list = [
									           '#fc8251',
									           '#5470c6',
									           '#91cd77',
									           '#ef6567',
									           '#f9c956',
									           '#75bedc',
											   '#fc8251',
											   '#5470c6',
											   '#91cd77',
											   '#ef6567',
											   '#f9c956',
											   '#75bedc'
									         ]
									return list[colors.dataIndex]
								}
							}
						}
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);
			}
		}
	}
</script>
<style>
	page {
		background: url(../../assets/img/index_header_bg.png) no-repeat top center #f7f7f7;
		background-size: 100%;
	}
</style>
<style lang="scss" scoped>
	.navbar-tit {
		color: #fff;
		font-size: 20px;
		padding-left: 15px;
	}

	.statisticsData {
		background-color: #fff;
		margin: 16px;
		padding: 16px;
		border-radius: 8px;
		display: flex;
		margin-top: 80px;
	}

	.statisticsData-item {
		flex: 1;

		.statisticsData-head {
			display: flex;
			align-items: center;

			p {
				color: #637AA2;
				font-size: 12px;
			}
		}

		.statisticsData-main {
			margin-top: 4px;
			font-size: 20px;
		}

		.statisticsData-foot {
			display: flex;
			align-items: center;
			margin-top: 16px;

			p {
				color: #637AA2;
			}

			h4 {
				margin-left: 8px;
			}
		}
	}

	.statisticsChart {
		margin: 16px;

		.statisticsChart-head {
			margin-bottom: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			h4 {
				font-weight: normal;
				font-size: 16px;
				position: relative;
				padding-left: 10px;

				&::after {
					content: '';
					position: absolute;
					height: 12px;
					width: 4px;
					background-color: #4E8DF6;
					left: 0;
					top: 5px;
				}
			}

			.statisticsChart-time {
				display: flex;
				align-items: center;

				p {
					color: #666;
				}
			}
		}

		.statisticsChart-main {
			background-color: #fff;
			padding: 16px;
			border-radius: 8px;
		}
	}
</style>