zhengkaixin 2 سال پیش
والد
کامیت
3e3c3b1245
3فایلهای تغییر یافته به همراه694 افزوده شده و 2 حذف شده
  1. 8 0
      pages.json
  2. 11 2
      pagesFinance/statistics/index.vue
  3. 675 0
      pagesFinance/statistics/list.vue

+ 8 - 0
pages.json

@@ -53,6 +53,14 @@
 
 				//"navigationStyle": "custom" // 隐藏系统导航栏
 			}
+		},
+		{
+			"name": "站点流水统计",
+			"path": "pagesFinance/statistics/list",
+			"style": {
+		
+				//"navigationStyle": "custom" // 隐藏系统导航栏
+			}
 		},
 		{
 			"name": "个人中心",

+ 11 - 2
pagesFinance/statistics/index.vue

@@ -137,6 +137,15 @@
 						<view class="span1">总利润<span>(服务费+月卡)</span></view>
 						<view class="span2">{{(serviceMoneySum).toFixed(2)}}<span>元</span></view>
 					</view>
+				</view>
+				<view v-if="stationFlowList.length==0"
+				style="color: rgba(153, 153, 153, 1);font-size: 28rpx;text-align: center;margin-top: 16rpx;">
+					站点列表为空
+				</view>
+				<view v-if="stationFlowList.length&&stationFlowList.length>3" 
+				 @click="gotoUrl('pagesFinance/statistics/list')"
+				style="color: rgba(153, 153, 153, 1);font-size: 28rpx;text-align: center;margin-top: 16rpx;">
+					查看站点流水统计 <u-icon name="arrow-right-s-line" custom-prefix="custom-icon"  color="#b0b8c8" size="28"></u-icon>
 				</view>
 				<u-collapse :headStyle="{
 								color:'#101010',
@@ -144,7 +153,7 @@
 								 padding:'24rpx 0',
 								 borderBottom: '1px solid #ededed'
 								 
-							}" v-if="stationFlowList.length">
+							}" v-if="stationFlowList.length&&stationFlowList.length<=3">
 					<u-collapse-item @change="changeitem" v-for="(item, index) in stationFlowList" :index="index"
 						:key="index">
 						<view slot="title" class="u-collapse-title u-line-1" style="width: 100%;">
@@ -1218,7 +1227,7 @@
 	}
 
 	.detailstable {
-		padding: 40rpx 30rpx !important;
+		padding: 30rpx 30rpx !important;
 	}
 
 	.detailstableHead {

+ 675 - 0
pagesFinance/statistics/list.vue

@@ -0,0 +1,675 @@
+<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>