parking-manage-mobile/pages/index/index.vue

<template>
	<view class="content">
		<u-navbar title="" :is-back="false" :background="{backgroundColor: '#1f58ff'}" class="top-navbar">
			<text style="position: absolute;z-index: 1;left:40rpx;">收费统计</text>	
			<u-dropdown>
				<u-dropdown-item v-model="selparking"  :title="parkingMenuTitle" :options="parkingMenuItems" @change="changeFilterMenu"></u-dropdown-item>
			</u-dropdown>
		</u-navbar>
		<view class="rpt-top">
			<u-circle-progress :percent="seatpie.percent"  active-color="#22fd8d" bg-color="rgba(0,0,0,0)" inactive-color="#65a8ff" width="280">
				<view class="u-progress-content">
					<text class="subtitle">空闲/总车位</text>
					<text class='title'>{{seatpie.idle}}/{{seatpie.total}}</text>
				</view>	
			</u-circle-progress>
			<view class="income-rpt">
				<view class="income-item">
					<view>总收入(元)</view>
					<text>{{incomerpt.total}}</text>
				</view>
				<view class="income-item">
					<view>本月收入(元)</view>
					<text>{{incomerpt.month}}</text>
				</view>
				<view class="income-item">
					<view>今日收入(元)</view>
					<text>{{incomerpt.today}}</text>
				</view>
			</view>
		</view>
		
		<view class="rpt-mid">
			<view class="rpt-mid-title">车流量趋势</view>
			<view style="height:30vh;"><qiun-data-charts type="line" :chartData="chartData" :opts="lineChartOpt"/></view>
		</view>
		
		<u-card  class="parking-card" full margin="0rpx 0rpx 20rpx" v-for="(item,index) in parksitList"  :key="item.park_id">
			<view class="card-head" slot="head">
				<view>{{item.parking_name}}</view>
				<u-icon :name="item.offline_count>0?'wifi-off':'wifi'"  :color="item.offline_count>0?'#909090':'#48bc28'" size="32"></u-icon>
			</view>
			<view class="card-body" slot="body">
				<view class="body-item">
					<view>今日实收</view>
					<text>{{item.today_pay_amount?item.today_pay_amount.toFixed(2):'0.00'}}</text>
				</view>
				<view class="body-item">
					<view>收款笔数</view>
					<text>{{item.today_pay_count?item.today_pay_count.toFixed(0):'0'}}</text>
				</view>
				<view class="body-item">
					<view>应收金额</view>
					<text>{{item.should_pay?item.should_pay.toFixed(2):'0.00'}}</text>
				</view>
			</view>
			<view class="card-foot" slot="foot">
				<text>异常放行：0</text>
				<text>免单车次：{{item.free_pay_count?item.free_pay_count.toFixed(0):'0'}}</text>
				<text>剩余车位：{{item.idle_seat>0?item.idle_seat:0}}</text>
			</view>
		</u-card>
		
		
		
	</view>
</template>

<script>
	import * as api from '@/apis/index.js'
	import app from '@/utils/app.js'
	
	export default {
		data() {
			return {
				allParkIds:'',
				selparking:'all',
				parkingMenuTitle:'停车场',
				parkingMenuItems:[
					
				],
				seatpie:{
					total:0,
					idle:0,
					percent:0
				},
				incomerpt:{
					total:0,
					month:0,
					today:0
				},
				parksitList:[
					
				],
				chartData:{},
				lineChartOpt:{
					legend:{
						position:'bottom'
					}
				}   
			}
		},
		onLoad() {
			this.loadParkSites();
			//this.getServerData();
		},
		methods: {
			changeFilterMenu(opt){
				//console.log(opt.label.length);
				//更换菜单后，将选中菜单名称显示在下拉标题中，字符过长进行截取
				if(opt.label.length>6){
					this.parkingMenuTitle=(opt.label).substr(0,6)+'...';
				}
				else{
					this.parkingMenuTitle=opt.label
				}
				
				this.updatePageData(opt.value!='all'?opt.value:this.allParkIds);
				
			},
			loadParkSites(){
				api.loadMyParkSites().then(resp => {
					if(!resp.success){
						uni.showToast({
							title: resp.msg||' 加载数据失败',
							icon: "none"
						})
						
						return;
					}
					this.parseForFilterMenu(resp.data);
					//this.parseAndUpdateData(resp.data.parkRunWrap);
					
					
				}).catch(error => {
					
				});
				
			},
			updatePageData(parkIds){
				api.loadParkTrends(parkIds).then(resp => {
					//console.log(resp)
					this.parseAndUpdateData(resp.data);
				}).catch(error => {
					
				});
			},
			parseForFilterMenu(dataObj){
				if(dataObj&&dataObj.parkBase){
					let parkIds=[];
					dataObj.parkBase.forEach(function(item){
						parkIds.push(item.park_id);
					});
					dataObj.parkBase.unshift({label:'全部停车场',value:'all'});  //因为引用关系 unshift 可能时vue内的改造过的方法
					this.parkingMenuItems=dataObj.parkBase;
					this.allParkIds=parkIds.join(",");
				}
				
				this.parseAndUpdateData(dataObj.parkRunWrap);
			},
			parseAndUpdateData(dataObj){  //dataObj:[parkRun]
				if(!dataObj||!dataObj.parkRun){
					return;
				}
				
				this.parksitList=dataObj.parkRun;
				
				//计算总车位信息,收入累计
				let seatrpt={total:0,idle:0,percent:0};
				let income={total:0,month:0,today:0};
				let tmp=0;
				
				for(let i=0,len=dataObj.parkRun.length;i<len;i++){
					seatrpt.total+=dataObj.parkRun[i].total_seat||0;
					tmp=dataObj.parkRun[i].idle_seat;
					seatrpt.idle+=tmp&&tmp>0?tmp:0;
					
					income.total+=dataObj.parkRun[i].total_pay_amount||0;
					income.month+=dataObj.parkRun[i].month_pay_amount||0;
					income.today+=dataObj.parkRun[i].today_pay_amount||0;
					
				}
				if(seatrpt.total>0){
					tmp=seatrpt.idle*100/seatrpt.total;
					seatrpt.percent=parseInt(tmp.toFixed(0));
				}
				this.seatpie=seatrpt;
				
				income.total=(income.total).toFixed(2);
				income.month=(income.month).toFixed(2);
				income.today=(income.today).toFixed(2);
				this.incomerpt=income;
				
				//折线图数据准备
				let lineChartData={};
				lineChartData.categories=dataObj.chartDatas.categories;
				lineChartData.series=[];
				lineChartData.series.push({name:'入场',data:dataObj.chartDatas.seriesIn});
				lineChartData.series.push({name:'出场',data:dataObj.chartDatas.seriesOut});
				
				this.chartData=lineChartData;
			}
			
		}
	}
</script>

<style scoped>
	page{
		/* height:100%; */
		background-color: #f4f4f4;
		/* padding-bottom: 50px; */
	}
	.top-navbar/deep/ .u-slot-content{
		justify-content: space-between;
		padding:0rpx;
		color:#ffffff;
	}
	
	.top-navbar/deep/ .u-dropdown__menu{
		justify-content: flex-end;
	}
	.top-navbar/deep/ .u-dropdown__menu .u-dropdown__menu__item{
		flex:none;
		margin-right: 40rpx;
		
	}
	.top-navbar/deep/ .u-dropdown__menu__item__text{
		color:#ffffff !important;
	} 
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	
	.rpt-top{
		background: linear-gradient(#1f58ff, #00aaff);
		height:35vh;
		width:100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.rpt-mid{
		background-color: #ffffff;
		/* height:45vh; */
		width:100vw;
		margin-bottom: 20rpx;
		/* position: absolute;
		z-index: 100; */
	}
	
	.rpt-mid .rpt-mid-title{
		font-size:28rpx;
		/* font-family: '宋体'; */
		margin:20rpx;
		padding-left:20rpx;
		border-left: 8rpx solid #1F58FF;
	}

	.parking-card{
		width:100%;
		box-sizing: border-box;
		margin:0rpx;
	}
	/deep/ .parking-card .u-card__head{
		padding: 20rpx !important;
	}
	
	.parking-card .card-head{
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-between;
		align-items: center;
		color:#000000;
		/* font-family: '黑体'; */
	}
	
	.parking-card .card-body{
		padding:0rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-around;
		align-items: center;
	}

	.parking-card .card-body .body-item{
		text-align: center;
	}
	
	.parking-card .card-body .body-item view{
		font-size: 24rpx;
		color:#6f867d;
		margin-bottom:10rpx;
	}
	
	.parking-card .card-body .body-item text{
		font-size: 36rpx;
		color:#007AFF;
		
	}
	
	.parking-card .card-foot{
		padding:0rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-around;
		align-items: center;
		font-size: 24rpx;
		color:#6f867d;
	}
	.u-progress-content{
		color:#ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.u-progress-content .title{
		font-size: 48rpx;
		font-weight: bold;
		margin:10rpx 0rpx;
	}
	.u-progress-content .subtitle{
		font-size: 28rpx;
		
	}
	.rpt-top .income-rpt{
		width:100%;
		height:100rpx;
		padding:30rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-around;
		align-items: center;
		color:#ffffff;
		
	}
	
	.rpt-top .income-rpt .income-item{
		text-align: center;
	}
	.rpt-top .income-rpt .income-item view{
		font-size: 26rpx;
		margin-bottom:5rpx;
	}
	.rpt-top .income-rpt .income-item text{
		font-size: 32rpx;
	}
	
</style>