# 数字孪生 Demo

**Repository Path**: codexyuue/ruoyi

## Basic Information

- **Project Name**: 数字孪生 Demo
- **Description**: 一个面向燃气行业的三维数字孪生 Demo
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2026-07-30
- **Last Updated**: 2026-09-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智慧燃气数字孪生 · 冀中十县管网

> 一个面向燃气行业的三维数字孪生 Demo。  
> 主题：**管网/阀门/调压站三维可视 + 告警监控 + 爆管分析 + 管线流动效果**。

> 项目以 [RuoYi-Vue3](https://gitee.com/y_project/RuoYi-Vue) 为前端骨架搭建，核心业务代码集中在 `src/views/demo/` 与 `src/utils/mapUtils/`。

---

## 在线演示

🔗 **http://106.52.5.135/#/demo**

> 部署在自有云服务器上，已配置 nginx history fallback，无需登录可直接访问。  
> Demo 页路由使用哈希模式（`#/demo`），刷新不丢失。

---

## 演示视频

👉 **https://www.bilibili.com/video/BV1X3gW6EEey/**

> 约 90 秒演示，涵盖：三维管网加载 → 搜索定位 → 设备详情 → 告警监控 → 爆管分析 → 图层管理

功能逐帧说明：

1. 进入三维管网 → 加载场站围墙、3D Tiles、管线与设备
2. 在搜索框输入"调压站"，飞行定位到目标站点
3. 点击设备 → 弹出"基本信息 + 维保信息"面板
4. 右上角告警红点 → 触发闪烁定位 → 飞行到告警点
5. 爆管分析 → 选择一段管线 → 自动标出上游阀门 + 红色扩散圈 + 分析报告
6. 图层管理 → 切换管线/设备可见性

---

## 业务场景（亮点功能）

### 1. 三维管网展示（必须）
- 围墙 + 底面 + 3D Tiles 场站模型
- 高压主干 / 中压 A/B / 低压 1–5 八条管线分级显示
- 调压站（分输站、末站）、阀室（阀室、阀井、截断阀室）图标化点位
- 点击设备 → 双 Tab 弹窗（基本信息 + 维保信息）
- 搜索框支持按管线名 / 编号模糊搜索 + 飞行定位

### 2. 告警与应急分析（必须）
- 模拟站点压力 / 流量 / 温度异常告警
- 右上角告警面板实时列出告警（带红 badge）
- 设备红色闪烁（亮红↔暗红 500ms 切换，alpha=1 避免深度缓冲丢失）
- 点击告警 → 自动飞行到对应设备

### 3. 管线流动效果 + 爆管分析（必须）
- 自定义 `PolylineFlowArrow` 材质：40m 一循环，前 20m 完整显示箭头，后 20m 留空（箭头不被拉伸）
- GLB 管道模型走中心线最近点投影 CustomShader（不依赖 GLB 自带 UV，绕开贝塞尔弯管 UV 不连续的问题）
- 爆管分析：选管线 → 高亮 → 上游阀门定位 → 火焰粒子 + 红色扩散圈 → 报告面板输出受影响站点 + 关阀方案

---

## 技术栈

| 模块 | 选型 |
|------|------|
| 前端框架 | Vue 3 + Vite 6 |
| UI 组件 | Element Plus |
| 三维引擎 | Cesium 1.95（`public/libs/cesium1.95/`） |
| 底图服务 | 天地图 WMTS（token 由 `.env` 注入） |
| 行政区合规 | 仅展示矢量点位 + 天地图瓦片，未上传任何带边界的自定义 GeoJSON |
| 代码基础 | RuoYi-Vue3（vue3 分支，仅复用 admin 路由 + 布局壳） |

---

## 源码结构

```
src/
├── views/
│   └── demo/                       # Demo 主目录
│       ├── index.vue               # 三维场景入口（地图、3D Tiles、管线、设备、告警、爆管）
│       └── components/             # 拆分出的弹层组件
│           ├── LayerPanel.vue      # 图层管理（树形 + 父节点一键全选）
│           ├── SearchPanel.vue     # 站点/管线搜索 + 飞行定位
│           ├── EquipmentPopup.vue  # 设备/管线属性弹窗（基本信息 + 维保信息）
│           ├── AlarmPanel.vue      # 告警监控面板
│           └── BurstAnalysisPanel.vue  # 爆管分析报告
└── utils/
    └── mapUtils/
        ├── myCesium.js             # Cesium Viewer 封装（imagery、相机、生命周期）
        ├── flowPipeMaterial.js     # Polyline 流动箭头材质
        ├── data.json / fence_data.json  # 站点 / 围墙内管线数据（已脱敏）
        └── fence_pipe.json         # 围墙内管线坐标

public/
├── 3dtiles/station/                # 场站 3D Tiles（自行准备或删除）
├── assets/                         # 图标 + 流动箭头贴图 + 火焰粒子
├── libs/cesium1.95/                # Cesium 1.95 静态库
└── model/pipel.glb                 # 管道 GLB 模型（已在仓库）
```

---

## 本地运行

```bash
# 1. 安装依赖
npm install

# 2. 准备环境变量
cp .env.example .env
# 编辑 .env 填入你自己的 Cesium Ion token 与天地图 tk

# 3. 启动开发
npm run dev          # http://localhost:89

# 4. 生产构建
npm run build:prod   # 产物在 dist/
```

> 后端（`http://127.0.0.1:8082`）仅 admin 模块使用，Demo 页免登录。

---

## 部署说明

```bash
yarn build:prod    # 产物在 dist/
```

把 `dist/` 目录上传到你的云服务器，配置 nginx 指向该目录即可。Demo 页面使用哈希路由（`#/demo`），刷新不丢失，无需配置 history fallback。

> Vite 已设置 `base: "./"`，子路径部署无需修改配置。

---

## 已知限制

- Demo 数据基于公开管道行业知识构造，与任何真实运营管网无对应关系。站点信息已脱敏。
- 3D 场站模型来自个人整理，未做精细化建模（lvl-of-detail 偏粗）。
- 告警与爆管分析由前端模拟，不连接 SCADA / 物联网平台。

---

## 许可

仅作个人作品展示。代码按 MIT（继承自 RuoYi-Vue3），模型与贴图遵循原资产许可。