车位占用情况

apis/pagejs/index.js

@@ -54,3 +54,44 @@ export function floorlockList(data) {
 		url: url
 	})
 }
+
+export function occupancyByTime(data) {
+	var url='/mobile/sysUser/occupancyByTime';
+	
+	return requestWhite({
+		method: 'POST',
+		data: data,
+		url: url
+	})
+}
+
+export function occupancyByDay(data) {
+	var url='/mobile/sysUser/occupancyByDay';
+	
+	return requestWhite({
+		method: 'POST',
+		data: data,
+		url: url
+	})
+}
+
+
+export function occupancyByTimeBar(data) {
+	var url='/mobile/sysUser/occupancyByTimeBar';
+	
+	return requestWhite({
+		method: 'POST',
+		data: data,
+		url: url
+	})
+}
+
+export function durationDistribution(data) {
+	var url='/mobile/sysUser/durationDistribution';
+	
+	return requestWhite({
+		method: 'POST',
+		data: data,
+		url: url
+	})
+}

components/Tabbar.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-tabbar v-model="myCurrent" :list="tabbarList" :before-switch="beforeSwitch" inactive-color="#ADB8C2" active-color="#5098FF">
+		<u-tabbar v-model="myCurrent" :list="tabbarList"  inactive-color="#ADB8C2" active-color="#5098FF">
 		</u-tabbar>
 
 	</view>

config/.env.dev.js

@@ -4,6 +4,7 @@ const UNI_APP = {
 
 	
 	BASE_URL: 'https://youdian-test.hbjp.com.cn/floorlock-server/',
+	BASE_URL:"https://zbyj.hbjp.com.cn/floorlock-server/",
 	//BASE_URL: 'https://dgj.jzrccs.com/electric-manager-api/',
 	
 	//BASE_URL:'http://192.168.77.162:8081/electric-manager-api/', //sz

pages/index/index.vue

@@ -1,14 +1,22 @@
 <template>
 	<view>
 		<u-navbar v-show="false" title="首页" title-color="#101010"></u-navbar>
-
+		
+		<u-picker v-model="body2data.vue.show" 
+		:params="body2data.vue.params" @confirm="body2dataconfirm"
+		mode="time"></u-picker>
+		
+		<u-picker v-model="body5data.vue.show"
+		:params="body5data.vue.params" @confirm="body5dataconfirm"
+		mode="time"></u-picker>
+		
 		<view class="navbar">
 			智泊e家 运管端
 
 		</view>
 		<view class="tabs-box">
 
-			<u-picker-jp v-model="showselect1" range-key="name" :num='3' @confirm="showselect1confirm"
+			<u-picker-jp v-model="showselect1" range-key="name" :num="3" @confirm="showselect1confirm"
 				:range="companyList"></u-picker-jp>
 
 			<template v-if="companyListTabs.length>2">
@@ -56,13 +64,13 @@
 								</view>
 								<view class="td td2">
 									<view class="td td3">
-										<view class="td td4">空闲<span class="body1pie-num color53B56B">5</span>台</view>
-										<view class="td td4">占用<span class="body1pie-num colorAAAAAA">5</span>台</view>
+										<view class="td td4">空闲<span class="body1pie-num color53B56B">{{body1data.data.idleNum}}</span>台</view>
+										<view class="td td4">占用<span class="body1pie-num colorAAAAAA">{{body1data.data.useNum}}</span>台</view>
 									</view>
-									<view class="td td3">
+									<view class="td td3" v-if="false">
 
-										<view class="td td4">公共车位<span class="body1pie-num colorEF8132">5</span>台</view>
-										<view class="td td4">私家车位<span class="body1pie-num colorDC4441">5</span>台</view>
+										<view class="td td4">公共车位<span class="body1pie-num colorEF8132">{{body1data.data.useNum}}</span>台</view>
+										<view class="td td4">私家车位<span class="body1pie-num colorDC4441">{{body1data.data.useNum}}</span>台</view>
 									</view>
 								</view>
 
@@ -77,18 +85,18 @@
 								<view class="td td2">
 									<view class="td td3">
 
-										<view class="td td4">正常<span class="body1pie-num color53B56B">5</span>台</view>
-										<view class="td td4">离线<span class="body1pie-num colorAAAAAA">5</span>台</view>
+										<view class="td td4">正常<span class="body1pie-num color53B56B">{{body1data.data.normalNum}}</span>台</view>
+										<view class="td td4">离线<span class="body1pie-num colorAAAAAA">{{body1data.data.loseNum}}</span>台</view>
 									</view>
 									<view class="td td3">
 
-										<view class="td td4">故障<span class="body1pie-num colorEF8132">5</span>台</view>
-										<view class="td td4">低电量<span class="body1pie-num colorDC4441">5</span>台</view>
+										<view class="td td4">故障<span class="body1pie-num colorEF8132">{{body1data.data.errorNum}}</span>台</view>
+										<view class="td td4" v-if="0">低电量<span class="body1pie-num colorDC4441">5</span>台</view>
 									</view>
 								</view>
 							</view>
 
-							<view class="tr">
+							<view class="tr" v-if="0">
 								<view class="td td1">
 									<view id="body1pie3" class="body1pie">
 
@@ -124,7 +132,7 @@
 					<view class="text">
 						<view>时空矩阵图</view>
 
-						<view class="tag">2025年1月1日<u-icon name="arrow-down"></u-icon></view>
+						<view class="tag"  @click="body5data.vue.show=true"  >{{body5data.vue.queryN}}<u-icon name="arrow-down"></u-icon></view>
 
 					</view>
 
@@ -203,7 +211,7 @@
 					</view>
 					<view class="text">
 						<view>车位平均占用率(%)</view>
-						<view class="tag">2025年1月<u-icon name="arrow-down"></u-icon></view>
+						<view class="tag" @click="body2data.vue.show=true"  >{{body2data.vue.queryN}}<u-icon name="arrow-down"></u-icon></view>
 
 					</view>
 
@@ -350,6 +358,13 @@
 	import * as echarts from 'echarts';
 
 	import * as API from '@/apis/pagejs/index.js'
+	
+	import {
+		parseUnixTime,
+		beforeTimeStamp,
+		newDate
+	} from '@/apis/utils'
+
 
 	export default {
 		components: {
@@ -359,9 +374,9 @@
 		data() {
 			return {
 				current1: 0,
-				showselect1: 0,
+				showselect1: false,
 				current2: 0,
-				showselect2: 0,
+				showselect2: false,
 				isReady: false,
 				companyList: [],
 				parkingList: [],
@@ -382,7 +397,48 @@
 						title: "11",
 						createTime: "123:123"
 					}
-				],
+				],
+				body2data:{
+					query:{},
+					vue:{
+						queryN:"",
+						show:false,
+						params:{
+							year: true,
+												month: true,
+												day: false,
+												hour: false,
+												minute: false,
+												second: false
+						}
+					},
+					data:{}
+				},
+				body1data:{
+					query:{},
+					data:{}
+				},
+				body3data:{
+					query:{},
+					data:{}
+				},
+				
+				body5data:{
+					query:{},
+					data:{},
+					vue:{
+						queryN:"",
+						show:false,
+						params:{
+							year: true,
+							month: true,
+							day: true,
+												hour: false,
+												minute: false,
+												second: false
+						}
+					},
+				},
 				jpContentMap: {
 					body1: 0,
 					body2: 0,
@@ -461,9 +517,13 @@
 					companyId: this.companyId,
 					parkingId:this.parkingId
 				}).then((response) => {
-				
+					this.body1data.data=response.data
 					uni.hideLoading();
 					this.jpContentMap.body1=2
+					
+					this.getbody1pie1()
+					this.getbody1pie2()
+					this.getbody1pie3()
 				}).catch(error => {
 					uni.showToast({
 						title: error,
@@ -501,7 +561,8 @@
 			getApi1(){
 				
 				if(this.companyId==""){
-					this.getfloorStatus()
+					
+					this.getApi2()
 				}else{
 					this.parkingInfoList()
 				}
@@ -510,6 +571,9 @@
 			getApi2(){
 				this.getfloorStatus()
 				this.getfloorlockList()
+				this.occupancyByTime(1);
+				this.occupancyByTimeBar(1);
+				this.occupancyByDay(1);
 				
 				if(this.parkingId==""){
 					
@@ -619,7 +683,7 @@
 					this.parkingList = [
 						...parkingInfoList,
 					];
-				
+					
 					if(this.parkingList.length==1){
 						
 						this.change2parkingList(0)
@@ -654,7 +718,8 @@
 					this.companyList = [
 						...companyInfoList,
 						
-					];
+					];
+					
 					if (this.companyList.length == 1) {
 						this.change1companyList(0)
 					} else {
@@ -672,16 +737,155 @@
 				})
 			},
 			init() {
-				this.companyInfoList()
-				this.getbody2()
-				this.getbody3()
+				this.companyInfoList()
+			
+				//this.occupancyByTime();
+				
+				//this.getbody3()
 				this.getbody4()
 
-				this.getbody5()
+				//this.getbody5()
 
-				this.getbody1pie1()
-				this.getbody1pie2()
-				this.getbody1pie3()
+				
+			},
+			body2dataconfirm(e){
+				 
+				var date = new Date(e.year+"-"+e.month+"-1");
+				this.body2data.vue.queryN=date.getFullYear()+"年"+(date.getMonth() + 1 )+'月';
+				this.body2data.query.startTime=date.getFullYear()+"-"+(date.getMonth() + 1 )+"-1"
+				
+				var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+				this.body2data.query.endTime=parseUnixTime(endOfMonth, '{y}-{m}-{d}')
+				
+				this.occupancyByTime()
+			},
+			body5dataconfirm(e){
+				 console.log(e)
+				var date = new Date(e.year+"-"+e.month+"-1");
+				this.body5data.query.queryDate=parseUnixTime(date, '{y}-{m}-{d}')
+				this.body5data.vue.queryN=parseUnixTime(date, '{y}年{m}月{d}日');
+				
+				this.occupancyByDay()
+			},
+			occupancyByTimeBar(init){
+				if(init){
+					var date = new Date();
+					
+ 					this.body3data.query.startTime=date.getFullYear()+"-"+(date.getMonth() + 1 )+"-1"
+					
+					var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+					this.body3data.query.endTime=parseUnixTime(endOfMonth, '{y}-{m}-{d}')
+					
+				}
+				this.jpContentMap.body3=0
+				this.body3data.query.companyId=this.companyId
+				this.body3data.query.parkingId=this.parkingId
+				API.occupancyByTimeBar(
+					this.body3data.query
+				).then((response) => {
+					this.body3data.data=[
+						...response.data.locksTimeList,
+				//	...response.data.locksTimeList,
+					];
+					
+					if(this.body3data.data.length==0){
+						this.jpContentMap.body3=1
+						
+					}else{
+						this.jpContentMap.body3=2
+						this.getbody3()
+						
+					}
+					
+				
+				
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				
+				})
+			},
+			occupancyByDay(init){
+				if(init){
+					var date = new Date();
+					
+					this.body5data.query.queryDate=parseUnixTime(date, '{y}-{m}-{d}')
+					this.body5data.vue.queryN=parseUnixTime(date, '{y}年{m}月{d}日');
+					
+				}
+				this.jpContentMap.body5=0
+				this.body5data.query.companyId=this.companyId
+				this.body5data.query.parkingId=this.parkingId
+				API.occupancyByDay(
+					this.body5data.query
+				).then((response) => {
+					this.body5data.data=[
+						...response.data.locksTimeList,
+				//	...response.data.locksTimeList,
+					];
+					
+					if(this.body5data.data.length==0){
+						this.jpContentMap.body5=1
+						
+					}else{
+						this.jpContentMap.body5=2
+						//this.getbody3()
+						this.getbody5()
+					}
+					
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				
+				})
+			},
+			occupancyByTime(init){
+				if(init){
+					var date = new Date();
+					
+					this.body2data.vue.queryN=date.getFullYear()+"年"+(date.getMonth() + 1 )+'月';
+					this.body2data.query.startTime=date.getFullYear()+"-"+(date.getMonth() + 1 )+"-1"
+					
+					var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+					this.body2data.query.endTime=parseUnixTime(endOfMonth, '{y}-{m}-{d}')
+					 
+				}
+				this.jpContentMap.body2=0
+				this.body2data.query.companyId=this.companyId
+				this.body2data.query.parkingId=this.parkingId
+				API.occupancyByTime(
+					this.body2data.query
+				).then((response) => {
+					this.body2data.data=[
+						...response.data.locksTimeList,
+				//	...response.data.locksTimeList,
+					];
+					
+					if(this.body2data.data.length==0){
+						this.jpContentMap.body2=1
+						
+						
+					}else{
+						this.jpContentMap.body2=2
+						
+						this.getbody2()
+						
+						
+					}
+					
+				
+				
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				
+				})
 			},
 			getbody5() {
 				var key = "body5echart"
@@ -907,10 +1111,31 @@
 						height: uni.upx2px(170 * 2)
 					})
 
-				}
+				}
+				var dataApi=this.body3data.data;
+				
 				myChart.clear()
 
-				var data1 = ['0-7点', '7-14点', '14-24点']
+				var data1 = []
+				var data2 = []//useDays
+				var i =0
+				dataApi[0].timeUseList.forEach(item=>{
+					
+					Object.keys(item).forEach(key1 => {
+						
+						data1.push(key1)
+						var num=0
+						
+						dataApi.forEach(item2=>{
+							num+=item2.timeUseList[i][key1].useDays
+							
+						})
+						data2.push(num)
+					});
+					i+=1
+					
+				})
+				
 				var axisLabel = {
 					rotate: 40,
 					interval: 0,
@@ -954,27 +1179,75 @@
 						itemStyle: {
 							color: "#5A88E5"
 						},
-						data: [120, 200, 150],
+						data: data2,
 						type: 'bar'
 					}]
-				};
+				};
+				
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},
 			getbody2() {
 				var key = "body2line1"
-				var myChart = this.echartsList[key];
+				var myChart = this.echartsList[key];
+				var dataApi=this.body2data.data;
+				
+				var head=20* (parseInt(dataApi.length/4))+20
+				
+				
 				if (!myChart) {
 					myChart = echarts.init(document.getElementById(key), null, {
 						width: uni.upx2px(300 * 2),
-						height: uni.upx2px(170 * 2)
+						height: uni.upx2px((170+head) * 2)
 					})
 
 				}
-				myChart.clear()
-				var data1 = ['0-2点', '2-4点', '4-6点', '6-8点', '8-10点', '10-12点', '12-14点', '14-16点', '16-18点', '18-20点',
-					'20-22点', '22-24点'
-				]
+				myChart.clear()
+				
+				var data1=[]
+				var series=[];
+				
+				dataApi.forEach(item=>{
+					
+						var obj={
+							name:item.lockName,
+						//areaStyle: {},
+						// itemStyle: {
+						// 	color: "#BBD4FB"
+						// },
+						label: {
+							show: true,
+							position: 'top',
+						//	color: "#307AF6"
+						},
+						data: [],
+						type: 'line'
+					}
+					if(dataApi.length==1){
+						obj.label.color="#307AF6"
+						obj.areaStyle={}
+						obj.itemStyle={
+							color: "#BBD4FB"
+						}
+					}
+					
+					item.timeUseList.forEach(item2=>{
+						Object.keys(item2).forEach(key1 => {
+							
+							obj.data.push(item2[key1].useRate)
+						});
+					})
+					series.push(obj)
+				})
+				dataApi[0].timeUseList.forEach(item=>{
+					
+					Object.keys(item).forEach(key1 => {
+						data1.push(key1)
+					  
+					});
+					
+				})
+				
 				var axisLabel = {
 					rotate: 40,
 					interval: 0,
@@ -992,7 +1265,8 @@
 				} else {
 					axisLabel.interval = 0;
 				}
-				var option = {
+				var option = {
+					 legend:{},
 					xAxis: {
 						type: 'category',
 						data: data1,
@@ -1008,26 +1282,16 @@
 						type: 'value'
 					},
 					grid: {
-						top: 20,
+						top: (20+head),
 						left: 0,
 						right: 0,
 						bottom: 0,
 						containLabel: true
 					},
-					series: [{
-						areaStyle: {},
-						itemStyle: {
-							color: "#BBD4FB"
-						},
-						label: {
-							show: true,
-							position: 'top',
-							color: "#307AF6"
-						},
-						data: [50, 30, 24, 18, 35, 47, 50, 30, 24, 28, 35, 47],
-						type: 'line'
-					}]
-				};
+					series:series
+				};
+				
+				
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},
@@ -1054,13 +1318,13 @@
 						},
 
 						data: [{
-								value: 1048,
+								value: this.body1data.data.useNum,
 								itemStyle: {
 									color: '#AAAAAA'
 								}
 							},
 							{
-								value: 735,
+								value: this.body1data.data.idleNum,
 								itemStyle: {
 									color: '#53B56B'
 								}
@@ -1113,29 +1377,29 @@
 						},
 
 						data: [{
-								value: 1048,
+								value: this.body1data.data.loseNum,
 								itemStyle: {
 									color: '#AAAAAA'
 								}
 							},
 							{
-								value: 735,
+								value: this.body1data.data.normalNum,
 								itemStyle: {
 									color: '#53B56B'
 								}
 							},
 							{
-								value: 1048,
+								value: this.body1data.data.errorNum,
 								itemStyle: {
 									color: '#EF8132'
 								}
-							},
-							{
-								value: 735,
-								itemStyle: {
-									color: '#DC4441'
-								}
 							}
+							//, {
+							// 	value: 735,
+							// 	itemStyle: {
+							// 		color: '#DC4441'
+							// 	}
+							// }
 						]
 					}],
 					grid: {
@@ -1156,7 +1420,8 @@
 							height: uni.upx2px(40)
 						}
 					}]
-				}
+				}
+				console.log(option)
 				myChart.setOption(option);
 				this.echartsList[key] = myChart;
 			},

pages/myTab/customerService.vue

@@ -43,8 +43,9 @@
 		data() {
 			return {
 				content: "400-8899-619",
-				queryList: [],
+				
 				openModalBl: false,
+				queryList: [],
 				list: [{
 					name: '软件使用'
 				}, {

pages/userTab/index.vue

@@ -4,7 +4,8 @@
 		<view class="main">
 			<view class="search">
 				<view class="searchBox">
-					<u-search shape="square" placeholder="搜索姓名/车牌/手机号" :animation="true"></u-search>
+					<u-search shape="square" 
+					 placeholder="搜索姓名/车牌/手机号" :animation="true"></u-search>
 					<u-button type="primary" size="mini">搜素</u-button>
 				</view>
 			</view>