# 机器人大屏监控系统

## 项目简介

本项目是一个基于 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 插件

## 样式规范

- 主要颜色：
  - 背景色：rgba(0, 21, 31, 0.3)
  - 边框色：rgba(0, 206, 234, 0.7)
  - 文字色：#B9E8FF
  - 告警红色：#F33F3F
  - 正常绿色：#00FF84

- 布局：
  - 采用 flex 和 grid 布局
  - 响应式设计，适配不同尺寸屏幕
  - 统一的间距和边框圆角

## 更新日志

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



{
  "clientip": "{\"osName\":\"Windows\",\"osVersion\":\"10\",\"browserName\":\"Chrome\",\"browserVersion\":\"137.0.0.0\",\"SDK_VERSION\":\"1.0.9\"}",
  "sdp": "v=0\r\no=...", // SDP内容
  "streamurl": "webrtc://qvs-live.thirdmonitor.concoai.com:447/2xenzwqy2ppcl/31011500991180041301_34020000001320000001"
}

计划修改：
CarouselVideoPlayer修改逻辑  找不到流的时候 页面显示空状态 也进行轮播 而不是找不到匹配的视角或视角没有流，找第一个有效视角