jp-charge/pagesFinance/statistics/list.vue

<template>
	<view>
		<ujp-navbar title="站点流水统计"></ujp-navbar>

		<view class="statisticsChart">

<u-picker mode="selector" v-model="popupShow3" @confirm="changedate3" :range="valueList" range-key="name"
			:default-selector="[selectValue]"></u-picker>
			
			<u-calendar v-model="popupShow4" mode="range" @change="changedate4"></u-calendar>
			
			<view class="details detailstable">
				 
				<view class="detailsline detailsline " style="padding: 12rpx 0;"  >
				
				
					<view class="details-row-where " style="  font-size: 28rpx;  padding-left: 0px !important;" >
						<p @click="popupShow3 = true" style="font-size: 28rpx">{{selectName}}
							
							<u-icon name="arrow-drop-down-fill" custom-prefix="custom-icon" v-show="!popupShow3"  size="36"></u-icon>
							<u-icon name="arrow-drop-up-fill" custom-prefix="custom-icon" v-show="popupShow3" color="#b0b8c8" size="36"></u-icon>
							
						</p>
						
					</view>
					<view class="details-row-where"  style="font-size: 28rpx" @click="popupShow4 = true" >
						{{showTime(startTime)}}-{{showTime(endTime)}}
						<u-icon name="arrow-drop-down-fill" custom-prefix="custom-icon" v-show="!popupShow4"  size="36"></u-icon>
						<u-icon name="arrow-drop-up-fill" custom-prefix="custom-icon" v-show="popupShow4"  size="36"></u-icon>
						
						
					</view>
				</view>
				<view class="detailsline detailsline0 " v-if="stationFlowList.length>1">


					<view class="details-row " style="    padding-left: 0px !important;" >

						<view class="span1">总收入</view>
						<view class="span2">{{(allMoneySum).toFixed(2)}}<span>元</span></view>
					</view>
					<view class="details-row">
						<view class="span1">总利润<span>(服务费+折扣卡)</span></view>
						<view class="span2">{{(serviceMoneySum).toFixed(2)}}<span>元</span></view>
					</view>
				</view>
			</view>
			<view class="details detailstable"  
					
				>

				<u-collapse :headStyle="{
								color:'#101010',
								 fontWeight: 'bold',
								 fontSize:'32rpx',
								 padding:'36rpx 0 36rpx 32rpx', 
							}">
					<template   v-for="(item, index) in stationFlowList"  >
								
						
					<view  style="    background-color: #f3f4f7;color: #f3f4f7;    line-height: 8px;"
					
					  v-show="!getItem(item)"
					 :key="'a_'+index" >-</view>
					<u-collapse-item
					 :key="'b_'+index"
					  v-show="!getItem(item)"
					 >
						<view slot="title" class="u-collapse-title u-line-1" style="width: 100%;">
						
							{{item.stationName}} <span style="float:right;"><span
									style="font-size: 24rpx;margin-right: 8rpx;font-weight: normal;">总收入</span>{{item.actualMoney.toFixed(2)}}元</span>
						</view>

						<!-- -->
						<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 class="detailsline" v-if="item.fastNum&&item.slowNum">
							<view class="details-row details-row-1">


								<view class="span1">折扣卡收益</view>
								<view class="span2">{{(item.cardMoney).toFixed(2)}}<span>元</span></view>

							</view>
							<view class="details-row">


							</view>
						</view>
<!-- 

						<view v-if="item.fastNum&&item.slowNum"
							:style="item.slowDayNum==nowTime?'color: #ffffff;':'border-bottom: 1px solid #ededed;'">
							查询范围内实际订单天数{{item.slowDayNum}}</view> -->

					</u-collapse-item>
					</template>
				</u-collapse>




			</view>

		</view>
	</view>
</template>

<script>
 	import * as API from '@/apis/finance.js'
  
	import {
		daysDistance,
		beforeTimeStamp,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	export default {
		data() {
			return {
				form: {},
				selectName:"全部充电站",
				selectValue: 0,
				valueList: [{
						name: '全部充电站',
						value:'0'
					},
					{
						name: '汽车充电站',
						value:'1'
					},
					{
						name: '单车充电站',
						value:'2'
					}
				],
				
				popupShow3:false,
				popupShow4: false,
				nowTime: 0,
				 
				stationFlowList: [],
				// serviceMoneySum: 0,
				// allMoneySum: 0,
				endTime: '',
				startTime: '',
			

			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		components: {
			
		},
		onReady() {
		
			this.nowTime = 7


			this.startTime = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
			this.endTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}')
			this.getData()
			 
		},
		computed: {

			serviceMoneySum(){
				var serviceMoneySum = 0;
				//this.allMoneySum = 0;
				for (var i in this.stationFlowList) {
					var item = this.stationFlowList[i];
					if(this.getItem(item)){
						continue
					}
					//this.allMoneySum += item.actualMoney
					 serviceMoneySum += item.serviceMoney
					 serviceMoneySum += item.cardMoney
				}
				return serviceMoneySum
			},
			allMoneySum(){
				var allMoneySum = 0;
				//this.allMoneySum = 0;
				for (var i in this.stationFlowList) {
					var item = this.stationFlowList[i];
					if(this.getItem(item)){
						continue
					}
					allMoneySum += item.actualMoney
					 
				}
				return allMoneySum
				 
			}

		},
		methods: {
			getItem(item){
				if(this.selectValue==0){
					
				}else if(this.selectValue==1){
					if(item.fastNum==0&&item.slowNum==0){
						return true;
					}
				}else if(this.selectValue==2){
					if(item.fastNum||item.slowNum){
							return true;
					}
				}
				return false
			},
			showTime(name) {
				if (!name) {
					return ''
				}
				return name.replace('-', '.').replace('-', '.') ;
			},
			changedate3(e) {
			
				var index = e[0];
				this.selectValue=index
				this.selectName=this.valueList[index].name
				
			},
		 
			
			  
			getData() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				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;
					
					uni.hideLoading()

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

						title: error
					})
				})
			},
			 
			changedate4(e) {
				this.startTime = e.startDate
				this.endTime = e.endDate
				this.getData()

			},
		 
		 
			
		}
	}
</script>
<style>
	page {
		background: #f3f4f7;
		background-size: 100%;
	}
</style>

<style lang="scss" scoped>
	
	.headbotton1:after {
		border-radius: 15px 0 0 15px;
	}

	.headbotton2:after {
		border-radius: 0 15px 15px 0;
	}

	.detailstable {
		//padding: 40rpx 30rpx !important;
	}

	.detailstableHead {
		.span1 {
			font-size: 32rpx !important;
		}

		.details-row-head-1 {}

		.details-row-head-2 {}

		.details-row-head-3 {
			width: 30% !important;
			max-width: 150rpx;

			.span {}
		}

		.span2 {
			font-size: 44rpx !important;
			font-weight: bold;
			width: 100%;
			color: #101010;

			span {
				font-size: 24rpx !important;
			}
		}
	}

	.detailslineHead {
		border-top: 1px solid #ededed;
		;

		.details-row {
			padding-left: 8rpx !important;
		}

		font-size: 30rpx !important;

		.span1 span {
			font-size: 28rpx;
		}
	}

	.detailstable,
	.detailstableHead {
		font-size: 16px;

		p {
			font-size: 14px;
		}

		.details-row-main {
			border-bottom: 1px solid #ededed;
			padding: 10px 0;

		}

		.detailsline0 {
			border-bottom: 0px !important;
			background : linear-gradient(90deg, rgba(27,126,242,1) 0%,rgba(0,90,217,1) 100%);
			color: #FFFFFF;
			padding: 0 16px;
			.span1,.span2,.span{
				color: #FFFFFF !important;
			}
		}

		.detailsline {
			border-top: 1px solid #ededed;
			padding: 0px 16px;
		}

		.detailsline,
		.detailsline—bottom {

			display: flex;
			.details-row-where{
				width: 50%;
				text-align: center;
			}
			.details-row {
				width: 50%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				padding-left: 16rpx;
				margin-bottom: 20rpx;

				.span1 {
					color: rgba(136, 136, 136, 100);
					font-size: 28rpx;
					width: 100%;
				}

				.span2 {
					font-size: 36rpx;
					width: 100%;
					color: #101010;

					span {
						font-size: 24rpx;
					}
				}
			}
		}

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


	}

	.details {

		//padding-top: 16rpx;
		
		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: 10px;

		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: 0px 24rpx 24rpx;

		//padding:0px 24rpx 24rpx;
		border-radius: 8px;


	}

	.statisticsDataMain {
		flex-wrap: wrap;
		display: flex;

	}

	.statisticsData-item {
		flex: 1;
		width: 40%;

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

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

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

		.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>