5、Gantt 界面相关部分

你在说啥-Lynn

已于 2022-11-02 14:52:17 修改

阅读量597

点赞数

分类专栏： DHTMLX Gantt 文章标签： javascript 前端 html

于 2022-05-09 10:03:25 首次发布

本文链接：https://blog.csdn.net/beauty_600/article/details/124659954

版权

DHTMLX Gantt 专栏收录该内容

15 篇文章 15 订阅

订阅专栏

返回任务的可见高度
https://docs.dhtmlx.com/gantt/api__gantt_gettaskheight.html

var height = gantt.getTaskHeight(); // -> 30

计算任务的DOM元素在时间轴区域的位置和大小
https://docs.dhtmlx.com/gantt/api__gantt_gettaskposition.html

// adding baseline display
gantt.addTaskLayer(function draw_planned(task) {
    if (task.planned_start && task.planned_end) {
        var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end);         var el = document.createElement('div');
        el.className = 'baseline';
        el.style.left = sizes.left + 'px';
        el.style.top = sizes.top + 'px';
        el.style.width = sizes.width + 'px';
        el.style.height= sizes.height + 'px';
        return el;
    }
    return false;
});

获取任务的 DOM 元素在时间线区域的顶部位置
https://docs.dhtmlx.com/gantt/api__gantt_gettasktop.html

gantt.getTaskTop(2);

获取指定日期在图表区域的相对水平位置
https://docs.dhtmlx.com/gantt/api__gantt_posfromdate.html

gantt.posFromDate(new Date());
// 该方法返回当前在甘特图中呈现的日期的位置。如果图表中未呈现日期 - 该方法将返回“null”。

在这里插入图片描述
5. 滚动图表区域使指定的日期可见
https://docs.dhtmlx.com/gantt/api__gantt_showdate.html

gantt.showDate(new Date()); //shows the current date

启用/禁用甘特图中的多任务选择
https://docs.dhtmlx.com/gantt/api__gantt_multiselect_config.html

gantt.config.multiselect = false; //disables multi-task selection
gantt.init('gantt_here');

gantt.plugins({
    multiselect: true
});

指定多任务选择是否在一个或任何级别内可用
https://docs.dhtmlx.com/gantt/api__gantt_multiselect_one_level_config.html

gantt.config.multiselect_one_level = true; 
gantt.init('gantt_here');
 
//INCORRECT
gantt.config.multiselect = false;   //multiselection is disabledgantt.config.multiselect_one_level = true; 
gantt.init('gantt_here');

gantt.plugins({
    multiselect: true
});

使指定的任务在屏幕上可见
https://docs.dhtmlx.com/gantt/api__gantt_showtask.html

var taskId = gantt.addTask({
    id:10,
    text:"Task #5",
    start_date:"02-09-2013",
    duration:28
}, "project_2");
 
gantt.showTask(10);

甘特图自动扩展时间刻度以适应所有显示的任务
https://docs.dhtmlx.com/gantt/api__gantt_fit_tasks_config.html

gantt.config.fit_tasks = true;

激活甘特图的只读模式
https://docs.dhtmlx.com/gantt/api__gantt_readonly_config.html

gantt.config.readonly = true;

配置表的列
https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html

// default columns definition
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.init("gantt_here");

const ganttData = reactive<{
  // gantt 列配置 --只读
  readonlyColumns: any[];
  // gantt 列配置 --可改添
  updateColumns: any[];
}>({
  readonlyColumns: [
    {
      name: 'wbs',
      label: '序号',
      width: 50,
      template: function (task) {
        const ganttObj = ganttRef.value;
        const wbs_code = ganttObj.getWBSCode(task); // -> returns "1.2"
        return wbs_code;
      },
    },
    {
      name: 'taskStatusName',
      label: '工单状态',
      align: 'center',
      width: 80,
      resize: true,
      template: function (task) {
        if (task.ganttType === 'project') {
          return '';
        } else {
          return task.taskStatusName;
        }
      },
    },
    { name: 'inChargeName', label: '负责人', width: 100, resize: true },
    {
      name: 'taskSpecification',
      label: '工单描述',
      align: 'left',
      width: 250,
      tree: true,
      resize: true,
      template: function (task) {
        if (task.ganttType == 'task') {
          if (task.keyTask) {
            return (
              '<i class="iconfont icon-keyTask"' +
              ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px; "' +
              '></i>' +
              task.taskSpecification
            );
          } else {
            return (
              '<i class="iconfont icon-unKeyTask"' +
              ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px;"' +
              '></i>' +
              task.taskSpecification
            );
          }
        } else {
          return task.taskSpecification;
        }
      },
    },
    {
      name: 'equipmentCode',
      label: '关联设备编码',
      width: 140,
      align: 'center',
      resize: true,
      template: function (task) {
        const equipmentCodes = (task.equipmentList || [])
          .map((v) => v.equipmentCode)
          .join('，');
        return equipmentCodes;
      },
    },
    { name: 'start_date', align: 'center', width: 120, resize: true },
    {
      name: 'duration',
      align: 'center',
      resize: true,
      template: function (task) {
        return task.duration + ' 天';
      },
    },
    {
      name: 'taskCompleteTime',
      label: '实际结束时间',
      align: 'center',
      width: 140,
      resize: true,
    },
  ],
  updateColumns: [
    {
      name: 'wbs',
      label: '序号',
      width: 50,
      template: function (task) {
        const ganttObj = ganttRef.value;
        const wbs_code = ganttObj.getWBSCode(task); // -> returns "1.2"
        return wbs_code;
      },
    },
    {
      name: 'taskStatusName',
      label: '工单状态',
      align: 'center',
      width: 80,
      resize: true,
      template: function (task) {
        if (task.ganttType === 'project') {
          return '';
        } else {
          return task.taskStatusName;
        }
      },
    },
    { name: 'inChargeName', label: '负责人', width: 100, resize: true },
    {
      name: 'taskSpecification',
      label: '工单描述',
      align: 'left',
      width: 250,
      tree: true,
      resize: true,
      template: function (task) {
        if (task.ganttType == 'task') {
          if (task.keyTask) {
            return (
              '<i class="iconfont icon-keyTask"' +
              ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px; "' +
              '></i>' +
              task.taskSpecification
            );
          } else {
            return (
              '<i class="iconfont icon-unKeyTask"' +
              ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px;"' +
              '></i>' +
              task.taskSpecification
            );
          }
        } else {
          return task.taskSpecification;
        }
      },
    },
    {
      name: 'equipmentCode',
      label: '关联设备编码',
      width: 140,
      align: 'center',
      resize: true,
      template: function (task) {
        const equipmentCodes = (task.equipmentList || [])
          .map((v) => v.equipmentCode)
          .join('，');
        return equipmentCodes;
      },
    },
    { name: 'start_date', align: 'center', width: 120, resize: true },
    {
      name: 'duration',
      align: 'center',
      resize: true,
      template: function (task) {
        return task.duration + ' 天';
      },
    },
    {
      name: 'taskCompleteTime',
      label: '实际结束时间',
      align: 'center',
      width: 140,
      resize: true,
    },
    { name: 'add', width: 44 },
  ],
});

// ---------------------分割线---------------------
// 激活甘特图的只读模式 ganttData：自定义的属性值
if (flag) {
  gantt.config.columns = ganttData.updateColumns;
  gantt.config.readonly = false;
} else {
  gantt.config.columns = ganttData.readonlyColumns;
  gantt.config.readonly = true;
}