jp-charge/pagesFinance/statistics/index.vue

<template>
	<view>

		<view class="navbar-tit">{{title}}</view>

		<view class="statisticsData">
			<view class="statisticsData-item">
				<h3 style="font-size: 20px;">{{info.merchantAccountName}}</h3>
			</view>
			<view class="statisticsDataMain" v-if="indexData">
				<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="#637AA2" size="36">
						</u-icon>

					</view>
					<view class="statisticsData-main">
						<h2>{{indexData.todayAmount?indexData.todayAmount.toFixed(2):0}}元</h2>
					</view>
					<view class="statisticsData-foot">
						<p>昨日</p>
						<h2 style="margin-left: 10px;">
							{{indexData.yesterdayAmount?indexData.yesterdayAmount.toFixed(2):0}}元</h2>
					</view>
				</view>
				<view class="statisticsData-item">
					<view>
						<h3>&nbsp;</h3>
					</view>
					<view class="statisticsData-head">
						<p>今日充电笔数</p>
					</view>
					<view class="statisticsData-main">
						<h2>{{indexData.todayEQNum?indexData.todayEQNum:0}}笔</h2>
					</view>
					<view class="statisticsData-foot">
						<p>本月</p>
						<h2 style="margin-left: 10px;">
							{{indexData.thisMonthAmount?indexData.thisMonthAmount.toFixed(2):0}}元</h2>
					</view>
				</view>
			</view>
		</view>
	 
		<u-picker mode="time" v-model="popupShow" @confirm="changedate" :default-time="queryTime" :params="params"></u-picker>
		<u-picker mode="time" v-model="popupShow2" @confirm="changedate2" :default-time="queryTime2+'-1'"  :params="params"></u-picker>
		<u-picker mode="selector" v-model="popupShow3" @confirm="changedate3" :range="stationList" range-key="name" :default-selector="[selectstationIndex]"></u-picker>


		<view class="statisticsChart">


			<view class="statisticsChart-head" style="margin-top: 20px;">
				<h4>流水统计</h4>
				<!-- <view class="navbar-screen" >
					 {{startTime}}至{{endTime}}
				 </view> -->
							 <view class="navbar-screen" @click="popupShow = true" v-if="false">
								 <span>{{showTime(queryTime)}}</span>
							 <u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow"></u-icon>
							 <u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow"></u-icon>
							 
							 </view>


			</view>
			<u-calendar v-model="popupShow4" mode="range" @change="changedate4"></u-calendar>
			<view class="details detailstable">
					<p style="text-align: center; margin-bottom: 5px;" @click="popupShow4 = true">{{startTime}}至{{endTime}}
					 <u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow4"></u-icon>
					 <u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow4"></u-icon>
					 </p>

 					<u-collapse  :headStyle="{
								color:'#101010',
								 fontWeight: 'bold',
								 padding:'12px 0',
								 borderBottom: '1px solid #ededed'
								 
							}"
					v-if="stationFlowList.length">
							<u-collapse-item  
							v-for="(item, index) in stationFlowList" :open="index==0" :title="item.stationName+' 总收入'+item.actualMoney.toFixed(2)+'元'" :key="index">
							<!-- -->
							 <view class="detailsline">
							 
							 
							 		<view class="details-row details-row-1">
							 			
							 			<view class="span1">电费</view>
							 			<view class="span2">{{item.elecMoney.toFixed(2)}}<span>元</span></view>
							 		</view>
							 		<view class="details-row">
							 			<view class="span1">服务费</view>
							 			<view class="span2">{{item.serviceMoney.toFixed(2)}}<span>元</span></view>
							 		</view>
							 	</view>
							 
							 	<view class="detailsline">
							 		<view class="details-row details-row-1">
							 			
							 			<view class="span1">总用电量</view>
							 			<view class="span2">{{(item.eq/10000).toFixed(1)}}<span>度</span></view>
							 		</view>
							 		<view class="details-row">
							 			
							 			
							 			<view class="span1">充电枪数量</view>
							 			<view class="span2">快充{{item.fastNum}}/慢充{{item.slowNum}}</view>
							 		</view>
							 	</view>
								
							 	<view class="detailsline" v-if="item.fastNum&&item.slowNum">
							 		<view class="details-row details-row-1">
							 			
							 			
							 			<view class="span1">快充枪平均充电量</view>
							 			<view class="span2" v-if="item.fastNum">{{(item.averageFast/10000).toFixed(1)}}<span>度/枪/天</span></view>
										<view class="span2" v-else>0<span>度/枪/天</span></view>
									</view>
							 		<view class="details-row">
							 			
							 			<view class="span1">慢充枪平均充电量</view>
							 			<view class="span2"  v-if="item.slowNum" >{{(item.averageSlow/10000).toFixed(1)}}<span>度/枪/天</span></view>
							 			<view class="span2" v-else>0<span>度/枪/天</span></view>
									</view>
							 	</view>
								
								<view  :style="item.slowDayNum==nowTime?'color: #ffffff;':'border-bottom: 1px solid #ededed;'"	
								 >查询范围内实际订单天数{{item.slowDayNum}}</view>
															 
							</u-collapse-item>
						</u-collapse>
				
			
				

			</view>

			<view class="statisticsChart-head" style="margin-top: 20px;">
				<h4>收益统计</h4>
				<!-- <view class="navbar-screen" >
					 {{startTime}}至{{endTime}}
				 </view> -->
				<!-- <view class="navbar-screen" @click="popupShow2 = true"><span>筛选</span>
					<u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon>
				</view> -->


			</view>

			<view class="details" v-if="indexData2&&indexData2.incomeMap">
				
				<view class="details-row2">
					<p  @click="popupShow3 = true">{{selectstationName}}
						<u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow3"></u-icon>
						<u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow3"></u-icon>
					</p>
					<p  @click="popupShow2 = true">
						{{showTime(queryTime2)}}
						<u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow2"></u-icon>
						<u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow2"></u-icon>
					</p>
				</view>
				
				<view class="details-row">
					<p>投资人收入</p>
					<span>{{indexData2.incomeMap.incomeAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row" v-if="false">
					<p>用电度数</p>
					<span>{{indexData2.incomeMap.electricQuantity/10000}}度</span>
				</view>
				<view class="details-row">
					<p>预估电费</p>
					<span>{{indexData2.incomeMap.costAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row">
					<p>服务费预估收益</p>
					<span><b>{{indexData2.incomeMap.serviceAmount.toFixed(2)}}元</b></span>
				</view>
				<view class="details-row">
					<p>月卡收益</p>
					<span>{{indexData2.incomeMap.cardIncomeAmount.toFixed(2)}}元</span>
				</view>
			</view>

		</view>
		<Tabbar :current="0" ref="tabbarMain"></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";
	//require("@/apis/echarts-5-3.min.js")
	//import * as echarts from "@/apis/echarts-5-3.min.js";
	import {
		daysDistance,
		beforeTimeStamp,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	export default {
		data() {
			return {
				popupShow3:false,
				params: {
									year: true,
									month: true,
									day: false,
									hour: false,
									minute: false,
									second: false
								},
				isinit: true,
				form: {},
				form2: {},
				selecttype: "",
				selectstationId: "",
				selectdeviceNo: "",
				popupShow2: false,
				popupShow: false,
				 popupShow4:false,
				nowTime:0,
				selectstationId2: "",
				selectstationIndex:0,
				selectstationName: "",
				info: {},
				title: "",
				showdate: false,
				showdate2: false,
				
				queryTime:"",
				queryTime2:"",
				
				indexData: {},
			
				indexData2: null,
			

				myChart: null,
				myChartReady: false,
				myChartTime: false,
				subsection: [{
						name: '金额'
					},
					{
						name: '笔数'
					}
				],
				stationFlowList: [],
				stationList: [],
				stationListSon: [],
				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,
					},
				],
				endTime:'',
				endTime2:'',
				
				current: 0,
				background: {
					background: 'none'
				},
				value: '',
				type: 'select',
				show: false,
				border: true,
				step: 0,
				stepname: '',
				startTime:'',
				stepid: 0,
				
			}
		},
		onShow() {
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(0);
			}
		},
		onLoad() {
			this.title = "收益统计"
			this.info = this.carhelp.getPersonInfo("merchantUser")

		},
		components: {
			Tabbar

		},
		onReady() {
			var date=new Date();
			this.nowTime=7
			
			
			this.queryTime=parseUnixTime(currentTimeStamp(), '{y}-{m}');
			this.queryTime2=parseUnixTime(currentTimeStamp(), '{y}-{m}'),
			
			console.log(this.queryTime);
			
			this.startTime = parseUnixTime(beforeTimeStamp(7), '{y}-{m}-{d}')
			this.endTime = parseUnixTime(beforeTimeStamp(1), '{y}-{m}-{d}')
			//this.startTime2 = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
			this.endTime2 = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')

			this.getStation()
		},computed:{
		
			// startTime(){
			// 	return this.queryTime+'-1'
			// },
			startTime2(){
				return this.queryTime2+'-1'
			},
			
		},
		methods: {
			showTime(name){
				if(!name){
					return ''
				}
				return name.replace('-','年')+'月';
			},
			getStation(bl) {

				API.stationList().then((res) => {

					this.stationList = res.data.stationList
					this.stationList.unshift({
						id:'',name:"全部站点"
					})
					this.selectstationName="全部站点"
					
					this.stationListSon = res.data.deviceList
					this.getDataHome()
					this.getData()
					this.getData2()		
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			resetBtn() {
				this.nowTime=7
				this.startTime = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
				this.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')



				this.selecttype = ""
				this.selectstationId = ""
				this.selectdeviceNo = ""

				this.form = {

					type: this.selecttype,
					stationId: this.selectstationId,
					deviceNo: this.selectdeviceNo,
				};
				this.popupShow = false;
				this.list = [];
				this.getData()

			},
			okbtn() {
				this.popupShow = false;

				this.form = {

					type: this.selecttype,
					stationId: this.selectstationId,
					deviceNo: this.selectdeviceNo,
				};
				this.list = [];
				this.getData()
			},
			resetBtn2() {
				this.startTime2 = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
				this.endTime2 = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')



				this.selectstationId2 = ""

				this.form2 = {

					stationId: this.selectstationId2,

				};
				this.popupShow2 = false;

				this.getData2()

			},
			okbtn2() {
				this.popupShow2 = false;

				this.form2 = {

					stationId: this.selectstationId2,

				};

				this.getData2()
			},
			getDataHome() {




				API.homeHeadStatistics().then((res) => {
					this.indexData = res.data;

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			getData() {

				this.form.startDate = this.startTime,
					this.form.endDate = this.endTime

				API.homeFlowStatistics(this.form).then((res) => {
					this.stationFlowList = res.data.stationFlowList;
					this.nowTime=daysDistance(this.startTime, this.endTime)+1;
					
					console.log(this.nowTime)
					
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			getData2() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				this.form2.startDate = this.startTime2,
					this.form2.endDate = this.endTime2

				API.homeIncomeStatistics(this.form2).then((res) => {
					this.indexData2 = res.data

					uni.hideLoading()

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			changesub(e) {

				this.current = e
				this.getPie()
			},
			changedate4(e) {
							this.startTime = e.startDate
							this.endTime = e.endDate
							this.okbtn()
						
			},
			changedate3(e) {
					console.log(e)
					var index=e[0];
					var obj=this.stationList[index];
					this.selectstationId2=obj.id;
					this.selectstationIndex=index;
					this.selectstationName=obj.name;
					this.okbtn2()
			},
			changedate(e) {
				console.log(e)
				
				this.queryTime=e.year+'-'+e.month;
				this.startTime=e.year+'-'+e.month+'-1';
				if(e.month=='12'){
					this.endTime=(e.year)+"/12/31"
				}else{
					var b=e.year+'/'+(parseInt(e.month)+1)+'/1';
					var a=beforeTimeStamp(1,b);
					this.endTime= parseUnixTime(a, '{y}-{m}-{d}')
					
				}
				
				this.okbtn()
			},
			changedate2(e) {
				console.log(e)
				this.queryTime2=e.year+'-'+e.month;
				
				if(e.month=='12'){
					this.endTime2=(e.year)+"/12/31"
				}else{
					var b=e.year+'/'+(parseInt(e.month)+1)+'/1';
					var a=beforeTimeStamp(1,b);
					this.endTime2= parseUnixTime(a, '{y}-{m}-{d}')
					
				}
				
				this.okbtn2()

			},
			getPie1(list) {
				var getData = [];

				var map = new Map()
				var stationNum = 0;
				list.forEach(item => {

					var value = this.current ? item.eqNum : item.amount
					if (value) {

						var stationName = ""
						var obj = this.stationListSon.find(item2 => {
							return item2.deviceNo == item.deviceNo
						})
						if (obj && obj.stationId) {
							var obj2 = this.stationList.find(item3 => {
								return item3.id == obj.stationId
							})
							if (obj2 && obj2.name) {
								stationName = obj2.name;
							}

							if (!map.has(obj.stationId)) {

								map.set(obj.stationId, {
									id: obj.stationId,
									value: value,
									name: stationName,
								})
								this.stepid = obj.stationId;
								stationNum++;
							} else {
								var omap = map.get(obj.stationId)
								var addvalue = (omap.value * 100 + value * 100) / 100
								map.set(obj.stationId, {
									id: obj.stationId,
									value: addvalue,
									name: stationName,
								})

							}

						}

					}

				})
				map.forEach((item, i) => {
					getData.push(item)
				})

				if (stationNum == 1) {
					this.step = 2; //只有一个站， 就不拆分了

				} else {
					this.stepid = 0;
				}

				return getData;
			},
			getPie2(list) {
				var getData = [];
				var sz = ['自行车充电桩', '直流汽车充电桩', '交流汽车充电桩']

				list.forEach(item => {

					var value = this.current ? item.eqNum : item.amount
					if (value) {
						var typeName = "";
						var stationName = ""
						var obj = this.stationListSon.find(item2 => {
							return item2.deviceNo == item.deviceNo
						})


						if (this.stepid != obj.stationId) {
							return
						}

						if (obj && obj.stationId) {
							var obj2 = this.stationList.find(item3 => {
								return item3.id == obj.stationId
							})
							if (obj2 && obj2.name) {
								stationName = obj2.name;
							}
						}

						if (obj && obj.type) {
							typeName = sz[obj.type]
						}
						getData.push({
							id: item.id,
							value: value,
							name: item.deviceName,
							typeName: typeName,
							stationName: stationName
						})

					}

				})
				return getData;
			},
			getPie() {

				var list = this.indexData.pieChart;

				var unit = this.current ? '笔' : '元'

				var getData = [];
				if (this.step == 0) {
					getData = this.getPie1(list)
				}
				if (this.step == 1 || this.step == 2) {
					getData = this.getPie2(list)
				}


				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'));

				}

				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						trigger: 'item',
						formatter: (value) => {
							var info = value.data;
							var showvalue = info.value;
							if (!this.current) {
								showvalue = info.value.toFixed(2)
							}
							if (this.step == 0) {
								if (!info) {
									return ""
								}
								return info.name + ' <br/> ' + showvalue + unit
							}
							if (this.step == 1 || this.step == 2) {
								return info.stationName + ' <br/> ' + info.name + ' <br/> ' + showvalue + unit +
									' <br/> ' + info.typeName

							}
						},
						position: function(point, params, dom, rect, size) {

							return ['10%', '0%']
						}

					},

					series: [{
						//name: 'Access From',
						type: 'pie',
						radius: '40%',
						data: getData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},

						label: {

							fontWeight: "bold",
							fontSize: 14,
						}
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);

				var _this = this;
				if (!this.myChartReady) {
					this.myChartReady = true;
					//双击事件不能生效 ， 改为多次点击
					this.myChart.on('click', function(params) {
						var tid = _this.stepid; //上一次

						_this.stepid = params.data.id


						if (!_this.myChartTime || tid != _this.stepid) {
							_this.stepid = params.data.id
							_this.myChartTime = true;
							setTimeout(function() {
								console.log("setTimeout")

								_this.myChartTime = false;
							}, 500)
							return
						}

						if (_this.step == 0) {
							_this.step = 1
							_this.stepname = params.data.name
							_this.myChart.clear()
							_this.getPie()
						} else if (_this.step == 1) {
							//_this.step=0
						}


						// window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
					});
				}

			}
		}
	}
</script>
<style>
	page {
		background: url(../../assets/img/index_header_bg.png) no-repeat top center #f7f7f7;
		background-size: 100%;
	}
</style>

<style lang="scss" scoped>
	.detailstable {
		font-size: 16px;
		padding: 20px 15px !important;
		p{
			font-size: 14px;
		}
		.details-row-main{
			border-bottom: 1px solid #ededed;
			padding: 10px 0;
			
		}
		.detailsline {
			border-bottom: 1px solid #ededed;
			display: flex;

			.details-row {
				width: 48%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				padding-left: 10px;
				margin-bottom: 10px;
				.span1 {
					color: rgba(136, 136, 136, 100);
					font-size: 14px;
					width: 100%;
				}
				.span2{
					font-size: 18px;
					width: 100%;
					color: #101010;
					span{
						font-size: 12px;
					}
				}
			}
		}

		.details-row-1 {
			padding-left: 0px !important;
			border-right: 1px solid #ededed;
		}


	}
	
	.details {
		margin-top: 16px;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;

	}

	.details-title {
		margin-bottom: 16px;

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

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

	.details-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;

		p {
			color: #37393c;
			font-weight: bold;
		}
	}
	.details-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
	
		p {
			// color: #37393c;
			// font-weight: bold;
		}
	}

	.popup-screen {
		padding: 20px;
		position: relative;

		.screen {
			padding-bottom: 30px;
		}

		.screen-item {
			margin-bottom: 20px;

			.screen-head {
				margin-bottom: 8px;
				font-size: 16px;
			}

			.screen-main {
				display: flex;
				//    display: -webkit-box;
				flex-wrap: wrap;

			}

			.screen-entry {
				width: 29%;
				padding: 6px 0;
				display: flex;
				align-items: center;
				justify-content: center;


				background-color: #F2F5FA;
				text-align: center;
				margin-bottom: 10px;
				border-radius: 3px;

				margin-right: 6px;

			}

			.screen-entry.active {
				background-color: #185AC6;
				color: #fff;
			}
		}

		.screen-foot {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			height: 50px;
			border-top: 1px solid #ededed;

			.screen-btn-l {
				background-color: #fff;
				flex: 0.2;
				text-align: center;
				line-height: 50px;
			}

			.screen-btn-r {
				flex: 0.8;
				text-align: center;
				line-height: 50px;
				background-color: #185AC6;
				color: #fff;
			}
		}
	}

	.navbar-tit {
		color: #fff;
		font-size: 24px;
		padding-left: 15px;
		padding-top: 10px;
	}

	.statisticsData {
		background-color: #fff;
		margin: 12px;

		padding: 12px;
		border-radius: 8px;

		margin-top: 60px;
	}

	.statisticsDataMain {

		display: flex;

	}

	.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: 10px 16px 16px 16px;
			border-radius: 8px;
		}
	}
</style>