chenxx
1 个月前
共有 2 个文件被更改，包括 4204 次插入 和 1599 次删除
合并视图
Diff 选项
-
+225 -3cy_large_screen/README.md
-
+3979 -1596cy_large_screen/src/App.vue
+ 225
- 3
cy_large_screen/README.md
查看文件
| @@ -1,5 +1,227 @@ | |||||
| # Vue 3 + TypeScript + Vite | |||||
| # 大屏展示系统 (cy_large_screen) - 优化版本 | |||||
| This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. | |||||
| ## 项目简介 | |||||
| 这是一个基于 Vue 3 + TypeScript + Vite 开发的大屏数据展示系统，主要用于实时监控和展示福泉公司1号火车采样机的运行状态。系统支持 WebSocket 实时数据推送，能够动态更新大屏内容。 | |||||
| Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup). | |||||
| ## 🚀 最新优化内容 | |||||
| ### 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 组件库支持 | |||||
| - 实现自动重连机制 | |||||
| ## 联系方式 | |||||
| 如有问题或建议，请联系开发团队。 | |||||