2025-06-18 10:19:38 +08:00
|
|
|
|
# 网关控制系统
|
2024-11-13 11:26:59 +08:00
|
|
|
|
|
2025-06-18 10:19:38 +08:00
|
|
|
|
## 项目概述
|
|
|
|
|
基于Vue 3开发的网关控制系统,提供车辆控制、LED屏幕管理、音频处理等功能,支持移动端适配。项目使用Capacitor框架支持Android平台。
|
|
|
|
|
|
|
|
|
|
## 主要功能
|
|
|
|
|
- 🚗 车辆远程控制 - 通过MQTT协议控制车辆运动
|
|
|
|
|
- 🚧 锥桶设备管理 - 控制锥桶设备的部署与回收
|
|
|
|
|
- 🔊 音频播放与处理 - 支持音频播放和音频处理功能
|
|
|
|
|
- ⚠️ 预警系统 - 提供安全预警功能
|
|
|
|
|
- 🌐 网关设置 - 系统网关配置管理
|
|
|
|
|
- 🖥️ LED屏幕控制 - 远程控制LED屏幕显示内容
|
|
|
|
|
- 🚘 车牌识别 - 车辆识别功能
|
|
|
|
|
|
|
|
|
|
## 技术栈
|
|
|
|
|
- **核心框架**: Vue 3 + Vue Router 4 + Vuex 4
|
|
|
|
|
- **UI组件库**: Element Plus + Vant
|
|
|
|
|
- **通信协议**: MQTT (mqtt.js)
|
|
|
|
|
- **HTTP请求**: axios
|
|
|
|
|
- **移动端适配**: amfe-flexible + postcss-pxtorem
|
|
|
|
|
- **音频处理**: lamejs
|
|
|
|
|
- **摇杆控制**: nipplejs
|
|
|
|
|
- **调试工具**: vconsole
|
|
|
|
|
- **移动端支持**: Capacitor
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
2024-11-13 11:26:59 +08:00
|
|
|
|
```
|
2025-06-18 10:19:38 +08:00
|
|
|
|
├── android/ # Android平台代码
|
|
|
|
|
├── public/ # 静态资源
|
|
|
|
|
│ ├── audio-processor.js # 音频处理器
|
|
|
|
|
│ └── web/ # Web相关资源
|
|
|
|
|
├── src/
|
|
|
|
|
│ ├── api/ # API接口
|
|
|
|
|
│ │ ├── ledScreen.js # LED屏幕控制
|
|
|
|
|
│ │ └── ledScreenJsonFormat.js
|
|
|
|
|
│ ├── assets/ # 静态资源
|
|
|
|
|
│ ├── components/ # 公共组件
|
|
|
|
|
│ │ ├── MQTT/ # MQTT通信组件
|
|
|
|
|
│ │ └── rocker.vue # 摇杆控制组件
|
|
|
|
|
│ ├── router/ # 路由配置
|
|
|
|
|
│ ├── store/ # Vuex状态管理
|
|
|
|
|
│ └── views/ # 页面视图
|
|
|
|
|
│ ├── CarControl.vue # 车辆控制
|
|
|
|
|
│ ├── ConeControl.vue # 锥桶控制
|
|
|
|
|
│ ├── AudioPlay.vue # 音频播放
|
|
|
|
|
│ └── gateway/ # 网关设置
|
|
|
|
|
├── package.json # 项目依赖
|
|
|
|
|
└── vue.config.js # Vue配置
|
2024-11-13 11:26:59 +08:00
|
|
|
|
```
|
|
|
|
|
|
2025-06-18 10:19:38 +08:00
|
|
|
|
## 安装与运行
|
|
|
|
|
### 开发环境
|
|
|
|
|
```bash
|
|
|
|
|
# 安装依赖
|
|
|
|
|
npm install
|
|
|
|
|
|
|
|
|
|
# 启动开发服务器
|
2024-11-13 11:26:59 +08:00
|
|
|
|
npm run serve
|
|
|
|
|
```
|
|
|
|
|
|
2025-06-18 10:19:38 +08:00
|
|
|
|
### 生产构建
|
|
|
|
|
```bash
|
|
|
|
|
# 构建生产版本
|
2024-11-13 11:26:59 +08:00
|
|
|
|
npm run build
|
|
|
|
|
|
2025-06-18 10:19:38 +08:00
|
|
|
|
# 构建Android应用
|
|
|
|
|
npx cap add android
|
|
|
|
|
npx cap copy android
|
|
|
|
|
npx cap open android
|
2024-11-13 11:26:59 +08:00
|
|
|
|
```
|
2025-06-18 10:19:38 +08:00
|
|
|
|
|
|
|
|
|
### 代码检查
|
|
|
|
|
```bash
|
2024-11-13 11:26:59 +08:00
|
|
|
|
npm run lint
|
|
|
|
|
```
|
|
|
|
|
|
2025-06-18 10:19:38 +08:00
|
|
|
|
## 注意事项
|
|
|
|
|
1. 使用MQTT协议需要配置正确的broker地址
|
|
|
|
|
2. 移动端适配基于rem布局,设计稿宽度为750px
|
|
|
|
|
3. Android平台开发需要配置好Java和Android开发环境
|
|
|
|
|
4. 音频处理功能依赖Web Audio API
|
2024-11-13 11:26:59 +08:00
|
|
|
|
|
2025-06-18 10:19:38 +08:00
|
|
|
|
## 相关文档
|
|
|
|
|
- [Vue 3文档](https://v3.vuejs.org/)
|
|
|
|
|
- [Capacitor文档](https://capacitorjs.com/)
|
|
|
|
|
- [MQTT.js文档](https://github.com/mqttjs/MQTT.js)
|