机器人大屏监控系统

项目简介

本项目是一个基于 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. 安装依赖

npm install

2. 开发环境运行

npm run dev

3. 生产环境构建

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修改逻辑 找不到流的时候 页面显示空状态 也进行轮播 而不是找不到匹配的视角或视角没有流，找第一个有效视角