2.7 KiB
2.7 KiB
网关控制系统
项目概述
基于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配置
安装与运行
开发环境
# 安装依赖
npm install
# 启动开发服务器
npm run serve
生产构建
# 构建生产版本
npm run build
# 构建Android应用
npx cap add android
npx cap copy android
npx cap open android
代码检查
npm run lint
注意事项
- 使用MQTT协议需要配置正确的broker地址
- 移动端适配基于rem布局，设计稿宽度为750px
- Android平台开发需要配置好Java和Android开发环境
- 音频处理功能依赖Web Audio API