智能门禁管理系统_系统开发案例-程序员客栈

技术信息

语言技术
Java、Vue、TypeScript、Antd系统类型
Web行业分类
智能硬件

作品详情

行业场景

智慧管理平台是一套面向智慧园区、停车场及门禁场景的综合管理系统，融合**门禁管理**与**车辆停车管理**两大核心业务。

功能介绍

### 1. 门禁管理

- **项目与人员**：项目/项目点管理、人员信息维护、用户组与角色分配
- **权限与设备**：门禁读头规则、时间规则、节假日配置、设备管理及远程控制
- **记录与审批**：识别记录、进出记录、学生请假、访客申请与审批流程
- **系统管理**：用户、角色、菜单、数据同步、系统设置

### 2. 车辆停车管理

- **在线监控**：岗亭监控、主通道监控、全部通道监控，支持 WebSocket 实时数据、摄像机图片流、手动放行、开闸关闸等
- **基础管理**：通道管理、车辆注册、黑名单管理
- **查询统计**：停车时长、车辆记录、异常日志、用户操作日志、特殊车辆、人工起杆、在场车辆等查询
- **收费与参数**：收费规则、停车参数、车辆数据报表、收费报表
- **其他**：闸机日志、相机列表等

### 3. 通用能力

- **多主题**：深色/浅色/浅绿/浅紫主题切换，支持跟随系统
- **国际化**：中英文切换
- **响应式**：适配 PC 与移动端
- **实时通信**：WebSocket 按前端访问地址动态获取，部署时无需修改配置

项目实现

### 1. 技术栈

- **前端**：Vue 3.4、TypeScript 5.3、Vite 5、Pinia、Vue Router、VueUse
- **UI**：Ant Design Vue 4、UnoCSS、Sass
- **图表**：ECharts 5
- **其他**：Axios、dayjs、xlsx、lodash-es

### 2. 架构与工程化

- **模块划分**：按业务拆分为 access（门禁）、vehicle（车辆）、system（系统）、auth（认证）等模块
- **统一请求**：`src/utils/request.ts`（Axios）用于通用接口，`src/api/request.ts`（Fetch）用于认证等接口，含超时、错误兜底、友好提示
- **WebSocket**：`useWebSocketConfig` 按 `VITE_WS_URL` 或 `window.location` 生成地址，固定 8096 端口
- **环境变量**：开发/生产分别配置 API 地址、WebSocket 等，支持部署时零修改使用前端访问地址

### 3. 性能与体验

- 路由与组件懒加载、表格虚拟滚动、请求去重
- 登录与接口错误提示优化：服务不可用、网络异常、请求超时等统一友好提示

---

## 三、总结

SmartGate Pro 覆盖门禁与停车两类场景，采用 Vue 3 + TypeScript + Vite 构建，通过模块化、统一请求与 WebSocket 配置，实现前后端分离下的高效开发与部署。