Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
candy-web-gantt
Advanced tools
甘特图
Weekly downloads
Readme
用于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
对应的不同的样式,为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')];
利用 [smallItemWidth]
和 [middleItemWidth]
去定义 短
中
长
三类的长度
双击Item
进入分配模式,再点击完成分配,返回的对象为:
{
item: Item,
slot: Slot,
slotTimeWindow: WorkingTime,
overlapItems: {id: [overlappedItemIds...]}
}
考虑到复用性和扩展性,甘特图内容的搜索需要设置搜索下拉框内显示内容对应模板 itemSearchOptionTemplate
与 slotSearchOptionTemplate
同时,还需要针对 nz-select 里对应可以搜索的label进行构建,对应的配置项为 itemSearchScript
和 slotSearchScript
以下数据为实例:
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] | 甘特图显示比例,单位为小时 | number | 1 / 2 | - |
[virtualScrollerTimeout] | 虚拟滚动的延迟计算时间,单位为毫秒 | number | 10 | - |
[rowDisplayBuffer] | 虚拟滚动的纵向缓冲行数 | number | 5 | - |
[smallItemWidth] | 定义为短的 Item 的宽度 | number | 100 | - |
[middleItemWidth] | 定义为中等长度的 Item 的宽度 | number | 130 | - |
[startTime] | 整个甘特图的开始时间戳 | number | [items]对应的最早的开始时间 | - |
[endTime] | 整个甘特图的结束时间戳 | number | [items]对应的最晚的结束时间 | - |
[frameHeight] | 整个甘特图可视高度 | string | calc(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> | - | - |
用于构建甘特图布局、配色的控件。
使用方式
<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>
对应字段
的选项来源对应 item
和slot
的数据的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
对应)。
对应参数 itemLayout
和slotLayout
,两者都对应 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() {}
}
itemLayout
用到了 itemLT(左上),itemTop(中上),itemRT(右上),itemLB(左下),itemBottom(中下),itemRB(右下),itemPreContent(前置内容,例如额外行走时间等信息)
slotLayout
只用到了 itemMain
对于普通字段(String或者Number)可以直接选取
对于时间类型的字段,选取之后需要设置对应的日期格式
对于复杂一些逻辑的内容显示,需要选择使用脚本,然后填上脚本描述以及对应的处理脚本内容。其中处理脚本内容利用到JavaScript的eval命令,使用的时候请使用task
作为实体的对象来编写逻辑。注意:由于使用eval,所以逻辑计算不要设计得太复杂,否则性能可能会有影响。
用户可以通过设置测试用的数据来查看甘特图的item
和slot
对应的样式。
itemLayout
用到了 itemLT(左上),itemTop(中上),itemRT(右上),itemLB(左下),itemBottom(中下),itemRB(右下),itemPreContent(前置内容,例如额外行走时间等信息)
slotLayout
只用到了 itemMain
对于普通字段(String或者Number)可以直接选取
对于时间类型的字段,选取之后需要设置对应的日期格式
对于复杂一些逻辑的内容显示,需要选择使用脚本,然后填上脚本描述以及对应的处理脚本内容。其中处理脚本内容利用到JavaScript的eval命令,使用的时候请使用task
作为实体的对象来编写逻辑。注意:由于使用eval,所以逻辑计算不要设计得太复杂,否则性能可能会有影响。
用户可以通过设置判断条件来实现甘特图 item
的边框和背景的颜色样式。 设置逻辑与布局内容的设置方式一致。
FAQs
The npm package candy-web-gantt receives a total of 7 weekly downloads. As such, candy-web-gantt popularity was classified as not popular.
We found that candy-web-gantt demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.