About DHX Gantt

甘特图

https://dhtmlx.com/

属性

必要属性

| 属性名 | 数据类型 | 功能 |
| —- | —- |
| ID | String/number | 任务ID |
| start_date | Date | 计划开始任务的时间 |
| end_date | Date | 计划完成任务的时间 |
| duration | number | 任务持续时间 |

可选属性

常用属性

| 属性名 | 数据类型 | 功能 |
| —- | —- |
| text | string/number/array | 任务名称 |
| progress | number | 任务进度（0-1） |
| end_date | Date | 计划完成任务的时间 |
| duration | number | 任务持续时间 |
| parent | number/string | 父任务ID,不存在就不会在图中呈现该任务|
| open | boolean | 指定任务分支是否将首先打开（以显示子任务）|

Readonly

gantt.config.readonly = true;

代码实例

前端html

<button onclick="ganttinit();">布置计划内容</button>
<button onclick="ganttstart();">开始任务</button>


<script>
gantt.config.date_format = "%Y/%m/%d %H:%i:%s";
gantt.init("gantt_here");
gantt.config.readonly = true;
function ganttinit(){
    gantt.parse(getGantt());
}
function ganttstart() {
    setInterval(() => {
        gantt.parse(getGantt());
    }, 1000);
}
</script>

后端

var GanttList = [];
class Gantt {
    constructor(id, start_date, end_date, text, progress, parent, open) {
        this.id = id;
        this.start_date = start_date;
        this.end_date = end_date;
        this.text = text;
        this.progress = progress;
        this.parent = parent;
        this.open = open;
    }
}

//父项目
let gtemp = new Gantt(9999,new Date(PlanStartTime).toLocaleString(),new Date(PlanEndTime).toLocaleString(),Red_result['operationalPlanName'],0,0,true);
    GanttList.push(gtemp);


//更新进度
function GetProgress(){
    for(let gantt of GanttList){
        for(let marker of RedMarkerList){
            if(marker.getExtData().taskid === gantt.id && gantt.id != 9999){
                //计算当前距离目的地/总距离
                let nowdis = AMap.GeometryUtil.distance(marker.getPosition(), marker.getExtData().end)*60*60;
                let progress = NumFilter((marker.getExtData().dis-nowdis)/marker.getExtData().dis);
                gantt.progress = progress;
            }
        }
    }
    return GanttList;
}

//添加子项目
let gtemp = new Gantt(item.assignmentNumber,item.assignmentStartTime,item.assignmentEndTime,item.assignmentName,0,9999,true);
    GanttList.push(gtemp);

//返回gantt json数据
function getGantt(){
    var GanttData = {
        data: GanttList,
        links: [
        ]}
    return GanttData;
}