项目名称:动环3.0
技术栈: Vue 2 · Element-UI · ECharts · Avue · WebSocket · iframe postMessage · Meta2D · Three.js · Axios
项目描述:
面向工业/楼宇场景的 IoT 设备实时监控与配置平台。系统分为两端:
前台(em-web):设备状态实时展示、2.5D/3D 可视化大屏、数据分析报表
后台(manage):设备管理、视图布局配置、报表配置、系统管理
两端通过 iframe + postMessage 深度联调,实现后台"所见即所得"的前台视图配置预览。
核心工作:
① 前后台 iframe 联调架构
设计并实现 PING/PONG 握手 → INIT_CONFIG 配置下发 → IFRAME_READY 回调的完整通信协议
后台通过 iframe 嵌入前台,支持实时预览布局配置效果(控制顶部栏/左侧菜单显隐、网点切换、配置会话管理)
前台嵌入后台报表页面,实现跨 iframe 自动登录、CSS 主题变量同步注入
② 实时数据与 WebSocket
封装 WebSocketClient(心跳检测 + 断线重连),管理多网点连接状态
实现配置模式与正常模式下 WebSocket 的初始化、刷新、网点切换完整生命周期
③ 2.5D 可视化元件库
基于 Meta2D 构建独立元件库工程(em-pallet),打包产物同步供前后台引用
实现设备拓扑图可视化配置与动态状态渲染
④ 3D 场景展示
集成 Three.js(swzn-three 组件),实现三维设备场景展示
规范 dispose 销毁生命周期,防止内存泄漏
⑤ 报表系统(后台 manage)
开发多类型数据报表(平均风速、环境监测等),支持条件筛选、分页、导出
报表详情页支持测点数据多维度展示