# 大屏展示系统 (cy_large_screen) - 优化版本

## 项目简介
这是一个基于 Vue 3 + TypeScript + Vite 开发的大屏数据展示系统，主要用于实时监控和展示福泉公司1号火车采样机的运行状态。系统支持 WebSocket 实时数据推送，能够动态更新大屏内容。

## 🚀 最新优化内容

### 1. WebSocket 连接优化
- **智能重连机制**: 限制重连次数，避免无限重连
- **心跳检测**: 定期发送心跳包，保持连接活跃
- **连接状态监控**: 实时显示连接状态
- **错误处理**: 完善的错误处理和日志记录

### 2. API 请求优化
- **请求缓存**: 5秒缓存机制，减少重复请求
- **请求超时**: 10秒超时保护
- **重试机制**: 自动重试失败的请求
- **并行请求**: 使用 Promise.allSettled 并行执行多个API调用

### 3. 错误处理机制
- **统一错误处理**: 集中管理所有错误
- **用户友好提示**: 清晰的错误信息显示
- **错误日志**: 记录错误历史，便于调试
- **自动恢复**: 智能的错误恢复机制

### 4. 性能监控
- **实时性能指标**: API请求次数、响应时间、缓存命中率等
- **调试面板**: 可视化调试界面
- **性能分析**: 详细的性能数据统计
- **内存管理**: 自动清理过期缓存和定时器

### 5. 数据流优化
- **智能轮询**: 根据连接状态调整轮询频率
- **设备状态映射**: 使用Map提高数据查找性能
- **并行数据加载**: 初始化时并行加载所有数据
- **资源清理**: 组件卸载时完整清理所有资源

## 技术栈
- **前端框架**: Vue 3 (Composition API)
- **开发语言**: TypeScript
- **构建工具**: Vite
- **UI组件库**: Element Plus
- **HTTP客户端**: Axios
- **时间处理**: Day.js
- **实时通信**: WebSocket

## 项目结构
```
cy_large_screen/
├── src/
│   ├── App.vue          # 主应用组件（已优化）
│   ├── components/      # 组件目录
│   └── main.ts         # 应用入口
├── index.html          # HTML模板
├── package.json        # 项目配置
└── README.md          # 项目说明
```

## 核心功能

### 1. 实时设备监控
- **斗提机** - 物料提升设备
- **二级皮带** - 输送设备  
- **螺旋输送机** - 物料输送
- **初级给料皮带** - 给料控制
- **破碎机** - 物料破碎
- **缩分器** - 样品缩分
- **采样头** - 采样控制
- **封装机** - 样品封装

### 2. 数据展示模块
- **运行日志** - 设备运行状态记录
- **操作记录** - 人工操作历史
- **报警信息** - 设备异常报警
- **采样桶信息** - 当前采样批次详情

### 3. 实时通信
- **WebSocket** - 实时数据推送
- **HTTP API** - 数据查询和控制指令
- **自动重连** - 网络断开自动恢复
- **心跳检测** - 保持连接活跃

### 4. 控制功能
- 设备启停控制
- 采样模式切换
- 报警解除操作

## 使用方法

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 配置说明

### WebSocket 配置
- 修改 `src/App.vue` 中的 `url` 变量来更改服务器地址
- WebSocket 连接会自动根据 HTTP URL 生成对应的 WebSocket URL
- 支持最大重连次数限制和心跳检测

### API 接口配置
- 所有 HTTP 请求都基于 `url` 变量配置的服务器地址
- 支持动态切换服务器地址
- 内置请求缓存和重试机制

## 调试功能

### 调试面板
- 点击右下角的"开启调试"按钮
- 查看实时连接状态和性能指标
- 监控API请求和WebSocket消息
- 查看错误日志和系统状态

### 调试控制
- **导出信息**: 将调试信息输出到控制台
- **重置指标**: 重置性能统计数据
- **清除错误**: 清除错误历史记录
- **刷新数据**: 手动刷新所有数据
- **重连WS**: 手动重连WebSocket

## 性能优化

### 缓存机制
- API请求结果缓存5秒
- 自动清理过期缓存
- 缓存命中率统计

### 智能轮询
- WebSocket连接正常时：60秒轮询一次
- WebSocket断开时：30秒轮询一次
- 连续失败3次后停止轮询

### 资源管理
- 组件卸载时完整清理所有资源
- 自动清理定时器和WebSocket连接
- 防止内存泄漏

## 错误处理

### 统一错误处理
- 所有错误都会记录到错误日志
- 用户友好的错误提示
- 自动重试机制

### 连接状态监控
- WebSocket连接状态实时显示
- API连接状态监控
- 最后更新时间记录

## 开发指南

### 添加新组件
1. 在 `src/components/` 目录下创建新的 Vue 组件
2. 在 `App.vue` 中引入并使用组件
3. 确保组件支持响应式数据更新

### 处理实时数据
1. WebSocket 消息会自动触发数据更新
2. 使用 Vue 3 的响应式系统 (`ref`, `reactive`) 管理状态
3. 监听数据变化并更新 UI

### 错误处理
- 使用统一的 `handleError` 函数处理错误
- 使用 `handleSuccess` 函数处理成功操作
- 错误会自动记录到错误日志

## 注意事项
- 确保服务器 WebSocket 服务正常运行
- 大屏展示建议使用全屏模式
- 定期检查网络连接状态
- 生产环境建议配置 HTTPS/WSS 安全连接
- 使用调试面板监控系统状态

## 故障排除

### WebSocket 连接失败
1. 检查服务器地址是否正确
2. 确认服务器 WebSocket 服务是否启动
3. 检查网络连接和防火墙设置
4. 查看调试面板中的连接状态

### 数据不更新
1. 检查 WebSocket 连接状态
2. 查看浏览器控制台错误信息
3. 确认服务器数据推送是否正常
4. 使用调试面板查看API请求状态

### 构建失败
1. 检查 TypeScript 类型错误
2. 确认所有依赖已正确安装
3. 使用 `npm run build:no-check` 跳过类型检查

## 更新日志

### v2.0.0 (最新优化版本)
- ✅ 优化 WebSocket 连接和消息处理逻辑
- ✅ 添加 API 请求缓存和重试机制
- ✅ 改进错误处理和用户反馈机制
- ✅ 优化数据流和状态管理
- ✅ 添加性能监控和调试功能
- ✅ 智能轮询机制
- ✅ 资源管理和内存优化

### v1.0.0 (初始版本)
- 基于 Vue 3 + TypeScript + Vite 的大屏展示系统
- 集成 WebSocket 实时通信功能
- 添加 Element Plus UI 组件库支持
- 实现自动重连机制

## 联系方式
如有问题或建议，请联系开发团队。