このサンプルでは、ガントシートを利用してガントチャートを作成し、タイムスケールの設定、カレンダー構成のカスタマイズ、タスクを追加／削除、Excel出力などの使い方を示しています。
タスク設定
ガントシートにタスクとリソースの割り当てを定義しています。
タイムスケールのレイアウトを３つの層（上段、中段、下段）に分けてセパレーター表示するように設定し、書式と配置位置をカスタマイズしています。
稼働時間に土曜日の10:00から16:00を追加し、週間稼働日数を変更しています。
稼働時間の単位を「月」に設定し、サマリータスクの工数を月単位で表示しています。
スタイル
組み込みのスタイルルールを利用して、タスク／サマリー／進捗をそれぞれのスタイルを設定しています。
特定のタスク（地鎮祭と検査タスク）に対してタスクバーのスタイルを設定しています。
チャート領域のグリッド線を線種と表示間隔をカスタマイズしています。
非稼働時間の塗りつぶし色とパターンをカスタマイズしています。
操作
タスクの追加、削除、リンクの作成、およびExcelへの出力機能を実装しています。
2つ以上のタスクを選択し、リンクボタンを押下すると選択したタスクをリンクできます。
const GCSG = GC.Spread.Sheets.GanttSheet;
const GCSS = GC.Spread.Sheets;
var ganttSheet, spread;
window.onload = function () {
spread = new GCSS.Workbook(document.getElementById("ss"), { sheetCount: 1 });
initSpread(spread);
initDataSourceSheet(spread)
spread.setActiveSheetTab(0);
spread.changeSheetPosition("スプレッド邸新築工事", 0);
};
function initDataSourceSheet(spread) {
let sheet = spread.getSheet(0);
sheet.name("DataSource");
sheet.setDataSource(Gantt_Data);
for (let columnIndex = 0; columnIndex < 11; columnIndex++) {
sheet.setColumnWidth(columnIndex, 80);
}
sheet.setColumnWidth(4, 250);
}
function initSpread(spread) {
spread.suspendPaint();
// タブ表示の設定
spread.options.tabEditable = false;
spread.options.newTabVisible = false;
spread.options.tabNavigationVisible = false;
spread.options.allowSheetReorder = false;
spread.options.allSheetsListVisible = GCSS.AllSheetsListVisibility.hide;
// ガントシートの初期化
initGanttSheet(spread);
spread.resumePaint();
}
// ガントシートの作成
function initGanttSheet(spread) {
var dataManager = spread.dataManager();
var taskTable = dataManager.addTable('taskTable', {
data: Gantt_Data,
batch: true,
schema: {
hierarchy: {
type: 'Parent',
column: 'parentId',
},
columns: {
id: { isPrimaryKey: true },
taskNumber: { dataType: 'rowOrder' },
},
},
});
var assignmentTable = dataManager.addTable("assignmentTable", {
data: Assignment,
batch: true,
});
var resourceTable = dataManager.addTable("resourceTable", {
data: Resources,
batch: true,
});
dataManager.addRelationship(assignmentTable, "taskId", "task", taskTable, "id", "taskId");
dataManager.addRelationship(assignmentTable, "resourceId", "resource", resourceTable, "id", "assignment");
// ガントシートを追加する
ganttSheet = spread.addSheetTab(
0,
'スプレッド邸新築工事',
GCSS.SheetType.ganttSheet
);
// データ書式
var dataBarRule1 = {
ruleType: 'dataBarRule',
color: '#3eb370',
gradient: true,
};
var fitModeHeaderStyle = {
backColor: "#c0a2c7",
foreColor: "#333333",
font: 'normal bold 13px Georgia',
}
// ビューを追加
var taskView = taskTable.addView('taskView', [
{ value: "id", caption: "id", width: 60, visible: false },
{
value: 'taskNumber', caption: 'NO',
headerStyle: fitModeHeaderStyle, width: 60
},//必須フィールド
{
value: 'name', caption: 'WBS', style: { font: 'normal normal 13px Georgia' },
headerStyle: fitModeHeaderStyle, width: 180
},//必須フィールド
{
value: 'duration', caption: '計画',
headerStyle: fitModeHeaderStyle, width: 70
},//必須フィールド
{
value: 'predecessors', caption: '先行タスク',
headerStyle: fitModeHeaderStyle,
width: 90,
},//必須フィールド
{
value: "complete", caption: "進捗率", headerStyle: fitModeHeaderStyle,
width: 80, conditionalFormats: [dataBarRule1]
},
{
value: "taskId.resource.name", caption: "担当", style: { font: 'normal normal 10px Georgia', wordWrap: true },
headerStyle: fitModeHeaderStyle, dataType: "TaskResources", width: 100
},
]);
// ホバースタイルを追加
var hoverStyle = new GC.Spread.Sheets.Style();
hoverStyle.backColor = '#fce2c4';
hoverStyle.foreColor = '#674598';
taskView.addStyleRule('hoverStyle', hoverStyle, {
state: GC.Data.RowColumnStates.hover,
direction: GC.Data.StateRuleDirection.row,
});
// ガントビューを追加
taskView
.fetch().then(function () {
ganttSheet.bindGanttView(taskView);
})
.then(function () {
// プロジェクトの開始日を設定
ganttSheet.project.startDate = new Date('2024/04/01 09:00');
// タイムスケールの階層モード
let tierMode = GCSG.TimescaleTierMode.topMiddleBottom;
ganttSheet.project.timescale.tierMode = tierMode;
// 上段
ganttSheet.project.timescale.topTier.unit = GCSG.TimescaleUnit.months;
ganttSheet.project.timescale.topTier.formatter = 'yyyy年mm月';
// 中段
ganttSheet.project.timescale.middleTier.unit = GCSG.TimescaleUnit.weeks;
ganttSheet.project.timescale.middleTier.labelAlign = 'Center';
ganttSheet.project.timescale.middleTier.formatter = `"第"{!WEEK_FROM_START}"週"`;
// 下段
ganttSheet.project.timescale.bottomTier.unit = GCSG.TimescaleUnit.days;
ganttSheet.project.timescale.bottomTier.formatter = `m/d(ddd)`;
// タスクバーのスタイルルール
let taskStyleRule = ganttSheet.project.taskStyleRules.getRule('task');
let taskStyle = taskStyleRule.style.taskbarStyle;
taskStyle.insideText = "duration";
taskStyle.middleShape = 'rectangleBar';
taskStyle.middleColor = '#abd08f';
taskStyle.leftText = 'taskNumber';
taskStyleRule.style.taskbarStyle = taskStyle;
// 進捗のスタイルルール
let progressStyleRule = ganttSheet.project.taskStyleRules.getRule('progress');
let progressStyle = progressStyleRule.style.taskbarStyle;
progressStyle.middlePattern = 'diagonalCross';
progressStyle.middleColor = '#dbd0e6';
progressStyleRule.style.taskbarStyle = progressStyle;
// サマリーのスタイル
var summaryStyleRule = ganttSheet.project.taskStyleRules.getRule('summary');
var summaryStyle = summaryStyleRule.style.taskbarStyle;
summaryStyle.startShape = 'star';
summaryStyle.startColor = '#e6b422';
summaryStyle.endShape = 'circleArrowDown';
summaryStyle.endColor = '#f08300';
summaryStyle.topText = 'name';
summaryStyle.leftText = "start";
summaryStyle.rightText = "finish";
summaryStyleRule.style.taskbarStyle = summaryStyle;
// マイルストーンのスタイル
var milestoneStyleRule = ganttSheet.project.taskStyleRules.getRule('milestone');
var milestoneStyle = milestoneStyleRule.style.taskbarStyle;
milestoneStyle.startShape = 'circle';
milestoneStyle.startColor = 'red';
milestoneStyle.rightText = 'name';
milestoneStyle.rightTextStyle = {
color: 'red',
};;
milestoneStyleRule.style.taskbarStyle = milestoneStyle;
// 重要なタスクのスタイル
var importantBarStyles = {};
importantBarStyles['task'] = {
taskbarStyle: {
startShape: "lineShape",
startType: "solid",
startColor: "#e7609e",
middlePattern: "diagonalLeft",
middleShape: "rectangleBar",
middleColor: "#e7609e",
endShape: "lineShape",
endType: "solid",
endColor: "#e7609e",
leftText: "taskNumber",
topText: "name",
}
}
// 検査の日程をマーク
var importantTaskIds = [1, 8, 26, 27, 64];
for (var i = 0; i < importantTaskIds.length; i++) {
var task = ganttSheet.project.getTask(importantTaskIds[i]);
task.style = importantBarStyles;
}
// タイムスケールの最下層の目盛りに揃えるグリッド線
ganttSheet.gridlines.bottomTierColumn = {
lineType: GCSG.GanttGridlineType.dashed,
lineColor: "#c0a2c7"
};
// プロジェクト開始の目盛線
ganttSheet.gridlines.projectStart = {
lineType: GCSG.GanttGridlineType.thin,
lineColor: "purple"
};
// プロジェクト終了の目盛線
ganttSheet.gridlines.projectFinish = {
lineType: GCSG.GanttGridlineType.dashed,
lineColor: "purple"
};
// ガント行の間隔目盛線
ganttSheet.gridlines.ganttRows = {
lineType: GCSG.GanttGridlineType.dashDot,
lineColor: "#f6ad49",
interval: 3,
intervalLineType: GCSG.GanttGridlineType.thin,
intervalLineColor: "#9cc3e5"
};
// 非稼働時間のパターンをlineCross
ganttSheet.project.timescale.nonWorkingTime.color = "#c0c6c9";
ganttSheet.project.timescale.nonWorkingTime.pattern = "mediumFill";
// タスクバーのレイアウト
ganttSheet.project.layout.barHeight = 20;
ganttSheet.project.layout.linkLineMode = "toEnd";
ganttSheet.project.layout.barTextDateFormat = "yyyy/mm/dd";
ganttSheet.project.layout.roundBarsToWholeDays = true;
// 週のはじまりを月曜日に設定
ganttSheet.project.calendarSettings.weekStartOn = GCSG.DayOfWeek.Monday;
// 作業開始／終了時刻
ganttSheet.project.calendarSettings.defaultStartTime = { hour: 8, minute: 30 };
ganttSheet.project.calendarSettings.defaultFinishTime = { hour: 17, minute: 30 };
// 稼働時間の単位を月に設定
ganttSheet.project.calendarSettings.defaultDurationUnit = "Month";
// 土曜日の10:00~16:00を稼働時間に設定
var calendar = ganttSheet.project.calendar;
var currentCustomWorkWeek = calendar.defaultWorkWeek;
var workday = calendar.defaultWorkWeek.getWorkDay(GCSG.DayOfWeek.Saturday);
var workTime = { start: { hour: 10, minute: 0 }, end: { hour: 16, minute: 0 } };
workday.push(workTime);
calendar.defaultWorkWeek = currentCustomWorkWeek;
ganttSheet.project.calendar = calendar;
// タイムスケールの部分をズーム表示
ganttSheet.project.timescale.zoomTo(1.5, false);
});
// タスク追加
document.getElementById("insertTask").addEventListener("click", function () {
addTask();
});
// タスク削除
document.getElementById("deleteTask").addEventListener("click", function () {
deleteTask();
});
// タスクリンク
document.getElementById("addLink").addEventListener("click", function () {
addLink();
});
// 出力
document.getElementById("exportExcel").addEventListener('click', function () {
exportFile();
});
}
// タスク追加
function addTask() {
var project = ganttSheet.project;
var selections = ganttSheet.getSelections();
if (isContainsRootTask(selections)) return;
var insertedRow = Math.min(...selections.map(r => r.row), project.tasks.length);
var rowCount = selections.map(r => r.rowCount).reduce((pre, current) => { return pre + current });
var taskData = createTaskDataList(rowCount, () => ({ name: "テスト工事" }));
project.insertTasksByRow(insertedRow, taskData);
}
// タスクデータの作成
function createTaskDataList(count, initializer) {
var array = new Array(count);
for (var index = 0; index < count; index++) {
array[index] = initializer();
}
return array;
}
// タスク削除
function deleteTask() {
var selections = ganttSheet.getSelections();
if (isContainsRootTask(selections)) return;
var project = ganttSheet.project;
var rowIds = getSelectedRowIndexes();
project.removeTasks(rowIds);
}
// 親タスクの存在チェック
function isContainsRootTask(selections) {
var isRoot = false;
selections.forEach(s => {
if (s.row === 0) isRoot = true;
})
return isRoot;
}
// タスクのリンクを追加
function addLink() {
var project = ganttSheet.project;
var links = [];
var selections = ganttSheet.getSelections();
var previous = -1;
for (var range of selections) {
if (previous != -1) {
links.push([previous, range.row]);
}
for (var row = range.row + 1; row < range.row + range.rowCount; row++) {
links.push([row - 1, row]);
}
previous = range.row + range.rowCount - 1;
}
if (links.length <= 0) {
return;
}
project.suspendSchedule();
for (var link of links) {
var [fromTaskNumber, toTaskNumber] = link;
project.addDependency({ fromTaskNumber, toTaskNumber });
}
project.resumeSchedule();
}
// 選択行のインデックス取得
function getSelectedRowIndexes() {
var rows = [];
var selections = ganttSheet.getSelections();
for (var range of selections) {
for (var row = range.row; row < range.row + range.rowCount; row++) {
rows.push(row);
}
}
return rows;
}
// Excelに出力
function exportFile() {
spread.export(function (blob) {
saveAs(blob, 'スプレッド邸新築工事工程管理表.xlsx');
}, function (e) {
}, {
fileType: GCSS.FileType.excel,
includeBindingSource: true,
saveAsView: true
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="spreadjs culture" content="ja-jp" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="sample">
<div id="ss" class="spreadsheets"></div>
</div>
<div class="btn-container">
<button id="insertTask" class="floatBtn">追加</button>
<button id="deleteTask" class="floatBtn">削除</button>
<button id="addLink" class="floatBtn">リンク</button>
<button id="exportExcel" class="floatBtn">出力</button>
</div>
</body>
</html>
const Gantt_Data = [
{
"id": 1,
"parentId": null,
"mode": "Auto",
"taskNumber": 1,
"name": "地鎮祭",
"duration": 1,
"predecessors": "",
"level": 1,
"resource": 2,
"complete": 1,
"isMilestone": ""
},
{
"id": 2,
"parentId": null,
"mode": "Auto",
"taskNumber": 2,
"name": "★工事開始★(マイルストーン)",
"duration": 0,
"predecessors": 1,
"level": 1,
"resource": null,
"complete": null,
"isMilestone": "TRUE"
},
{
"id": 3,
"parentId": null,
"mode": "Auto",
"taskNumber": 3,
"name": "地盤改良",
"duration": "",
"predecessors": 1,
"level": 1,
"resource": 1,
"complete": 0.8,
"isMilestone": ""
},
{
"id": 4,
"parentId": 3,
"mode": "Auto",
"taskNumber": 4,
"name": "地盤調査",
"duration": 1,
"predecessors": "",
"level": 2,
"resource": 4,
"complete": 0.4,
"isMilestone": ""
},
{
"id": 5,
"parentId": 3,
"mode": "Auto",
"taskNumber": 5,
"name": "地盤改良",
"duration": 2,
"predecessors": 4,
"level": 2,
"resource": 1,
"complete": 0.6,
"isMilestone": ""
},
{
"id": 6,
"parentId": null,
"mode": "Auto",
"taskNumber": 6,
"name": "基礎工事",
"duration": "",
"predecessors": 3,
"level": 1,
"resource": 3,
"complete": 0.5,
"isMilestone": ""
},
{
"id": 7,
"parentId": 6,
"mode": "Auto",
"taskNumber": 7,
"name": "基礎配筋・型枠",
"duration": 2,
"predecessors": "",
"level": 2,
"resource": 3,
"complete": 0.8,
"isMilestone": ""
},
{
"id": 8,
"parentId": 6,
"mode": "Auto",
"taskNumber": 8,
"name": "第1回検査（基礎配筋）",
"duration": 1,
"predecessors": 7,
"level": 2,
"resource": 4,
"complete": 0.7,
"isMilestone": ""
},
{
"id": 9,
"parentId": 6,
"mode": "Auto",
"taskNumber": 9,
"name": "コンクリート打設",
"duration": 1,
"predecessors": 8,
"level": 2,
"resource": 3,
"complete": 0.4,
"isMilestone": ""
},
{
"id": 10,
"parentId": 6,
"mode": "Auto",
"taskNumber": 10,
"name": "基礎天端均し",
"duration": 1,
"predecessors": 9,
"level": 2,
"resource": 1,
"complete": 0.3,
"isMilestone": ""
},
{
"id": 11,
"parentId": null,
"mode": "Auto",
"taskNumber": 11,
"name": "仮設工事",
"duration": "",
"predecessors": "3,6",
"level": 1,
"resource": 5,
"complete": 0.4,
"isMilestone": ""
},
{
"id": 12,
"parentId": 11,
"mode": "Auto",
"taskNumber": 12,
"name": "仮設トイレ設置",
"duration": 1,
"predecessors": "",
"level": 2,
"resource": 5,
"complete": 0.6,
"isMilestone": ""
},
{
"id": 13,
"parentId": 11,
"mode": "Auto",
"taskNumber": 13,
"name": "仮設電気設置",
"duration": 3,
"predecessors": 12,
"level": 2,
"resource": 3,
"complete": 0.8,
"isMilestone": ""
},
{
"id": 14,
"parentId": 11,
"mode": "Auto",
"taskNumber": 14,
"name": "仮設水道設置",
"duration": 3,
"predecessors": 13,
"level": 2,
"resource": 5,
"complete": 0.7,
"isMilestone": ""
},
{
"id": 15,
"parentId": 11,
"mode": "Auto",
"taskNumber": 15,
"name": "足場組立",
"duration": 2,
"predecessors": 14,
"level": 2,
"resource": 5,
"complete": 0.6,
"isMilestone": ""
},
{
"id": 16,
"parentId": null,
"mode": "Auto",
"taskNumber": 16,
"name": "★工事準備完了★(マイルストーン)",
"duration": 0,
"predecessors": 15,
"level": 0,
"resource": "",
"complete": null,
"isMilestone": "TRUE"
},
{
"id": 17,
"parentId": null,
"mode": "Auto",
"taskNumber": 17,
"name": "土木工事",
"duration": "",
"predecessors": 11,
"level": 1,
"resource": 5,
"complete": 0.1,
"isMilestone": ""
},
{
"id": 18,
"parentId": 17,
"mode": "Auto",
"taskNumber": 18,
"name": "土工事",
"duration": "",
"predecessors": "",
"level": 2,
"resource": 5,
"complete": 0.6,
"isMilestone": ""
},
{
"id": 19,
"parentId": 18,
"mode": "Auto",
"taskNumber": 19,
"name": "遣り方（丁張り）",
"duration": 4,
"predecessors": "",
"level": 3,
"resource": 1,
"complete": 0.5,
"isMilestone": ""
},
{
"id": 20,
"parentId": 18,
"mode": "Auto",
"taskNumber": 20,
"name": "根切り",
"duration": 2,
"predecessors": 19,
"level": 3,
"resource": 4,
"complete": 0.5,
"isMilestone": ""
},
{
"id": 21,
"parentId": 18,
"mode": "Auto",
"taskNumber": 21,
"name": "砕石・捨てコンクリート",
"duration": 2,
"predecessors": 20,
"level": 3,
"resource": 2,
"complete": 0.6,
"isMilestone": ""
},
{
"id": 22,
"parentId": 17,
"mode": "Auto",
"taskNumber": 22,
"name": "木工事",
"duration": "",
"predecessors": 18,
"level": 2,
"resource": 5,
"complete": 0.8,
"isMilestone": ""
},
{
"id": 23,
"parentId": 22,
"mode": "Auto",
"taskNumber": 23,
"name": "土台・基礎パッキン",
"duration": 5,
"predecessors": "",
"level": 3,
"resource": 1,
"complete": 0.4,
"isMilestone": ""
},
{
"id": 24,
"parentId": 22,
"mode": "Auto",
"taskNumber": 24,
"name": "建て方・上棟",
"duration": 1,
"predecessors": 23,
"level": 3,
"resource": 3,
"complete": 0.3,
"isMilestone": ""
},
{
"id": 25,
"parentId": 22,
"mode": "Auto",
"taskNumber": 25,
"name": "木工事",
"duration": 1,
"predecessors": 24,
"level": 3,
"resource": 3,
"complete": 0.5,
"isMilestone": ""
},
{
"id": 26,
"parentId": 22,
"mode": "Auto",
"taskNumber": 26,
"name": "第2回検査（構造）",
"duration": 4,
"predecessors": 25,
"level": 3,
"resource": 5,
"complete": 0.3,
"isMilestone": ""
},
{
"id": 27,
"parentId": 22,
"mode": "Auto",
"taskNumber": 27,
"name": "第3回検査（下地）",
"duration": 3,
"predecessors": 26,
"level": 3,
"resource": 1,
"complete": 0.6,
"isMilestone": ""
},
{
"id": 28,
"parentId": null,
"mode": "Auto",
"taskNumber": 28,
"name": "外装工事",
"duration": "",
"predecessors": 22,
"level": 1,
"resource": 4,
"complete": 0.5,
"isMilestone": ""
},
{
"id": 29,
"parentId": 28,
"mode": "Auto",
"taskNumber": 29,
"name": "屋根工事",
"duration": 5,
"predecessors": "",
"level": 1,
"resource": 2,
"complete": 0.6,
"isMilestone": ""
},
{
"id": 30,
"parentId": 28,
"mode": "Auto",
"taskNumber": 30,
"name": "屋根下地・ルーフィング",
"duration": 2,
"predecessors": 29,
"level": 2,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 31,
"parentId": 28,
"mode": "Auto",
"taskNumber": 31,
"name": "屋根葺き工事",
"duration": 3,
"predecessors": 30,
"level": 2,
"resource": 4,
"complete": 0.2,
"isMilestone": ""
},
{
"id": 32,
"parentId": 28,
"mode": "Auto",
"taskNumber": 32,
"name": "雨樋取付",
"duration": 2,
"predecessors": 31,
"level": 2,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 33,
"parentId": 28,
"mode": "Auto",
"taskNumber": 33,
"name": "外装下地・防水",
"duration": 2,
"predecessors": 32,
"level": 2,
"resource": 1,
"complete": 0,
"isMilestone": ""
},
{
"id": 34,
"parentId": 28,
"mode": "Auto",
"taskNumber": 34,
"name": "外装仕上",
"duration": 1,
"predecessors": 33,
"level": 2,
"resource": 2,
"complete": 0,
"isMilestone": ""
},
{
"id": 35,
"parentId": 28,
"mode": "Auto",
"taskNumber": 35,
"name": "防水工事（バルコニー）",
"duration": 1,
"predecessors": 34,
"level": 2,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 36,
"parentId": null,
"mode": "Auto",
"taskNumber": 36,
"name": "塗装工事",
"duration": "",
"predecessors": "17,28",
"level": 1,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 37,
"parentId": 36,
"mode": "Auto",
"taskNumber": 37,
"name": "防蟻処理（土台）",
"duration": 1,
"predecessors": "",
"level": 2,
"resource": 5,
"complete": 0,
"isMilestone": ""
},
{
"id": 38,
"parentId": 36,
"mode": "Auto",
"taskNumber": 38,
"name": "防蟻・防虫（GL+1m）",
"duration": 4,
"predecessors": 37,
"level": 2,
"resource": 1,
"complete": 0,
"isMilestone": ""
},
{
"id": 39,
"parentId": 36,
"mode": "Auto",
"taskNumber": 39,
"name": "内部塗装工事",
"duration": 2,
"predecessors": 38,
"level": 2,
"resource": 1,
"complete": 0.2,
"isMilestone": ""
},
{
"id": 40,
"parentId": 36,
"mode": "Auto",
"taskNumber": 40,
"name": "外部塗装工事",
"duration": 2,
"predecessors": 39,
"level": 2,
"resource": 4,
"complete": 0,
"isMilestone": ""
},
{
"id": 41,
"parentId": null,
"mode": "Auto",
"taskNumber": 41,
"name": "建具・ガラス工事",
"duration": "",
"predecessors": 36,
"level": 1,
"resource": 1,
"complete": 0,
"isMilestone": ""
},
{
"id": 42,
"parentId": 41,
"mode": "Auto",
"taskNumber": 42,
"name": "外部建具（サッシ、ドア）",
"duration": 3,
"predecessors": "",
"level": 2,
"resource": 2,
"complete": 0,
"isMilestone": ""
},
{
"id": 43,
"parentId": 41,
"mode": "Auto",
"taskNumber": 43,
"name": "内部建具（既製品）",
"duration": 1,
"predecessors": 42,
"level": 2,
"resource": 2,
"complete": 0,
"isMilestone": ""
},
{
"id": 44,
"parentId": null,
"mode": "Auto",
"taskNumber": 44,
"name": "内装工事",
"duration": "",
"predecessors": 41,
"level": 1,
"resource": 4,
"complete": 0,
"isMilestone": ""
},
{
"id": 45,
"parentId": 44,
"mode": "Auto",
"taskNumber": 45,
"name": "クロス、CFシート工事",
"duration": 1,
"predecessors": "",
"level": 2,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 46,
"parentId": 44,
"mode": "Auto",
"taskNumber": 46,
"name": "畳",
"duration": 1,
"predecessors": 45,
"level": 2,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 47,
"parentId": null,
"mode": "Auto",
"taskNumber": 47,
"name": "電気・ガス工事",
"duration": "",
"predecessors": 44,
"level": 1,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 48,
"parentId": 47,
"mode": "Auto",
"taskNumber": 48,
"name": "電気設備工事",
"duration": 3,
"predecessors": "",
"level": 2,
"resource": 4,
"complete": 0,
"isMilestone": ""
},
{
"id": 49,
"parentId": 48,
"mode": "Auto",
"taskNumber": 49,
"name": "配管・配線",
"duration": 1,
"predecessors": "",
"level": 3,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 50,
"parentId": 48,
"mode": "Auto",
"taskNumber": 50,
"name": "スイッチ・コンセント・電話配線",
"duration": 1,
"predecessors": 49,
"level": 3,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 51,
"parentId": 48,
"mode": "Auto",
"taskNumber": 51,
"name": "照明機器取付",
"duration": 1,
"predecessors": 50,
"level": 3,
"resource": 5,
"complete": 0,
"isMilestone": ""
},
{
"id": 52,
"parentId": 47,
"mode": "Auto",
"taskNumber": 52,
"name": "ガス工事",
"duration": 2,
"predecessors": 48,
"level": 2,
"resource": 4,
"complete": 0,
"isMilestone": ""
},
{
"id": 53,
"parentId": 52,
"mode": "Auto",
"taskNumber": 53,
"name": "埋設配管（配管用スリーブ）",
"duration": 1,
"predecessors": "",
"level": 3,
"resource": 1,
"complete": 0,
"isMilestone": ""
},
{
"id": 54,
"parentId": 52,
"mode": "Auto",
"taskNumber": 54,
"name": "内部配管",
"duration": 3,
"predecessors": 53,
"level": 3,
"resource": 5,
"complete": 0,
"isMilestone": ""
},
{
"id": 55,
"parentId": 52,
"mode": "Auto",
"taskNumber": 55,
"name": "器具取付",
"duration": 1,
"predecessors": 54,
"level": 3,
"resource": 1,
"complete": 0,
"isMilestone": ""
},
{
"id": 56,
"parentId": null,
"mode": "Auto",
"taskNumber": 56,
"name": "給排水・衛生工事",
"duration": "",
"predecessors": 52,
"level": 1,
"resource": 5,
"complete": 0,
"isMilestone": ""
},
{
"id": 57,
"parentId": 56,
"mode": "Auto",
"taskNumber": 57,
"name": "ユニットバス取付",
"duration": 2,
"predecessors": "",
"level": 2,
"resource": 1,
"complete": 0,
"isMilestone": ""
},
{
"id": 58,
"parentId": 56,
"mode": "Auto",
"taskNumber": 58,
"name": "キッチン取付",
"duration": 2,
"predecessors": 57,
"level": 2,
"resource": 2,
"complete": 0,
"isMilestone": ""
},
{
"id": 59,
"parentId": 56,
"mode": "Auto",
"taskNumber": 59,
"name": "トイレ取付",
"duration": 1,
"predecessors": 58,
"level": 2,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 60,
"parentId": 56,
"mode": "Auto",
"taskNumber": 60,
"name": "洗面化粧台取付",
"duration": 1,
"predecessors": 59,
"level": 2,
"resource": 4,
"complete": 0,
"isMilestone": ""
},
{
"id": 61,
"parentId": null,
"mode": "Auto",
"taskNumber": 61,
"name": "★工事完了★(マイルストーン)",
"duration": 0,
"predecessors": 60,
"level": 1,
"resource": 0,
"complete": 0,
"isMilestone": "TRUE"
},
{
"id": 62,
"parentId": null,
"mode": "Auto",
"taskNumber": 62,
"name": "完了・引き渡し",
"duration": "",
"predecessors": 56,
"level": 1,
"resource": 3,
"complete": 0,
"isMilestone": ""
},
{
"id": 63,
"parentId": 62,
"mode": "Auto",
"taskNumber": 63,
"name": "クリーニング",
"duration": 2,
"predecessors": "",
"level": 2,
"resource": 5,
"complete": 0,
"isMilestone": ""
},
{
"id": 64,
"parentId": 62,
"mode": "Auto",
"taskNumber": 64,
"name": "完了検査",
"duration": 1,
"predecessors": 63,
"level": 2,
"resource": 4,
"complete": 0,
"isMilestone": ""
},
{
"id": 65,
"parentId": 62,
"mode": "Auto",
"taskNumber": 65,
"name": "竣工検査（施主）",
"duration": 1,
"predecessors": 64,
"level": 2,
"resource": 2,
"complete": 0,
"isMilestone": ""
},
{
"id": 66,
"parentId": 62,
"mode": "Auto",
"taskNumber": 66,
"name": "引渡し",
"duration": 1,
"predecessors": 65,
"level": 2,
"resource": 1,
"complete": 0,
"isMilestone": ""
}
];
const Assignment = [
{
"id": 1,
"taskId": 1,
"resourceId": 2
},
{
"id": 2,
"taskId": 1,
"resourceId": 1
},
{
"id": 3,
"taskId": 4,
"resourceId": 4
},
{
"id": 4,
"taskId": 5,
"resourceId": 4
},
{
"id": 5,
"taskId": 7,
"resourceId": 5
},
{
"id": 6,
"taskId": 8,
"resourceId": 1
},
{
"id": 7,
"taskId": 8,
"resourceId": 3
},
{
"id": 8,
"taskId": 9,
"resourceId": 5
},
{
"id": 9,
"taskId": 9,
"resourceId": 1
},
{
"id": 10,
"taskId": 10,
"resourceId": 4
},
{
"id": 11,
"taskId": 10,
"resourceId": 5
},
{
"id": 12,
"taskId": 12,
"resourceId": 2
},
{
"id": 13,
"taskId": 13,
"resourceId": 2
},
{
"id": 14,
"taskId": 14,
"resourceId": 2
},
{
"id": 15,
"taskId": 15,
"resourceId": 1
},
{
"id": 16,
"taskId": 15,
"resourceId": 4
},
{
"id": 17,
"taskId": 19,
"resourceId": 5
},
{
"id": 18,
"taskId": 20,
"resourceId": 2
},
{
"id": 19,
"taskId": 20,
"resourceId": 1
},
{
"id": 20,
"taskId": 21,
"resourceId": 2
},
{
"id": 21,
"taskId": 23,
"resourceId": 5
},
{
"id": 22,
"taskId": 24,
"resourceId": 3
},
{
"id": 23,
"taskId": 25,
"resourceId": 1
},
{
"id": 24,
"taskId": 26,
"resourceId": 5
},
{
"id": 25,
"taskId": 27,
"resourceId": 2
},
{
"id": 26,
"taskId": 29,
"resourceId": 4
},
{
"id": 27,
"taskId": 30,
"resourceId": 3
},
{
"id": 28,
"taskId": 31,
"resourceId": 2
},
{
"id": 29,
"taskId": 31,
"resourceId": 4
},
{
"id": 30,
"taskId": 32,
"resourceId": 1
},
{
"id": 31,
"taskId": 33,
"resourceId": 3
},
{
"id": 32,
"taskId": 34,
"resourceId": 5
},
{
"id": 33,
"taskId": 35,
"resourceId": 1
},
{
"id": 34,
"taskId": 35,
"resourceId": 2
},
{
"id": 35,
"taskId": 37,
"resourceId": 3
},
{
"id": 36,
"taskId": 38,
"resourceId": 4
},
{
"id": 37,
"taskId": 37,
"resourceId": 5
},
{
"id": 38,
"taskId": 38,
"resourceId": 4
},
{
"id": 39,
"taskId": 39,
"resourceId": 5
},
{
"id": 40,
"taskId": 40,
"resourceId": 1
},
{
"id": 41,
"taskId": 42,
"resourceId": 2
},
{
"id": 42,
"taskId": 42,
"resourceId": 5
},
{
"id": 43,
"taskId": 43,
"resourceId": 4
},
{
"id": 44,
"taskId": 45,
"resourceId": 5
},
{
"id": 45,
"taskId": 45,
"resourceId": 1
},
{
"id": 46,
"taskId": 46,
"resourceId": 2
},
{
"id": 47,
"taskId": 49,
"resourceId": 3
},
{
"id": 48,
"taskId": 49,
"resourceId": 4
},
{
"id": 49,
"taskId": 49,
"resourceId": 5
},
{
"id": 50,
"taskId": 50,
"resourceId": 1
},
{
"id": 51,
"taskId": 51,
"resourceId": 2
},
{
"id": 52,
"taskId": 53,
"resourceId": 3
},
{
"id": 53,
"taskId": 54,
"resourceId": 4
},
{
"id": 54,
"taskId": 55,
"resourceId": 5
},
{
"id": 55,
"taskId": 55,
"resourceId": 1
},
{
"id": 56,
"taskId": 57,
"resourceId": 2
},
{
"id": 57,
"taskId": 58,
"resourceId": 3
},
{
"id": 58,
"taskId": 59,
"resourceId": 4
},
{
"id": 59,
"taskId": 60,
"resourceId": 5
},
{
"id": 60,
"taskId": 63,
"resourceId": 4
},
{
"id": 61,
"taskId": 64,
"resourceId": 2
},
{
"id": 62,
"taskId": 65,
"resourceId": 1
},
{
"id": 63,
"taskId": 65,
"resourceId": 2
},
{
"id": 64,
"taskId": 66,
"resourceId": 1
}
];
const Resources = [
{
"id": 1,
"name": "未来工務店"
},
{
"id": 2,
"name": "港工務店"
},
{
"id": 3,
"name": "FAA工務店"
},
{
"id": 4,
"name": "品質建設"
},
{
"id": 5,
"name": "建工業"
}
];
.sample {
width: 100%;
height: 100%;
}
body,
html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.spreadsheets {
width: 100%;
height: 100%;
}
.btn-container {
position: fixed;
bottom: 40px;
right: 5px;
padding: 6px 40px;
z-index: 1
}
.floatBtn {
font-family: Arial, sans-serif;
font-size: 16px;
padding: 10px 15px;
margin: 10px;
color: white;
background-color: #2196F3;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
width: 80px;
text-align: center;
}
.floatBtn:hover {
background-color: #1976D2;
transform: scale(1.05);
}
.floatBtn:active {
background-color: #1565C0;
transform: scale(0.95);
}
