主页接口调试，数据显示处理，底部tab图标设置

apis/index.js

@@ -0,0 +1,24 @@
+import request from '../utils/request.js';
+import app from '../utils/app.js'
+
+export function loadMyParkSites(){
+	let setting=app.getSetting();
+	return request({
+		method: 'post',
+		data:{
+			usId:setting.user_id
+		} ,
+		url: '/mobileApi/parkingSite/loadMy'
+	})
+}
+
+
+export function loadParkTrends(parkIds){
+	return request({
+		method: 'post',
+		data:{
+			parkingIds:parkIds
+		} ,
+		url: '/mobileApi/parkingSite/loadTrends'
+	})
+}

pages/index/index.vue

@@ -3,173 +3,110 @@
 		<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="parkingopts" @change="changeParking"></u-dropdown-item>
+				<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="60"  active-color="#22fd8d" bg-color="rgba(0,0,0,0)" inactive-color="#65a8ff" width="280">
+			<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'>100/500</text>
+					<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>720.00</text>
+					<text>{{incomerpt.total}}</text>
 				</view>
 				<view class="income-item">
 					<view>本月收入(元)</view>
-					<text>720.00</text>
+					<text>{{incomerpt.month}}</text>
 				</view>
 				<view class="income-item">
 					<view>今日收入(元)</view>
-					<text>120.00</text>
+					<text>{{incomerpt.today}}</text>
 				</view>
 			</view>
 		</view>
 		
 		<view class="rpt-mid">
-			<qiun-data-charts type="column" :chartData="chartData"/>
+			<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">
+		<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>玉桥公园停车场</view>
-				<u-icon name="wifi" color="#48bc28" size="32"></u-icon>
+				<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>720.00</text>
+					<text>{{item.today_pay_amount?item.today_pay_amount.toFixed(2):'0.00'}}</text>
 				</view>
 				<view class="body-item">
 					<view>收款笔数</view>
-					<text>12</text>
+					<text>{{item.today_pay_count?item.today_pay_count.toFixed(0):'0'}}</text>
 				</view>
 				<view class="body-item">
 					<view>应收金额</view>
-					<text>820.00</text>
+					<text>{{item.should_pay?item.should_pay.toFixed(2):'0.00'}}</text>
 				</view>
 			</view>
 			<view class="card-foot" slot="foot">
-				<text>异常放行：23</text>
-				<text>免单车次：23</text>
-				<text>剩余车位：23</text>
+				<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>
 		
-		<u-card  class="parking-card" full margin="0rpx 0rpx 20rpx">
-			<view class="card-head" slot="head">
-				<view>玉桥公园停车场</view>
-				<u-icon name="wifi" color="#48bc28" size="32"></u-icon>
-			</view>
-			<view class="card-body" slot="body">
-				<view class="body-item">
-					<view>今日实收</view>
-					<text>720.00</text>
-				</view>
-				<view class="body-item">
-					<view>收款笔数</view>
-					<text>12</text>
-				</view>
-				<view class="body-item">
-					<view>应收金额</view>
-					<text>820.00</text>
-				</view>
-			</view>
-			<view class="card-foot" slot="foot">
-				<text>异常放行：23</text>
-				<text>免单车次：23</text>
-				<text>剩余车位：23</text>
-			</view>
-		</u-card>
-		
-		<u-card  class="parking-card" full margin="0rpx 0rpx 20rpx">
-			<view class="card-head" slot="head">
-				<view>玉桥公园停车场</view>
-				<u-icon name="wifi" color="#48bc28" size="32"></u-icon>
-			</view>
-			<view class="card-body" slot="body">
-				<view class="body-item">
-					<view>今日实收</view>
-					<text>720.00</text>
-				</view>
-				<view class="body-item">
-					<view>收款笔数</view>
-					<text>12</text>
-				</view>
-				<view class="body-item">
-					<view>应收金额</view>
-					<text>820.00</text>
-				</view>
-			</view>
-			<view class="card-foot" slot="foot">
-				<text>异常放行：23</text>
-				<text>免单车次：23</text>
-				<text>剩余车位：23</text>
-			</view>
-		</u-card>
 		
-		<u-card  class="parking-card" full margin="0rpx 0rpx 20rpx">
-			<view class="card-head" slot="head">
-				<view>玉桥公园停车场</view>
-				<u-icon name="wifi" color="#48bc28" size="32"></u-icon>
-			</view>
-			<view class="card-body" slot="body">
-				<view class="body-item">
-					<view>今日实收</view>
-					<text>720.00</text>
-				</view>
-				<view class="body-item">
-					<view>收款笔数</view>
-					<text>12</text>
-				</view>
-				<view class="body-item">
-					<view>应收金额</view>
-					<text>820.00</text>
-				</view>
-			</view>
-			<view class="card-foot" slot="foot">
-				<text>异常放行：23</text>
-				<text>免单车次：23</text>
-				<text>剩余车位：23</text>
-			</view>
-		</u-card>
 		
 	</view>
 </template>
 
 <script>
+	import * as api from '@/apis/index.js'
+	import app from '@/utils/app.js'
+	
 	export default {
 		data() {
 			return {
-				selparking:1,
+				allParkIds:'',
+				selparking:'all',
 				parkingMenuTitle:'停车场',
-				parkingopts:[
-					{
-						label:'全部停车场',
-						value:0
-					},
-					{
-						label:'玉桥停车场',
-						value:1
-					},
-					{
-						label:'荆鹏停车场荆鹏停车场荆鹏停车场荆鹏停车场',
-						value:2
-					}
+				parkingMenuItems:[
+					
+				],
+				seatpie:{
+					total:0,
+					idle:0,
+					percent:0
+				},
+				incomerpt:{
+					total:0,
+					month:0,
+					today:0
+				},
+				parksitList:[
+					
 				],
-				chartData:{}
-				    
+				chartData:{},
+				lineChartOpt:{
+					legend:{
+						position:'bottom'
+					}
+				}   
 			}
 		},
 		onLoad() {
-			this.getServerData();
+			this.loadParkSites();
+			//this.getServerData();
 		},
 		methods: {
-			changeParking(opt){
-				console.log(opt.label.length);
+			changeFilterMenu(opt){
+				//console.log(opt.label.length);
+				//更换菜单后，将选中菜单名称显示在下拉标题中，字符过长进行截取
 				if(opt.label.length>6){
 					this.parkingMenuTitle=(opt.label).substr(0,6)+'...';
 				}
@@ -177,26 +114,90 @@
 					this.parkingMenuTitle=opt.label
 				}
 				
+				this.updatePageData(opt.value!='all'?opt.value:this.allParkIds);
+				
 			},
-			getServerData() {
-			      //模拟从服务器获取数据时的延时
-			      setTimeout(() => {
-			        let res = {
+			loadParkSites(){
+				api.loadMyParkSites().then(resp => {
+					if(!resp.success){
+						uni.showToast({
+							title: resp.msg||' 加载数据失败',
+							icon: "none"
+						})
 						
-			            categories: ["2016","2017","2018","2019","2020","2021"],
-			            series: [
-			              {
-			                name: "目标值",
-			                data: [35,36,31,33,13,34]
-			              },
-			              {
-			                name: "完成量",
-			                data: [18,27,21,24,6,28]
-			              }
-			            ]
-			          };
-			        this.chartData = JSON.parse(JSON.stringify(res));
-			      }, 500);
+						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;
 			}
 			
 		}
@@ -247,11 +248,19 @@
 	
 	.rpt-mid{
 		background-color: #ffffff;
-		height:30vh;
+		/* height:45vh; */
 		width:100vw;
 		margin-bottom: 20rpx;
-		position: absolute;
-		z-index: 100;
+		/* 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{

utils/index.js

@@ -1,15 +0,0 @@
-//验证手机号
-export const checkPhone = (value) => {
-	if (!value) {
-		return '手机号不能为空';
-	} else {
-		const reg = /^1[3-9]\d{9}$/
-		var result = reg.test(value);
-
-		if (result) {
-			return true;
-		} else {
-			return '请输入正确的手机号';
-		}
-	}
-};