个人组件库

Appearance

业务甘特图 ​

甘特图介绍 ​

前置说明

业务甘特图会在 DHTMLX Gantt 的基础上进行二次开发，因此在使用业务甘特图之前，需要先查看业务甘特图的开发手册。

DHTMLX Gantt 开发手册：https://docs.dhtmlx.com/gantt/desktop__guides.html

同时业务甘特图会透传出所有的 DHTMLX Gantt 的 API。

集成思路 ​

实现思路 ​

📌 思路说明


🔔 业务甘特图实现的思路还是延续 PM 项目集成 WBS 的思路，业务甘特图、甘特图查看器、甘特图编辑器(WBS 编辑器)。


业务甘特图的侧重点：

  • 共用属性和方法集成
  • 事件拦截处理(业务调度，推算等方面)
  • 内置业务逻辑集成
  • 其他处理(行内编辑支持、业务组件渲染、多语言、主题等)
  • 资源负荷和项目日历组件内部集成

特别说明：

资源负荷组件和项目日历组件属于前置依赖组件，其他它们和 WBS 编辑器的辅助组件是同等地位的。 但是由于其特殊的业务场景作用域，导致其等级提升到和业务甘特图组件、甘特图查看器、编辑器组件同一级别。资源负荷、项目日历组件不单单给 WBS 使用，其还单独支持资源负荷、全局日历模块。

基本使用 ​

loading

数据格式 ​

数据格式说明

业务甘特图的数据格式和 DHTMLX Gantt 的数据格式是一致的，但是在使用业务甘特图的时候，需要参考下图所示的数据格式 数据格式主要包括两大部分，列相关数据和甘特图相关数据。

  • 甘特图数据：
javascript
{
    data: [
        {...} // [!code hl] // 参考下图DATA部分
    ],
    links: [
        {...} // [!code hl] // 参考下图Links部分
    ],
}
  • 列数据：
javascript
[
    {...} // [!code hl] // 参考下图Columns部分
]

下图中蓝色背景的为 DHTMLX GANTT 需要的字段，具体可以看看 DHTMLX 官网说明。

综合示例 ​

业务甘特图是我们基于 DHTMLX Gantt 进行的二次开发，主要是为了满足项目管理业务的需求，项目如果有其他个性化业务场景，推荐安装@crami/gantt 进行开发。

注意

由于时间和进度问题，部分文档描述和部分参数格式描述未详细列出，请自行参考项目工程 Dome

API ​

HBBaseGantt 属性 ​

参数说明类型默认值
durationUnitdat工期单位，支持'minute', 'day'String'minute'
hoursPerDay每日工时Number
calendars日历信息Array[]
getProjectCalendar调用日历查询的方法Function{}
columns列数据Array[]
queryDataFlag重新查询重置筛选条件标志Booleanfalse
data甘特图数据Object{}
readonly是否开启只读Booleanfalse
renderFlag是否开始第三方渲染Booleantrue
enableLoadingFlag是否开始 loadingBooleantrue
columnAddFlag是否显示列添加Booleantrue
selectedFalg是否显示选择(暂不支持)Booleanfalse
enableChartGridSwitch是否开启 grid 和 chart 切换Booleantrue
workTime是否开启工作时间Booleantrue
showWorkTimeClass显示显示非工作日样式Booleantrue
todayLine是否显示今天Booleantrue
progressCalculate是否进行进度计算Booleanfalse
statusCalculate是否进行状态计算Booleanfalse
complateCalculate进度 100%是否参与调度Booleantrue
dragProgress是否开启拖拽进度Booleanfalse
autoShowProgress是否开启自适应显示进度Booleantrue
autoShowProgressWithZoom自适应显示进度层级Number2
autoSchedule是否开始自动调度Booleantrue
orderBranch是否支持拖拽升降级,默认不支持Booleanfalse
gridDateFormat是否开启时间格式化Booleantrue
reorderGridColumn是否开始列拖拽Booleantrue
defaultZoom默认视图显示的层级String'week'
skipOffTime是否跳过非工作时间Booleanfalse
showBaseLine是否开启基线对别Booleantrue
undoSteps撤回的步数Number60
roundDndDate是否开启拖拽到分钟Booleanfalse
correctWorkTime开始是否靠近到最近的工作时间Booleantrue
autoTypes是否开启任务自适应类型Booleantrue
isSingleProject是开启单项目限制Booleantrue
columnsReactiveFlag列数据是否支持响应性Booleanfalse
outdentInSituFlag是否开始任务原地升级Booleantrue
scrollOnClick选中任务时是否自动滚动到可视区域Booleantrue
rangeDynamically是否开启时间范围自动调节Booleantrue
baseLineRightText是否开启图表区域右侧文字显示Booleantrue
ignoreMilestone是否过滤掉里程碑的渲染Booleantrue
enableProjectStartEndDate是否设置项目开始、结束时间Booleantrue
enableFilter是否开启筛选Booleanfalse
enableDecompose是否开启分解模式Booleanfalse
showTooltip是否开始 tooltip 显示Booleantrue
setViewPort是否开始 tooltip 显示层级限制Booleantrue
showLinkTooltip是否开始关联关系的 tooltip 显示Booleantrue
tempSaveCalendar是否开启日历操作临时保存(暂不支持)Booleanfalse
isSingleProject是否是单项目限制Booleantrue
forwardProjectStartDate是否开启拖拽是开始往前改变项目开始时间(已废弃)Booleanfalse
copyDataKeepLevel复制数据是否保存层级Booleantrue
resizeRow是否支持行放缩Booleanfalse
barHeight任务横条高度Boolean20
differenceWbsData是否开启差异化数据挑选 wbs 值Booleantrue
globalCalendar日历使用 api 返回是否设置于全局日历Booleanfalse
columnsLocale列数据多语言(将会废弃)Booleanfalse
cutToPastePosition往目标节点上兄弟节点还是子节点进行粘贴Booleantrue
toolbar是否开始右下方工具栏Booleanfalse
limitZoomInLevel放大层级限制Boolean0
chartBoxSelection开启快速框选Booleantrue
showEmptyState开启暂无数据操作(暂时先不放开)Booleanfalse
dynamicTextPosition是否开启文字显示位置动态调整Booleanfalse
scheduleProjectConstraint是否开启调度父任务限制类型Booleanfalse
showStartEndDateLine是否显示开始结束时间线Booleanfalse
fineTuning是否开启微调计划限制Booleanfalse
bizType新增数据或者关联关系的 id 生成的业务规则Boolean'1'
highlightDragPosition是否显示 chart 拖拽高亮Booleantrue
showDragVertical纵向高亮辅助Booleantrue
showDragHorizontal横向高亮辅助Booleanfalse
calendarUrl内部日历的查询和保存接口(将会废弃)Boolean{}
scaleHeight优先级要小于视图的切换(天、月、周等)Boolean50
rowHeight设置行高Number35
enablePasteLoadingTotal粘贴数据是开始 loading 显示的条数Number30
queryKeepLevel编辑器保存之后的查询是否按原先层级显示Booleanfalse
gridElasticColumns可以解决 char bar 拖动，列宽度自动变化的问题Booleantrue
autoOpenLevel是否根据数据量自动调整展开层级Booleanfalse
enableMilestoneBgColor是否开启里程碑任务背景色显示Booleantrue
enableColumnResizeTooltip是否开启列宽度调整提示框Booleantrue
defaultHideChart是否默认隐藏 chart 图Booleanfalse
showPrevDate是否往前拖动时显示前边日期Booleanfalse
showProjectEndMarker是否显示项目结束时间 markerBooleantrue
separateProjectStart项目开始时间是否和根任务开始时间分离Booleantrue
outsideTimeScaleDay任务时间外范围区域多显示天数number7

HBBaseGantt 方法 ​

方法名称说明类型版本
getBaseGanttId获取 gantt 图 id() => any
getBaseGanttInstance获取 gantt 实例() => any
refreshBaseGanttData刷新 gantt 数据() => void
getBaseGanttConfig获取 gantt 图配置 config() => any
setBaseGanttConfig设置 gantt 图配置 config(config) => void
getBaseGanttColumns获取 gantt 图列信息() => any
batchSetBaseGanttColumns设置 antt 图列信息(根据传入的数据)(columns) => void
appendBaseGanttColumns追加 gantt 图列信息(columnItem, positionIndex) => void
deleteBaseGanttColumns删除 gantt 图指定列(columnName) => void
deleteAllBaseGanttColumns删除 gantt 图所有列() => void
updateBaseGanttColumns更新 gantt 图指定列(columnItem) => void
getBaseGanttSelectedIds获取 gantt 图选中的数据 id() => any
getBaseGanttSelectedRows获取 gantt 图选中的数据对象() => any
setBaseGanttColumnsDisplay设置列显示隐藏(columnsArray) => void
hideBaseGanttChart隐藏 chart() => void
hideBaseGanttGrid隐藏 grid() => void
showBaseGanttChartGrid显示 chart 和 grid() => void
taskIndentAndOutdent任务升降级(type) => void
getDifferenceData生成差异化数据() => any
checkDifferenceData检查差异化数据() => boolean
toggleCriticalPath显示关键路径(flag) => void
switchBaseGanttBaseLine切换基线显示() => void
setBaseGanttBaseLine设置基线对比相关功能(flag, overText, overUnit) => void
collapseBaseGanttLevel收起到指定层级(level) => void
expandBaseGanttLevel展开到指定层级(level) => void
setBaseGanttContextMenu设置右键菜单(contextMenu, callback?) => void
setBaseGanttProjectStart设置项目开始时间(startDate, flag) => void
setBaseGanttProjectEnd设置项目结束时间(endDate) => void
setBaseGanttZoom设置显示层级(zoom) => void
addRelationTaskLink添加任务之间的关联关系(selectedArray) => void
deleteRelationTaskLink删除任务之间的关联关系(selectedArray) => void
queryBaseGanttData重新请求查询数据(queryData?, queryCanledar?, queryLoadingTitle?) => Promise
switchBaseGanttTodayLine显示今日时间线(flag?) => void
queryProjectCalendar请求项目日历信息() => Promise
openProjectCalendar打开项目日历() => void
enableBaseGanttLoading手动开启 loadin 显示(tipTitle) => void
closeBaseGanttLoading手动关闭 loading 显示() => void
filterBaseGanttTask本地过滤任务(filter: ConditionsType[]) => void
customTaskTooltipContent自定义任务 tooltil 显示的内容(tooltipArray, format?) => void
freezeBaseGanttColumns设置冻结列(index: number) => void
copyOrCutBaseGanttData复制或者剪切 gantt 数据(action) => void
pasteBaseGanttData粘贴 gantt 图数据() => void
openBaseGanttAbout关于 gantt 图的信息() => void
exportBaseGanttPNG导出 png() => void
exportBaseGanttPDF导出 pdf() => void
exportBaseGanttExcel导出 excel() => void
exportBaseGanttMSProject导出 ms project() => void
setBaseGanttData手动设置 gantt 数据(data) => void
updateBaseGanttData更新保存之后的数据(data) => void
deleteSelectedTask删除用户选中的数据(data) => void

说法说明

业务甘特图现阶段总共提供了 81 个方法，👀️ 开发者需要关心的是上方提供的 👀️，全部方法如下：

javascript
[
  getBaseGanttId,
  getBaseGanttInstance,
  renderBaseGantt,
  refreshBaseGanttData,
  getBaseGanttConfig,
  setBaseGanttConfig,
  setLocalization,
  getBaseGanttColumns,
  setBaseGanttUndoAndRedo,
  updateBaseGanttColumns,
  batchSetBaseGanttColumns,
  resetBaseGanttColumns,
  appendBaseGanttColumns,
  deleteBaseGanttColumns,
  deleteAllBaseGanttColumns,
  handleSelectAllRows,
  getBaseGanttSelectedIds,
  getBaseGanttSelectedRows,
  setBaseGanttColumnsDisplay,
  hideBaseGanttChart,
  hideBaseGanttGrid,
  showBaseGanttChartGrid,
  switchBaseGanttTodayLine,
  toggleCriticalPath,
  expandBaseGanttLevel,
  collapseBaseGanttLevel,
  setBaseGanttContextMenu,
  improveInlineEditor,
  freezeBaseGanttColumns,
  removeCustomFreezeStyleRules,
  formatGridDateColumns,
  setBaseGanttEmptyState,
  setNoWorkTimeClass,
  setBaseGanttSubTaskCSS,
  setBaseGanttMilestoneCSS,
  highlightDragPosition,
  dynamicTaskTextPosition,
  initBaseGanttZoomConfig,
  setBaseGanttZoom,
  baseGanttZoomIn,
  baseGanttZoomOut,
  chartBoxSelectionCallback,
  repairMousemoveGantt,
  exportBaseGanttPNG,
  exportBaseGanttPDF,
  exportBaseGanttExcel,
  exportBaseGanttMSProject,
  enableBaseGanttLoading,
  closeBaseGanttLoading,
  openBaseGanttAbout,
  setBaseGanttBaseLine,
  switchBaseGanttBaseLine,
  openProjectCalendar,
  filterBaseGanttTask,
  updateProjectCalendar,
  dateRangeDynamically,
  adjustSubTaskConstraint,
  setBaseGanttProjectStart,
  setBaseGanttProjectEnd,
  setProjectStartAndEndDate,
  customTaskTooltipContent,
  customLinkTooltipContent,
  autoAdjustProjectStartEndDate,
  deleteSelectedTask,
  addRelationTaskLink,
  deleteFSRelationTaskLink,
  deleteRelationTaskLink,
  baseGanttProgressConfig,
  calculateSummaryProgress,
  refreshSummaryProgress,
  taskIndentAndOutdent,
  baseGanttTaskIndent,
  baseGanttTaskOutdent,
  baseGanttTaskOutdentInSitu,
  copyOrCutBaseGanttData,
  pasteBaseGanttData,
  monitorRedoUndoEvent,
  enableFilterDecompose,
  getDifferenceData,
  checkDifferenceData,
  resetDifferenceData,
];

HBBaseGantt 事件 ​

方法名称说明回调类型版本
autoSaveBaseGanttData数据保存之后之后的自动回调() => void
switchMenuMask是否开启操作栏的遮罩(防止点击)(spinning) => void

基于 MIT 许可发布

Copyright © 2024-2025 框架作者(LMX) 版权所有