Relation Graph

功能概述

此示例展示了库存结构图的可视化，使用树形布局清晰地显示产品的组成层级。从成品到原材料，每个组件都被分解为其子部件，展示完整的物料清单（BOM）结构。支持节点的展开和折叠，允许用户深入探索不同层级的产品结构。

核心特性实现

树形布局配置

使用从左到右的树形布局：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 100,
        treeNodeGapV: 20
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultJunctionPoint: RGJunctionPoint.lr
};

水平方向展示产品结构，层级清晰。

层级数据结构

表示产品的多层级组成：

const myJsonData: RGJsonData = {
    rootId: 'product',
    nodes: [
        { id: 'product', text: 'Finished Product' },
        { id: 'assembly-a', text: 'Assembly A' },
        { id: 'part-a1', text: 'Part A1' },
        { id: 'material-a1-1', text: 'Material A1-1' },
        // ... 更多节点
    ],
    lines: [
        { from: 'product', to: 'assembly-a' },
        { from: 'assembly-a', to: 'part-a1' },
        { from: 'part-a1', to: 'material-a1-1' },
        // ... 更多连接
    ]
};

数据结构反映了实际的物料清单层级。

自动展开控制

根据节点层级自动设置展开状态：

const openByLevel = async (level: number) => {
    const nodes = graphInstance.getNodes();
    nodes.forEach(node => {
        const nodeLevel = Math.abs(node.lot.level || 0);
        graphInstance.updateNode(node, {
            expanded: nodeLevel < level
        });
    });
    await graphInstance.doLayout();
};

用户可以控制展开到第几层，默认展开到第二层。

响应式布局

使用 reLayoutWhenExpandedOrCollapsed 自动重新布局：

const graphOptions: RGOptions = {
    reLayoutWhenExpandedOrCollapsed: true
};

当用户展开或折叠节点时，图自动重新计算布局以保持清晰。

自定义节点渲染

根据节点类型显示不同的样式：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        const level = node.lot?.level || 0;
        return (
            <div className={`inventory-node level-${level}`}>
                <div className="node-type">{getNodeTypeName(level)}</div>
                <div className="node-text">{node.text}</div>
            </div>
        );
    }}
</RGSlotOnNode>

不同层级的节点有不同的视觉标识。

初始化展开

在初始化时自动展开到指定层级：

const initializeGraph = async () => {
    await graphInstance.setJsonData(myJsonData);
    await openByLevel(2); // 展开到第 2 层
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

初始状态显示适当层级的信息，避免过于复杂。

层级样式

使用 CSS 为不同层级的节点设置样式：

.inventory-node.level-0 { /* 成品 */ }
.inventory-node.level-1 { /* 组件 */ }
.inventory-node.level-2 { /* 零件 */ }
.inventory-node.level-3 { /* 原材料 */ }

颜色或边框样式区分不同类型的项目。

创意使用场景

制造业 BOM 管理

可视化产品的物料清单，帮助工程师和采购人员理解产品结构。支持从成品到原材料的完整追溯。

成本分析

展示产品各层级的成本构成。每个节点可以显示成本信息，汇总计算总成本。

供应链规划

分析产品结构对供应链的影响。识别关键零部件、单一供应源风险等。

替代件管理

显示零部件的替代关系。当某个零件缺货时，快速找到替代方案。

产品配置器

帮助销售团队和客户配置产品。用户可以展开/折叠选项，看到不同配置的影响。

质量追溯

当出现质量问题时，快速追溯受影响的组件和原材料。反向追踪所有使用该零件的产品。

库存优化

分析产品结构对库存的影响。识别通用件、标准件，优化库存水平。

工程变更管理

可视化工程变更的影响范围。修改某个零件时，看到所有受影响的上级组件。

产品比较

并排比较不同产品或版本的结构差异。识别共用组件和独特设计。

培训和教育

培训新员工了解产品结构。可视化比文档更直观易懂。

竞争对手分析

分析竞争对手产品的结构，推测其成本和设计策略。

维护和维修

帮助维修人员理解产品结构，快速定位故障零件和维修步骤。

环境影响评估

分析产品各层级的材料和工艺对环境的影响。支持绿色设计和可持续性分析。

模块化设计

展示产品的模块化结构，识别可以独立设计和更换的模块。支持大规模定制。

库存结构图

产品物料清单（BOM）可视化