Swift 项目管道图前端实现原理浅析

Swift 项目管道图前端实现原理浅析

Swift 项目管道图可以直观表明计划何时进行，进展与要求的对比。便于管理者弄清项目的剩余任务，评估工作进度。

按照本项目的开发文档，Swift 项目管道图的入口设置在“我的项目”目录下，点击即可进入管道图页面。

管道图的左侧渐变背景部分即是项目的根节点，根据后端数据中的percent字段来展现整个项目的完成率，右侧是该项目下子任务的完成率，并根据项目状态以及是否逾期标识出相应的颜色。具体到前端的实现，要根据后端传递的status字段进行计算得出相应的颜色状态码。

本项目前端实现的另一个重点在于关键组件的拆分：将子任务模块单独拆分出progress.vue文件，可以在开发中明确各部分的展现，同时在父组件中利用v-for指令调用该模块，重复利用，非常有效率。

总结来说，Swift 项目管道图部分在实现过程充分利用前端模块化开发优势，两个主文件仅仅用了不到300行的代码解决的这一部分的开发，后期在整个项目开发过程中可以多多参考借鉴