甘特图资源

您可以将不同的任务分配给不同的资源。在甘特图中,这些表示当前任务将由哪些资源完成。

甘特图资源 甘特图资源由分配和资源两个表组成。 如果您想使用资源,您需要先在任务表和其他两个表之间建立关系。 如果您想在资源列中显示相应资源的内容,您需要将值添加为:taskTableSourceRelationshipName.assignmentTableSourceRelationshipName.name 资源列有自己的数据类型,需要在视图中添加dataType: "TaskResources"。 资源不会影响当前任务的持续时间,而是影响当前任务的所有工作时间。 任务工作时间是当前任务所有资源的工作时间。 资源关系 要添加资源,您需要一个任务表、分配表和资源表。 这三个表通过关系链接在一起。 任务表与分配表之间的关系中的源名称和目标名称必须相同。 资源列可以直接从配置的关系中获取资源名称。 资源单元格 为了更方便地分配资源,资源列有自己的数据类型。 您还需要添加相应的数据类型,以便在资源列中生成相应的下拉框以选择资源。 工作时间列 任务的工作时间表示当前任务所有资源的工作时间,默认单位为小时。 例如,如果当前任务的持续时间为1天,并且有两个资源同时处理该任务,则该任务的工作时间为2天,一天的工作时间为8小时,因此当前任务的工作时间为16小时。 资源表 如果您想添加资源,您需要在资源表中添加相应的资源,然后将更改提交到服务器,然后重新拉取甘特图中的相应数据。
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); initGanttSheet(spread); spread.resumePaint(); } function initGanttSheet(spread) { var taskTableName = "Gantt_Mode"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + taskTableName; var dataManager = spread.dataManager(); var taskTable = dataManager.addTable("taskTable", { batch: true, remote: { read: { url: apiUrl }, batch: { url: apiUrl + "Collection" } }, schema: { hierarchy: { type: "Parent", column: "parentId" }, columns: { id: { isPrimaryKey: true }, taskNumber: { dataType: "rowOrder" } } } }); var assignmentTableName = "Assignment"; var assignmentUrl = baseApiUrl + "/" + assignmentTableName; assignmentTable = dataManager.addTable("assignmentTable", { batch: true, remote: { read: { url: assignmentUrl }, batch: { url: assignmentUrl + "Collection" } } }); var resourcesTableName = "Resources"; var resourcesUrl = baseApiUrl + "/" + resourcesTableName; resourceTable = dataManager.addTable("resourceTable", { batch: true, remote: { read: { url: resourcesUrl }, batch: { url: resourcesUrl + "Collection" } }, }); dataManager.addRelationship(assignmentTable, "taskId", "task", taskTable, "id", "taskId"); dataManager.addRelationship(assignmentTable, "resourceId", "resource", resourceTable, "id", "assignment"); var ganttSheet = spread.addSheetTab(0, "GanttSheet1", GC.Spread.Sheets.SheetType.ganttSheet); var view = taskTable.addView("ganttView1", [ { value: "taskNumber", caption: "NO", width: 60 }, { value: "name", caption: "Task Name", width: 200 }, { value: "duration", caption: "Duration", width: 90 }, { value: "predecessors", caption: "Predecessors", width: 120 }, { value: "workTime" }, { value: "taskId.resource.name", caption: "Resources Name", dataType: "TaskResources", width: 300 }, ]); view.fetch().then(function() { ganttSheet.bindGanttView(view); }).then(function() { let taskRule = ganttSheet.project.taskStyleRules.getRule("task"); let taskStyle = taskRule.style.taskbarStyle; taskStyle.rightText = "taskId.resource.name"; taskRule.style.taskbarStyle = taskStyle; }); } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/SpreadJSTutorial\//)[0] + 'server/api'; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div id="optionContainer" class="optionContainer"> </div> </div> </html>
.sample-tutorial { width: 100%; height: 100%; } body, html { padding: 0; margin: 0; width: 100%; height: 100%; position: relative; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; }