Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

candy-web-gantt

Package Overview
Dependencies
1
Maintainers
3
Versions
126
Issues
File Explorer

Advanced tools

candy-web-gantt

甘特图

    0.20.4latest

Version published
Maintainers
3
Yearly downloads
6,893
increased by4.63%

Weekly downloads

Readme

Source

CandyWebGantt

用于Angular项目的甘特图控件。

使用方式

<candy-web-gantt #gantt frameHeight="calc(100vh - 150px)" [slots]="slotData" [items]="itemData" [slotTimeWindows]="workingTime" [itemAdditionalClass]="itemStyleClassData" [blockScale]="1/4" [virtualScrollerTimeout]="10" [slotItemTemplate]="slotItemTemplate" [slotTopItemTemplate]="slotTopItemTemplate" [ganttItemContentTemplate]="ganttContentTemplate" (onItemAssigned)="onItemAssigned($event)" [itemSearchOptionTemplate]="itemSearchOptionTemplate" [slotSearchOptionTemplate]="slotSearchOptionTemplate" [itemSearchScript]="itemSearchScript" [slotSearchScript]="slotSearchScript"></candy-web-gantt>

甘特图Item对应的自定义样式的显示

甘特内容中item对应的不同的样式,为ItemStyleClass类型的Array ItemStyleClass中的 ids 代表了 item 对应的id的数组,className 对应这些id需要额外增加哪些样式

import {ItemStyleClass} from "candy-web-gantt"; ... this.tasks.forEach((t, i) => { if (i % 4 === 0) { mockIds.push(t.id); } }); this.itemStyleClassData = [new ItemStyleClass(mockIds, 'opacityItem')];

定义Item长度类型

利用 [smallItemWidth][middleItemWidth] 去定义 三类的长度

Item分配事件

双击Item 进入分配模式,再点击完成分配,返回的对象为:

{ item: Item, slot: Slot, slotTimeWindow: WorkingTime, overlapItems: {id: [overlappedItemIds...]} }

甘特图搜索

考虑到复用性和扩展性,甘特图内容的搜索需要设置搜索下拉框内显示内容对应模板 itemSearchOptionTemplateslotSearchOptionTemplate searchSetting1 searchSetting1

同时,还需要针对 nz-select 里对应可以搜索的label进行构建,对应的配置项为 itemSearchScriptslotSearchScript 以下数据为实例:

itemSearchScript = "item.metaData.flightVo.flightNum + item.metaData.taskName" slotSearchScript = "item.label + item.metaData.code"

配置项

参数说明类型默认值例子
[slots]左边资源内容的对象数据Slot[][]this.slotData = staffs.map(s => new Slot(s.id, s.name, s));
[items]主内容对应的对象数据Item[][]this.itemData = this.tasks.map(s => new Item(s.id, moment(s.scheduleStartTime).valueOf(), moment(s.scheduleEndTime).valueOf(), s.resourceId, s));
[slotTimeWindows]甘特内容中Slot对应的可用时间WorkingTime[][]this.workingTime = workingTimes.map(s => new WorkingTime(s.id, moment(s.scheduleShiftStartTime).valueOf(), moment(s.scheduleShiftEndTime).valueOf(), s.resourceId, s));
[itemAdditionalClass]甘特内容中Item对应的不同的样式ItemStyleClass[]this.slotData = staffs.map(s => new Slot(s.id, s.name, s));
[blockScale]甘特图显示比例,单位为小时number1 / 2-
[virtualScrollerTimeout]虚拟滚动的延迟计算时间,单位为毫秒number10-
[rowDisplayBuffer]虚拟滚动的纵向缓冲行数number5-
[smallItemWidth]定义为短的 Item 的宽度number100-
[middleItemWidth]定义为中等长度的 Item 的宽度number130-
[startTime]整个甘特图的开始时间戳number[items]对应的最早的开始时间-
[endTime]整个甘特图的结束时间戳number[items]对应的最晚的结束时间-
[frameHeight]整个甘特图可视高度stringcalc(100vh)calc(100vh - 150px)
[slotTopItemTemplate]左边资源顶部显示内容TemplateRef<void>--
[ganttItemContentTemplate]主要甘特内容的显示模板TemplateRef<{ $implicit: data }>--
[timelineMarkTemplate]刻度线显示模板TemplateRef<{ $implicit: data }>--
(onItemAssigned)分配甘特图对象的时候触发的事件EventEmitter<any>--
[itemSearchOptionTemplate]甘特图对于item搜索的显示模板EventEmitter<any>--
[slotSearchOptionTemplate]甘特图对于slot搜索的显示模板EventEmitter<any>--
[itemSearchScript]甘特图对于item搜索的文本就行匹配的条件脚本EventEmitter<any>--
[slotSearchScript]甘特图对于slot搜索的文本就行匹配的条件脚本EventEmitter<any>--

CandyGanttSettings

用于构建甘特图布局、配色的控件。

使用方式

<candy-gantt-settings [fieldSettings]="fieldSettings" [slotSettings]="slotSettings" [itemLayout]="itemLayout" [slotLayout]="slotLayout" [borderColorSettings]="borderColorSettings" [backgroundColorSettings]="backgroundColorSettings" (onItemLayoutSet)="saveLayout($event, 'item')" (onSlotLayoutSet)="saveLayout($event, 'slot')" (onBorderColorSettingsSet)="saveColorStyleSettings($event, 'border')" (onBackgroundColorSettingsSet)="saveColorStyleSettings($event, 'background')" ></candy-gantt-settings>

fieldSettings与slotSettings,布局设置里的对应字段的选项来源

对应 itemslot的数据的metaData的字段和类型,对应GanttItemFieldMapping的类

class GanttItemFieldMapping { public fieldName: string; public fieldDisplayName: string; public fieldDataType: string; public format: string; public processScript: string; public useScript: boolean; public scriptDescription: string; ... }

以下数据为实例:

[ { "fieldName": "taskTime", "fieldDisplayName": "任务时间", "fieldDataType": "Datetime", "format": "HH:mm" }, { "fieldName": "startTime", "fieldDisplayName": "开始时间", "fieldDataType": "Datetime", "format": "HH:mm" }, { "fieldName": "inFlightNum", "fieldDisplayName": "进港航班号", "fieldDataType": "String" }, { "fieldName": "locked", "fieldDisplayName": "是否锁定", "fieldDataType": "Boolean" }, { "fieldName": "estimatedTravelTime", "fieldDisplayName": "任务预计行程时间(分钟) ", "fieldDataType": "Number" } ]

字段类型可以现在有 String Number Boolean Datetime, 其中Datetime需要额外定义显示的格式(需要Format对应)。

甘特图Item与Slot的布局设置

对应参数 itemLayoutslotLayout,两者都对应 GanttItemLayout 的类:

class GanttItemLayout { public itemLT: GanttItemFieldMapping; public itemTop: GanttItemFieldMapping; public itemRT: GanttItemFieldMapping; public itemLB: GanttItemFieldMapping; public itemBottom: GanttItemFieldMapping; public itemRB: GanttItemFieldMapping; public itemMain: GanttItemFieldMapping; public itemPreContent: GanttItemFieldMapping; constructor() {} }

构建布局

Item布局设置

avatar

itemLayout 用到了 itemLT(左上),itemTop(中上),itemRT(右上),itemLB(左下),itemBottom(中下),itemRB(右下),itemPreContent(前置内容,例如额外行走时间等信息)

Slot布局设置

avatar

slotLayout 只用到了 itemMain

点击对应位置有弹窗进行布局内容配置

avatar

对于普通字段(String或者Number)可以直接选取

avatar

对于时间类型的字段,选取之后需要设置对应的日期格式

avatar

对于复杂一些逻辑的内容显示,需要选择使用脚本,然后填上脚本描述以及对应的处理脚本内容。其中处理脚本内容利用到JavaScript的eval命令,使用的时候请使用task作为实体的对象来编写逻辑。注意:由于使用eval,所以逻辑计算不要设计得太复杂,否则性能可能会有影响。

布局预览

avatar

用户可以通过设置测试用的数据来查看甘特图的itemslot对应的样式。

构建布局

Item布局设置

avatar

itemLayout 用到了 itemLT(左上),itemTop(中上),itemRT(右上),itemLB(左下),itemBottom(中下),itemRB(右下),itemPreContent(前置内容,例如额外行走时间等信息)

Slot布局设置

avatar

slotLayout 只用到了 itemMain

点击对应位置有弹窗进行布局内容配置

avatar

对于普通字段(String或者Number)可以直接选取

avatar

对于时间类型的字段,选取之后需要设置对应的日期格式

avatar

对于复杂一些逻辑的内容显示,需要选择使用脚本,然后填上脚本描述以及对应的处理脚本内容。其中处理脚本内容利用到JavaScript的eval命令,使用的时候请使用task作为实体的对象来编写逻辑。注意:由于使用eval,所以逻辑计算不要设计得太复杂,否则性能可能会有影响。

边框以及背景样式设定

avatar

用户可以通过设置判断条件来实现甘特图 item 的边框和背景的颜色样式。 设置逻辑与布局内容的设置方式一致。

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc