392 lines
12 KiB
Markdown
392 lines
12 KiB
Markdown
# 数字孪生系统场景拆分实施方案
|
||
|
||
## 一、现状分析
|
||
|
||
### 1.1 现有代码结构
|
||
|
||
| 文件 | 行数 | 功能 | 所属场景 |
|
||
|------|------|------|----------|
|
||
| `IndustrialDashboard.tsx` | 1627行 | 监控大屏 + 3D模型渲染 | 氧化铝 |
|
||
| `DigitalTwin.tsx` | 1462行 | 数字孪生制作系统 | 氧化铝 |
|
||
|
||
### 1.2 现有设备模型
|
||
|
||
**IndustrialDashboard.tsx (13个模型函数)**：
|
||
```
|
||
createReactor - 溶出反应器
|
||
createTank - 沉降槽
|
||
createPump - 循环泵
|
||
createFurnace - 焙烧炉
|
||
createHeatExchanger - 换热器
|
||
createStorage - 原料储罐
|
||
createSlurryTank - 泥浆槽（来自DigitalTwin）
|
||
createPressureVessel - 压力容器（来自DigitalTwin）
|
||
createSettlingTankDT - 沉降槽DT版（来自DigitalTwin）
|
||
createDecompositionTower - 分解塔（来自DigitalTwin）
|
||
createEvaporator - 蒸发器（来自DigitalTwin）
|
||
createCalcinationFurnace - 煅烧炉（来自DigitalTwin）
|
||
createPipeSystem - 管道系统
|
||
```
|
||
|
||
**DigitalTwin.tsx (7个模型函数)**：
|
||
```
|
||
createSlurryTank - 泥浆槽
|
||
createPressureVessel - 压力容器
|
||
createSettlingTank - 沉降槽
|
||
createDecompositionTower - 分解塔
|
||
createEvaporator - 蒸发器
|
||
createCalcinationFurnace - 煅烧炉
|
||
createPipingSystem - 管道系统
|
||
```
|
||
|
||
### 1.3 问题总结
|
||
|
||
1. **场景混淆**：文档描述钢铁+有色冶金两个行业，但代码只有氧化铝
|
||
2. **代码重复**：DigitalTwin的模型被复制到IndustrialDashboard
|
||
3. **设备冗余**：同一个设备有多个版本（如SettlingTank vs SettlingTankDT）
|
||
4. **维护困难**：修改一个模型需要改多处
|
||
|
||
---
|
||
|
||
## 二、拆分方案
|
||
|
||
### 2.1 目标架构
|
||
|
||
```
|
||
src/app/
|
||
├── components/
|
||
│ └── shared/ # ⭐ 新建：共享组件
|
||
│ ├── scene/ # 共享3D场景组件
|
||
│ │ ├── SceneSetup.tsx # 相机、灯光、地面
|
||
│ │ ├── CameraControls.tsx # 相机控制逻辑
|
||
│ │ └── PipeSystem.tsx # 管道系统组件
|
||
│ ├── models/ # 共享3D模型
|
||
│ │ ├── base/ # 基础模型（反应器、储罐等）
|
||
│ │ └── pipes/ # 管道连接件
|
||
│ └── ui/ # 共享UI组件
|
||
│ ├── DevicePanel.tsx # 设备详情面板
|
||
│ ├── StatusBar.tsx # 状态栏
|
||
│ └── AlertList.tsx # 告警列表
|
||
│
|
||
├── pages/
|
||
│ ├── alumina/ # ⭐ 新建：铝冶炼场景
|
||
│ │ ├── AluminaDashboard.tsx # 氧化铝监控大屏（改造自IndustrialDashboard）
|
||
│ │ ├── AluminaDigitalTwin.tsx # 氧化铝数字孪生（改造自DigitalTwin）
|
||
│ │ └── devices/ # 铝冶炼专用设备模型
|
||
│ │ ├── SlurryTank.ts
|
||
│ │ ├── PressureVessel.ts
|
||
│ │ ├── SettlingTank.ts
|
||
│ │ ├── DecompositionTower.ts
|
||
│ │ ├── Evaporator.ts
|
||
│ │ └── CalcinationFurnace.ts
|
||
│ │
|
||
│ ├── steel/ # ⭐ 新建：钢铁场景
|
||
│ │ ├── SteelDashboard.tsx # 钢铁监控大屏
|
||
│ │ ├── SteelDigitalTwin.tsx # 钢铁数字孪生
|
||
│ │ └── devices/ # 钢铁专用设备模型
|
||
│ │ ├── BlastFurnace.ts # 高炉
|
||
│ │ ├── HotBlastStove.ts # 热风炉
|
||
│ │ ├── AirBlower.ts # 鼓风机
|
||
│ │ ├── CoolingWall.ts # 冷却壁
|
||
│ │ ├── CoalMill.ts # 磨煤机
|
||
│ │ └── FeedConveyor.ts # 给煤机
|
||
│ │
|
||
│ └── legacy/ # ⭐ 保留：旧文件（可后续删除）
|
||
│ ├── IndustrialDashboard.tsx
|
||
│ └── DigitalTwin.tsx
|
||
```
|
||
|
||
### 2.2 共享模块设计
|
||
|
||
#### 2.2.1 共享3D场景组件
|
||
|
||
**SceneSetup.tsx** - 场景初始化
|
||
```typescript
|
||
interface SceneSetupProps {
|
||
containerRef: RefObject<HTMLDivElement>;
|
||
cameraPosition?: [number, number, number];
|
||
lookAt?: [number, number, number];
|
||
autoRotate?: boolean;
|
||
onSceneReady?: (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => void;
|
||
}
|
||
```
|
||
|
||
**CameraControls.tsx** - 相机控制
|
||
```typescript
|
||
interface CameraControlsProps {
|
||
camera: THREE.PerspectiveCamera;
|
||
autoRotate: boolean;
|
||
onToggleRotate?: () => void;
|
||
onResetView?: () => void;
|
||
}
|
||
```
|
||
|
||
#### 2.2.2 共享UI组件
|
||
|
||
**DevicePanel.tsx** - 设备详情面板
|
||
```typescript
|
||
interface DevicePanelProps {
|
||
device: DeviceData | null;
|
||
onClose: () => void;
|
||
}
|
||
```
|
||
|
||
**AlertList.tsx** - 告警列表
|
||
```typescript
|
||
interface AlertListProps {
|
||
alerts: AlertItem[];
|
||
onAlertClick?: (alert: AlertItem) => void;
|
||
}
|
||
```
|
||
|
||
### 2.3 场景专用模块设计
|
||
|
||
#### 2.3.1 铝冶炼场景设备模型
|
||
|
||
| 设备 | 文件 | 描述 |
|
||
|------|------|------|
|
||
| 泥浆槽 | `SlurryTank.ts` | 带搅拌器和叶轮的圆柱形槽体 |
|
||
| 压力容器 | `PressureVessel.ts` | 带圆顶和管道的压力容器 |
|
||
| 沉降槽 | `SettlingTank.ts` | 带锥形底部的沉降槽 |
|
||
| 分解塔 | `DecompositionTower.ts` | 带夹套和盘管的塔式设备 |
|
||
| 蒸发器 | `Evaporator.ts` | 带管束和冷凝器的蒸发设备 |
|
||
| 煅烧炉 | `CalcinationFurnace.ts` | 带炉膛和烟囱的煅烧炉 |
|
||
|
||
#### 2.3.2 钢铁场景设备模型（待实现）
|
||
|
||
| 设备 | 文件 | 描述 |
|
||
|------|------|------|
|
||
| 高炉 | `BlastFurnace.ts` | 核心冶炼设备，圆柱形炉体 |
|
||
| 热风炉 | `HotBlastStove.ts` | 预热鼓风的设备 |
|
||
| 鼓风机 | `AirBlower.ts` | 提供冶炼用空气 |
|
||
| 冷却壁 | `CoolingWall.ts` | 高炉冷却系统 |
|
||
| 磨煤机 | `CoalMill.ts` | 煤粉制备设备 |
|
||
| 给煤机 | `FeedConveyor.ts` | 煤粉输送设备 |
|
||
|
||
---
|
||
|
||
## 三、实施步骤
|
||
|
||
### 阶段一：基础设施（共享模块）
|
||
|
||
**步骤1.1**：创建共享目录结构
|
||
```
|
||
mkdir -p src/app/components/shared/{scene,models/base,models/pipes,ui}
|
||
```
|
||
|
||
**步骤1.2**：实现 SceneSetup.tsx
|
||
- 提取场景初始化逻辑（相机、灯光、地面、渲染器）
|
||
- 统一 Three.js 版本和配置
|
||
|
||
**步骤1.3**：实现 CameraControls.tsx
|
||
- 提取相机旋转逻辑（360度旋转实现）
|
||
- 统一的缩放、重置视角逻辑
|
||
|
||
**步骤1.4**：实现共享UI组件
|
||
- DevicePanel.tsx
|
||
- StatusBar.tsx
|
||
- AlertList.tsx
|
||
|
||
### 阶段二：铝冶炼场景（改造）
|
||
|
||
**步骤2.1**：创建 AluminaDashboard.tsx
|
||
- 引用共享 SceneSetup
|
||
- 保留现有的17个氧化铝设备
|
||
- 保留现有的监控面板
|
||
|
||
**步骤2.2**：创建设备模型文件
|
||
```
|
||
src/app/pages/alumina/devices/
|
||
├── SlurryTank.ts # 从DigitalTwin提取
|
||
├── PressureVessel.ts # 从DigitalTwin提取
|
||
├── SettlingTank.ts # 从DigitalTwin提取
|
||
├── DecompositionTower.ts
|
||
├── Evaporator.ts
|
||
└── CalcinationFurnace.ts
|
||
```
|
||
|
||
**步骤2.3**：创建 AluminaDigitalTwin.tsx
|
||
- 引用共享 SceneSetup
|
||
- 保留现有的数字孪生编辑功能
|
||
|
||
### 阶段三：钢铁场景（新建）
|
||
|
||
**步骤3.1**：创建设备模型
|
||
```
|
||
src/app/pages/steel/devices/
|
||
├── BlastFurnace.ts
|
||
├── HotBlastStove.ts
|
||
├── AirBlower.ts
|
||
├── CoolingWall.ts
|
||
├── CoalMill.ts
|
||
└── FeedConveyor.ts
|
||
```
|
||
|
||
**步骤3.2**：创建 SteelDashboard.tsx
|
||
- 参考 AluminaDashboard 结构
|
||
- 使用钢铁设备模型
|
||
|
||
**步骤3.3**：创建设备数据
|
||
```typescript
|
||
const steelDeviceList = [
|
||
{ id: "bf-1", name: "1号高炉", type: "blastFurnace", position: [0, 5, 0], ... },
|
||
{ id: "hbs-1", name: "1号热风炉", type: "hotBlastStove", position: [-5, 3, 0], ... },
|
||
// ...
|
||
];
|
||
```
|
||
|
||
### 阶段四：路由和菜单整合
|
||
|
||
**步骤4.1**：更新路由配置（routes.tsx）
|
||
```typescript
|
||
// 新路由结构
|
||
{
|
||
path: '/alumina/dashboard',
|
||
component: AluminaDashboard
|
||
},
|
||
{
|
||
path: '/alumina/digital-twin',
|
||
component: AluminaDigitalTwin
|
||
},
|
||
{
|
||
path: '/steel/dashboard',
|
||
component: SteelDashboard
|
||
},
|
||
{
|
||
path: '/steel/digital-twin',
|
||
component: SteelDigitalTwin
|
||
},
|
||
```
|
||
|
||
**步骤4.2**：更新菜单（RootLayout.tsx）
|
||
```
|
||
├── 铝冶炼
|
||
│ ├── 监控大屏
|
||
│ └── 数字孪生
|
||
└── 钢铁
|
||
├── 监控大屏
|
||
└── 数字孪生
|
||
```
|
||
|
||
---
|
||
|
||
## 四、关键文件映射
|
||
|
||
### 4.1 IndustrialDashboard.tsx 拆分
|
||
|
||
| 原函数/组件 | 目标位置 | 说明 |
|
||
|------------|----------|------|
|
||
| createReactor | alumina/devices/Reactor.ts | 溶出反应器 |
|
||
| createTank | alumina/devices/Tank.ts | 沉降槽 |
|
||
| createPump | alumina/devices/Pump.ts | 循环泵 |
|
||
| createFurnace | alumina/devices/Furnace.ts | 焙烧炉 |
|
||
| createHeatExchanger | shared/models/base/HeatExchanger.ts | 换热器（通用） |
|
||
| createStorage | shared/models/base/Storage.ts | 储罐（通用） |
|
||
| createSlurryTank | alumina/devices/SlurryTank.ts | 泥浆槽 |
|
||
| createPressureVessel | alumina/devices/PressureVessel.ts | 压力容器 |
|
||
| createSettlingTankDT | alumina/devices/SettlingTank.ts | 沉降槽 |
|
||
| createDecompositionTower | alumina/devices/DecompositionTower.ts | 分解塔 |
|
||
| createEvaporator | alumina/devices/Evaporator.ts | 蒸发器 |
|
||
| createCalcinationFurnace | alumina/devices/CalcinationFurnace.ts | 煅烧炉 |
|
||
| createPipeSystem | shared/scene/PipeSystem.tsx | 管道系统 |
|
||
| 场景初始化 | shared/scene/SceneSetup.tsx | 相机、灯光等 |
|
||
| 相机旋转逻辑 | shared/scene/CameraControls.tsx | 360度旋转 |
|
||
|
||
### 4.2 DigitalTwin.tsx 拆分
|
||
|
||
| 原函数/组件 | 目标位置 | 说明 |
|
||
|------------|----------|------|
|
||
| createSlurryTank | alumina/devices/SlurryTank.ts | 与ID共享 |
|
||
| createPressureVessel | alumina/devices/PressureVessel.ts | 与ID共享 |
|
||
| createSettlingTank | alumina/devices/SettlingTank.ts | 替换DT版 |
|
||
| createDecompositionTower | alumina/devices/DecompositionTower.ts | 与ID共享 |
|
||
| createEvaporator | alumina/devices/Evaporator.ts | 与ID共享 |
|
||
| createCalcinationFurnace | alumina/devices/CalcinationFurnace.ts | 与ID共享 |
|
||
| createPipingSystem | shared/scene/PipeSystem.tsx | 与ID共享 |
|
||
| 工厂/场景/模型管理 | alumina/AluminaDigitalTwin.tsx | 保留 |
|
||
| 左侧边栏 | shared/ui/ModelLibrary.tsx | 提取为共享 |
|
||
|
||
---
|
||
|
||
## 五、数据流设计
|
||
|
||
### 5.1 设备数据接口（统一）
|
||
|
||
```typescript
|
||
// 共享设备数据类型
|
||
interface DeviceData {
|
||
id: string;
|
||
name: string;
|
||
type: string; // 设备类型（如"blastFurnace"、"slurryTank"）
|
||
industry: "steel" | "alumina"; // ⭐ 新增：行业标识
|
||
position: [number, number, number];
|
||
status: "running" | "warning" | "stopped";
|
||
temperature: number;
|
||
pressure: number;
|
||
flow: number;
|
||
efficiency: number;
|
||
color: number;
|
||
}
|
||
```
|
||
|
||
### 5.2 场景切换机制
|
||
|
||
```typescript
|
||
// 场景上下文
|
||
const IndustryContext = createContext<{
|
||
industry: "steel" | "alumina";
|
||
setIndustry: (industry: "steel" | "alumina") => void;
|
||
}>(null);
|
||
|
||
// 设备列表根据行业加载
|
||
const deviceList = useMemo(() => {
|
||
return industry === "steel" ? steelDevices : aluminaDevices;
|
||
}, [industry]);
|
||
```
|
||
|
||
---
|
||
|
||
## 六、测试计划
|
||
|
||
### 6.1 单元测试
|
||
- 每个设备模型渲染测试
|
||
- 共享组件功能测试
|
||
|
||
### 6.2 集成测试
|
||
- 铝冶炼场景完整流程
|
||
- 钢铁场景完整流程
|
||
- 场景切换测试
|
||
|
||
### 6.3 性能测试
|
||
- 17个设备同时渲染
|
||
- 60fps 相机旋转
|
||
- 内存占用监测
|
||
|
||
---
|
||
|
||
## 七、风险评估
|
||
|
||
| 风险 | 影响 | 缓解措施 |
|
||
|------|------|----------|
|
||
| 改动范围大 | 可能引入bug | 分阶段实施，每阶段验证 |
|
||
| 代码重复 | 维护成本增加 | 充分提取共享模块 |
|
||
| 钢铁设备模型缺失 | 功能不完整 | 先完成铝冶炼，后续补充 |
|
||
| 路由变更 | 旧链接失效 | 保持向后兼容或做重定向 |
|
||
|
||
---
|
||
|
||
## 八、预计工作量
|
||
|
||
| 阶段 | 内容 | 优先级 |
|
||
|------|------|--------|
|
||
| 阶段一 | 共享基础设施 | P0（必须先完成） |
|
||
| 阶段二 | 铝冶炼场景改造 | P0 |
|
||
| 阶段三 | 钢铁场景新建 | P1 |
|
||
| 阶段四 | 路由菜单整合 | P0 |
|
||
|
||
---
|
||
|
||
**文档版本**：V1.0
|
||
**创建日期**：2026-04-08
|
||
**状态**：待审批
|