完全开源-支持二开-可做毕业答辩-全源码提供-能源管理大屏系统
一个面向制造业园区的能耗监控可视化大屏，基于 Vue 3 构建。
项目背景
制造业园区长期面临几个痛点：能耗数据分散、人工统计效率低、设备状态不透明、告警响应滞后。能源管理大屏系统正是为了解决这些问题而设计的可视化方案，目标是覆盖"总览监控 → 产线详情 → 设备管理 → 告警处理"的完整业务闭环。
适用场景包括：工厂园区、制造业车间、能耗监控中心、智慧园区等。
技术选型
| 层级 | 技术栈 |
|---|---|
| 前端框架 | Vue 3 + Composition API |
| 路由 | Vue Router 4 |
| 状态管理 | ref / computed (Vue 内置) |
| 构建工具 | Vite |
| 图表 | ECharts |
| 样式 | Tailwind CSS + UnoCSS |
| UI 组件 | Element Plus |
| 语言 | TypeScript |
功能全景
L1 厂区总览
四大 KPI 卡片：今日总用电量、当前总功率、今日燃气消耗、设备在线率。每个卡片展示刷新频率和数据完整性状态。
2.5D 厂区拓扑图：A~F 六个产线分区，同屏展示各区功率、在线设备数。点击产线卡片可跳转产线详情。
配电室监控：7 个变压器房实时状态，包括功率和电流。
告警广播条：高优先级告警顶部滚动展示，支持未处理/已处理状态过滤。
空压站、燃气系统监控面板。
L2 产线详情
工艺组态图：SVG 绘制设备流程，16 台压铸机节点状态可视化。
区域 KPI：当日用电、当前功率、在线设备、今日告警。
功率趋势图：1 小时历史曲线（ECharts）。
设备节点：点击设备卡片弹出详情抽屉。
区域告警 TOP5：按等级筛选。
L3 设备详情
抽屉式侧边栏，展示设备参数、运行状态、网关信息。
支持跳转其他产线。
项目结构
energy-screen/src/
├── views/
│ ├── ScreenL1Overview.vue # 厂区总览
│ └── ScreenL2Area.vue # 产线详情
├── components/
│ └── ScreenL3DeviceDrawer.vue # 设备抽屉
├── App.vue
├── main.ts
└── router.ts设计亮点
分层刷新策略：KPI 卡片 10 秒、设备状态 1 分钟、趋势图 30 秒，避免页面卡顿。
分级告警机制：高优先级顶部滚动条，中低优先级归入面板，已处理/未处理分离。
数据健康度检测：每个 KPI 卡片右下角显示「完整」「部分缺失 XX%」，接口超时自动降级。
响应式适配：支持 1080P / 4K 自动适配，全屏展示模式。
TypeScript 类型约束：完整类型定义，编译期发现错误。
深色主题护眼：统一深色配色方案，适合大屏长时间查看。
二次开发友好：组件粒度细化到 KPI 卡片、设备节点、趋势图，可按需拆改。
其他
演示地址：http://energy.hei-ai.com/
源码下载： https://srcs.hei-ai.com/287.html
本项目为能源管理可视化的一次实践探索，欢迎交流讨论。