行业与业务背景
能源与园区数字化：大型园区、工业企业正推进能耗可视化与数字孪生，需将复杂的设备、运行数据以三维方式呈现，便于管理者快速洞察。
能源交易与结算透明化：随着多能互补、市场化交易推进，电热等多种能源在交易所的结算、报表对账需求日益细化，需要统一平台展示。
解决的产品问题
“看不到、说不清”：传统二维报表难以直观呈现园区设备，项目通过 Babylon.js 3D 场景 + 图表联动，让管理者可视化感知空间关系与运行状态。
数据分散、难统一：能耗监控、交易报表、实时告警原本散落在多个系统，通过 Vue + Pinia 构建统一前端，整合多源数据并提供统一交互体验。
结算与报表复杂：中文文件名报表下载、多维度统计等需求在传统实现中易出错，此项目封装下载流程、时间筛选等逻辑，减少人工操作负担。
通过这套数字化展示与监控系统，园区管理者能在一个界面完成场景浏览、指标分析、报表导出，大幅提升运营效率与沟通决策及时性。
三维园区展示：通过 Babylon.js 渲染园区模型，支持相机飞行、不同视角切换以及场景灯光预设，直观展示建筑与设备位置。
能耗监控：ThermalMode 模块提供左右卡片与图表，展示各重要设备/区域的实时温度、负荷、收益等关键指标。
交易与结算：powerTrading、powerSettlement 等页面涵盖交易日报、结算详情、报表下载等功能，支持时间维度查询、导出及多维度统计。
设备与告警管理：LeftNavPanel、RightKpiPanel 等组件展示设备列表、运行状态、KPI 指标，并结合实时数据（real_data.ts）实现动态刷新。
技术栈：Vue 3 + Pinia 作为前端框架和状态管理，TypeScript 保证类型安全；Babylon.js 负责 3D 场景；ECharts/自定义 Canvas 组件用于图表；Axios 封装 request.js 处理 API。
架构设计：src/babylon 按功能拆分（SceneController、SkyboxManager、LightingController 等），src/views 以业务页面划分，src/components 承担通用 UI 组件，src/store 管理业务数据。
实现亮点：
SceneController 组件化：集中管理引擎、相机、灯光、性能优化与事件分发，便于扩展特殊视图。
SkyboxManager 分层实现：支持 EnvironmentHelper、手动创建、降级简单天空盒，针对 HDR 纹理、无限距离、透明度做了充分封装。
模型缓存与加载优化：引入 ModelCacheManager、CachedModelLoader，避免重复加载 glTF 模型，提升首次渲染效率。
灵活的数据拉取：Pinia store 集中封装 REST API 调用，区分实时数据与静态配置，便于在多个页面复用。
实现难点：
大规模模型渲染性能：需针对 Babylon.js 调整相机裁剪、渲染层级、GlowLayer、ShadowGenerator 等参数，同时处理天空盒与透明度、无限距离等细节。
多视图与交互协同：3D 场景操作、图表联动、浮动标签等，需要在 Vue 与 Babylon 之间建立桥梁，确保状态同步与事件响应。
报表下载与多格式适配：处理 Content-Disposition 中文文件名、Blob 下载、报表时间维度切换等，保证用户侧体验。
评论