qq_57956183的博客

开箱即用的态势图看板，主要功能为，左侧自制件和右侧工艺流程块实现双向映射。左侧为产品自制件树形结构，采用递归组件实现，组件会根据层级的大小改变字体大小和颜色，背景图也会相应改变，竖线也单独做成递归组件，并计算其位置，递归组件采用vue的$on和$emit进行全局传参，避免了递归组件只能在同级状态下显示背景高亮的问题，右侧为工艺流程图，初始阶段有一次工艺流程和多次工艺流程两种情况，代码进行了分别布局，右侧工艺卡片单独做成组件，卡片共有四个状态，灰色（工艺流程块暂无数据时的状态）、蓝色（点击工艺流程块时的状态）、顺序高亮（点击左侧自制件节点会对应流程块按顺序高亮的状态，暂时没有数据，顺序全部为1）、正常颜色（工艺流程块未点击并且有数据时的状态）。页面主体做了页面自适应，采用等比例缩放的原理，简单粗暴，并且避免了页面中固定定位的图形根据页面的变化出现错位的问题，页面中有很多设计到计算的地方，可能我处理的不是最佳方案，大家可以略过，新手可以研究一下递归组件的传值，当时第一次做递归组件，也是研究了半天，以上就是改项目的大致信息，大家如果有什么疑问，可以与我沟通，我会及时回复大家！感谢大家的支持！