From e3ac63c2b87ed1cc9409412fba7b8b38b4867a17 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期一, 19 一月 2026 13:11:15 +0800
Subject: [PATCH] 1.递交
---
src/views/gantt/index.vue | 318 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 250 insertions(+), 68 deletions(-)
diff --git a/src/views/gantt/index.vue b/src/views/gantt/index.vue
index 35fa237..bbdab5a 100644
--- a/src/views/gantt/index.vue
+++ b/src/views/gantt/index.vue
@@ -2,8 +2,8 @@
<div style="padding: 0 10px">
<div style="padding: 10px 0;display: flex;">
- <el-button type="primary" size="mini" @click="ganttUndo">鍥為��鎷栧姩鎿嶄綔</el-button>
- <el-button type="primary" size="mini" @click="ganttRedo">鍓嶈繘鎷栧姩鎿嶄綔</el-button>
+ <!-- <el-button type="primary" size="mini" @click="ganttUndo">鍥為��鎷栧姩鎿嶄綔</el-button>-->
+ <!-- <el-button type="primary" size="mini" @click="ganttRedo">鍓嶈繘鎷栧姩鎿嶄綔</el-button>-->
<el-button type="primary" size="mini" @click="ganttZoomIn">鏀惧ぇ</el-button>
<el-button type="primary" size="mini" @click="ganttZoomOut">缂╁皬</el-button>
<el-date-picker
@@ -56,7 +56,7 @@
selectedIds: [],
// 鍒嗛〉鐩稿叧鏁版嵁
currentPage: 1,
- pageSize: 10,
+ pageSize: 20,
totalTasks: 0,
allTasks: [], // 瀛樺偍鎵�鏈変换鍔℃暟鎹�
paginatedTasks: [] // 褰撳墠椤电殑浠诲姟鏁版嵁
@@ -93,7 +93,8 @@
// 涓嶅啀瀵归綈鏃堕棿杞村埢搴︼紙姣斿澶╂牸瀛愶級锛岃�屾槸鎸夆�滃皬鏃垛�濆榻�
gantt.config.round_dnd_dates = false
// 鏈�灏忔闀胯繕鏄� 1 灏忔椂锛屼絾浣犲凡缁忎粠鈥滃ぉ鏍煎瓙鈥濆彉鎴愨�滃皬鏃舵牸瀛愨�濅簡
- gantt.config.time_step = 60 // 60 鍒嗛挓 = 1 灏忔椂
+ // gantt.config.time_step = 60 // 60 鍒嗛挓 = 1 灏忔椂
+ gantt.config.time_step = 1 // 1鍒嗛挓
gantt.config.row_height = 32 // 琛岄珮
gantt.config.bar_height = 20 // bar楂�
@@ -102,7 +103,7 @@
gantt.config.drag_progress = false // 绂佹閫氳繃鎷栧姩杩涘害鏉℃敼鍙樹换鍔¤繘搴�
- // gantt.config.readonly = true //鍙妯″紡
+ gantt.config.readonly = true // 鍙妯″紡
/* 鈫撯啌鈫� Group configuration 鈫撯啌鈫� */
gantt.serverList('task_priority', [
@@ -233,13 +234,13 @@
gantt.config.work_time = true
- // gantt.addCalendar({
- // id: 'custom1',
- // worktime: {
- // hours: ['8:00-12:30', '13:00-17:30'], // global work hours for weekdays
- // days: [0, 1, 1, 1, 1, 1, 1]
- // }
- // })
+ gantt.addCalendar({
+ id: 'customCalendar1',
+ worktime: {
+ hours: ['8:00-12:30', '13:00-17:30'], // global work hours for weekdays
+ days: [0, 1, 1, 1, 1, 1, 1]
+ }
+ })
// gantt.addCalendar({
// id: 'custom2',
@@ -268,8 +269,17 @@
return `<input type="checkbox" class="taskCheckBox" data-action="check-row" ${checked} />`
}
},
- { name: 'wbs', label: '鑺傜偣', width: 80, template: gantt.getWBSCode },
- { name: 'text', tree: true, label: '浠诲姟鍚嶇О', width: 200, resize: true, editor: textEditor },
+ // { name: 'wbs', label: '鑺傜偣', width: 80, template: gantt.getWBSCode },
+ { name: 'text', tree: true, align: 'center', label: '浠诲姟鍚嶇О', width: 240, resize: true, editor: textEditor },
+ { name: 'saleOrder', align: 'center', label: '閿�鍞鍗�', width: 100, resize: true },
+ { name: 'partName', align: 'center', label: '浜у搧鍚嶇О', width: 80, resize: true },
+ { name: 'partCode', align: 'center', label: '浜у搧缂栫爜', width: 80, resize: true },
+ {
+ name: 'progress', align: 'center', label: '杩涘害', width: 120, resize: true, template: function(task) {
+ return `<input type="range" onmousedown="event.preventDefault()" onmouseup="event.preventDefault()" id="taskRange" value="${task.progress * 100}"/> ${task.progress * 100}%`
+ // return `<el-progress :percentage='${task.progress * 100}'></el-progress> ${task.progress * 100}%`
+ }
+ },
{ name: 'start_date', align: 'center', label: '寮�濮嬫棩鏈�', width: 80, resize: true, editor: startDateEditor },
{
name: 'duration',
@@ -283,44 +293,19 @@
// return (task.duration || 0) + 1 // 鍦ㄥ綋鍓峝uration鐨勫熀纭�涓婂姞1
return task.duration
}
- },
- {
- name: 'owner', align: 'center', width: 75, label: '璐熻矗浜�', template: function(task) {
- // if (task.type == gantt.config.types.project) {
- // return ''
- // }
- //
- // const store = gantt.getDatastore('resource')
- // const assignments = task[gantt.config.resource_property]
- //
- // if (!assignments || !assignments.length) {
- // return 'Unassigned'
- // }
- //
- // if (assignments.length === 1) {
- // return store.getItem(assignments[0].resource_id).text
- // }
- //
- // let result = ''
- // assignments.forEach(function(assignment) {
- // const owner = store.getItem(assignment.resource_id)
- // if (!owner) {
- // return
- // }
- // result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
- // })
- //
- // return result
- return '寮犱笁'
- },
- resize: true
- },
- {
- name: 'priority', width: 60, label: '浼樺厛绾�', align: 'center', resize: true, template: function(task) {
- return byId(gantt.serverList('task_priority'), task.priority)
- }
- },
- { name: 'add', width: 44 }
+ }
+ // {
+ // name: 'owner', align: 'center', width: 75, label: '璐熻矗浜�', template: function(task) {
+ // return '寮犱笁'
+ // },
+ // resize: true
+ // },
+ // {
+ // name: 'priority', width: 60, label: '浼樺厛绾�', align: 'center', resize: true, template: function(task) {
+ // return byId(gantt.serverList('task_priority'), task.priority)
+ // }
+ // },
+ // { name: 'add', width: 44 }
]
/* 鈫戔啈鈫� Grid Columns configuration 鈫戔啈鈫� */
@@ -449,8 +434,31 @@
gantt.templates.tooltip_text = function(start, end, task) {
// console.log(JSON.parse(JSON.stringify(task)))
// return '<b>浠诲姟:</b> ' + task.text + '<br/><b>寮�濮嬫椂闂�:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDateReduceOneDay(end)
- return '<b>浠诲姟:</b> ' + task.text + '<br/><b>寮�濮嬫椂闂�:</b> ' + handleDatetime2(start) + '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDateReduceOneDay(end) + '<br/><b>杩涘害:</b> ' + task.progress * 100 + '%'
+ // return '<b>浠诲姟:</b> ' + task.text + '<br/><b>寮�濮嬫椂闂�:</b> ' + handleDatetime2(start) + '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDateReduceOneDay(end) + '<br/><b>杩涘害:</b> ' + task.progress * 100 + '%'
+ return '<b>浠诲姟:</b> ' + task.text + '<br/><b>寮�濮嬫椂闂�:</b> ' + handleDatetime2(start) + '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDatetime2(end) + '<br/><b>杩涘害:</b> ' + task.progress * 100 + '%'
}
+
+ gantt.templates.task_text = function(start, end, task) {
+ // return '<span style="color: white; font-weight: bold; text-shadow: 1px 1px 1px #000;">' +
+ // task.description + ' - ' +
+ // '</span>'
+ // return task.description
+ return task.progress * 100 + '%'
+ }
+
+ // JavaScript 閰嶇疆
+ // gantt.templates.grid_row_class = function(start, end, task) {
+ // // 鍙 id = 3 鐨勪换鍔¤澶勭悊
+ // // if (task.id !== 7) return
+ //
+ // // if (task.start_date === '2025-04-07 06:23') {
+ // if (task.id === 8) {
+ // console.log(task, 11)
+ // return 'row-completed'
+ // }
+ //
+ // return '' // 鍏朵粬鎯呭喌杩斿洖榛樿
+ // }
gantt.init('gantt_here')
// 娉ㄦ剰锛氳繖閲屼笉绔嬪嵆鍔犺浇鏁版嵁锛岃�屾槸绛夊緟loadTasks琚皟鐢�
@@ -491,46 +499,182 @@
this.allTasks = [
{
'id': 1,
- 'text': '椤圭洰1',
+ 'text': '宸ュ崟:MO-2025-05-001',
+ saleOrder: 'SO-2025-05001',
+ 'calendar_id': 'customCalendar1',
+ partName: '璺戞鏈�',
+ partCode: 'Run01',
+ description: '鎺掍骇鏁伴噺:500 鎶ュ伐鏁伴噺:100 杩涘害:20%',
'type': 'project',
'start_date': '2025-04-02 00:00',
// 'duration': 5,
- 'progress': 0.4,
+ 'progress': 0.2,
'owner': [{ 'resource_id': '5', 'value': 3 }],
'parent': 0,
- 'checked': false,
- render: 'split'
+ 'checked': false
+ // render: 'split'
},
{
'id': 2,
- 'text': '浠诲姟2',
- 'type': 'task',
+ 'text': '宸ュ簭:鍒囧壊',
+ saleOrder: 'SO-2025-05001',
+ 'calendar_id': 'customCalendar1',
+ partName: '璺戞鏈�',
+ partCode: 'Run01',
+ description: '鎺掍骇鏁伴噺:500 鎶ュ伐鏁伴噺:100 杩涘害:20%',
+ 'type': 'project',
'start_date': '2025-04-02 00:00',
'duration': 2,
- 'progress': 0.6,
+ 'progress': 0.2,
'owner': [{ 'resource_id': '5', 'value': 4 }],
'parent': '1',
checked: false
},
{
'id': 3,
- 'text': '浠诲姟3',
+ 'text': '璁惧:閲戝伐杞﹂棿1鍙疯澶�',
+ saleOrder: 'SO-2025-05001',
+ 'calendar_id': 'customCalendar1',
+ partName: '璺戞鏈�',
+ partCode: 'Run01',
+ description: '鎺掍骇鏁伴噺:500 鎶ュ伐鏁伴噺:100 杩涘害:20%',
'type': 'task',
'start_date': '2025-04-07 00:00',
- 'parent': '1',
- 'duration': 3,
- 'progress': 0.6,
+ 'parent': '2',
+ 'duration': 4,
+ 'progress': 0.2,
'owner': [{ 'resource_id': '5', 'value': 2 }],
checked: false
},
{
'id': 4,
- 'text': '浠诲姟4',
+ 'text': '璁惧:閲戝伐杞﹂棿2鍙疯澶�',
+ saleOrder: 'SO-2025-05001',
+ 'calendar_id': 'customCalendar1',
+ partName: '璺戞鏈�',
+ partCode: 'Run01',
+ description: '鎺掍骇鏁伴噺:500 鎶ュ伐鏁伴噺:100 杩涘害:20%',
'type': 'task',
'start_date': '2025-04-15 00:00',
- 'parent': '1',
+ 'parent': '2',
'duration': 3,
'progress': 0.2,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 5,
+ 'text': '宸ュ崟:MO-2025-05-002',
+ saleOrder: 'SO-2025-05002',
+ 'calendar_id': 'customCalendar1',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:500 杩涘害:50%',
+ 'type': 'project',
+ 'start_date': '2025-04-02 00:00',
+ // 'duration': 5,
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 3 }],
+ 'parent': 0,
+ 'checked': false
+ // render: 'split'
+ },
+ {
+ 'id': 6,
+ 'text': '宸ュ簭:鍒囧壊',
+ saleOrder: 'SO-2025-05002',
+ 'calendar_id': 'customCalendar1',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:500 杩涘害:50%',
+ 'type': 'project',
+ 'start_date': '2025-04-02 00:00',
+ 'duration': 5,
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 4 }],
+ 'parent': '5',
+ checked: false
+ },
+ {
+ 'id': 7,
+ 'text': '璁惧:閲戝伐杞﹂棿3鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ 'calendar_id': 'customCalendar1',
+ partCode: 'W01',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:500 杩涘害:50%',
+ 'type': 'task',
+ 'start_date': '2025-04-07 06:23',
+ 'parent': '6',
+ 'duration': 3,
+ 'progress': 0.5,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 8,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task',
+ render: 'split', // 鐢ㄤ簬鍦ㄤ竴涓伐浣滄椂闂存鍐呮樉绀轰笉涓嬶紝闇�瑕佽繘琛屽垎鍓叉樉绀�
+ 'start_date': '2025-04-12 00:00',
+ 'parent': '6',
+ 'duration': 4,
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 10,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task',
+ render: 'split',
+ 'start_date': '2025-04-12 00:00',
+ 'parent': '8',
+ 'duration': 1,
+ 'progress': 0.6,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 11,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task',
+ render: 'split',
+ 'start_date': '2025-04-14 00:00',
+ 'parent': '8',
+ 'duration': 3,
+ 'progress': 0.0,
+ 'owner': [{ 'resource_id': '5', 'value': 2 }],
+ checked: false
+ },
+ {
+ 'id': 9,
+ 'text': '璁惧:閲戝伐杞﹂棿5鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:400 杩涘害:40%',
+ 'type': 'task',
+ 'start_date': '2025-04-10 00:00',
+ 'parent': '6',
+ 'duration': 3,
+ 'progress': 0.4,
'owner': [{ 'resource_id': '5', 'value': 2 }],
checked: false
}
@@ -682,10 +826,20 @@
background: rgba(5, 185, 100, .1);
}
-/*闈炲伐浣滄棩*/
+/*!*闈炲伐浣滄棩*!*/
.weekend {
- background: rgba(255, 255, 255, 0.5);
+ background: rgba(255, 255, 255, 0.1);
+ /*background: red;*/
}
+
+/*.row-completed {*/
+/* background-color: #bee4be !important; !* 娴呯豢鑹� *!*/
+/*}*/
+
+/*.gantt_grid_head_cell[data-column-id="duration"],*/
+/*.gantt_row .gantt_cell[data-column-name="duration"] {*/
+/* background-color: #f5f5f5 !important;*/
+/*}*/
/* 涓轰换鍔℃潯鍐呴儴鐨勮繘搴︽潯娣诲姞鍦嗚锛屼繚鎸佽瑙夌粺涓� */
.gantt_task_progress {
@@ -713,4 +867,32 @@
background-color: #fff;
border-top: 1px solid #ebeef5;
}
+
+#taskRange {
+ width: 80px;
+ height: 6px;
+ border-radius: 2px;
+
+}
+
+/* 闅愯棌婊戝潡 */
+#taskRange::-webkit-slider-thumb {
+ opacity: 0;
+ -webkit-appearance: none !important;
+ width: 1px !important;
+ height: 1px !important;
+}
+
+#taskRange::-moz-range-thumb {
+ opacity: 0;
+ width: 1px !important;
+ height: 1px !important;
+}
+
+#taskRange::-ms-thumb {
+ opacity: 0;
+ width: 1px !important;
+ height: 1px !important;
+}
+
</style>
--
Gitblit v1.9.3