From dc7ec3f6693f39779ef748c1f832860010fe73e5 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 15 一月 2026 15:07:21 +0800
Subject: [PATCH] 1.甘特图递交
---
src/views/gantt/index.vue | 335 ++++++++++---------------------------------------------
src/utils/global.js | 17 ++
2 files changed, 77 insertions(+), 275 deletions(-)
diff --git a/src/utils/global.js b/src/utils/global.js
index 19b4ea7..6669882 100644
--- a/src/utils/global.js
+++ b/src/utils/global.js
@@ -41,14 +41,21 @@
return data.getFullYear() + '-' + month + '-' + date
}
-// 鏃堕棿澶勭悊鍑芥暟 骞存湀鏃� 寰�鍓嶆帹涓�澶�
+// 鏃堕棿澶勭悊鍑芥暟 骞存湀鏃� 鏃跺垎绉� 寰�鍓嶆帹涓�澶�
export function handleDateReduceOneDay(value) {
const newDate = new Date(value)
newDate.setDate(newDate.getDate() - 1)
- const data = new Date(newDate)
- const month = data.getMonth() < 9 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1
- const date = data.getDate() <= 9 ? '0' + data.getDate() : data.getDate()
- return data.getFullYear() + '-' + month + '-' + date
+ const dt = new Date(newDate)
+ const wk = dt.getDay()
+ const y = dt.getFullYear()
+ const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+ const d = (dt.getDate() + '').padStart(2, '0')
+
+ const hh = (dt.getHours() + '').padStart(2, '0')
+ const mm = (dt.getMinutes() + '').padStart(2, '0')
+ const ss = (dt.getSeconds() + '').padStart(2, '0')
+
+ return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
// 浜嬩欢澶勭悊鍑芥暟 鏃跺垎绉�
diff --git a/src/views/gantt/index.vue b/src/views/gantt/index.vue
index 650d64e..35fa237 100644
--- a/src/views/gantt/index.vue
+++ b/src/views/gantt/index.vue
@@ -46,7 +46,7 @@
<script>
import { gantt } from '@/components/dhtmlxGantt'
import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
-import { handleDateReduceOneDay, handleDatetime } from '@/utils/global'
+import { handleDateReduceOneDay, handleDatetime, handleDatetime2 } from '@/utils/global'
export default {
data() {
@@ -76,7 +76,7 @@
initGantt() {
gantt.plugins({
- auto_scheduling: true,
+
critical_path: true,
drag_timeline: true,
grouping: true,
@@ -89,8 +89,20 @@
gantt.i18n.setLocale('cn')
gantt.config.multiselect = true // 寮�鍚浠诲姟閫夋嫨
gantt.config.show_links = false // 涓嶆樉绀鸿繛鎺ョ嚎
- /* 鈫撯啌鈫� Auto-scheduling configuration 鈫撯啌鈫� */
- gantt.config.auto_scheduling = true
+
+ // 涓嶅啀瀵归綈鏃堕棿杞村埢搴︼紙姣斿澶╂牸瀛愶級锛岃�屾槸鎸夆�滃皬鏃垛�濆榻�
+ gantt.config.round_dnd_dates = false
+ // 鏈�灏忔闀胯繕鏄� 1 灏忔椂锛屼絾浣犲凡缁忎粠鈥滃ぉ鏍煎瓙鈥濆彉鎴愨�滃皬鏃舵牸瀛愨�濅簡
+ gantt.config.time_step = 60 // 60 鍒嗛挓 = 1 灏忔椂
+
+ gantt.config.row_height = 32 // 琛岄珮
+ gantt.config.bar_height = 20 // bar楂�
+
+ gantt.config.xml_date = '%Y-%m-%d %H:%i' // gantt鐨勬棩鏈熸牸寮�
+
+ gantt.config.drag_progress = false // 绂佹閫氳繃鎷栧姩杩涘害鏉℃敼鍙樹换鍔¤繘搴�
+
+ // gantt.config.readonly = true //鍙妯″紡
/* 鈫撯啌鈫� Group configuration 鈫撯啌鈫� */
gantt.serverList('task_priority', [
@@ -155,6 +167,7 @@
// %M
{ unit: 'week', format: '%Y骞寸%W鍛�' },
{ unit: 'day', step: 1, format: '%M%d鍙�' }
+ // { unit: 'minute', step: 60, format: '%H:%i' }
// { unit: 'day', step: 1, format: '%j %D' }
// { unit: 'day', step: 1, format: '鏄熸湡%D' }
]
@@ -220,13 +233,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: '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: 'custom2',
@@ -434,7 +447,9 @@
// 鑷畾涔夋诞鍔ㄦ鐨勬樉绀哄唴瀹� tooltip娴姩妗嗘樉绀虹殑End Date琚拷鍔�1鐨勯棶棰樹慨澶嶏紙搴旇鏄剧ず鏁版嵁搴撶殑鍘熷鍊硷級
gantt.templates.tooltip_text = function(start, end, task) {
- return '<b>浠诲姟:</b> ' + task.text + '<br/><b>寮�濮嬫椂闂�:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDateReduceOneDay(end)
+ // 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 + '%'
}
gantt.init('gantt_here')
@@ -479,19 +494,19 @@
'text': '椤圭洰1',
'type': 'project',
'start_date': '2025-04-02 00:00',
- 'end_date': '2025-04-07 00:00',
- 'duration': 5,
+ // 'duration': 5,
'progress': 0.4,
'owner': [{ 'resource_id': '5', 'value': 3 }],
'parent': 0,
- 'checked': false
+ 'checked': false,
+ render: 'split'
},
{
'id': 2,
- 'text': '椤圭洰2',
- 'type': 'project',
- 'start_date': '02-04-2025 00:00',
- 'duration': 8,
+ 'text': '浠诲姟2',
+ 'type': 'task',
+ 'start_date': '2025-04-02 00:00',
+ 'duration': 2,
'progress': 0.6,
'owner': [{ 'resource_id': '5', 'value': 4 }],
'parent': '1',
@@ -499,268 +514,27 @@
},
{
'id': 3,
- 'text': '椤圭洰3',
- 'type': 'project',
- 'start_date': '11-04-2025 00:00',
- 'duration': 8,
+ 'text': '浠诲姟3',
+ 'type': 'task',
+ 'start_date': '2025-04-07 00:00',
'parent': '1',
+ 'duration': 3,
'progress': 0.6,
'owner': [{ 'resource_id': '5', 'value': 2 }],
checked: false
},
{
'id': 4,
- 'text': '椤圭洰4',
- 'type': 'project',
- 'start_date': '13-04-2025 00:00',
- 'duration': 5,
+ 'text': '浠诲姟4',
+ 'type': 'task',
+ 'start_date': '2025-04-15 00:00',
'parent': '1',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '5', 'value': 4 }],
- 'priority': 3,
- checked: true
- },
- {
- 'id': 5,
- 'text': '浠诲姟5',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 7,
- 'parent': '2',
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '6', 'value': 5 }],
- 'priority': 1,
- checked: true
- },
- {
- 'id': 6,
- 'text': '浠诲姟6',
- 'type': 'task',
- 'calendar_id': 'custom1',
- 'start_date': '03-04-2025 12:00',
- 'duration': 7,
- 'parent': '2',
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '7', 'value': 1 }],
- 'priority': 2,
- checked: false
- },
- {
- 'id': 7,
- 'text': '浠诲姟7',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '12-04-2025 00:00',
- 'duration': 8,
- 'parent': '3',
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '10', 'value': 2 }],
- checked: false
- },
- {
- 'id': 8,
- 'text': '浠诲姟8',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '14-04-2025 00:00',
- 'duration': 5,
- 'parent': '4',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '10', 'value': 4 }, { 'resource_id': '9', 'value': 5 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 9,
- 'text': '浠诲姟9',
- 'type': 'task',
- 'start_date': '21-04-2025 00:00',
- 'duration': 4,
- 'parent': '4',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '7', 'value': 3 }],
- checked: false
- },
- {
- 'id': 10,
- 'text': '浠诲姟10',
- 'type': 'task',
- 'start_date': '27-04-2025 00:00',
'duration': 3,
- 'parent': '4',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '8', 'value': 5 }],
- 'priority': 2,
- checked: false
- },
- {
- 'id': 11,
- 'text': '椤圭洰11',
- 'type': 'project',
- 'progress': 0.6,
- 'start_date': '02-04-2025 00:00',
- 'duration': 13,
- 'owner': [{ 'resource_id': '5', 'value': 4 }],
- 'parent': 0,
- checked: false
- },
- {
- 'id': 12,
- 'text': '浠诲姟12',
- 'calendar_id': 'custom2',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 5,
- 'parent': '11',
- 'progress': 1,
- 'owner': [{ 'resource_id': '7', 'value': 6 }],
- checked: false
- },
- {
- 'id': 13,
- 'text': '椤圭洰13',
- 'type': 'project',
- 'start_date': '03-04-2025 00:00',
- 'duration': 11,
- 'parent': '11',
- 'progress': 0.5,
+ 'progress': 0.2,
'owner': [{ 'resource_id': '5', 'value': 2 }],
checked: false
- },
- {
- 'id': 14,
- 'text': '浠诲姟14',
- 'calendar_id': 'custom2',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 6,
- 'parent': '11',
- 'owner': [],
- 'progress': 0.8,
- checked: false
- },
- {
- 'id': 15,
- 'text': '椤圭洰15',
- 'type': 'project',
- 'start_date': '03-04-2025 00:00',
- 'duration': 5,
- 'parent': '11',
- 'progress': 0.2,
- 'owner': [{ 'resource_id': '5', 'value': 5 }],
- checked: false
- },
- {
- 'id': 16,
- 'text': '浠诲姟16',
- 'calendar_id': 'custom2',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 7,
- 'parent': '11',
- 'progress': 0,
- 'owner': [{ 'resource_id': '7', 'value': 2 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 17,
- 'text': '浠诲姟17',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 2,
- 'parent': '13',
- 'progress': 1,
- 'owner': [{ 'resource_id': '8', 'value': 1 }],
- 'priority': 2,
- checked: false
- },
-
- {
- 'id': 18,
- 'text': '浠诲姟19',
- 'type': 'task',
- 'start_date': '10-04-2025 00:00',
- 'duration': 2,
- 'parent': '13',
- 'progress': 0.8,
- 'owner': [{ 'resource_id': '6', 'value': 2 }],
- 'priority': 3,
- checked: false
- },
- {
- 'id': 19,
- 'text': '浠诲姟20',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '13-04-2025 00:00',
- 'duration': 4,
- 'parent': '13',
- 'progress': 0.2,
- 'owner': [{ 'resource_id': '6', 'value': 3 }],
- checked: false
- },
- {
- 'id': 20,
- 'text': '浠诲姟21',
- 'type': 'task',
- 'start_date': '13-04-2025 00:00',
- 'duration': 4,
- 'parent': '13',
- 'progress': 0,
- 'owner': [{ 'resource_id': '8', 'value': 4 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 21,
- 'text': '浠诲姟22',
- 'type': 'project',
- 'start_date': '03-04-2025 00:00',
- 'duration': 4,
- 'parent': '0',
- 'progress': 0.5,
- 'owner': [{ 'resource_id': '6', 'value': 5 }],
- checked: false
- },
- {
- 'id': 22,
- 'text': '浠诲姟23',
- 'calendar_id': 'custom1',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 4,
- 'parent': '21',
- 'progress': 0.1,
- 'owner': [{ 'resource_id': '8', 'value': 3 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 23,
- 'text': '浠诲姟24',
- 'type': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 5,
- 'parent': '21',
- 'progress': 0,
- 'owner': [{ 'resource_id': '8', 'value': 5 }],
- 'priority': 1,
- checked: false
- },
- {
- 'id': 24,
- 'text': '浠诲姟25',
- // 'type': 'milestone',
- 'type': 'task',
- 'start_date': '20-04-2025 00:00',
- 'parent': '21',
- 'progress': 0,
- 'owner': [{ 'resource_id': '5', 'value': 3 }],
- 'duration': 2,
- checked: false
}
+
]
// 娣诲姞鏇村绀轰緥鏁版嵁锛屼娇鍒嗛〉鏁堟灉鏇存槑鏄�
@@ -779,7 +553,6 @@
// 'checked': false
// })
// }
- console.log(JSON.parse(JSON.stringify(this.allTasks)))
this.totalTasks = this.allTasks.length
this.updatePaginatedTasks()
this.renderGanttChart()
@@ -905,6 +678,28 @@
margin: unset;
}
+.gantt_task_cell {
+ background: rgba(5, 185, 100, .1);
+}
+
+/*闈炲伐浣滄棩*/
+.weekend {
+ background: rgba(255, 255, 255, 0.5);
+}
+
+/* 涓轰换鍔℃潯鍐呴儴鐨勮繘搴︽潯娣诲姞鍦嗚锛屼繚鎸佽瑙夌粺涓� */
+.gantt_task_progress {
+ border-radius: 10px !important; /* 寤鸿涓庝换鍔℃潯鍗婂緞涓�鑷� */
+}
+
+.gantt_bar_task {
+ border-radius: 10px !important;
+}
+
+.gantt_bar_project {
+ border-radius: 10px !important;
+}
+
.taskCheckBox {
cursor: pointer;
}
--
Gitblit v1.9.3