交互式产品流程可视化看板

交互式产品流程可视化看板

该看板以直观的方式展示产品自制件与工艺流程之间的关联。

主要功能：

• 双向映射: 左侧的产品自制件树形结构与右侧的工艺流程块实现双向映射，点击任意一方都会高亮显示关联元素。
• 动态树形结构: 左侧树形结构采用递归组件实现，根据层级调整字体大小和颜色，并动态生成连接线，清晰展示层级关系。
• 灵活的工艺流程图: 右侧支持一次工艺流程和多次工艺流程两种布局，并使用不同颜色区分工艺流程块的状态（无数据、选中、顺序高亮、正常）。
• 自适应布局: 页面采用等比例缩放，适应不同屏幕尺寸，避免元素错位。

技术亮点:

• 递归组件: 通过$on和$emit实现组件间全局传参，解决了递归组件背景高亮显示的问题。
• 状态管理: 使用Vue.js有效管理组件状态和数据。
• 动态计算: 精确计算元素位置和样式，实现动态效果。

适用场景:

• 产品设计与开发
• 工艺流程管理
• 生产制造

欢迎交流:

如果您有任何疑问或建议，欢迎随时与我沟通。