86 lines
2.7 KiB
Markdown
86 lines
2.7 KiB
Markdown
# 网关控制系统
|
||
|
||
## 项目概述
|
||
基于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
|
||
|
||
## 项目结构
|
||
```
|
||
├── 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配置
|
||
```
|
||
|
||
## 安装与运行
|
||
### 开发环境
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run serve
|
||
```
|
||
|
||
### 生产构建
|
||
```bash
|
||
# 构建生产版本
|
||
npm run build
|
||
|
||
# 构建Android应用
|
||
npx cap add android
|
||
npx cap copy android
|
||
npx cap open android
|
||
```
|
||
|
||
### 代码检查
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
## 注意事项
|
||
1. 使用MQTT协议需要配置正确的broker地址
|
||
2. 移动端适配基于rem布局，设计稿宽度为750px
|
||
3. Android平台开发需要配置好Java和Android开发环境
|
||
4. 音频处理功能依赖Web Audio API
|
||
|
||
## 相关文档
|
||
- [Vue 3文档](https://v3.vuejs.org/)
|
||
- [Capacitor文档](https://capacitorjs.com/)
|
||
- [MQTT.js文档](https://github.com/mqttjs/MQTT.js) |