← 返回项目库

MF-StationMonitor｜变电站数字孪生监控大屏

MF-StationMonitor 是一个基于 Vue 3、Three.js 和 ECharts 的变电站数字孪生监控大屏案例。

项目以三维变电站场景为中心，组合设备规模、故障对比、负荷电流趋势、系统损耗、视频监控演示和预警列表等模块，并提供告警模拟与漫游巡检交互。本次交付验证的是本地静态构建、真实浏览器渲染和中文界面，不延伸宣称已接入真实传感器、视频流或生产监控后端。

真实界面

项目截图

共 6 张

设备规模
取消告警
取消巡检
故障对比
主变电负荷电流变化
系统损耗监测

Capabilities

核心功能

✓变电站三维数字孪生场景与设备标签
✓设备规模与分类统计面板
✓故障对比和主变电负荷电流趋势图
✓系统损耗监测与预警情况列表
✓本地演示视频监控画面与状态信息
✓设备告警模拟和漫游巡检交互

适用场景

展示变电站设备结构和运行指标的大屏原型
评估数字孪生监控、告警和巡检信息架构
以 Vue 3、Three.js 与 ECharts 为基础进行前端二次开发

适合谁

需要评估变电站数字孪生可视化、监控大屏信息架构或进行 Vue/Three.js 二次开发的开发者、运维团队和学习者。

商业化思路

开源源码学习研究、前端定制和数字孪生大屏二次开发服务；商业使用、再分发和衍生作品需先取得权利人授权。

你会拿到什么

  • ✓Vue 3/Vite 源码、三维模型资源和图表组件
  • ✓中文化改动、构建说明、研究用途披露和真实运行截图证据

部署流程

  1. 1在项目目录执行 npm ci --legacy-peer-deps --no-audit --no-fund
  2. 2执行 npm run build，再使用静态文件服务器提供 docs 目录

真实验证结果

已通过 6 个真实运行中文界面、HTTP、可见正文、控制台、坏图和横向溢出质量门。

部署前须知

视频监控区域是本地 CSS 演示画面，不是实时视频流；图表、预警和设备数据是前端演示数据；上游没有明确许可证文件，源码包仅作学习研究交付。

部署难度

简单

最低配置

构建需要 Node.js 与 npm；构建完成后可使用任意静态文件服务器提供生成的 docs 目录。三维模型和图表属于本地演示数据，不需要独立数据库。

开源许可证

上游未声明许可证

最后验证

2026-08-28

技术栈

Vue 3ViteTypeScriptThree.jsEChartsGSAP

授权说明

上游仓库未提供明确许可证文件；交付包已内置醒目的研究用途与权利声明，仅限学习研究，超出范围需另行取得权利人授权。

Release notes

版本记录

1 个已发布版本

vcn-6a1674aef58f 当前推荐

修复 Vite/Three.js 类型兼容、同步 npm lockfile、补齐中文页面标记和时间显示，并将视频面板从关闭图标改为本地监控演示画面；重新完成构建与 6 个状态截图验证。

部署要求：Node.js 22 与 npm 11 已通过验证；首次安装因上游 vite-plugin-stylelint peer 约束使用 npm ci --legacy-peer-deps，构建使用 npm run build。

已知问题：本次只证明本地前端产品界面和演示数据可运行，不包含真实视频、传感器、数据库或生产后端接入；使用前请核实上游许可证和第三方资源权利。

登录后领取