# 停车场管理系统前端

**Repository Path**: only_hope/parking-front

## Basic Information

- **Project Name**: 停车场管理系统前端
- **Description**: 停车场管理系统，包括后台管理系统和普通用户移动端页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-01-26
- **Last Updated**: 2024-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 停车场管理系统-前端

数据库系统课程作业：停车场管理系统

后端地址：https://gitee.com/aimaier4869/parking-back

## 1. 运行效果

### 1. 停车场模拟器

![](assets/1702540256.png)

### 2. 后台管理系统

<div style="display: flex; flex-wrap: wrap;">
    <img style="width: 50%;" src="assets/1702539755.png" />
    <img style="width: 50%;" src="assets/1702539770.png" />
    <img style="width: 50%;" src="assets/1702539786.png" />
    <img style="width: 50%;" src="assets/1702539806.png" />
    <img style="width: 50%;" src="assets/1702539834.png" />
    <img style="width: 50%;" src="assets/1702539884.png" />
    <img style="width: 50%;" src="assets/1702539897.png" />
    <img style="width: 50%;" src="assets/1702539909.png" />
    <img style="width: 50%;" src="assets/1702539922.png" />
    <img style="width: 50%;" src="assets/1702539933.png" />
</div>

### 3. 移动端

<div style="display: flex; flex-wrap: wrap;">
    <img style="width: 33%;" src="assets/1702539952.png" />
    <img style="width: 33%;" src="assets/1702540024.png" />
    <img style="width: 33%;" src="assets/1702540035.png" />
    <img style="width: 33%;" src="assets/1702540044.png" />
    <img style="width: 33%;" src="assets/1702540053.png" />
</div>

## 2. 概览

### 1. 技术栈

| 名称         | 地址                                                      | 备注                                     |
| ------------ | --------------------------------------------------------- | ---------------------------------------- |
| vue          | https://cn.vuejs.org/guide/introduction.html              | Web 前端框架                             |
| Vue Router   | https://router.vuejs.org/zh/                              | vue 路由                                 |
| element-plus | https://element-plus.gitee.io/zh-CN/component/button.html | ElementUI 组件库                         |
| unocss       | https://unocss.dev/                                       | 原子化 CSS                               |
| axios        | https://www.axios-http.cn/                                | js 网络请求库                            |
| dayjs        | https://www.npmjs.com/package/dayjs                       | 轻量的处理时间和日期的 JavaScript 库     |
| lodash-es    | https://www.lodashjs.com/                                 | js 工具库                                |
| spritejs     | https://spritejs.com/#/zh-cn/api/sprite                   | Canvas 库                                |
| qrcode       | https://www.npmjs.com/package/qrcode                      | 二维码生成工具                           |
| Vite         | https://vitejs.cn/vite3-cn/                               | js 构建工具                              |
| Typescript   | https://ts.nodejs.cn/                                     | 一种基于 JavaScript 构建的强类型编程语言 |

### 2. 目录结构

```bash
src
├─ apis                     # 网络请求封装
├─ assets                   # 全局静态资源
├─ components               # 全局组件
│  └─ PayModal.vue          # 支付弹窗组件
├─ layouts                  # 布局
│  ├─ index.vue             # 默认布局，后台布局
│  └─ MobileLayout.vue      # 移动端布局
├─ pages                    # 页面
│  ├─ mobile                # 移动端页面
│  ├─ park                  # 后台管理系统页面
│  ├─ parkPlayground        # 停车场模拟器
│  ├─ Home.vue              # 首页
│  ├─ Login.vue             # 登录页
│  └─ User.vue              # 用户管理
├─ routers                  # 路由
│  └─ index.ts              # 路由配置
├─ utils                    # 工具函数
│  ├─ dateFormat.ts         # 日期格式化函数封装
│  └─ request.ts            # axios实例
├─ App.vue                  # 根组件
├─ main.ts                  # 入口文件
└─ style.css                # 全局样式
```

### 3. 功能介绍

数据库表结构

![](assets/1702547158.png)

#### 1. 停车场模拟器

用来模拟一个停车场，功能包括：

-   创建车辆
-   用鼠标点击车辆选中该车辆
-   使用键盘的上下左右导航键控制选中车辆的移动
-   车辆到达停车场入口时，自动识别车牌，在大屏上显示相关信息，自动打开停车场大门
-   车辆进入停车场时自动产生停车记录
-   停车位感应，当有车停在某个车位时，车位能感应出来
-   车辆到达停车场出口时，自动识别车牌，计算停车费并展示付款二维码
-   车主付款后自动打开停车场出口大门
-   车辆离开停车场后更新停车记录

#### 2. 后台管理系统

给管理员使用

-   用户管理

    -   系统用户的增删改查
    -   该列表中的用户可以根据用户名和密码登录到后台管理端页面

-   停车场管理

    -   停车场的增删改查
    -   新增停车场时可以填写停车场内私人车位和公用车位的容纳量
    -   可以选择停车场公用车位的计费模式
    -   新增车位后根据容纳量自动创建停车位（可以在停车位管理中查看）
    -   在列表中分别统计出私人车位和公用车位的容纳量、现有的总数、正在空闲的停车位数量

-   停车位管理

    -   停车位的增删改查
    -   新增停车位时可以选择属于哪个停车场
    -   新增停车位时会自动检测，保证不会超过停车场的容纳量
    -   列表中显示出每一个停车位的类型和空闲状态

-   车主管理

    -   车主的增删改查
    -   该列表中的用户可以通过手机号登录移动端页面
    -   一个车主可以拥有多辆车，只能购买一个私人停车位

-   车辆管理

    -   车辆的增删改查
    -   列表中显示出车主姓名
    -   新增和编辑时可以从车主列表中按照姓名搜索车主

-   停车记录管理

    -   停车记录的增删查
    -   新增记录时可以按照车牌号搜索车辆
    -   列表中显示出车辆进出停车场的时间，支付状态，订单编号等信息
    -   可以点击支付按钮直接支付停车费

-   订单管理

    -   支付订单的增删改查
    -   购买车位、支付停车费的每一笔支付订单都会显示在列表中
    -   可以按照订单号，订单类型，支付状态等条件筛选订单

-   套餐管理

    -   购买私人车位套餐的增删改查
    -   可以添加购买私人车位的套餐，设置原价、现价、天数等信息
    -   用户购买车位时会显示在移动端页面中

-   公用车位计费模式管理

    -   公用车位计费模式的增删改查
    -   计费模式可以设置公用车位每小时的停车收费标准
    -   某个停车场使用了一个计费模式后当有车停在公用车位时，会按照该模式里的价格计算停车费

-   支付方式管理
    -   支付方式的增删改查
    -   车主购买车位、支付停车费时可以选择此处提供从支付方式

#### 3. 移动端

-   首页中显示出每个停车场每个停车位的占用状态，车主可以通过此页面知道应该把车停在哪里
-   车主绑定车辆后可以查询自己的历史停车记录
-   在我的页面中车主可以查看自己的信息
-   车主可以修改自己的个人信息
-   车主可以购买一个私人停车位
-   车主可以绑定或解绑车辆

## 2. 快速开始

运行之前你需要先启动后端：https://gitee.com/aimaier4869/parking-back.git

1. 安装依赖

```bash
yarn
```

2. 启动项目

```bash
yarn dev
```