yipai-tech/IronSteelNon-ferrousMetallurgyProj

Fork 0

Files

guoyoudu 05a9313493 add new contents

2026-04-08 23:50:01 +08:00

12 KiB

Raw Blame History

数字孪生系统场景拆分实施方案

一、现状分析

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 问题总结

场景混淆：文档描述钢铁+有色冶金两个行业，但代码只有氧化铝
代码重复：DigitalTwin的模型被复制到IndustrialDashboard
设备冗余：同一个设备有多个版本（如SettlingTank vs SettlingTankDT）
维护困难：修改一个模型需要改多处

二、拆分方案

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 - 场景初始化

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 - 相机控制

interface CameraControlsProps {
  camera: THREE.PerspectiveCamera;
  autoRotate: boolean;
  onToggleRotate?: () => void;
  onResetView?: () => void;
}

2.2.2 共享UI组件

DevicePanel.tsx - 设备详情面板

interface DevicePanelProps {
  device: DeviceData | null;
  onClose: () => void;
}

AlertList.tsx - 告警列表

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：创建设备数据

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）

// 新路由结构
{
  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 设备数据接口（统一）

// 共享设备数据类型
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 场景切换机制

// 场景上下文
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 状态：待审批

12 KiB Raw Blame History Unescape Escape