vue3 甘特图（四）：甘特图进度条拆分

　　目前项目采取有两种拆分进度条的方式。单个进度条展示多维度数据，一个总任务条下有多个子进程展示。

　　1.1 单个进度条展示多维度数据（不关联时间），如图

此方法是通过设置单个进度条上内容，以一个进度条为容器，修改内容（即task_text内容）展示多维度的数据，比如当前项目需要展示项目消耗的工时/预估工时、进度、告警事件、滞后事件，将其分割成固定的多少段（不关联时间）直接展示数据。

核心逻辑（直接替换进度条内容）：

gantt.templates.task_text = function (start, end, task) {
    if (task.projectStatus == '暂无任务') {
      return `
                <div class="project-bar no-data">
                    <div class="no">暂无任务</div>
                </div>
               `
    } else {
      let progressState = ''
      let progressPerson = ''
      // 超前  滞后 完成 暂无任务 延期
      if (task.projectStatus == '滞后' || task.projectStatus == '延期') {
        progressState = 'lag'
        let warnDiv = '' //告警事件 部门
        let errorDic = task.functionName //滞后严重功能
        let _index = 1
        let warnIcon = ''
        let errorIcon = ''
        for (const key in task.projectMap) {
          if (_index <= 3) {
            warnDiv += `${_index}.${key}（${task.projectMap[key]}）  `
            _index += 1
          }
        }
        if (Object.keys(task.projectMap).length > 0) {
          warnIcon = `<div class="icon-box">
                                        <div class="warn-icon"></div>
                                        <div class="icon-line warn"></div>
                                    </div>`
        }
        if (errorDic) {
          errorIcon = `<div class="icon-box">
                                        <div class="error-icon"></div>
                                        <div class="icon-line error"></div>
                                    </div>`
        }
        // 判断是否因为时间过短 导致图上文字显示不全 采用钓鱼线引出
        let inLine = data.topTime == 'year' ? 'no-in-line' : 'in-line'
        if (
          new Date(task.endTime).getTime() - new Date(task.startTime).getTime() <
          3600 * 1000 * 24 * 30
        ) {
          inLine = 'no-in-line'
        }
        progressPerson = `  <div class="project-warn ${inLine}">
                                    ${warnIcon}
                                    <div class="war-des">${warnDiv}</div>
                                </div>
                                <div class="project-error ${inLine}">
                                    ${errorIcon}
                                    <div class="error-des">${errorDic}</div>
                                </div>
                             `
      } else {
        progressState = 'normal'
      }
      return `
                <div class="project-bar">
                    <div class="project-all-time">${task.projectUsedTime}/${
        task.projectTotalTime
      }</div>
                    <div class="project-progress ${progressState}">${
        (task.projectProgress * 100).toFixed(1) + '%'
      }</div>
                    ${progressPerson}
                </div>
               `
    }
  }

完整代码：

View Code

　　1.2 任务条下有多个子进程展示（关联时间），如图

此方法是通过父子节点的关联性设置并且与时间相关联，父节点设置 render: 'split'拆分子任务过程，子任务过程关联上父节点id（用parent）。可以通过设置子进程的开始结束时间或持续时间（duration）来设置子进程的长度。

核心逻辑（数据层次）：

{
        id: 13, //通过父子节点关系 父节点 设置 render: 'split'拆分子任务过程
        text: '任务 #2',
        start_date: '2023-03-04 00:00',
        type: 'project',
        render: 'split',
        parent: '11',
        progress: 0.5,
        open: false,
        duration: 11
      },
      {
        //子任务过程关联上父节点id
        id: 17,
        text: '过程 #1',
        start_date: '2023-03-04 00:00',
        end_date: '2023-03-15 00:00',
        // duration: 10,
        parent: '13',
        progress: 0,
        open: true
      },
      {
        id: 18,
        text: '过程 #2',
        start_date: '2023-05-04 00:00',
        duration: 20,
        parent: '13',
        progress: 0,
        open: true
      },