停车场系统、智慧城市停车、智慧社区、物业管理、新能源充电、人脸门禁 uniapp 系统源码

1. 智慧停车

支持模式

  • 封闭性单个停车场
  • 路边停车(车位级管理)
  • 大小场(场中场),多场子并行或嵌套

所有者模式

  • 统一平台管理
  • 总平台下子账号(区域代理)自建场地资源,自行维护数据
  • 总平台下子账号(区域代理)再分配和单个停车场管理人员(物业管理/维保/保安/财务等人员)

场站管理

  • 车位控制

    精准的实时车位统计和数据及时推送到场地led/lcd屏幕,车位满后禁止车辆进入
    
  • 责任制

    每个场地标记所有者,负责人信息,有需要直连联系实际控制负责人
    
  • 完整证据链

    详细实时记录每一辆车进出时间/场地/进出口/值班人员/图片/视频/金额/优惠/车辆情况(车辆类型|套餐|颜色|品牌)/开闸情况
    

值班调度

  • 值守模式

    支持有人值守/无人值守/统一远程值守调度,数字数据全自动化录入,处理,资产数据产出并计算汇报展现
    
  • 重复过滤

    支持入场二次确认,避免路过和倒车车辆误拍产生歧义账单。短时间内重复多次抓拍只记录一条数据
    
  • 无处可逃

    出场跟车逃费标记,逃费入场提示追缴,补缴入场。支持单场追缴和全网追缴。黑名单通知,违法在逃车辆协同公安网络实时上报
    
  • 万无一失

    入场车牌识别错误可手动校正车牌,出场识别错误自动模糊相似车牌尝试匹配
    
  • 应急响应

    支持一键放行,处理紧急情况,手动免单。支持远程可视对讲。
    
  • 特殊群体

    支持自定义公务车自动免单放行,例如警车,军车,大使馆车,消防车等
    
  • 断电断网

    断电支持值守人员手机一键进出场拍照录入,入场录入人工放行入场,出场时值守人员向车主展示账单,车主扫码支付离场。
    断网支持硬件设备白名单快速自动放行。保障断网解决方案:增加车牌识别相机4G模块/或者使用双网络路由器(4G/有线智能切换)
    
  • 安保互动

    支持入场时值守人员留言,出场时备注留言提示
    
  • 一码识车

    新车无牌/车牌受污/车牌变形/非常规车牌无法识别/三轮代步车等,一键扫码自助入场,扫码缴费出场。公众号/小程序/APP数据一号互通
    

进出控制与显示

  • 私人定制

    支持自定义车辆类型,每个停车场都可以单独对每种车辆类型设定独立的进出收费规则,放行规则,文字播报,语音提示,图片,视频等
    例如黑名单禁止入场,且禁止录入数据,并提示。免费车,在有效期内,享受不一样的停车特权
    
  • 停车VIP

    每个停车场都可以独立发行内部和公开的车辆套餐产品,车主可以通过手机端新购和续费停车套餐,生效期进出无阻,套餐即将过期通知续费
    例如黑名单禁止入场,且禁止录入数据,并提示。免费车,在有效期内,享受不一样的停车特权
    
  • 特殊车辆

    例如日包车(白天停车免费),夜包车(晚上停车免费)。支持特殊车辆自助购买和续费,弥补车辆套餐不够灵活的缺陷
    

车位管理

  • 多位多车

    支持一位多车和多位多车自动切换享受套餐停车特权
    
  • 神圣私产

    支持车位级别管理,车位主人一键扫码升降地锁
    
  • 车位共享

    支持公共车位扫码降锁入位,计时,超时扫码缴费降锁离场
    
  • 快速停车

    手机端实时数据显示当前位置和目的地附近停车场车位情况(余位/价格/免停时长/禁停时段/车场图片/具体位置),可一键导航到空位车
    
  • 反向寻车

    面对复杂多层大型停车场(例如:大型商场地下停车场,机场,超大型立体停车楼等),忘记了自己停在几楼哪个车位,利用车位相机自动记录
    您车辆所在楼层和车位,使用室内导航实时引导您走到你的车辆跟前,导航精度0.5米左右
    

2. 智慧充电

新能源汽车充电

两轮/三轮电动车充电

3. 智慧社区

社区管理

物业管理

人脸门禁

上门维修

4. 电子支付

本平台聚合支付

第三方聚合支付

银行支付

无感支付

5. 用户资源

权限分配

资源分配

<template>
	<view>
		<view class="bgBox">
			<view class="flex">
				<image class="backIcon" src="../../static/images/jiantouLeft.png" mode="" @click="intoBack"></image>
				<view class="navTitle">车场详情</view>
			</view>
			<view class="infoBox flex-col bb">
				<view class="name">{{ changeInfo.stationName }}</view>
				<view class="address flex">
					<view class="single-line">{{ changeInfo.address }}</view>
				</view>
				<view class="spaces flex flex-row-between">
					<view class="flex">
						停车费:免费停车{{ (changeInfo.freeParkTime / 60000).toFixed(0) }}分钟
					</view>

					<view class="flex">
						<image src="../../static/images/man@2x.png" mode="" style="width: 32rpx; height: 32rpx" />
						<view style="margin-left: 8rpx">
							{{
                changeInfo.stationName == null ? '暂无数据' : changeInfo.usedSlowChargeNumber + '/' + changeInfo.slowChargeNumber
              }}
						</view>
						<image src="../../static/images/kuai@2x.png" mode=""
							style="width: 32rpx; height: 32rpx; margin-left: 14rpx" />
						<view style="margin-left: 8rpx">
							{{
                changeInfo.stationName == null ? '暂无数据' : changeInfo.usedFastChargeNumber + '/' + changeInfo.fastChargeNumber
              }}
						</view>
					</view>
				</view>
				<view class="price flex flex-col-center flex-row-between">
					<view class="flex distance">
						<image src="../../static/images/daohang@2x.png" mode="" style="width: 32rpx; height: 32rpx">
						</image>
						<view>距你{{(changeInfo.distance / 1000).toFixed(2)}}km</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="flex flex-row-between" style="margin-top: 32rpx;">
					<view class="flex-col flex-col-center" v-for="item in iconStatusArr" :key="item.icon">
						<image :src="'../../static/images/' + item.icon + '.png'" mode=""
							style="width: 48rpx;height: 48rpx;">
						</image>
						<view style="font-size: 22rpx;font-weight: 400;color: #323233;margin-top: 8rpx;">{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="imageBox">
			<scroll-view :scroll-x="true" style="width: 100%;height: 100%;display: flex; white-space:nowrap;">
				<image class="scrollViewImage" :src="item" v-for="item,index in changeInfo.newImageUrl" :key="item"
					@click="previewImage(index)"></image>
			</scroll-view>
		</view>
		<view class="feeBox bb">
			<view class="name">忙闲情况</view>
			<view class="flex flex-row-between" style="margin-top: 54rpx;">
				<view class="flex-col flex-col-center">
					<view class="changeStatusBox_text flex">
						<view style="line-height: 42rpx;">闲</view>
						<view style="font-size: 42rpx;color: #000;font-weight: 900;margin-left: 6rpx;">
							{{changeInfo.usedFastChargeNumber}}
						</view>
						<view style="line-height: 42rpx;margin-left: 6rpx;">/{{changeInfo.fastChargeNumber}}</view>
					</view>
					<view class="changeStatusBox_red">快桩空闲</view>
				</view>
				<view class="flex-col flex-col-center">
					<view class="changeStatusBox_text flex">
						<view style="line-height: 42rpx;">闲</view>
						<view style="font-size: 42rpx;color: #000;font-weight: 900;margin-left: 6rpx;">
							{{changeInfo.usedSlowChargeNumber}}
						</view>
						<view style="line-height: 42rpx;margin-left: 6rpx;">/{{changeInfo.slowChargeNumber}}</view>
					</view>
					<view class="changeStatusBox_blue">慢桩空闲</view>
				</view>
				<view class="flex-col flex-col-center">
					<view
						style="line-height: 22rpx;font-size: 42rpx;color: #000;font-weight: 900;text-align: center;height: 66rpx;">
						-
					</view>
					<view class="changeStatusBox_gray">即将充满</view>
				</view>
			</view>
		</view>
		<view class="feeBox bb">
			<view class="name">充电费用</view>
			<view class="feeBox_item1 bb flex flex-col-center">
				<view style="margin-left: 32rpx;">
					收费时段
				</view>
				<view style="margin-left: 156rpx;">充电费</view>
				<view style="margin-left: 26rpx;">=</view>
				<view style="margin-left: 34rpx;">电费</view>
				<view style="margin-left: 50rpx;">服务费</view>
			</view>

			<view class="feeBox_item2 bb flex flex-col-center" v-for="item in rulesList" :key="item.id">
				<view style="font-size: 24rpx;color: #434343;font-weight: 500;margin-left: 24rpx;">
					{{ item.startTimeString + ' - ' + item.endTimeTimeString }}
				</view>
				<view
					style="font-size: 24rpx;color: #434343;font-weight: 500;margin-left: 62rpx;width: 60rpx;text-align: center;">
					{{item.fee + item.serviceFee}}
				</view>
				<view
					style="font-size: 24rpx;color: #434343;font-weight: 500;margin-left: 72rpx;width: 60rpx;text-align: center;">
					{{item.fee}}
				</view>
				<view
					style="font-size: 24rpx;color: #434343;font-weight: 500;margin-left: 56rpx;width: 60rpx;text-align: center;">
					{{item.serviceFee}}
				</view>
			</view>
		</view>
		<view class="feeBox bb" v-if="changeInfo.stationType !== 1">
			<view class="name">停车费</view>
			<view class="flex" style="margin-top: 40rpx;">
				<view class="feeBoxItem1 bb">停车费</view>
				<view class="feeBoxItem2 bb">免费停车 {{changeInfo.freeParkTime / 60000}} 分钟</view>
			</view>
			<view class="feeBoxText">该站点充电即可免费停车 {{changeInfo.freeParkTime / 60000}}分钟(充电启动前,请确认输入车牌是否准确)</view>
		</view>
		<uni-safe-area>
			<view class="bottomBox bb flex flex-col-center flex-row-between">
				<view class="left flex flex-col-center flex-row-center" @click="onNavigation">
					<image src="../../static/images/feiji@2x.png" mode=""></image>
					<view class="text">导航</view>
				</view>

				<view class="right flex flex-col-center flex-row-center" @click="onScanChange">
					<image src="../../static/images/VIP@2x(3).png" mode=""></image>
					<view class="text">开始充电</view>
				</view>
			</view>
		</uni-safe-area>
	</view>
</template>

<script>
	import {
		cfChargingStationGetInfoById,
		getChargeRulesListByQuery
	} from '../../network/api.js'

	export default {
		data() {
			return {
				iconStatusArr: [{
					name: '充电桩',
					icon: 'cdz@2x',
					status: false
				}, {
					name: '便利店',
					icon: 'bianlidian@2x',
					status: false
				}, {
					name: '卫生间',
					icon: 'wsj@2x',
					status: false
				}, {
					name: '休息室',
					icon: 'xxs@2x',
					status: false
				}, {
					name: '雨棚',
					icon: 'yupeng@2x',
					status: false
				}, {
					name: '简餐',
					icon: 'jz@2x',
					status: false
				}, {
					name: '人工值守',
					icon: 'rgzs@2x',
					status: false
				}],
				chargeId: '',
				changeInfo: {
					name: '',
					address: '',
					freeTime: '',
					parkingSpaceNumber: '',
					usedParkingSpaceNumber: '',
					distance: 0,
					freeParkTime: 0,
					usedFastChargeNumber: 0,
					fastChargeNumber: 0,
					usedSlowChargeNumber: 0,
					slowChargeNumber: 0,
				},
				rulesList: [],
				locationInfo: {
					longitude: "",
					latitude: "",
				},
			}
		},
		onLoad(e) {
			this.chargeId = e.id
			this.getLocation()
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						console.log("当前位置的经度:" + res.longitude);
						console.log("当前位置的纬度:" + res.latitude);
						this.locationInfo.longitude = res.longitude;
						this.locationInfo.latitude = res.latitude;
						this.fenchData()
						this.fenchRulesData()
					},
				});
			},
			onScanChange() {
				uni.showActionSheet({
					itemList: ['扫码充电', '查看充电桩'],
					success: ({
						tapIndex
					}) => {
						if (tapIndex === 0) {
							uni.scanCode({
								success: (scanRes) => {
									console.log(scanRes);
								}
							})
						} else if (tapIndex === 1) {
							if (this.changeInfo.stationType === 2) {
								uni.navigateTo({
									url: '/pages/chargeDetail/electricVehicleStart?chargeId=' + this
										.chargeId
								})
							} else {
								uni.navigateTo({
									url: '/pages/chargeDetail/bicycleStart?chargeId=' + this
										.chargeId
								})
							}
						}
					}
				})
			},
			intoBack() {
				uni.navigateBack()
			},
			onNavigation() {
				uni.openLocation({
					latitude: this.changeInfo.positionY,
					longitude: this.changeInfo.positionX,
					name: this.changeInfo.stationName,
					address: this.changeInfo.address,
					success: function() {
						console.log('success');
					}
				});
			},
			async fenchRulesData() {
				const {
					data,
					code,
					message
				} = await getChargeRulesListByQuery({
					chargingStationId: this.chargeId,
					page: 1,
					size: 100
				})
				console.log(data, code);
				if (code == 10002) {
					this.rulesList = data
				} else {
					uni.showToast({
						title: message,
						icon: 'none'
					})
				}
			},
			async fenchData() {
				const {
					data,
					code
				} = await cfChargingStationGetInfoById({
					id: this.chargeId,
					positionX: this.locationInfo.longitude,
					positionY: this.locationInfo.latitude,
				})
				console.log(data, code);
				if (code == 10002) {
					this.changeInfo = data
					this.changeInfo.newImageUrl = this.changeInfo.imageUrl.split(',')
				} else {
					uni.showToast({
						title: '获取停车场详情失败',
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				}
			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.changeInfo.newImageUrl
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FF;
		padding-bottom: 200rpx;
	}

	.bottomBox {
		width: 750rpx;
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -12rpx 14rpx 0rpx rgba(222, 220, 238, 0.5);
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 32rpx;
		overflow: hidden;
		padding-bottom: 20rpx;

		.left {
			width: 332rpx;
			height: 100rpx;
			background: rgba(03, 148, 246, 0.18);
			border-radius: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #6794F6;
				line-height: 50rpx;
				margin-left: 12rpx;
			}
		}

		.right {
			width: 332rpx;
			height: 100rpx;
			background: #6794F6;
			border-radius: 10rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 50rpx;
				margin-left: 12rpx;
			}
		}
	}

	.imageBox {
		width: 686rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 32rpx;
	}

	.feeBox {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 32rpx 0 0 32rpx;
		padding: 32rpx;

		.feeBox_item2 {
			width: 622rpx;
			height: 70rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			margin-top: 28rpx;
			// padding: 20rpx 24rpx;
		}

		.feeBox_item1 {
			width: 622rpx;
			height: 70rpx;
			background: rgba(103, 148, 246, 0.1);
			border-radius: 8rpx;
			border: 2rpx solid #6794F6;
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #6794F6;
			font-weight: 400;
			// padding: 20rpx 24rpx 16rpx 24rpx;
		}

		.name {
			height: 50rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #323233;
			line-height: 50rpx;
		}
	}

	.scrollViewImage {
		width: 262rpx;
		height: 152rpx;
		border-radius: 16rpx;
		margin: 32rpx 0 0 32rpx;
		display: inline-block;
	}

	.price {
		margin-top: 24rpx;

		.distance {
			view:nth-child(2) {
				height: 34rpx;
				font-size: 24rpx;

				font-weight: 400;
				color: #434343;
				line-height: 34rpx;
				margin-left: 8rpx;
			}
		}
	}

	.changeStatusBox_text {
		height: 66rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(50, 50, 51, 0.5);
		line-height: 34rpx;
	}

	.changeStatusBox_red {
		width: 120rpx;
		height: 44rpx;
		background: rgba(255, 158, 158, .34);
		border-radius: 22rpx;
		font-size: 22rpx;
		font-weight: 600;
		color: #FF7777;
		line-height: 44rpx;
		text-align: center;
	}

	.changeStatusBox_blue {
		background: rgba(168, 179, 255, .34);
		color: #8393FD;
		@extend .changeStatusBox_red;
	}

	.changeStatusBox_gray {
		background: rgba(190, 194, 223, .34);
		color: #A1A3B1;
		@extend .changeStatusBox_red;
	}

	.bgBox {
		width: 750rpx;
		height: 666rpx;
		background: linear-gradient(360deg, #F5F7FF 0%, #A6C1FB 100%);

		.backIcon {
			width: 64rpx;
			height: 64rpx;
			margin: 100rpx 0 0 32rpx;
		}

		.navTitle {
			width: 160rpx;
			height: 56rpx;
			font-size: 40rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 56rpx;
			margin: 100rpx 0 0 190rpx;
		}

		.infoBox {
			width: 686rpx;
			height: 415rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 60rpx 0 0 32rpx;
			padding: 32rpx;

			.line {
				width: 630rpx;
				opacity: 0.43;
				border: 2rpx dashed #979797;
				margin: 42rpx 0 0 0;
			}

			.name {
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #323233;
				line-height: 50rpx;
			}

			.address {
				margin-top: 8rpx;

				view:nth-child(1) {
					width: 514rpx;
					height: 32rpx;
					font-size: 24rpx;

					font-weight: 400;
					color: #434343;
					line-height: 34rpx;
				}
			}

			.spaces {
				height: 32rpx;
				font-size: 24rpx;

				font-weight: 400;
				color: #323233;
				line-height: 32rpx;
				margin-top: 16rpx;
			}
		}
	}

	.feeBoxItem1 {
		width: 92rpx;
		height: 50rpx;
		background: linear-gradient(138deg, #A0C6FB 0%, #6794F6 100%);
		border-radius: 6rpx 0rpx 0rpx 6rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 50rpx;
		text-align: center;
	}

	.feeBoxItem2 {
		height: 50rpx;
		border-radius: 0rpx 6rpx 6rpx 0;
		border: 2rpx solid #6794F6;
		font-size: 24rpx;
		font-weight: 400;
		color: #6D99F7;
		line-height: 50rpx;
		text-align: center;
		padding: 0 16rpx;
	}

	.feeBoxText {
		width: 622rpx;
		height: 70rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #434343;
		line-height: 34rpx;
		margin-top: 24rpx;
	}
</style>

源码下载地址(小程序开源地址):停车场系统小程序,新能源电动车充电系统,智慧社区物业人脸门禁小程序: 【涵盖内容】:城市智慧停车系统,汽车新能源充电,两轮电动车充电,物业缴费,社区到访记录,人脸门禁,上门报修等。【开发框】架:union【使用场景】:微信小程序,支付宝小程序,其它平台小程序,混合app【使用教程】:本代码全开源且完整,没有任何缺失和加密,不会存在我们故意动手脚导致你跑不起来的情况,建议使用HBuilder打开和运行本代码

源码下载地址(后台管理开源地址):停车场系统后台管理,新能源电动车充电系统,智慧社区物业人脸门禁后台管理: 城市智慧停车系统,汽车新能源充电,两轮电动车充电,物业缴费,社区到访记录,人脸门禁,上门报修等

相关推荐
licy__6 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_99225027715 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji1 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生1 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入1 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
坠入暮云间x2 天前
Nodejs开发仿马蜂窝旅游小程序API接口,服务器端开发,商家后台 Vue3+微信小程序+koa+mongodb+node.js
微信小程序·小程序·旅游
2401_842304862 天前
想做一个类似于东郊到家这样的预约上门小程序,app也行,这个现在好不好运营?
科技·微信小程序·小程序·生活
草字2 天前
微信小程序 https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中
微信小程序·小程序
程序员徐师兄2 天前
Java基于微信小程序的校园跑腿平台(V2.0)
java·微信小程序·校园跑腿·跑腿小程序·跑腿
全职计算机毕业设计2 天前
(微信小程序)基于Spring Boot的校园失物招领平台的设计与实现(vue3+uniapp+mysql)
spring boot·微信小程序·uni-app