可视化数据大屏de产品系统

某园区/工厂需要在指挥中心部署一套实时监控大屏，要求展示设备状态、实时产能、环境监控和报警数据，并适配指挥中心的超宽拼接屏。

大屏不是普通后台，它的核心在于“炫酷的视觉冲击 + 秒级的数据反馈”。功能划分为：
1. 全局核心指标看板（顶部）：今日总能耗、实时在线设备数、当月总产量、系统告警总数。通常用数字滚动动画 + 光效边框展示。
2. 实时趋势监控区（左侧）：反应釜温度/压力实时折线图、环境温湿度雷达图、设备运行状态分布饼图。
3. 地理位置/空间分布区（中间）：采用 2.5D 地图或 3D 场景，展示设备分布点位、实时数据流热力图、区域产能排行。
4. 实时报警与滚动播报区（右侧）：设备异常实时滚动列表、视频监控画面（RTSP 转 Web）、操作日志滚动播报。
5. 底部流程与排行区：生产工序流程进度条、各班组 OEE（设备综合效率）排名柱状图。

1. 前端架构
• 技术栈：Vue3 / React + TypeScript + Vite + Pinia / Redux + ECharts + DataV / Three.js。
• 大屏自适应方案：使用 transform: scale() 配合 CSS 变量和 resize 监听，一套代码完美适配从 1920x1080 到 4K 甚至异形拼接屏，无需为不同尺寸单独写代码。
• 实时数据流处理：后端通过 WebSocket 高频推送数据，前端封装 useWebSocket Hook，配合数据节流与时间切片，避免每秒重绘导致的浏览器卡顿。
2. AI 赋能全栈
• Mock 数据快速生成：利用 AI 工具（Cursor / Copilot）根据大屏的图表结构，快速生成 100 条逼真的模拟数据（温度波动、告警日志），让 Demo 瞬间“活”起来。
• 接口快速搭建：借助 AI 在半小时内用 Node.js 写出几个 WebSocket 推送接口和 RESTful API，独立打通数据链路。
• 图表配置生成：ECharts 配置项极其繁琐，直接让 AI 生成复杂的渐变色柱状图、3D 地图配置，省去大量查文档时间。