# Intelligent transportation system

**Repository Path**: akaedu2012/intelligent-transportation-system

## Basic Information

- **Project Name**: Intelligent transportation system
- **Description**: 基于MySQL、express框架、Vue3的光谷智慧交通系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-02-23
- **Last Updated**: 2025-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<a name="G3k1C"></a>
# 
<a name="JJYaN"></a>
# 一、项目需求分析
<a name="p6BM4"></a>
### 1、目的

- 学习如何独立解决开发过程中的问题，
- 多踩坑，多总结，夯实基础，
- 最大化了解体会实际gis项目开发工作，积累工作经验，
- 学习和累团队协作开发的经验。
<a name="H2apf"></a>

### 2、需求分析

- **中台**功能需求：管理员、普通用户、交通管理部门
   - 基础功能需求：
      - 管理员：系统初始分配一个管理员账号，通过管理员账号管理所有用户信息，管理员可以添加交通部门用户账号。
      - 交管：交通部门需要对交通事故进行录入、查看、统计、分析，及时发布道路管制、维修等信息。
      - 普通用户：普通用户可以通过系统查询交通事故以及交通部门发布的施工公告，合理规划出行路线，普通用户使用注册功能成为新用户。
   - 用户权限分析：
      - 管理员：管理员拥有系统最高权限。
      - 交管：交通部门拥有除用户管理功能外的其他权限。
      - 普通用户：普通拥有基本的系统浏览与交通事件查询权限，所有用户均可登陆系统，可以修改密码信息。
- **前台**功能需求：
   - 用户功能需求
      - 具有注册和登录功能
      - 报告路况：报告发生的路况信息；
      - 查看公告：查看交通部门发布的施工公告；
   - 地图功能需求
      - 初始：天地图矢量地图
      - 切换：影像地图
      - 控件：提供放大缩小、复位、鼠标位置控件；
   - 智慧交通地图：
      - 基础功能：用于查看道路、居民区、交通事件等信息，部分图层可以做显示与隐藏操作
      - 管理员和交管功能：可以查看光谷智慧交通地图的目录结构，对部分图层可以做显示与隐藏操作。
      - 事件图层：加载智慧交通系统的专有图层
      - API需求：
         - 实时路况：将实时路况进行可视化展示的API
         - 交通事件：将交通事件进行可视化展示的API：
            - 在地图上进行标注，
            - 并在表格中展示，
         - 事件更新：提供展示给用户的事件更新的API，
         - 接收公告：用户实时接收施工公告的API，
         - 工具箱：向用户提供测量长度、测量面积、导出图片等功能的API。
   - <br />
- **后台**功能需求：
   - 数据库需求
      - 实时路况：能够实时反映区域内交通情况（拥堵、事故）的数据，
      - 施工数据：影响道路通行的事件的数据，
      - 监控数据：提供道路监控信息的数据库，
      - 事件查询：提供热力图或统计图的数据库，
      - 事件更新：记录交通事件处理进度的数据库、
      - 发布公告：建立道路维护对用户影响的数据库，	
      - 地理数据：建立光谷区域基础地理信息的数据库，
   - 接口需求
      - 交通路线：合理规划出行路线的API，
      - 公告提示：提供施工公告的API，
      - 路况报告与展示：提供用户报告路况的API，并设置校验规则，通过后提交到交管部门，
      - 交通监控：向交管提供路况监控的API，
      - 事件添加：设置校验路况api和监控api的API，添加事件到路况信息数据库的API，添加事件到光谷智慧地图的API，面向用户和交通部门的管理。
      - 事件查询：框选获取交通信息的API，
      - 事件更新：交管提供交通事件处理进度的API，
      - 公告发布：发布施工公告通知住户的API，
      - 图层目录：交管对交通事件图层可以进行显示与隐藏的API	，
      - 工具箱：提供测量长度、测量面积、导出图片等功能的AP
      <a name="jFOZI"></a>
# 二、项目开发规划
<a name="HFskv"></a>
### 1、项目开发的模式
<a name="bif2n"></a>
#### 1)模块拆分
本次项目开发的模式采用纵向开发的模式，根据需求分析，对完整的项目进行模块化拆分，综合评估后，将醒目拆分为五大模块。<br />![image.png](https://cdn.nlark.com/yuque/0/2023/png/34812272/1679994341337-641e4764-0f7d-4774-a3a0-5820899f36fa.png#averageHue=%23bfdbf0&clientId=u063eb4a3-58fd-4&from=paste&height=581&id=u287e3095&name=image.png&originHeight=872&originWidth=1696&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=114415&status=done&style=none&taskId=ua8da8e34-50df-4213-933e-219ec1a72bb&title=&width=1130.6666666666667)
<a name="h8BlY"></a>
#### 2）模块分析
<a name="bwuYK"></a>
##### 用户模块：
不同权限用户展示不同功能

| **用户分类** | **功能** |
| --- | --- |
| 所有用户 | 登录功能，修改密码 |
| 普通用户 | 注册、注册验证 |
| 交管用户 |  |
| 超级管理员 | 添加交管用户，重置密码 |

<a name="JItL0"></a>
##### 事件（路况）模块：
| **用户分类** | **功能** |
| --- | --- |
| 所有用户 | 实时路况、事件查询、 |
| 普通用户 | 报告路况、事件审核进度（我上报事件的审核进度）、 |
| 交管用户 | 事件添加、事件删除、事件编辑（名字，内容、状态）、查看视频监控、审核路况信息、 |
| 超级管理员 | 事件审核和添加、事件删除、事件编辑（名字，内容）、查看视频监控、 |

> Tips:交管用户的事件添加是：表单选择完毕，提交之后直接显示到地图上。

> 事件（路况）模块：
> 事件分类功能，允许用户将事件按照类型进行分类，例如交通事故、道路施工等。
> 事件统计功能，允许用户查看不同类型事件的数量、分布情况等信息。

| # | 功能 |
| --- | --- |
| 前台 | 实时路况、报告路况、事件查询、查看视频监控、事件添加、事件审核、事件删除、事件编辑 |

<a name="OLL3u"></a>
##### 施工公告模块：
| **用户分类** | **功能** |
| --- | --- |
| 所有用户 | 查看公告 |
| 普通用户 |  |
| 交管用户 | 发布公告、删除公告 |
| 超级管理员 | 发布公告、删除公告 |

工具模块：
> Tips: 工具模块面向所有用户

| **用户分类** | **功能** |
| --- | --- |
| 所有用户 | 测量距离，测量面积、导出图片、取消测量 |
| 普通用户 |  |
| 交管用户 | <br /> |
| 超级管理员 | <br /> |

<a name="Y7xW3"></a>
##### 待添加功能：
导航功能，搜索功能
<a name="lXax1"></a>
### 2、项目开发流程
项目的模块开发评估中，由于事件模块的业务代码最多，并且与其他模块的交互较多，决定最后集中开发事件模块，先完成其他模块的开发。
<a name="Yshma"></a>
   <a name="Biddh"></a>
# 三、项目技术文档
<a name="R6zZu"></a>
### 1、项目技术栈
<a name="LFFCt"></a>
#### 1）前端技术栈

- HTML5
- CSS3
- JavaScript
- Axios
- Vite
- Less
<a name="ONWm5"></a>
#### 2）后端技术栈

- Node.js
- Express.js
- JWT
- Axios
<a name="nj3s2"></a>
#### 3）调试技术栈

- Google Chrome
- REST client
<a name="QwC68"></a>
#### 4）其他工具和框架

- Git
- GitHub
- Visual Studio Code
<a name="CESeQ"></a>
### 2、技术栈说明
<a name="lbxVh"></a>
#### 1）前端技术栈

- HTML5、CSS3 和 JavaScript 是 Web 前端开发的基础技术。
- Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求和处理响应。
- Vite：一个现代化的前端构建工具，它可以快速构建现代化的 Web 应用程序。
- Less：一种 CSS 预处理器，它扩展了 CSS 语言，包括变量、混合、嵌套等特性，让 CSS 更易于维护和扩展。
<a name="kcCrJ"></a>
#### 2）后端技术栈

- Node.js 和 Express.js 是流行的后端开发框架，它们可以帮助开发人员构建 RESTful API 和其他服务器端应用程序。
- JWT 和 Passport.js 是流行的身份验证和授权库，它们可以帮助开发人员实现安全的身份验证和授权机制。
- Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求和处理响应。
<a name="akcUe"></a>
#### 3）调试技术栈

- Google Chrome：一种流行的 Web 浏览器，包括控制台、网络面板、元素检查器等，可以帮助开发人员检查和调试 Web 应用程序。
- REST client：一种用于测试和调试 HTTP API 的工具，可以帮助开发人员发送 HTTP 请求和查看响应。
<a name="N4hVW"></a>
#### 4）其他工具和框架

- Git：一种分布式版本控制系统，用于管理代码的变更历史和团队协作。
- GitHub：一个基于 Git 的代码托管平台，提供了源代码管理、问题跟踪、团队协作等功能。
- Visual Studio Code：一种免费开源的跨平台代码编辑器，支持多种编程语言和框架。
<a name="zuB6q"></a>
### 3、数据库设计、
<a name="AfVyA"></a>
#### 1）分析
智慧交通系统主要分为以下几个模块：

- 用户管理：用户的登录注册修改等操作
- 事件：路况信息的上报，审核，展示等操作
- 公告模块：发布和展示公告
- 工具：一些操作地图的小工具
- 系统功能:光谷智慧交通系统，主要包括用户模块、地图模块、事件（路况）模块、施工公告模块和工具模块。
- 用户模块：根据不同权限展示不同功能，包括登录、注册、注册验证、修改密码、添加交管用户、重置密码等。
- 地图模块：提供底图、地图控件、底图切换、复位地图等功能，交管用户可以查看视频监控、事件图层切换展示等。
- 事件（路况）模块：提供实时路况、事件查询、报告路况、事件审核进度、事件添加、事件删除、事件编辑等功能，交管用户可以审核路况信息。施工公告模块提供查看公告、发布公告、删除公告等功能。
- 工具模块：面向所有用户，提供测量距离、测量面积、导出图片、取消测量等功能。
<a name="gGVtM"></a>
#### 2）数据库的ER图设计
![光谷智慧交通系统ER图.jpg](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1680004396118-af2ab573-4e45-42fb-99cf-ab209a843210.jpeg#averageHue=%23fbfbfb&clientId=u063eb4a3-58fd-4&from=drop&id=u38450530&name=%E5%85%89%E8%B0%B7%E6%99%BA%E6%85%A7%E4%BA%A4%E9%80%9A%E7%B3%BB%E7%BB%9FER%E5%9B%BE.jpg&originHeight=1511&originWidth=1366&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=242468&status=done&style=none&taskId=u200c467c-b073-4121-8f0a-84b035ccf68&title=)
<a name="g3Fxq"></a>
#### 3）数据库逻辑模型设计
<a name="kmKNe"></a>
##### 用户表（all_user）
| 字段名 | 数据类型 | 默认值 | 是否为空 | 主键 | 描述 |
| --- | --- | --- | --- | --- | --- |
| id | int(11)  | 无 | NOT NULL | 是 | 主键自增 |
| user_name | varchar(255)  | 无 | NOT NULL | 否 | 用户名 |
| user_password | varchar(255)  | 无 | NOT NULL | 否 | 用户密码 |
| user_role | TINYINT | 0 | NOT NULL | 否 | 用户角色0为普通用户1为交管用户2为超级管理员 |
| user**_**islogin | TINYINT | 0 | NOT NULL | 否 | 用户登录状态0为未登录1为在线 |
| user_isdelete | TINYINT | 0 | NOT NULL | 否 | 用户是否被删除 0为已删除 1为未删除 |

<a name="H5Z3K"></a>
##### 用户上报事件表（traffic_event）
| 字段名 | 数据类型 | 默认值 | 是否为空 | 主键 | 描述 |
| --- | --- | --- | --- | --- | --- |
| id | int(11)  | 无 | NOT NULL | 是 | 主键自增，事件id |
| user_id | int(11)  | 无 | NOT NULL | 否 | 事件上报用户id |
| event_type | varchar(255)  | 无 | NOT NULL | 否 | 事件类型 |
| event_describe | TEXT | 无 | NOT NULL | 否 | 事件描述 |
| event_handle_status | TINYINT | 0 | NOT NULL | 否 | 事件状态0为未处理1为处理中2为已处理 |
| road__section_id | varchar(255)  | 无 | NOT NULL | 否 | 事件发生路段id |
| event_driver | varchar(255)  | 无 | NOT NULL | 否 | 驾驶员姓名 |
| event_car_number | varchar(255)  | 无 | NOT NULL | 否 | 事故车车牌号 |
| event_date | DATETIME | 当前时间 | NOT NULL | 否 | 事故发生时间，默认为事故上报时间 |

> 事件类型具体设置：
> 1开头机动车辆事故
> 11碰撞
> 12追尾
> 13侧翻
> 2开头非机动车辆事故
> 21碰撞
> 22撞人
> 23侧翻
> 3开头行人事故
> 31行人被车辆撞击
> 32行人被车辆碾压
> 4道路设施事故
> 41道路障碍物
> 42道路设施毁坏

<a name="uWA4X"></a>
##### 实时路段情况表（road_section_conditions）
| 字段名 | 数据类型 | 默认值 | 是否为空 | 主键 | 描述 |
| --- | --- | --- | --- | --- | --- |
| id | int(11)  | 无 | NOT NULL | 是 | 主键自增，路段id |
| road_id | int | 无 | NOT NULL | 否 | 当前路段所属道路id |
| road_section | varchar(255)  | 无 | NOT NULL | 否 | 两个坐标，表示路段信息 |
| vehicle_flowrate | int | 无 | NOT NULL | 否 | 路段车流量 |
| create_time | DATETIME | 当前时间 | NOT NULL | 否 | 存储时间信息，表示路段信息的时间 |

<a name="mt1HE"></a>
##### 道路表road_info
| 字段名 | 数据类型 | 默认值 | 是否为空 | 主键 | 描述 |
| --- | --- | --- | --- | --- | --- |
| id | int(11)  | 无 | NOT NULL | 是 | 主键自增，道路id |
| road_name | varchar(255)  | 无 | NOT NULL | 否 | 道路名称 |
| road_width | int | 无 | NOT NULL | 否 | 道路宽度 |
| road_length | int | 无 | NOT NULL | 否 | 道路长度 |
| road_region | varchar(255) | 无 | NOT NULL | 否 | 道路所属行政区 |

<a name="E1Wly"></a>
##### 公告表event_notice

| 字段名 | 数据类型 | 默认值 | 是否为空 | 主键 | 描述 |
| --- | --- | --- | --- | --- | --- |
| id | int(11)  | 无 | NOT NULL | 是 | 主键自增，公告id |
| user_id | int(11) | 无 | NOT NULL | 否 | 发布公告的用户id |
| notice_title | varchar(255)  | 无 | NOT NULL | 否 | 公告标题 |
| notice_content | text | 无 | NOT NULL | 否 | 公告内容 |
| publish_time | DATE  | 无 | NOT NULL | 否 | 公告发布时间 |
| notice_status | int | 无 | NOT NULL | 否 | 公告状态 0不生效 1 生效 |

<a name="y3yra"></a>
#### 4）数据库语句
```
-- CREATE DATABASE IF NOT EXISTS guanggu_smart_traffic DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci;

-- USE guanggu_smart_traffic;

CREATE TABLE IF NOT EXISTS all_user (
  id INT(11) NOT NULL AUTO_INCREMENT COMMENT '用户id',
  user_name VARCHAR(255) NOT NULL COMMENT '用户名',
  user_password VARCHAR(255) NOT NULL COMMENT '用户密码',
  user_role TINYINT NOT NULL DEFAULT 0 COMMENT '用户角色0为普通用户1为交管用户2为超级管理员',
  user_islogin TINYINT NOT NULL DEFAULT 0 COMMENT '用户登录状态0为未登录1为在线',
  user_isdelete TINYINT NOT NULL DEFAULT 0 COMMENT '用户是否被删除 0为已删除 1为未删除',
  PRIMARY KEY (id)
) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

CREATE TABLE IF NOT EXISTS traffic_event (
  id INT(11) NOT NULL AUTO_INCREMENT COMMENT '事件id',
  user_id INT(11) NOT NULL COMMENT '事件上报用户id',
  event_type VARCHAR(255) NOT NULL COMMENT '事件类型',
  event_describe TEXT NOT NULL COMMENT '事件描述',
  event_handle_status TINYINT NOT NULL DEFAULT 0 COMMENT '事件状态0为未处理1为处理中2为已处理',
  road_section_id VARCHAR(255) NOT NULL COMMENT '事件发生路段id',
  event_driver VARCHAR(255) NOT NULL COMMENT '驾驶员姓名',
  event_car_number VARCHAR(255) NOT NULL COMMENT '事故车车牌号',
  event_date DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '事故发生时间，默认为事故上报时间',
  PRIMARY KEY (id)
) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

CREATE TABLE IF NOT EXISTS road_section_conditions (
  id INT(11) NOT NULL AUTO_INCREMENT COMMENT '路段id',
  road_id INT NOT NULL COMMENT '当前路段所属道路id',
  road_section VARCHAR(255) NOT NULL COMMENT '两个坐标，表示路段信息',
  vehicle_flowrate INT NOT NULL COMMENT '路段车流量',
  create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '存储时间信息，表示路段信息的时间',
  PRIMARY KEY (id)
) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

CREATE TABLE IF NOT EXISTS road_info (
  id INT(11) NOT NULL AUTO_INCREMENT COMMENT '道路id',
  road_name VARCHAR(255) NOT NULL COMMENT '道路名称',
  road_width INT NOT NULL COMMENT '道路宽度',
  road_length INT NOT NULL COMMENT '道路长度',
  road_region VARCHAR(255) NOT NULL COMMENT '道路所属行政区',
  PRIMARY KEY (id)
) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

CREATE TABLE IF NOT EXISTS event_notice (
  id INT(11) NOT NULL AUTO_INCREMENT COMMENT '公告id',
  user_id INT(11) NOT NULL COMMENT '发布公告的用户id',
  notice_title VARCHAR(255) NOT NULL COMMENT '公告标题',
  notice_content TEXT NOT NULL COMMENT '公告内容',
  publish_time DATE NOT NULL COMMENT '公告发布时间',
  notice_status INT NOT NULL DEFAULT 0 COMMENT '公告状态 0不生效 1 生效',
  PRIMARY KEY (id)
) ENGINE=INNODB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
```
<a name="h1iMc"></a>
### 4、接口设计
<a name="u7dKF"></a>
#### 1）用户接口设计
<a name="AeEVw"></a>
##### Ⅰ、获取分页用户数据
:::tips

- **URL**：`/users?page=1&size=2`
- **Method**：`GET`
- **需要登录**：否
- **需要鉴权**：否
:::
<a name="BlaAB"></a>
###### 请求参数
| 参数 | 类型 | 约束 |
| --- | --- | --- |
| `page` | Number | 非空 |
| `size` | Number | 非空 |

<a name="Wsg6R"></a>
###### 请求示例
```json
/users?page=1&size=2
```
<a name="QSHP1"></a>
###### 成功响应
:::tips
**条件**：请求参数合法<br />**状态码：**`200 OK`<br />**响应示例**：响应会将总数和分页数据返回
:::
```json
{
  "code": 0,
  "message": "获取分页用户数据成功",
  "result": [
    {
      "id": 1,
      "user_name": "张三",
      "user_password": "123456",
      "user_role": 0,
      "user_islogin": 0,
      "user_isdelete": 0
    },
    {
      "id": 2,
      "user_name": "李四",
      "user_password": "123456",
      "user_role": 1,
      "user_islogin": 0,
      "user_isdelete": 0
    }
  ]
}
```
<a name="ayC2R"></a>
##### Ⅱ、获取单个用户数据
:::tips

- **URL**：`/users/:id`
- **Method**：`GET`
- **需要登录**：否
- **需要鉴权**：否
:::
<a name="nghKa"></a>
###### 请求参数
| 参数 | 类型 | 约束 |
| --- | --- | --- |
| `id` | Number | 非空 |

<a name="RtL7E"></a>
###### 请求示例
```json
/users/1
```
<a name="jUsGq"></a>
###### 成功响应
:::tips
**条件**：请求参数合法<br />**状态码：**`200 OK`<br />**响应示例**：响应会将对应id的文章数据返回
:::
```json
{
  "code": 0,
  "message": "获取用户成功",
  "result": {
    "id": 1,
    "user_name": "张三",
    "user_role": 0,
    "user_islogin": 0,
    "user_isdelete": 0
  }
}
```
<a name="f5ud0"></a>
##### Ⅲ、新增普通用户
:::tips

- **URL**：`/users`
- **Method**：`POST`
- **需要登录**：否
- **需要鉴权**：否
:::
<a name="Zx5oq"></a>
###### 请求参数
| 参数 | 类型 | 约束 |
| --- | --- | --- |
| `user_name` | String | 非空 |
| `user_name` | Number | 非空 |

<a name="HiyTZ"></a>
###### 请求示例
```json
{
	"user_name":"	"user_name":"王五",
	"user_password":"123456",
}
```
<a name="CYJMv"></a>
###### 成功响应
:::tips
**条件**：请求参数合法<br />**状态码：**`200 OK`<br />**响应示例**：响应会将用户id、用户name返回
:::
```json
{
  "code": 0,
  "message": "添加普通用户成功",
}
```
<a name="zjeOE"></a>
##### Ⅳ、新增交管用户
:::tips

- **URL**：`/users`
- **Method**：`POST`
- **需要登录**：否
- **需要鉴权**：否
:::
<a name="NiiU6"></a>
###### 请求参数
| 参数 | 类型 | 约束 |
| --- | --- | --- |
| `user_name` | String | 非空 |
| `user_name` | Number | 非空 |

<a name="uRY01"></a>
###### 请求示例
```json
{
	"user_name":"	"user_name":"王五",
	"user_password":"123456",
	"user_role":1
}
```
<a name="s7h5S"></a>
###### 成功响应
:::tips
**条件**：请求参数合法<br />**状态码：**`200 OK`<br />**响应示例**：响应会将用户id、用户name返回
:::
```json
{
  "code": 0,
  "message": "添加交管用户成功",
}
```
<a name="Bfbsu"></a>
##### Ⅴ、修改用户
:::tips

- **URL**：`/users/:id`
- **Method**：`PUT`
- **需要登录**：否
- **需要鉴权**：否
:::
<a name="bxsiV"></a>
###### 请求参数
| 参数 | 类型 | 约束 |
| --- | --- | --- |
| `user_name` | String | 非空 |
| `user_name` | Number | 非空 |

<a name="TNb9X"></a>
###### 请求示例
```json
{
	"user_name":"李四",
	"user_password":"654321"
}
```
<a name="QSv69"></a>
###### 成功响应
:::tips
**条件**：请求参数合法<br />**状态码：**`200 OK`<br />**响应示例**：响应会将用户id、用户name返回
:::
```json
  "code": 0,
  "message": "修改用户成功"
}
```
<a name="mdLOn"></a>
##### Ⅵ、删除用户
:::tips

- **URL**：`/users/:id`
- **Method**：`delete`
- **需要登录**：否
- **需要鉴权**：否
:::
<a name="vJ3sD"></a>
###### 请求参数
| 参数 | 类型 | 约束 |
| --- | --- | --- |
| `id` | Number | 非空 |

<a name="UqdJK"></a>
###### 请求示例
```json
/users/1
```
<a name="DkgDL"></a>
###### 成功响应
:::tips
**条件**：请求参数合法<br />**状态码：**`200 OK`<br />**响应示例**：响应会将响应码和响应信息返回
:::
```json
{
"code": 0,
  "message": "删除用户成功"
}
```
<a name="Cen6s"></a>
#### 2）事件接口设计
<a name="sMdlf"></a>
##### Ⅰ、获取所有traffic_event数据

- 请求方式：GET
- 请求URL：/traffic_event
- 请求参数：
| 参数名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| page | 否 | int | 页码 |
| size | 否 | int | 每页数量 |
| keyword | 否 | string | 关键字 |
| status | 否 | string | 事件处理状态 |


- 响应参数：
| 参数名 | 类型 | 说明 |
| --- | --- | --- |
| code | int | 状态码 |
| message | string | 提示信息 |
| total | int | 数据总数 |
| data | array | 数据列表 |


- 响应示例：

```
{
    "code": 0,
    "message": "获取搜索用户成功",
    "total": 10,
    "data": [
        {
            "id": 1,
            "user_id": 1,
            "event_type": "事故",
            "event_describe": "车祸",
            "road_section_id": 1,
            "event_driver": "张三",
            "event_car_number": "鄂A12345",
            "event_handle_status": "未处理"
        },
        {
            "id": 2,
            "user_id": 2,
            "event_type": "拥堵",
            "event_describe": "路口拥堵",
            "road_section_id": 2,
            "event_driver": "李四",
            "event_car_number": "鄂B12345",
            "event_handle_status": "已处理"
        }
    ]
}
```

<a name="o4nRE"></a>
##### Ⅱ、获取单个traffic_event数据

- 请求方式：GET
- 请求URL：/traffic_event/:id
- 请求参数：
| 参数名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| id | 是 | int | 事件ID |


- 响应参数：
| 参数名 | 类型 | 说明 |
| --- | --- | --- |
| code | int | 状态码 |
| data | object | 数据 |


- 响应示例：

```
{
    "code": 0,
    "data    {
        "id": 1,
        "user_id": 1,
        "event_type": "事故",
        "event_describe": "车祸",
        "road_section_id": 1,
        "event_driver": "张三",
        "event_car_number": "鄂A12345",
        "event_handle_status": "未处理"
    }

```
<a name="VQIB2"></a>
##### Ⅲ、创建traffic_event数据

- 请求方式：POST
- 请求URL：/traffic_event
- 请求参数：
| 参数名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| user_id | 是 | int | 用户ID |
| event_type | 是 | string | 事件类型 |
| event_describe | 是 | string | 事件描述 |
| road_section_id | 是 | int | 道路ID |
| event_driver | 是 | string | 驾驶员 |
| event_car_number | 是 | string | 车牌号 |


- 响应参数：
| 参数名 | 类型 | 说明 |
| --- | --- | --- |
| code | int | 状态码 |
| message | string | 提示信息 |
| data | object | 数据 |

- 响应示例：
```
{
"code": 0,
"message": "创建traffic_event成功",
"data": {
"id": 3,
"user_id": 3,
"event_type": "拥堵",
"event_describe": "路段拥堵",
"road_section_id": 3,
"event_driver": "王五",
"event_car_number": "鄂C12345",
"event_handle_status": "未处理"
}
}
```
<a name="dwXm0"></a>
##### Ⅳ、更新traffic_event数据

- 请求方式：PUT
- 请求URL：/traffic_event/:id
- 请求参数：
| 参数名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| id | 是 | int | 事件ID |
| user_id | 否 | int | 用户ID |
| event_type | 否 | string | 事件类型 |
| event_describe | 否 | string | 事件描述 |
| road_section_id | 否 | int | 道路ID |
| event_driver | 否 | string | 驾驶员 |
| event_car_number | 否 | string | 车牌号 |
| event_handle_status | 否 | string | 事件处理状态 |


- 响应参数：
| 参数名 | 类型 | 说明 |
| --- | --- | --- |
| code | int | 状态码 |
| message | string | 提示信息 |
| data | object | 数据 |


- 响应示例：

```
{
    "code": 0,
    "message": "更新traffic_event成功",
    "data": {
        "id": 3,
        "user_id": 3,
        "event_type": "拥堵",
        "event_describe": "路段拥堵",
        "road_section_id": 3,
        "event_driver": "王五",
        "event_car_number": "鄂C12345",
        "event_handle_status": "已处理"
    }
}
```

<a name="EfPZZ"></a>
##### Ⅴ、删除traffic_event数据

- 请求方式：DELETE
- 请求URL：/traffic_event/:id
- 请求参数：
| 参数名 | 必选 | 类型 | 说明 |
| --- | --- | --- | --- |
| id | 是 | int | 事件ID |


- 响应参数：
| 参数名 | 类型 | 说明 |
| --- | --- | --- |
| code | int | 状态码 |
| message | string | 提示信息 |


- 响应示例：

```
{
    "code": 0,
    "message": "删除traffic_event成功"
}
}
```
<a name="wkxxs"></a>
# 四、项目开发报告
<a name="fMj1N"></a>
#### 1）用户模块开发文档
<a name="OnY1Q"></a>
#####  实现目标
用户模块是整个系统的核心模块之一，主要实现用户的注册、登录、权限管理等功能。通过用户模块，可以实现对系统的访问控制，保证系统的安全性和稳定性。
<a name="mIi4G"></a>
#####  实现过程
用户模块的实现主要包括以下几个方面：

- 1. 数据库设计：设计用户表，包括用户ID、用户名、密码、角色、登录状态、删除状态等字段，以及其他相关表的设计，如事件表、公告表等。
- 2. 接口设计：设计用户相关的接口，包括获取分页用户数据、获取单个用户数据、新增用户、修改用户、删除用户等接口。
- 3. 后端实现：使用Node.js，采用express框架，实现用户相关的业务逻辑，包括用户注册、登录、权限管理等功能。
- 4. 前端实现：使用Vue.js框架，实现用户界面的设计和交互，包括用户注册、登录、权限管理等功能。

<a name="eBOsc"></a>
##### 用户公用模块
1登录及登陆状态的流程图<br />![](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1679403504546-4cf7e157-14b7-43d7-8f77-aec8d4905880.jpeg)<br />2、修改密码<br />修改密码页面->输入账号、旧密码、新密码->验证输入信息不为空->使用Ajax发送修改请求->请求成功->显示登录面板<br />![](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1679217744676-b707284f-ccf7-4682-8884-47ca3805c4eb.jpeg)


<a name="WvRWd"></a>
##### 普通用户专有模块
1、用户注册<br />用户注册页面->用户输入注册信息(账号、密码，确认密码)->验证输入信息->发起ajax请求->添加注册信息到数据库->提示注册成功，返回登录页面<br />![](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1679218661181-cdc45009-03c0-42bb-b911-9098302b3b6a.jpeg)<br />、
<a name="vsUwS"></a>
##### 超级管理员专有模块
1、添加交管用户<br />管理员进入添加交管用户页面->输入交管用户的账号信息->验证输入信息(非空,密码一致)->发起ajax请求->将交管账户信息添加到数据库->提示交管用户添加成功<br />![](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1679218643934-899ad68b-8e48-4ab4-85a1-8ffca71703e9.jpeg)<br />2、删除普通用户<br />进入用户管理页面->点击删除用户的按钮>弹框提示是否删除用户->发起ajax请求->删除数据库中该用户的信息->返回用户管理页面<br />![](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1679219215565-23c31caf-dcc1-4d8d-a574-3b24a0a12efc.jpeg)<br />3、修改用户账号和密码<br />进入用户修改页面->在输入框内输入账号和密码->验证输入信息->发起ajax请求将->将修改后的用户信息添加到数据库->提示修改成功->返回修改页面	<br />![](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1679221321396-58bd2f67-7aa3-47b9-a56c-41ef12ecd566.jpeg)
<a name="PNS30"></a>
#### 1）地图模块开发文档
<a name="TKJd4"></a>
#####  实现目标
地图模块是整个系统的重要模块之一，主要实现地图的展示、路况信息的显示、事件的标注等功能。通过地图模块，可以实时了解道路情况，及时处理交通事件，提高交通运输效率。
<a name="pIQtN"></a>
##### 实现过程
地图模块的实现主要包括以下几个方面：

- 1. 地图API选择：选择合适的地图API，如高德地图、百度地图等，根据需求进行定制化开发。
- 2. 路况信息获取：通过调用第三方API或自行采集数据，获取道路的实时路况信息，包括车流量、拥堵情况等。
- 3. 事件标注：根据事件模块提供的数据，将事件标注在地图上，方便用户查看和处理。
- 4. 前端实现：使用Vue.js框架，实现地图界面的设计和交互，包括地图的展示、路况信息的显示、事件的标注等功能。

通过以上步骤，成功实现了地图模块的开发，为整个系统的实现提供了重要的支持。
<a name="rwLNK"></a>
##### 业务流程
![](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1679493048071-5d7bc6a3-262c-48b9-b235-46d825ba2cc1.jpeg)
<a name="Ev7a2"></a>
#### 3）公告模块
<a name="onYZ5"></a>
#####  实现目标
公告模块是整个系统的重要模块之一，主要实现公告的发布、查看、修改、删除等功能。通过公告模块，可以及时发布重要通知，提高信息传递效率。
<a name="uTKuX"></a>
#####  实现过程
公告模块的实现主要包括以下几个方面：

- 1. 数据库设计：设计公告表，包括公告ID、发布用户ID、标题、内容、发布时间、状态等字段，以及其他相关表的设计，如用户表等。
- 2. 接口设计：设计公告相关的接口，包括获取分页公告数据、获取单个公告数据、新增公告、修改公告、删除公告等接口。
- 3. 后端实现：使用Node.js，采用Express框架，实现公告相关的业务逻辑，包括公告发布、查看、修改、删除等功能。
- 4. 前端实现：使用Vue.js框架，实现公告界面的设计和交互，包括公告的发布、查看、修改、删除等功能。

通过以上步骤，成功实现了公告模块的开发
<a name="Sz7i0"></a>
##### 业务流程
![未命名文件 (5).png](https://cdn.nlark.com/yuque/0/2023/png/35006628/1679229866015-4e1c11dc-046b-4a49-9d96-e7f4debd1279.png#averageHue=%23020202&clientId=u34506033-0a04-4&from=paste&height=307&id=ud43054f1&name=%E6%9C%AA%E5%91%BD%E5%90%8D%E6%96%87%E4%BB%B6%20%285%29.png&originHeight=384&originWidth=1103&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=50027&status=done&style=none&taskId=u57fef37f-490a-48e0-b2c6-d94740a2e8c&title=&width=882.4)
<a name="Bp54e"></a>
#### 4）工具箱模块
<a name="X7ZOm"></a>
#####  实现目标
工具箱模块是整个系统的辅助模块之一，主要实现一些实用工具的功能，提高用户体验。
<a name="XHWbE"></a>
#####  实现过程
工具箱模块的实现主要包括：

- 1. 用户测量距离和面积
- 2. 用户对地图进行导出下载
<a name="ZmQMn"></a>
#### 5） 事件模块开发文档
<a name="RYaIP"></a>
#####  实现目标
事件模块是整个系统的核心模块之一，主要实现交通事件的上报、处理、查询等功能。通过事件模块，可以及时处理交通事件，提高交通运输效率。
<a name="T9Pyt"></a>
##### 实现过程
事件模块的实现主要包括以下几个方面：

- 1. 数据库设计：设计事件表，包括事件ID、用户ID、事件类型、事件描述、道路ID、驾驶员、车牌号、事件处理状态等字段，以及其他相关表的设计，如用户表等。
- 2. 接口设计：设计事件相关的接口，包括获取分页事件数据、获取单个事件数据、新增事件、修改事件、删除事件等接口。
- 3. 后端实现：使用Node.js，实现事件相关的业务逻辑，包括事件上报、处理、查询等功能。
- 4. 前端实现：使用Vue.js框架，实现事件界面的设计和交互，包括事件上报、处理、查询等功能。
- 通过以上步骤，成功实现了事件模块的开发，为整个系统的实现提供了重要的支持。
<a name="jzetC"></a>
##### 业务流程
![事件审核流程.jpg](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1680008296164-66f59cf3-f5de-490a-b440-a8039f7e3fb2.jpeg#averageHue=%23fbfaf9&clientId=udc554ca2-bcef-4&from=drop&id=uf2525549&name=%E4%BA%8B%E4%BB%B6%E5%AE%A1%E6%A0%B8%E6%B5%81%E7%A8%8B.jpg&originHeight=1167&originWidth=629&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=66513&status=done&style=none&taskId=u3e1e81c3-5fd4-49c7-b2bd-387ca006e4b&title=)![路况信息（事件） 处理流程.jpg](https://cdn.nlark.com/yuque/0/2023/jpeg/34812272/1680008288892-576ca116-c6e4-4bba-93f0-a2ce40a741fa.jpeg#averageHue=%23fefdfb&clientId=udc554ca2-bcef-4&from=drop&id=uf0d82008&name=%E8%B7%AF%E5%86%B5%E4%BF%A1%E6%81%AF%EF%BC%88%E4%BA%8B%E4%BB%B6%EF%BC%89%20%E5%A4%84%E7%90%86%E6%B5%81%E7%A8%8B.jpg&originHeight=917&originWidth=1586&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=99851&status=done&style=none&taskId=u5719667f-c79b-425d-802b-6148df2988f&title=)
<a name="arcPS"></a>
# 五、项目开发总结

- 1. 图层移除不掉的问题？

图层移除直接移除移除不掉，需要使用map.getLayers().item(图层的index)
- 2. map取不到的问题？

map在使用封装好的useGloabalMap()时只能在异步操作中获取到，在Hooks中使用时，可以将map当做参数传进去。
或者：

由于在app.config.globalProperties上挂载

最佳方法：

使用依赖/注入：
provide() 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。
第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref：
提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。
要注入上层组件提供的数据，需使用 inject() 函数：
如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。

- 3. 画笔移除不了？
使用draw.setActive(false)使画笔失活，从而达到移除画笔的目的。

- 4. popup弹窗在其他画笔激活时也会被调用？

找到问题：在组件卸载时候，未能注销掉地图的点击事件，在卸载的生命周期中注销对应的事件。
一样的图层是可以打组的

 ## 心得 

1. 在依托答辩中精确寻找问题。debugger比一直console.log好用多了。
2. 理清思路再写代码。
3. 代码拆分，逻辑拆分
4. 对于不熟悉的API和技术，需要多多学习，学习时候要写例子，这样才能体会更深。知道的越多，不知道的越多


 ## 踩坑和避雷
- 1. 天地图加载的坑
天地图加载时有t0-t7之间不同的请求地址，本次加载时候t0地址不能使用，于是把url中公共部分抽离出来做了封装，并设置了1-7之间的随机数进行天地图的请求。
- 2. G2plot的坑
G2plot使用时，使用图表示例的代码，别的貌似加载不出来
- 3. 自动导包的坑
使用自动导包之后，script标签首行不能为注释文本，否则会报错