# parkSystem **Repository Path**: wang-zhenyang77/park-system ## Basic Information - **Project Name**: parkSystem - **Description**: 停车场后台管理系统，基于Vue2开发 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-05-29 - **Last Updated**: 2022-06-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 停车场管理系统 ## 整体界面设计 ![img](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/3752/clip_image002.jpg) 主要页面布局采用左侧侧边栏切换导航，右侧 三块区域分别为头部栏、显示区、底部栏。界面UI主要以卡片形式呈现内容。 ## 3.2 关键功能实现 使用到的技术有vue2、Echarts、Ant Design Vue 1.0x、Element UI ### 3.2.1首页 **主要功能：** 大屏展示近一周或近三月的总收入、总用户、总订单（显示较上期的增长或下降的比率）和支付渠道占比数据， **主要实现：** 整体布局采用Ant Design Vue的和对卡片进行界面布局，以总收入卡片为例： ![img](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/3752/clip_image004.jpg) ![img](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/3752/clip_image006.jpg) 通过使用title、extra、description等插槽将标题、时间控制按钮组、总收入和较上期的升降比率放入card组件中，并使用了 el-skeleton骨架屏，来增强用户体验 ### 3.2.2车辆登记： 为改进用户体验使用了左右两个卡片布局，可以同时进行入场和出场登记。车牌号中的省份简称以及地级市代码登记采用了联级选择框并带有搜索功能。后五位（六位）车牌号采用了单个字符输入框，并能自动将用户输入的字母转为大写并获取下一个输入框焦点实现类似于短信验证码的输入框，改进了用户 输入体验。 ![img](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/3752/clip_image008.jpg) 在最终提交时使用正则表达式对车牌号进行校验，车牌号的校验比较复杂，需要考虑新能源车牌和普通车牌 代码如下： ![img](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/3752/clip_image010.jpg) **出场登记获取支付订单：** 记录车牌号提交出场登记表单，后端发送账单数据，以抽屉的形式弹出账并显示对应的支付方式（持卡用户当用户余额不足时，或者不是会员用户能给出相应提示） ![img](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/3752/clip_image012.jpg) ### 3.2.3用户管理 用户管理采用Ant Design Vue中的表格组件，配合搜索功能实现了对持卡用户的账号状态管理以及信息查询功能，并且支持多条件查询，对查询目标实现精确控制 ![img](https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/3752/clip_image014.jpg) ### 3.2.4停车场Unity交互 public文件夹下新建 Unity文件夹将 Unity WebGL放入，在 ParkView.vue中通过