网关控制系统

项目概述

基于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

注意事项

1. 使用MQTT协议需要配置正确的broker地址
2. 移动端适配基于rem布局，设计稿宽度为750px
3. Android平台开发需要配置好Java和Android开发环境
4. 音频处理功能依赖Web Audio API

相关文档

• Vue 3文档
• Capacitor文档
• MQTT.js文档