120 lines
3.0 KiB
Markdown
120 lines
3.0 KiB
Markdown
# 机器人大屏监控系统
|
||
|
||
## 项目简介
|
||
|
||
本项目是一个基于 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修改逻辑 找不到流的时候 页面显示空状态 也进行轮播 而不是找不到匹配的视角或视角没有流，找第一个有效视角 |