# 网关控制系统

## 项目概述
基于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)