# 机器人大屏监控系统

## 项目简介

本项目是一个基于 Vue3 开发的机器人监控大屏系统，用于实时监控和管理多种类型的机器人设备。系统提供了直观的数据可视化界面，支持实时状态监控、告警管理、视频监控等功能。

## 主要功能

### 1. 机器人管理
- 机器人状态实时监控（在线、离线、故障）
- 电量监控和管理
- 分类展示（室外巡检、物流运输、应急救援）
- 支持搜索和筛选功能

### 2. 告警管理
- 实时告警显示
- 告警事件统计
- 告警详情查看
- 告警处理流程管理

### 3. 视频监控
- 多路视频监控
- 支持多视角切换
- 实时监控厂区各个区域
- 摄像头分区管理（厂区大门、生产车间、仓库区域、室外区域）

### 4. 数据统计
- 机器人总数统计
- 在线/离线数量统计
- 故障数量统计
- 告警事件统计

## 技术栈

- 前端框架：Vue 3
- 构建工具：Vite
- UI组件：自定义组件
- 状态管理：Vue Composition API
- 样式处理：Scoped CSS

## 项目结构

```
src/
├── assets/        # 静态资源
├── components/    # 组件
│   ├── common/    # 通用组件
│   ├── detail/    # 详情组件
│   ├── dialog/    # 弹窗组件
│   └── ...
├── views/         # 页面
│   ├── Home.vue   # 首页
│   └── RobotDetail.vue # 机器人详情
└── ...
```

## 主要组件说明

- `TopHeader`: 顶部导航组件
- `RobotStatusList`: 机器人状态列表组件
- `AlarmStatistics`: 告警统计组件
- `LatestAlarms`: 最新告警组件
- `BatteryIndicator`: 电量指示器组件
- `CustomSelect`: 自定义下拉选择组件

## 安装和运行

1. 安装依赖
```bash
npm install
```

2. 开发环境运行
```bash
npm run dev
```

3. 生产环境构建
```bash
npm run build
```

## 注意事项

1. 确保开发环境 Node.js 版本 >= 14
2. 项目使用 Vue 3 Composition API，需要相应的开发工具支持
3. 建议使用 VSCode 进行开发，并安装 Volar 插件


## 更新日志

### v1.0.0
- 初始版本发布
- 实现基础监控功能
- 完成告警管理系统
- 支持多路视频监控