candy-web-gantt v0.22.9

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"

配置项

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 的边框和背景的颜色样式。 设置逻辑与布局内容的设置方式一致。