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...]}
      }

甘特图搜索

考虑到复用性和扩展性，甘特图内容的搜索需要设置搜索下拉框内显示内容对应模板 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>	-	-

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，布局设置里的对应字段的选项来源

对应 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对应）。

甘特图Item与Slot的布局设置

对应参数 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() {}
     }

构建布局

Item布局设置

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

Slot布局设置

slotLayout 只用到了 itemMain

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

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

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

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

布局预览

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

构建布局

Item布局设置

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

Slot布局设置

slotLayout 只用到了 itemMain

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

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

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

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

边框以及背景样式设定

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