Dhtmlx Gantt 常用方法及基本配置合集

Posted 2023-04-05 萧何.

甘特图基本配置

甘特图扩展功能

gantt.plugins(
      tooltip: true,
      quick_info: true,// 快速信息框
      // multiselect: true,// 激活多任务选择
    );

甘特图任务悬浮框位置

 gantt.config.tooltip_offset_x = 10;
 gantt.config.tooltip_offset_y = 30;

激活列表展开（折叠）功能

gantt.config.open_split_tasks = true;

创建新事件通过点击“+”按钮打开灯箱

gantt.config.details_on_create = true;

甘特图图表宽度自适应

gantt.config.autofit = true;

用户可以通过拖拽调整行高

 gantt.config.resize_rows = true;

界面初始化时展开图表树形结构

gantt.config.open_tree_initially = true;

图表项目栏可以任意拖拽（任意节点下)

  gantt.config.order_branch = true;
  gantt.config.order_branch_free = true;

新增空白列后新增项目

gantt.config.placeholder_task = true;

图表刷新后位置不变

 gantt.config.preserve_scroll = true;
 gantt.config.round_dnd_dates = true;

设置甘特图表头高度

  gantt.config.scale_height = 50;

是否显示依赖连线(取消)

gantt.config.show_links = true;

点击表头可排序

gantt.config.sort = true;

激活/禁用“quick_info”扩展（弹出任务的详细信息表单）

gantt.plugins(
      tooltip: true,
      quick_info: true,// 快速信息框
    );
gantt.config.show_quick_info = true;

点击表头可排序

gantt.config.sort = true;

设置行高

gantt.config.row_height = 44;

允许拖放

gantt.config.drag_project = true;

配置甘特图时间刻度高度

gantt.config.scale_height = 40;

设置甘特图时间的起始结束时间，并允许显示超过时间刻度任务

gantt.config.start_date = new Date(`$new Date().getFullYear()-2,$new Date().getMonth(),$new Date().getDay()`)

gantt.config.end_date = new Date(`$new Date().getFullYear()+2,$new Date().getMonth(),$new Date().getDay()`)

gantt.config.show_tasks_outside_timescale = true

设置时间刻度相关属性

  gantt.config.scales = [
       unit: "year", step: 1, format: "%Y" ,
       unit: "month", step: 1, format: "%M" ,
    ];

配置任务内部显示元素

(用户可自定义任务内部显示内容)

 gantt.templates.task_text = function (start, end, task) 
      return `
            <span style="margin-left:10px;color:white;">$task.text</span>
          `;
    ;

配置Gantt内置弹出框元素(title内容)

gantt.templates.lightbox_header = function (start_date, end_date, task) 
    return `<b>$task.text</b>`
;

配置Gantt内置弹出框元素

（此处除了 description 与 time 为gantt内置弹出框元素其余为自定义元素）

【 自定义元素详细配置方法在另外一篇文章解释 】

  gantt.config.lightbox.sections = [
      
        name: "description",
        height: 36,
        map_to: "text",
        type: "textarea",
        focus: true,
      ,
       name: "time", type: "duration", map_to: "auto" ,
      
        name: "Participants",
        height: 36,
        map_to: "Participants",
        type: "ParticipantsPlan",
        focus: true,
      ,
      
        name: "BgColor",
        height: 36,
        map_to: "color",
        type: "ParticipantsPlanColor",
        focus: true,
      ,
    ];

Gantt除了配置基本也可以配置指定元素弹出框

    // 配置任务灯箱
    gantt.config.lightbox.project_sections= [
      name: "description", height: 70, map_to: "text", type: "textarea", focus: true,
      name: "type", type: "typeselect", map_to: "type",
      name: "time", type: "duration", readonly: true, map_to: "auto"
    ];
    // 配置里程碑灯箱
    gantt.config.lightbox.milestone_sections= [
        name: "description", height: 70, map_to: "text", type: "textarea", focus: true,
        name: "type", type: "typeselect", map_to: "type",
        name: "time", type: "duration", single_date: true, map_to: "auto"
    ];

控制网格区域的样式（类名）

 gantt.templates.grid_row_class = function (start, end, task) 
      console.log("网格class", start, end, task);
    ;

日期网格配置

  gantt.templates.date_grid = function(date, task, column)
    console.log('日期网格',date,task,column)
    if(task && gantt.isUnscheduled(task) && gantt.config.show_unscheduled)
          return gantt.templates.task_unscheduled_time(task);
      else
          return gantt.templates.grid_date_format(date);
    
  

配置网格缩进

gantt.templates.grid_indent = function(item)
      return '<div class="gantt_tree_indent" style="display:none"></div>'
    

网格内容配置

【 自定义元素详细配置方法在另外一篇文章解释 】

gantt.config.columns=[
    name:"text",       label:"Task name",  tree:true, width:'*' ,
    name:"start_date", label:"Start time", align: "center" ,
    name:"duration",   label:"Duration",   align: "center" ,
    name:"add",        label:"" 
];

任务的日期（格式化）

 gantt.templates.task_date= function(date)
        return gantt.date.date_to_str(gantt.config.task_date)(date);
    ;

鼠标悬浮工具提示文本配置

【 此功能属于扩展功能需单独配置 】

 gantt.plugins(tooltip: true);

 gantt.templates.tooltip_text = function (start, end, task) 
      return (
        "<b>标题:</b> " +
        task.text +
        "<br/><span>开始:</span> " +
        gantt.templates.tooltip_date_format(start) +
        "<br/><span>结束:</span> " +
        gantt.templates.tooltip_date_format(end) +
        "<br/><span>进度:</span> " +
        Math.round(task.progress * 100) +
        "%"
      );
    ;

Gantt内置方法

【 return true 的含义是执行，默认即可 ,如果需要自定义 return fasle。便不会执行内置方法】

双击任务触发（每一行）

gantt.attachEvent("onTaskDblClick", function (id, e) return true)

将任务添加到Gantt之前触发

gantt.attachEvent("onAfterTaskAdd",function(id,item)return true)

用户选择任务时触发

gantt.attachEvent("onTaskSelected",function(id)return true)

用户悬停Gantt时触发

gantt.attachEvent("onMouseMove",function(id,e))

用户拖拽任务后释放鼠标之后，应用更改之前触发

gantt.attachEvent("onAfterTaskDrag",function(id,mode,e)return true)

点击“+”进行添加任务操作触发

gantt.attachEvent("onTaskCreated",function(task)return true)

用户打开Gantt内置弹出框之前触发

gantt.attachEvent("onBeforeLightbox",function(id)return true)

获取进度条进度

 gantt.templates.progress_text = function (start, end, task) 
      return Math.round(task.progress * 100) + "%";
    ;

获取拉杆状态

 gantt.templates.drag_link = function (from, from_start, to, to_start) 
      console.log("拉杆from", from, from_start, to, to_start);
      // return text;
    ;

获取拖动链接类

 gantt.templates.drag_link_class = function (from,from_start,to,to_start ) 
      console.log("from", from, from_start, to, to_start);
    ;

以上是项目中所用到的部分方法，详细内容可查看官方文档。

Gantt Docs

PBS常用指令合集

以下以任务名 job.pbs对应任务ID 12341234为代表，提交者用户名为user。

 

1.基本指令-最常用

提交作业 qsub job.pbs

查询全部作业 qstat

查询个人作业 qstat –u user

查询单个作业 qstat 12341234

删除运行中作业 qdel 12341234

 

2.更多提交方法

定时运行 qsub -a yyyymmddhhmmss job.pbs 或 qsub -a hhmm job.pbs
顺序运行 qsub -W depend=afterok:12341234  job.pbs 或设置 depend=afternotok 或设置 depend=afterany

 

3.发送邮件

qsub -m b|e|a|s|n job.pbs

qsub -M [email protected] job.pbs

 

4.作业管理

改变walltime qalter 12341234 -l walltime=??:??:??（运行开始前可以更改，但是运行后时间只能缩短不能增加）