vue 甘特图 vxe-gantt 实现双进度条：操持 vs 实际，支持多级子任务拆分

在项目管理中，操持进度与实际进度的对比是权衡实验弊端的关键指标。vxe-gantt 提供了机动的树形结构和自界说任务条本领，通过奥妙的数据拆分战略，我们可以在一棵甘特树中同时展示操持和实际两条进度条，而且支持从一级到多级的完备继续。
本文将分两个方式来实现方案：

• 一级双进度：仅对顶层任务拆分操持和实际，子任务不拆分。
  
• 多级双进度：全部层级（包罗孙任务）都展示操持和实际，父级自动汇总子级进度
  

实现一级双进度

实现操持进度和实际进度双进度任务条；以此为例，不管是三层进度、四层进度都能轻松实现们，该方式只能对一级任务举行拆分，无法再拆分子级。
思绪

vxe-gantt 的树形甘特图支持通过 treeConfig 将扁平数据转换为树结构。要实现“操持/实际”双进度，最直接的方法是将每个原始任务拆分为两条捏造记载：

• 操持记载：利用操持日期字段（planStartDate / planEndDate）
  
• 实际记载：利用实际日期字段（actualStartDate / actualEndDate）
  

这两条记载作为原始任务的子级（或同级），通过自界说 type 字段标记为 Subview（子任务视图），并分别赋予差别的颜色和样式，从而实现视觉上的双条对比。
关键设置项

设置作用treeConfig启用树形结构，自界说主键和父键字段。taskConfig映射日期、进度、标题等字段到数据属性。taskBarSubviewConfig子任务视图的样式（偏移位置、颜色等）。VxeGanttTaskType.Subview标记该行作为子任务视图，在父行内睁开。样式区分

在 taskBarConfig.barStyle 中根据 flag 返回差别颜色：

1. taskBarConfig: {
2.   barStyle({ row }) {
3.     return {
4.       bgColor: row.flag === 1 ? '#40d9eff' : '#31d231' // 计划蓝色，实际绿色
5.     }
6.   }
7. }

复制代码

代码

实用场景：只必要对比顶层任务的操持与实际，子任务不必要单独展示双进度。
数据转换逻辑
对每个原始任务，天生两条新记载：

• 操持记载：flag: 1，利用操持日期
  
• 实际记载：flag: 2，利用实际日期
  

假如原始任务有子任务（hasChild: true），则将其范例设为 Subview，以便在父行内睁开体现。

1. <template>
2.   
3.     <vxe-switch v-model="treeConfig.showIcon"></vxe-switch>
5.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
6.   
7. </template>

复制代码

实现多级双进度

实用场景：必要每一层级的子任务都展示操持与实际，且父级自动汇总子级进度。
数据转换战略

与一级方案差别，这里将每个叶子任务拆分为操持和实际两条记载，而每个父级任务（hasChild: true）则作为一个独立的 Subview 组节点，其子节点包罗该父级下全部叶子任务的操持和实际记载。如许，无论嵌套多少层，每一层都能独立展示双进度。
子任务视图偏移

为了让操持和实际条在视觉上不重叠，在 taskBarSubviewConfig.barStyle 中设置 top 偏移：

1. taskBarSubviewConfig: {
2.   barStyle({ row }) {
3.     if (row.flag === 1) {
4.       return { top: '-12px', backgroundColor: '#40d9eff' }
5.     }
6.     if (row.flag === 2) {
7.       return { top: '12px', backgroundColor: '#31d231' }
8.     }
9.   }
10. }

复制代码

• 操持条上移 12px，实际条下移 12px，形成双条并排效果。
  
• 父级组节点自动汇总子级进度，并体现为“总览”条。
  

代码

1. <template>
2.   
3.     <vxe-switch v-model="treeConfig.showIcon"></vxe-switch>
5.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
6.   
7. </template>

复制代码

两种实现方式对比

特性一级双进度多级双进度拆分粒度仅顶层任务全部层级（包罗叶子）父级汇总不汇总子级进度自动汇总子级双进度子任务条偏移无（仅单条）操持/实际偏移体现实用场景只需关注顶层对比必要风雅到每层级的对比数据复杂度较低较高（必要递归处置惩罚）留意事项

• 主键唯一性
  拆分后的记载必须利用全新主键（如 p10001、a10001），否则树结构会辩论。
  
• 父级关联
  操持和实际记载的 parentId 必要映射到对应的组节点 ID（如 g10001），而非原始父 ID。
  
• 日期字段
  确保操持日期和实际日期字段存在（示例中为 planStartDate 等），并在 start 和 end 中精确引用。
  
• 进度值
  示例中将进度固定为 0，实际利用时可从原始数据中读取 planProgress / actualProgress 并赋值给 progress 字段。
  
• 样式微调
  偏移量 top: '-12px' 和 top: '12px' 可根据行高调解，以包管双条不重叠且视觉均衡。
  
• 开启树形睁开
  利用 treeConfig.showIcon: true 让用户可睁开/折叠节点，检察子任务详情。
  

vxe-gantt 实现该功能的焦点在于数据拆分和父级分组，共同 VxeGanttTaskType.Subview 和样式偏移，即可得到清楚、直观的双进度甘特图。
https://gantt.vxeui.com