From ba77dbbe9a52f84ccd4ca47f47f6263d250f51dc Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期三, 21 一月 2026 11:42:06 +0800
Subject: [PATCH] 1.递交
---
src/views/gantt/index.vue | 1730 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 954 insertions(+), 776 deletions(-)
diff --git a/src/views/gantt/index.vue b/src/views/gantt/index.vue
index 491fef9..2cca563 100644
--- a/src/views/gantt/index.vue
+++ b/src/views/gantt/index.vue
@@ -2,10 +2,33 @@
<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="ganttZoomIn">鏀惧ぇ</el-button>
- <el-button type="primary" size="mini" @click="ganttZoomOut">缂╁皬</el-button>
+ <el-select
+ v-model="scaleValue"
+ size="mini"
+ placeholder="璇烽�夋嫨"
+ @change="val=>changeTimeScale(val,true)"
+ >
+ <el-option
+ v-for="item in scaleArr"
+ :key="item.code"
+ :label="item.name"
+ :value="item.code"
+ />
+ </el-select>
+ <el-select
+ v-model="priorityMethod"
+ size="mini"
+ style="margin-left: 10px;"
+ placeholder="璇烽�夋嫨"
+ @change="priorityMethodChange"
+ >
+ <el-option
+ v-for="item in priorityMethodArr"
+ :key="item.code"
+ :label="item.name"
+ :value="item.code"
+ />
+ </el-select>
<el-date-picker
v-model="ganttDateRange"
style="margin-left: 10px;"
@@ -24,36 +47,83 @@
<el-button size="mini" @click="handleClearSelection">
娓呯┖澶嶉�夋閫夋嫨
</el-button>
+
+ <el-button size="mini" type="primary" @click="prepareArrange">
+ 棰勬帓
+ </el-button>
+ <el-button size="mini" disabled>
+ 棰勬帓杩涘害锛歿{ canArrangeNumber }}/{{ needArrangeNumber }}
+ </el-button>
+
</div>
- <div id="gantt_here" style="width:100%; height:90vh;" />
+ <div id="gantt_here" style="width:100%; height:calc(90vh - 50px);" />
+
+ <!-- 鍒嗛〉缁勪欢 -->
+ <div class="pagination-container">
+ <el-pagination
+ :current-page="currentPage"
+ :page-sizes="[10, 20, 50, 100]"
+ :page-size="pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="totalTasks"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </div>
</div>
</template>
<script>
import { gantt } from '@/components/dhtmlxGantt'
import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
-import { handleDateReduceOneDay } from '@/utils/global'
+import { handleDateReduceOneDay, handleDatetime, handleDatetime2 } from '@/utils/global'
+import { nanoid } from 'nanoid'
export default {
data() {
return {
- value: 'default',
- ganttDateRange: ['2025-04-01', '2025-05-10'],
- selectedIds: []
+ scaleArr: [
+ { code: '30min', name: '30min' },
+ { code: '60min', name: '60min' },
+ { code: '240min', name: '240min' },
+ { code: '360min', name: '360min' }
+ ],
+ scaleValue: '240min',
+ ganttDateRange: ['2026-01-20', '2026-01-25'],
+ selectedIds: [],
+ // 鍒嗛〉鐩稿叧鏁版嵁
+ currentPage: 1,
+ pageSize: 100,
+ totalTasks: 0,
+ allTasks: [], // 瀛樺偍鎵�鏈変换鍔℃暟鎹�
+ paginatedTasks: [], // 褰撳墠椤电殑浠诲姟鏁版嵁
+
+ fivePeriodsTimeName: ['OneStartDate', 'TwoStartDate', 'ThreeStartDate', 'FourStartDate', 'FiveStartDate'], // 浜斾釜鏃堕棿娈电殑閿悕
+ needArrangeNumber: 5000, // 鍋囪闇�瑕佹帓浜ф暟閲�5000
+ canArrangeNumber: 0, // 鑳芥帓鏁伴噺榛樿涓� 0
+ priorityMethod: 'device', // device 璁惧 time 鏃堕棿
+ priorityMethodArr: [
+ { code: 'device', name: '璁惧浼樺厛' },
+ { code: 'time', name: '鏃堕棿浼樺厛' }
+ ]
}
},
mounted() {
+ // 鍏堟敼鍙樻棩鏈熻寖鍥撮厤缃�
this.ganttDateRangeChange(this.ganttDateRange)
- this.init()
+
+ // 鍒濆鍖栫敇鐗瑰浘閰嶇疆
+ this.initGantt()
+
+ // 鐒跺悗鍔犺浇浠诲姟鏁版嵁锛堜細鑷姩娓叉煋褰撳墠椤碉級
+ this.loadTasks()
},
methods: {
- init() {
- // gantt.clearAll()
-
+ initGantt() {
gantt.plugins({
- auto_scheduling: true,
+
critical_path: true,
drag_timeline: true,
grouping: true,
@@ -63,45 +133,24 @@
tooltip: true,
undo: true
})
+ gantt.i18n.setLocale('cn')
gantt.config.multiselect = true // 寮�鍚浠诲姟閫夋嫨
- /* 鈫撯啌鈫� Auto-scheduling configuration 鈫撯啌鈫� */
- gantt.config.auto_scheduling = true
+ gantt.config.show_links = false // 涓嶆樉绀鸿繛鎺ョ嚎
- function renderDiv(task, date, className) {
- const el = document.createElement('div')
- el.className = className
- const sizes = gantt.getTaskPosition(task, date)
- el.style.left = sizes.left + 'px'
- el.style.top = sizes.top + 'px'
- return el
- }
+ // 涓嶅啀瀵归綈鏃堕棿杞村埢搴︼紙姣斿澶╂牸瀛愶級锛岃�屾槸鎸夆�滃皬鏃垛�濆榻�
+ gantt.config.round_dnd_dates = false
+ // 鏈�灏忔闀胯繕鏄� 1 灏忔椂锛屼絾浣犲凡缁忎粠鈥滃ぉ鏍煎瓙鈥濆彉鎴愨�滃皬鏃舵牸瀛愨�濅簡
+ // gantt.config.time_step = 60 // 60 鍒嗛挓 = 1 灏忔椂
+ gantt.config.time_step = 1 // 1鍒嗛挓
- gantt.attachEvent('onGanttReady', function() {
- // gantt.addTaskLayer(function draw_deadline(task) {
- // const constraintType = gantt.getConstraintType(task);
- // const types = gantt.config.constraint_types;
- // if (constraintType != types.ASAP && constraintType != types.ALAP && task.constraint_date) {
- // const dates = gantt.getConstraintLimitations(task);
- //
- // const els = document.createElement("div");
- //
- // if (dates.earliestStart) {
- // els.appendChild(renderDiv(task, dates.earliestStart, 'constraint-marker earliest-start'));
- // }
- //
- // if (dates.latestEnd) {
- // els.appendChild(renderDiv(task, dates.latestEnd, 'constraint-marker latest-end'));
- // }
- //
- // els.title = gantt.locale.labels[constraintType] + " " + gantt.templates.task_date(task.constraint_date);
- //
- // if (els.children.length)
- // return els;
- // }
- // return false;
- // });
- })
- /* 鈫戔啈鈫� Auto-scheduling configuration 鈫戔啈鈫� */
+ 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', [
@@ -117,8 +166,6 @@
{ key: 4, label: 'Complete' }
])
- gantt.i18n.setLocale('cn')
-
function byId(list, id) {
for (let i = 0; i < list.length; i++) {
if (list[i].key == id) {
@@ -130,116 +177,32 @@
/* 鈫戔啈鈫� Group configuration 鈫戔啈鈫� */
- /* 鈫撯啌鈫� Zoom configuration 鈫撯啌鈫� */
- const zoomConfig = {
- levels: [
- {
- name: 'hour',
- scale_height: 27,
- min_column_width: 50,
- scales: [
- { unit: 'day', format: '%Y骞�%M%d鍙�' },
- { unit: 'hour', format: '%H鏃�' }
- ]
- },
- {
- name: 'day',
- scale_height: 27,
- min_column_width: 80,
- scales: [
- // { unit: 'day', step: 1, format: '%d %M' }
- { unit: 'day', step: 1, format: '%M%d鍙�' }
- ]
- },
- {
- name: 'week',
- scale_height: 50,
- min_column_width: 70,
- scales: [
- // {
- // unit: 'week', step: 1, format: function(date) {
- // const dateToStr = gantt.date.date_to_str('%d %M')
- // const endDate = gantt.date.add(date, -6, 'day')
- // const weekNum = gantt.date.date_to_str('%W')(date)
- // return '绗�' + weekNum + '鍛�, ' + dateToStr(date) + ' - ' + dateToStr(endDate)
- // }
- // },
- // %M
- { unit: 'week', format: '%Y骞寸%W鍛�' },
- { unit: 'day', step: 1, format: '%M%d鍙�' }
- // { unit: 'day', step: 1, format: '%j %D' }
- // { unit: 'day', step: 1, format: '鏄熸湡%D' }
- ]
- },
- {
- name: 'month',
- scale_height: 50,
- min_column_width: 120,
- scales: [
- // { unit: 'month', format: '%Y骞�%F' },
- { unit: 'month', format: '%Y骞�%M' },
- { unit: 'week', format: '绗�%W鍛�' }
- ]
- },
- {
- name: 'quarter',
- height: 50,
- min_column_width: 90,
- scales: [
- // {
- // unit: 'quarter', step: 1, format: function(date) {
- // const dateToStr = gantt.date.date_to_str('%M')
- // const endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
- // return dateToStr(date) + ' - ' + dateToStr(endDate)
- // }
- // },
- { unit: 'month', step: 1, format: '%Y骞�%M' }
- ]
- },
- {
- name: 'year',
- scale_height: 50,
- min_column_width: 30,
- scales: [
- { unit: 'year', step: 1, format: '%Y骞�' }
-
- ]
- }
- ],
- useKey: 'ctrlKey',
- trigger: 'wheel',
- element: function() {
- return gantt.$root.querySelector('.gantt_task')
- }
- }
-
- gantt.ext.zoom.init(zoomConfig)
- gantt.ext.zoom.setLevel('week')
- /* 鈫戔啈鈫� Zoom configuration 鈫戔啈鈫� */
+ // 鍒诲害鍊兼敼鍙�
+ this.changeTimeScale()
// 鏄惁鏄伐浣滄椂闂�
/* 鈫撯啌鈫� Working Time configuration 鈫撯啌鈫� */
- gantt.templates.scale_cell_class = function(date) {
- if (!gantt.isWorkTime(date)) {
- return 'weekend'
- }
- }
-
- gantt.templates.timeline_cell_class = function(item, date) {
- if (!gantt.isWorkTime({ date: date, task: item })) {
- return 'weekend'
- }
- }
-
- 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.templates.scale_cell_class = function(date) {
+ // if (!gantt.isWorkTime(date)) {
+ // return 'weekend'
+ // }
+ // }
+ //
+ // gantt.templates.timeline_cell_class = function(item, date) {
+ // if (!gantt.isWorkTime({ date: date, task: item })) {
+ // return 'weekend'
+ // }
+ // }
+ //
+ // gantt.config.work_time = true
+ //
+ // gantt.addCalendar({
+ // id: 'customCalendar1',
+ // worktime: {
+ // hours: ['00:00-24:00'], // global work hours for weekdays
+ // days: [1, 1, 1, 1, 1, 1, 1]
+ // }
+ // })
// gantt.addCalendar({
// id: 'custom2',
@@ -248,15 +211,12 @@
// })
/* 鈫戔啈鈫� Working Time configuration 鈫戔啈鈫� */
+ // 鐢樼壒鍥惧垪鍙傛暟璁剧疆
/* 鈫撯啌鈫� Grid Columns configuration 鈫撯啌鈫� */
-
gantt.config.reorder_grid_columns = true
-
const textEditor = { type: 'text', map_to: 'text' }
const startDateEditor = { type: 'date', map_to: 'start_date' }
- const durationEditor = { type: 'number', map_to: 'duration', min: 0, max: 100 }
-
- // 鐢樼壒鍥惧垪鍚嶇О
+ const durationEditor = { type: 'number', map_to: 'duration', min: 1, max: 100 }
gantt.config.columns = [
{
name: 'checked',
@@ -271,14 +231,23 @@
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',
width: 60,
align: 'center',
- label: '宸ユ湡(澶�)',
+ label: '鏃堕暱(鍒嗛挓)',
resize: true,
editor: durationEditor,
template: function(task) {
@@ -286,533 +255,59 @@
// 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
- },
- 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: 'add', width: 44 }
]
-
/* 鈫戔啈鈫� Grid Columns configuration 鈫戔啈鈫� */
- /* 鈫撯啌鈫� Resource configuration 鈫撯啌鈫� */
- function getResourceAssignments(resourceId) {
- let assignments
- const store = gantt.getDatastore(gantt.config.resource_store)
- const resource = store.getItem(resourceId)
-
- if (resource.$level === 0) {
- assignments = []
- store.getChildren(resourceId).forEach(function(childId) {
- assignments = assignments.concat(gantt.getResourceAssignments(childId))
- })
- } else if (resource.$level === 1) {
- assignments = gantt.getResourceAssignments(resourceId)
- } else {
- assignments = gantt.getResourceAssignments(resource.$resource_id, resource.$task_id)
- }
- return assignments
- }
-
- gantt.templates.resource_cell_class = function(start_date, end_date, resource, tasks) {
- const css = []
- css.push('resource_marker')
- if (tasks.length <= 1) {
- css.push('workday_ok')
- } else {
- css.push('workday_over')
- }
- return css.join(' ')
- }
-
- gantt.templates.resource_cell_value = function(start_date, end_date, resource, tasks) {
- let result = 0
- tasks.forEach(function(item) {
- const assignments = gantt.getResourceAssignments(resource.id, item.id)
- assignments.forEach(function(assignment) {
- const task = gantt.getTask(assignment.task_id)
- result += assignment.value * 1
- })
- })
-
- if (result % 1) {
- result = Math.round(result * 10) / 10
- }
- return '<div>' + result + '</div>'
- }
-
- gantt.locale.labels.section_resources = 'Owners'
- gantt.locale.labels.section_calendar = 'Calendar'
-
// 姹夊寲绐楀彛
- gantt.locale.labels = {
- dhx_cal_today_button: '浠婂ぉ',
- day_tab: '鏃�',
- week_tab: '鍛�',
- month_tab: '鏈�',
- new_event: '鏂板缓鏃ョ▼',
- icon_save: '淇濆瓨',
- icon_cancel: '鍏抽棴',
- icon_details: '璇︾粏',
- icon_edit: '缂栬緫',
- icon_delete: '鍒犻櫎',
- confirm_closing: '璇风‘璁ゆ槸鍚︽挙閿�淇敼!', // Your changes will be lost, are your sure?
- confirm_deleting: '鏄惁鍒犻櫎璁″垝?',
- section_description: '鎻忚堪:',
- section_resources: '鑷畾涔夐�夋嫨:',
- section_calendar: '鑷畾涔夐�夋嫨2:',
- section_time: '鏃堕棿鑼冨洿:',
- section_type: '绫诲瀷:',
- section_text: '璁″垝鍚嶇О:',
- section_test: '娴嬭瘯:',
- section_projectClass: '椤圭洰绫诲瀷:',
- taskProjectType_0: '椤圭洰浠诲姟',
- taskProjectType_1: '鏅�氫换鍔�',
- section_head: '璐熻矗浜�:',
- section_priority: '浼樺厛绾�:',
- taskProgress: '浠诲姟鐘舵��',
- taskProgress_0: '鏈紑濮�',
- taskProgress_1: '杩涜涓�',
- taskProgress_2: '宸插畬鎴�',
- taskProgress_3: '宸插欢鏈�',
- taskProgress_4: '鎼佺疆涓�',
- section_template: 'Details',
- /* grid columns */
- column_text: '璁″垝鍚嶇О',
- column_start_date: '寮�濮嬫椂闂�',
- column_duration: '鎸佺画鏃堕棿',
- column_add: '',
- column_priority: '闅惧害',
- /* link confirmation */
- link: '鍏宠仈',
- confirm_link_deleting: '灏嗚鍒犻櫎',
- message_ok: '纭畾',
- message_cancel: '鍙栨秷',
- link_start: ' (寮�濮�)',
- link_end: ' (缁撴潫)',
- type_task: '浠诲姟',
- type_project: '椤圭洰',
- type_milestone: '閲岀▼纰�',
- minutes: '鍒嗛挓',
- hours: '灏忔椂',
- days: '澶�',
- weeks: '鍛�',
- months: '鏈�',
- years: '骞�'
- }
-
- gantt.config.lightbox.sections = [
- { name: 'description', height: 38, map_to: 'text', type: 'textarea', focus: true },
- {
- name: 'resources', type: 'resources', map_to: 'owner', options: gantt.serverList('people'), default_value: 8
- },
- {
- name: 'calendar', height: 25, map_to: 'calendar_id', type: 'select', options: [
- { key: '', label: '榛樿' },
- { key: 'custom1', label: '閫夐」涓�' },
- { key: 'custom2', label: '閫夐」浜�' }
- ]
- },
-
- { name: 'time', type: 'duration', map_to: 'auto' }
- ]
-
- gantt.config.resource_store = 'resource'
- gantt.config.resource_property = 'owner'
- gantt.config.order_branch = true
- gantt.config.open_tree_initially = true
+ // gantt.config.order_branch = true
+ // gantt.config.open_tree_initially = true
gantt.config.show_errors = false // 鍙戠敓寮傚父鏃讹紝涓嶅厑璁稿脊鍑鸿鍛婂埌 UI 鐣岄潰
- const resourcesStore = gantt.createDatastore({
- name: gantt.config.resource_store,
- type: 'treeDatastore',
- initItem: function(item) {
- item.parent = item.parent || gantt.config.root_id
- item[gantt.config.resource_property] = item.parent
- item.open = true
- return item
- }
- })
-
- resourcesStore.attachEvent('onParse', function() {
- const people = []
- resourcesStore.eachItem(function(res) {
- if (!resourcesStore.hasChild(res.id)) {
- const copy = gantt.copy(res)
- copy.key = res.id
- copy.label = res.text
- people.push(copy)
- }
- })
- gantt.updateCollection('people', people)
- })
-
- resourcesStore.parse([
- { id: 1, text: 'QA', parent: null },
- { id: 2, text: 'Development', parent: null },
- { id: 3, text: 'Sales', parent: null },
- { id: 4, text: 'Other', parent: null },
- { id: 5, text: 'Unassigned', parent: 4 },
- { id: 6, text: 'John', parent: 1, unit: 'hours/day' },
- { id: 7, text: 'Mike', parent: 2, unit: 'hours/day' },
- { id: 8, text: 'Anna', parent: 2, unit: 'hours/day' },
- { id: 9, text: 'Bill', parent: 3, unit: 'hours/day' },
- { id: 10, text: 'Floe', parent: 3, unit: 'hours/day' }
- ])
- /* 鈫戔啈鈫� Resource configuration 鈫戔啈鈫� */
-
- /* 鈫撯啌鈫� Layout configuration 鈫撯啌鈫� */
gantt.config.grid_elastic_columns = true
-
- // let currentLayout = 'default'
-
- /* 鈫戔啈鈫� Layout configuration 鈫戔啈鈫� */
// 鑷畾涔夋诞鍔ㄦ鐨勬樉绀哄唴瀹� 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 + '%'
+ return '<b>浠诲姟:</b> ' + task.text +
+ '<br/><b>' + `${task.type === 'task' ? '浜ц兘' : '鐢熶骇鏁伴噺'}` + ' :</b> ' + task.producedCount +
+ '<br/><b>杩涘害:</b> ' + task.progress * 100 + '%' +
+ '<br/><b>寮�濮嬫椂闂�:</b> ' + handleDatetime2(start) +
+ '<br/><b>缁撴潫鏃堕棿:</b> ' + handleDatetime2(end)
}
+ 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 + '%'
+
+ if (task.type === 'task2') {
+ return `<div class="task2Css">${task.producedCount}</div>`
+ // return task.producedCount
+ }
+ if (task.type === 'task3') {
+ return `<div class="task3Css">`
+ }
+ return ''
+ }
+
+ // 璁剧疆鎸佺画鏃堕棿鍗曚綅涓哄皬鏃�
+ // gantt.config.duration_unit = 'hour'
+
+ gantt.config.duration_unit = 'minute'
+ gantt.config.duration_step = 1
+ // gantt.config.show_task_cells = false //闅愯棌鐢樼壒鍥惧唴閮ㄥ埢搴︾嚎
gantt.init('gantt_here')
- gantt.parse({
- 'data': [
- {
+ // 娉ㄦ剰锛氳繖閲屼笉绔嬪嵆鍔犺浇鏁版嵁锛岃�屾槸绛夊緟loadTasks琚皟鐢�
- 'id': 1,
- 'text': '椤圭洰1',
- 'type': 'project',
- 'start_date': '2025-04-02 00:00',
- 'end_date': '2025-04-07 00:00',
- 'duration': 5,
- 'progress': 0.4,
- 'owner': [{ 'resource_id': '5', 'value': 3 }],
- 'parent': 0,
- 'checked': false
- },
- {
- 'id': 2,
- 'text': '椤圭洰2',
- 'type': 'project',
- 'start_date': '02-04-2025 00:00',
- 'duration': 8,
- 'progress': 0.6,
- 'owner': [{ 'resource_id': '5', 'value': 4 }],
- 'parent': '1',
- checked: false
- },
- {
- 'id': 3,
- 'text': '椤圭洰3',
- 'type': 'project',
- 'start_date': '11-04-2025 00:00',
- 'duration': 8,
- 'parent': '1',
- '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,
- '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,
- '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': 25,
- 'text': '浠诲姟18',
- 'type': 'task',
- 'start_date': '06-04-2025 00:00',
- 'parent': '13',
- 'progress': 0,
- 'owner': [{ 'resource_id': '5', 'value': 1 }],
- 'duration': 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': 'task',
- 'start_date': '03-04-2025 00:00',
- 'duration': 4,
- 'parent': '15',
- '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': '15',
- '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': '15',
- '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': '11',
- 'progress': 0,
- 'owner': [{ 'resource_id': '5', 'value': 3 }],
- 'duration': 2,
- checked: false
- }
- ]
-
- })
-
- // 缁戝畾鐢樼壒鍥剧偣鍑讳簨浠讹紙瀹樻柟鎺ㄨ崘鐨勪簨浠跺鎵樼敤娉曪級<span data-allow-html class='source-item source-aggregated' data-group-key='source-group-2' data-url='https://juejin.cn/post/7352376280387764278' data-id='turn0fetch0'><span data-allow-html class='source-item-num' data-group-key='source-group-2' data-id='turn0fetch0' data-url='https://juejin.cn/post/7352376280387764278'><span class='source-item-num-name' data-allow-html>https://juejin.cn/post/7352376280387764278</span></span></span>
+ // 缁戝畾鐢樼壒鍥剧偣鍑讳簨浠讹紙瀹樻柟鎺ㄨ崘鐨勪簨浠跺鎵樼敤娉曪級
gantt.attachEvent('onTaskClick', (id, e) => {
// 鎵惧埌鐐瑰嚮鐨勬槸鍚︽槸澶嶉�夋
const checkbox = e.target.closest('[data-action="check-row"]')
@@ -825,6 +320,11 @@
const task = gantt.getTask(id)
if (task) {
task.checked = !task.checked
+ // 鍚屾椂鏇存柊鍏ㄥ眬鏁版嵁
+ const globalTask = this.allTasks.find(t => t.id === id)
+ if (globalTask) {
+ globalTask.checked = task.checked
+ }
gantt.updateTask(id) // 鍙埛鏂拌繖涓�琛岋紝鎬ц兘鏇村ソ
this.syncSelected() // 鍚屾鍒� Vue 鐨� selectedIds
}
@@ -837,50 +337,617 @@
this.syncSelected()
},
+ // 鍔犺浇浠诲姟鏁版嵁
+ loadTasks() {
+ // 鎺ュ彛鑾峰彇鍒扮殑鏁版嵁
+ const rows = [
+ {
+ 'wo_code': null,
+ 'YearDate': '2026-01-20',
+ 'children': [
+ {
+ 'AdvaDevicNumber': 'JG010',
+ 'AdvaDevicName': '绮惧伐璁惧10#',
+ 'AdvaDevicCropMob': '10',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ },
+ {
+ 'AdvaDevicNumber': 'SB001',
+ 'AdvaDevicName': '璁惧001',
+ 'AdvaDevicCropMob': '30',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ }
+ ]
+ },
+ {
+ 'wo_code': null,
+ 'YearDate': '2026-01-21',
+ 'children': [
+ {
+ 'AdvaDevicNumber': 'JG010',
+ 'AdvaDevicName': '绮惧伐璁惧10#',
+ 'AdvaDevicCropMob': '10',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ },
+ {
+ 'AdvaDevicNumber': 'SB001',
+ 'AdvaDevicName': '璁惧001',
+ 'AdvaDevicCropMob': '30',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ }
+ ]
+ },
+ {
+ 'wo_code': null,
+ 'YearDate': '2026-01-22',
+ 'children': [
+ {
+ 'AdvaDevicNumber': 'JG010',
+ 'AdvaDevicName': '绮惧伐璁惧10#',
+ 'AdvaDevicCropMob': '10',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ },
+ {
+ 'AdvaDevicNumber': 'SB001',
+ 'AdvaDevicName': '璁惧001',
+ 'AdvaDevicCropMob': '30',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ }
+ ]
+ },
+ {
+ 'wo_code': null,
+ 'YearDate': '2026-01-23',
+ 'children': [
+ {
+ 'AdvaDevicNumber': 'JG010',
+ 'AdvaDevicName': '绮惧伐璁惧10#',
+ 'AdvaDevicCropMob': '10',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ },
+ {
+ 'AdvaDevicNumber': 'SB001',
+ 'AdvaDevicName': '璁惧001',
+ 'AdvaDevicCropMob': '30',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ }
+ ]
+ },
+ {
+ 'wo_code': null,
+ 'YearDate': '2026-01-24',
+ 'children': [
+ {
+ 'AdvaDevicNumber': 'JG010',
+ 'AdvaDevicName': '绮惧伐璁惧10#',
+ 'AdvaDevicCropMob': '10',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ },
+ {
+ 'AdvaDevicNumber': 'SB001',
+ 'AdvaDevicName': '璁惧001',
+ 'AdvaDevicCropMob': '30',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ }
+ ]
+ },
+ {
+ 'wo_code': null,
+ 'YearDate': '2026-01-25',
+ 'children': [
+ {
+ 'AdvaDevicNumber': 'JG010',
+ 'AdvaDevicName': '绮惧伐璁惧10#',
+ 'AdvaDevicCropMob': '10',
+ 'AdvaDevicRhythm': '5.0',
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ },
+ {
+ 'AdvaDevicNumber': 'SB001',
+ 'AdvaDevicName': '璁惧001',
+ 'AdvaDevicCropMob': '30', // 绋煎姩鐜� 闇�瑕侀櫎100
+ 'AdvaDevicRhythm': '5.0', // 鐢熶骇鑺傛媿
+ 'OneStartDate': '08:00~11:30',
+ 'TwoStartDate': '13:00~18:00',
+ 'ThreeStartDate': '',
+ 'FourStartDate': '',
+ 'FiveStartDate': ''
+ }
+ ]
+ }
+ ]
+
+ const newArr = []
+ // 杩欎竴姝ョ殑鎿嶄綔涓昏鏄鍋氫骇鑳借儗鏅殑鏄剧ず
+ rows.forEach((item, index) => {
+ // 鏁版嵁鎺ュ彛杩斿洖鐨勬椂闂磋寖鍥磋鍦ㄦ棩鏈熼�夋嫨鑼冨洿涔嬪唴
+ if (new Date(item.YearDate).getTime() >= new Date(this.ganttDateRange[0]).getTime() && new Date(item.YearDate).getTime() <= new Date(this.ganttDateRange[1]).getTime()) {
+ // console.log(JSON.stringify(item))
+ item.children.forEach((it, ind) => {
+ // console.log(JSON.stringify(it))
+ // 杩欓噷搴旇瑕佺敓鎴愪竴涓互璁惧缁村害涓哄熀纭�鐨勬暟缁� 涓嶉噸涓嶆紡
+ if (!newArr.map(i => i.partCode).includes(it.AdvaDevicNumber)) {
+ console.log(' it.AdvaDevicNumber,', it.AdvaDevicNumber)
+ newArr.push({
+ id: it.AdvaDevicNumber,
+ type: 'project',
+ text: '浠诲姟鍚嶇О棰勭暀',
+ partName: it.AdvaDevicName,
+ partCode: it.AdvaDevicNumber,
+ start_date: handleDatetime2(item.YearDate + ' ' + it.OneStartDate.split('~')[0]), // 杩欎釜鏄棤鏁堢殑锛屽彧鏄负浜嗛鎺抪repareArrange鏂规硶閲岄潰涓嶆姤閿�
+ end_date: handleDatetime2(item.YearDate + ' ' + it.OneStartDate.split('~')[1]), // 杩欎釜鏄棤鏁堢殑锛屽彧鏄负浜嗛鎺抪repareArrange鏂规硶閲岄潰涓嶆姤閿�
+ // duration: this.calculateTimeRangeInMinutes(it.OneStartDate),
+ render: 'split', // 鐢ㄤ簬鍦ㄤ竴涓伐浣滄椂闂存鍐呮樉绀轰笉涓嬶紝闇�瑕佽繘琛屽垎鍓叉樉绀�
+ checked: false,
+ progress: 0,
+ parent: 0,
+ saleOrder: 'SO-2026-01001'
+ })
+ }
+
+ // 鍥犱负鏄簲涓椂闂存锛屾墍鏈夎鏈変釜寰幆娆℃暟涓�5鐨勫惊鐜�
+ for (let i = 0; i < 5; i++) { // 杩欐寰幆鏄负浜嗘樉绀轰骇鑳�
+ if (it[this.fivePeriodsTimeName[i]]) {
+ const duration = this.calculateTimeRangeInMinutes(it[this.fivePeriodsTimeName[i]]) // 宸ユ湡 鍗曚綅 鍒嗛挓
+ newArr.push({
+ // id: index.toString() + ind.toString() + i.toString(),
+ id: nanoid(),
+ type: 'task',
+ text: '浠诲姟鍚嶇О棰勭暀',
+ partName: it.AdvaDevicName,
+ partCode: it.AdvaDevicNumber,
+ start_date: handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[0]),
+ end_date: handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[1]),
+ duration,
+ checked: false,
+ progress: 0,
+ parent: it.AdvaDevicNumber,
+ saleOrder: 'SO-2026-01001',
+ // 瑕佸湪姣忎竴涓椂闂存鍐呯畻鍑鸿兘鐢熶骇澶氬皯涓� 宸ユ湡锛堝垎閽燂級涔樹互60 闄や互鐢熶骇鑺傛媿 * 绋煎姩鐜�
+ producedCount: (duration * 60 / it.AdvaDevicRhythm) * (it.AdvaDevicCropMob / 100),
+ AdvaDevicRhythm: it.AdvaDevicRhythm, // 鐢熶骇鑺傛媿
+ AdvaDevicCropMob: it.AdvaDevicCropMob // 绋煎姩鐜� 闇�瑕侀櫎100
+ })
+ }
+ }
+ })
+ }
+ })
+
+ // 浣跨敤鍘熸湁鐨勭ず渚嬫暟鎹綔涓哄熀纭�
+ this.allTasks = newArr
+
+ const dataBack = [
+ {
+ 'id': 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.2,
+ 'parent': 0,
+ 'checked': false
+ // render: 'split'
+ },
+ {
+ 'id': 2,
+ '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.2,
+ 'parent': '1',
+ checked: false
+ },
+ {
+ 'id': 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': '2',
+ 'duration': 4,
+ 'progress': 0,
+ checked: false
+ },
+ {
+ 'id': 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': '2',
+ 'duration': 3,
+ 'progress': 0,
+ 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,
+ '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,
+ '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,
+ 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,
+ checked: false
+ },
+
+ {
+ 'id': 11,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task',
+
+ 'start_date': '2025-04-14 00:00',
+ 'parent': '8',
+ 'duration': 3,
+ 'progress': 0,
+ checked: false
+ },
+
+ {
+ 'id': 12,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task',
+ 'start_date': '2025-04-18 00:00',
+ 'parent': '8',
+ 'duration': 1,
+ 'progress': 0,
+ checked: false
+ },
+
+ {
+ 'id': 13,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task',
+ 'start_date': '2025-04-10 02:50',
+ 'parent': '8',
+ 'duration': 2,
+ 'progress': 0,
+ checked: false
+ },
+ {
+ 'id': 10,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task3',
+ 'start_date': '2025-04-10 06:24',
+ 'parent': '8',
+ 'duration': 1,
+ 'progress': 0,
+ checked: false
+ },
+ {
+ 'id': 14,
+ 'text': '璁惧:閲戝伐杞﹂棿4鍙疯澶�',
+ saleOrder: 'SO-2025-05002',
+ partName: '璧版鏈�',
+ partCode: 'W01',
+ 'calendar_id': 'customCalendar1',
+ description: '鎺掍骇鏁伴噺:1000 鎶ュ伐鏁伴噺:600 杩涘害:60%',
+ 'type': 'task2',
+
+ 'start_date': '2025-04-11 06:24',
+ 'parent': '8',
+ 'duration': 1,
+ 'progress': 0,
+ 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,
+ checked: false
+ }
+ ]
+
+ // this.totalTasks = this.allTasks.length
+ // this.updatePaginatedTasks()
+ // this.renderGanttChart()
+
+ this.prepareArrange()
+ },
+
+ // 鏇存柊鍒嗛〉鍚庣殑浠诲姟鏁版嵁
+ updatePaginatedTasks() {
+ const startIndex = (this.currentPage - 1) * this.pageSize
+ const endIndex = Math.min(startIndex + this.pageSize, this.allTasks.length)
+ this.paginatedTasks = this.allTasks.slice(startIndex, endIndex)
+ // this.paginatedTasks = JSON.parse(JSON.stringify(this.allTasks.slice(startIndex, endIndex)))
+ },
+
+ // 鎷嗗垎鏃堕棿瀛楃涓插苟鍒嗗埆璁＄畻鍒嗛挓鍊�
+ calculateTimeRangeInMinutes(timeRangeStr) {
+ // 鍒嗗壊瀛楃涓诧紝鑾峰彇寮�濮嬫椂闂村拰缁撴潫鏃堕棿
+ const [startTimeStr, endTimeStr] = timeRangeStr.split('~')
+
+ // 灏嗘椂闂村瓧绗︿覆锛圚H:MM锛夎浆鎹负鎬诲垎閽熸暟
+ const timeStringToMinutes = (timeStr) => {
+ const [hours, minutes] = timeStr.split(':').map(Number)
+ return hours * 60 + (minutes || 0)
+ }
+
+ const startMinutes = timeStringToMinutes(startTimeStr)
+ const endMinutes = timeStringToMinutes(endTimeStr)
+
+ // 杩斿洖鏃堕棿宸紙鍒嗛挓锛�
+ return endMinutes - startMinutes
+ },
+
+ // 鍒诲害鍊兼敼鍙�
+ changeTimeScale(val, boolean) {
+ let scaleConfig
+ switch (this.scaleValue) {
+ case '30min':
+ scaleConfig = [
+ { unit: 'day', step: 1, format: '%Y-%m-%d 鏄熸湡%D' },
+ { unit: 'minute', step: 30, format: '%H:%i' } // 瀛愬昂搴�
+ ]
+ break
+ case '60min':
+ scaleConfig = [
+ { unit: 'day', step: 1, format: '%Y-%m-%d 鏄熸湡%D' },
+ // { unit: 'hour', step: 1, format: '%H:%i' },
+ { unit: 'minute', step: 60, format: '%H:%i' }
+ ]
+ break
+ case '240min':
+ scaleConfig = [
+ { unit: 'day', step: 1, format: '%Y-%m-%d 鏄熸湡%D' },
+ { unit: 'minute', step: 240, format: '%H:%i' } // 姣�4灏忔椂涓�涓埢搴�
+ ]
+ break
+ case '360min':
+ scaleConfig = [
+ { unit: 'day', step: 1, format: '%Y-%m-%d 鏄熸湡%D' },
+ { unit: 'minute', step: 360, format: '%H:%i' } // 姣�6灏忔椂涓�涓埢搴�
+ // { unit: 'hour', step: 6, format: '%H:%i' } // 姣�6灏忔椂涓�涓埢搴�
+ ]
+ break
+ default:
+ scaleConfig = [
+ { unit: 'hour', step: 1, format: '%Y-%m-%d 鏄熸湡%D' },
+ { unit: 'minute', step: 60, format: '%H:%i' }
+ ]
+ }
+ gantt.config.start_date = new Date(this.ganttDateRange[0] + ' 00:00')
+ gantt.config.end_date = new Date(this.ganttDateRange[1] + ' 24:00')
+ gantt.config.scales = scaleConfig
+ if (boolean) {
+ // gantt.render()// gantt閲嶇粯
+ this.renderGanttChart()
+ }
+ },
+
+ // 娓叉煋鐢樼壒鍥�
+ renderGanttChart() {
+ gantt.clearAll()
+ console.log(JSON.parse(JSON.stringify(this.paginatedTasks)))
+ gantt.parse({
+ 'data': this.paginatedTasks
+ })
+ // 纭繚鐢樼壒鍥鹃噸鏂版覆鏌�
+ // gantt.render()
+ },
+
+ // 椤靛ぇ灏忔敼鍙�
+ handleSizeChange(newSize) {
+ console.log('鎵ц2')
+ this.pageSize = newSize
+ this.currentPage = 1 // 閲嶇疆鍒扮涓�椤�
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ this.syncSelected()
+ },
+
+ // 褰撳墠椤垫敼鍙�
+ handleCurrentChange(newPage) {
+ console.log('鎵ц1')
+ // 璁＄畻鏈�澶ч〉鏁帮紝闃叉瓒呭嚭鑼冨洿
+ const maxPage = Math.ceil(this.totalTasks / this.pageSize)
+ if (newPage > maxPage) {
+ this.currentPage = maxPage
+ } else if (newPage < 1) {
+ this.currentPage = 1
+ } else {
+ this.currentPage = newPage
+ }
+
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ this.syncSelected()
+ },
+ // 鐢樼壒鍥炬棩鏈熸敼鍙�
ganttDateRangeChange(val) {
- gantt.config.start_date = val[0]
- gantt.config.end_date = val[1]
+ this.priorityMethodChange()// 娓呯┖宸叉帓鍊�
+ gantt.config.start_date = new Date(val[0] + ' 00:00')
+ gantt.config.end_date = new Date(val[1] + ' 24:00')
gantt.render()
},
-
- ganttUndo() {
- gantt.undo()
- },
- ganttRedo() {
- gantt.redo()
- },
- ganttZoomIn() {
- gantt.ext.zoom.zoomIn()
- },
- ganttZoomOut() {
- gantt.ext.zoom.zoomOut()
- },
-
// 浠庣敇鐗瑰浘涓悓姝ラ�変腑鐨� id 鍒� Vue data
syncSelected() {
- const tasks = gantt.serialize().data || []
- this.selectedIds = tasks.filter(t => t.checked).map(t => t.id)
+ // 鍚屾褰撳墠椤甸潰浠诲姟鍒板叏灞�鏁版嵁
+ gantt.eachTask((task) => {
+ const globalTask = this.allTasks.find(t => t.id === task.id)
+ if (globalTask) {
+ // console.log(globalTask, 'globalTask')
+ globalTask.checked = task.checked
+ }
+ })
+
+ // 鑾峰彇鎵�鏈夐�変腑鐨勪换鍔D
+ // this.selectedIds = [...new Set(this.allTasks.filter(t => t.checked).map(t => t.id))]//鏁扮粍鍘婚噸
+ this.selectedIds = this.allTasks.filter(t => t.checked).map(t => t.id)
console.log(this.selectedIds)
},
// 鑾峰彇閫変腑浠诲姟锛堢ず渚嬶級
handleGetSelected() {
- const tasks = gantt.serialize().data || []
- const selected = tasks.filter(t => t.checked)
- this.$notify.success(`褰撳墠宸查�変腑${selected.length} 鏉′换鍔)
+ const selected = this.allTasks.filter(t => t.checked)
+ // this.$notify.success(`褰撳墠宸查�変腑${selected.length} 鏉′换鍔)
+ this.$notify.success(`鐐瑰嚮浜哷)
},
// 娓呯┖鎵�鏈夐�夋嫨
handleClearSelection() {
- // 鑾峰彇鎵�鏈変换鍔�
- const tasks = gantt.serialize().data || []
-
// 閬嶅巻鎵�鏈変换鍔★紝灏� checked 灞炴�ц缃负 false
- tasks.forEach(task => {
+ this.allTasks.forEach(task => {
task.checked = false
})
- // 鏇存柊鎵�鏈変换鍔℃樉绀�
+ // 鏇存柊褰撳墠椤甸潰鏄剧ず鐨勪换鍔�
gantt.eachTask((task) => {
task.checked = false
gantt.updateTask(task.id)
@@ -891,6 +958,97 @@
// 鏄剧ず鎻愮ず淇℃伅
this.$notify.success('宸叉竻绌烘墍鏈夐�夋嫨')
+ },
+ // 棰勬帓
+ prepareArrange() {
+ // 浼樺厛鏂瑰紡 time device
+ if (this.priorityMethod === 'time') {
+ this.allTasks.sort((a, b) => a.start_date - b.start_date)
+ }
+ if (this.priorityMethod === 'device') {
+ this.allTasks.sort((a, b) => Number(a.partCode.replace(/\D/g, '')) - Number(b.partCode.replace(/\D/g, '')))
+ // this.allTasks.sort((a, b) => Number(b.partCode.replace(/\D/g, '')) - Number(a.partCode.replace(/\D/g, '')))
+ // this.allTasks.sort((a, b) => a.producedCount - b.producedCount)
+ }
+
+ const newArr = []
+ // this.canArrangeNumber = 0
+ let needArrangeNumber = this.needArrangeNumber
+ this.allTasks.forEach(item => {
+ // if (item.type === 'task') { // 杩欓噷鐨勫垽鏂潯浠惰繕寰楀姞涓棩鏈熷垽鏂�
+ if (item.type === 'task' &&
+ new Date(item.start_date).getTime() >= new Date(this.ganttDateRange[0] + ' 00:00:00').getTime() &&
+ new Date(item.end_date).getTime() >= new Date().getTime()) { // 杩欓噷鐨勫垽鏂潯浠惰繕寰楀姞涓棩鏈熷垽鏂� 缁撴潫鏃堕棿瑕佸ぇ浜庣洰鍓嶆椂闂�
+ console.log(JSON.parse(JSON.stringify(item)))
+
+ let ratio = 1 // 榛樿绯绘暟 1
+ if (new Date(item.start_date).getTime() < new Date().getTime() && new Date(item.end_date).getTime() >= new Date().getTime()) {
+ const d = this.calculateTimeRangeInMinutes(handleDatetime2(new Date()).split(' ')[1] + '~' + handleDatetime2(item.end_date).split(' ')[1])
+ ratio = d / item.duration
+ }
+
+ // 杩欎釜鍦版柟鐨刢ount鍊� 寰楀彉鏇� item.producedCount 寰椾箻浠ヤ釜绯绘暟 榛樿绯绘暟 1
+ const count = needArrangeNumber > 0 && needArrangeNumber <= item.producedCount * ratio ? needArrangeNumber : item.producedCount * ratio
+ needArrangeNumber = needArrangeNumber - item.producedCount * ratio // 鍓╀綑寰呮帓鍊�
+
+ if (count > 0 && (needArrangeNumber > 0 || Math.abs(needArrangeNumber) < item.producedCount * ratio)) { // 涓�瀹氭槸澶т簬闆朵笖灏忎簬鏁存潯鐨勭敓浜у�肩殑
+ // duration 鍗曚綅 鍒嗛挓
+ let duration = (count / (item.AdvaDevicCropMob / 100)) * item.AdvaDevicRhythm / 60
+ if (count < item.producedCount && new Date().getTime() <= new Date(item.start_date)) {
+ console.log('鎵ц1111')
+ duration = duration * (count / item.producedCount)
+ // item.end_date = '2026-01-24 11:00:00'
+ }
+ // console.log(duration, 'duration')
+
+ const obj = {
+ id: nanoid(),
+ type: 'task2',
+ text: '浠诲姟鍚嶇О111',
+ partName: item.partName,
+ partCode: item.partCode,
+ start_date: new Date(item.start_date).getTime() < new Date().getTime() ? handleDatetime2(new Date()) : handleDatetime2(item.start_date),
+ // end_date: handleDatetime2(item.end_date),
+ // end_date: item.end_date,
+ duration, // 浠ｈ〃鐨勬槸杩涘害鏉�
+ checked: false,
+ progress: 0,
+ parent: item.parent,
+ saleOrder: item.saleOrder,
+ producedCount: count <= item.producedCount ? count.toFixed(0) : item.producedCount
+ }
+ this.canArrangeNumber += parseFloat(obj.producedCount)
+ console.log(this.canArrangeNumber)
+
+ // 杩欎釜鍦版柟寰楀姞涓�昏緫锛屽緱鏍规嵁涓栭棿鏃ユ湡杩涜push 涓嬪崍鐮旂┒涓�涓�
+
+ newArr.push({ ...obj })
+ }
+ }
+ })
+
+ console.log(JSON.parse(JSON.stringify(newArr)), 'newArr')
+
+ // for (let i = 0; i < this.allTasks.length; i++) {
+ //
+ // }
+
+ this.allTasks = [...this.allTasks, ...newArr]
+ // console.log(JSON.parse(JSON.stringify(this.allTasks)), '77')
+
+ console.log(JSON.parse(JSON.stringify(this.allTasks)), '888')
+
+ this.totalTasks = this.allTasks.length
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
+ },
+ // 娓呯┖宸叉帓鍊�
+ priorityMethodChange() {
+ this.canArrangeNumber = 0
+ this.allTasks = this.allTasks.filter(i => i.type !== 'task2')
+ this.totalTasks = this.allTasks.length
+ this.updatePaginatedTasks()
+ this.renderGanttChart()
}
}
@@ -906,86 +1064,106 @@
margin: unset;
}
-.local_storage {
- background: lavender;
- border: 2px dotted orange;
- font-weight: bold;
-}
+/*.gantt_task_cell {*/
+/* background: rgba(5, 185, 100, .1);*/
+/*}*/
-.gantt_grid_scale .gantt_grid_head_cell,
-.gantt_task .gantt_task_scale .gantt_scale_cell {
- font-weight: bold;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.7);
-}
+/*!*闈炲伐浣滄棩*!*/
+/*.weekend {*/
+/* background: rgba(255, 255, 255, 0.1);*/
+/*}*/
-.resource_marker {
- text-align: center;
-}
+/*.row-completed {*/
+/* background-color: #bee4be !important; !* 娴呯豢鑹� *!*/
+/*}*/
-.resource_marker div {
- width: 28px;
- height: 28px;
- line-height: 29px;
- display: inline-block;
- border-radius: 15px;
- color: #FFF;
- margin: 3px;
-}
+/*.gantt_grid_head_cell[data-column-id="duration"],*/
+/*.gantt_row .gantt_cell[data-column-name="duration"] {*/
+/* background-color: #f5f5f5 !important;*/
+/*}*/
-.resource_marker.workday_ok div {
- background: #51c185;
-}
+/* 涓轰换鍔℃潯鍐呴儴鐨勮繘搴︽潯娣诲姞鍦嗚锛屼繚鎸佽瑙夌粺涓� */
+/*.gantt_task_progress {*/
+/*border-radius: 10px !important; !* 寤鸿涓庝换鍔℃潯鍗婂緞涓�鑷� *!*/
+/*}*/
-.resource_marker.workday_over div {
- background: #ff8686;
-}
+/*.gantt_bar_task {*/
+/*border-radius: 10px !important;*/
+/*padding: 3px !important;*/
+/*transform: scaleX(-1) !important;*/
+/*}*/
-.owner-label {
- width: 20px;
- height: 20px;
- line-height: 20px;
- font-size: 12px;
- display: inline-block;
- border: 1px solid #cccccc;
- border-radius: 25px;
- background: #e6e6e6;
- color: #6f6f6f;
- margin: 0 3px;
- font-weight: bold;
-}
-
-.weekend {
- background: LightGoldenrodYellow;
-}
-
-.constraint-marker {
- position: absolute;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-
- width: 56px;
- height: 56px;
- margin-top: -11px;
-
- opacity: 0.4;
- z-index: 1;
- background: url("https://docs.dhtmlx.com/gantt/samples/common/constraint-arrow.svg") center no-repeat;
- background-size: cover;
-}
-
-.constraint-marker.earliest-start {
- margin-left: -53px;
-}
-
-.constraint-marker.latest-end {
- margin-left: -3px;
- transform: rotate(180deg);
-}
+/*.gantt_bar_project {*/
+/*border-radius: 10px !important;*/
+/*}*/
.taskCheckBox {
cursor: pointer;
- z-index: 99999 !important;
}
+
+/* 鍒嗛〉瀹瑰櫒鏍峰紡 */
+.pagination-container {
+ margin-top: 10px;
+ display: flex;
+ justify-content: end;
+ padding: 10px 0;
+ 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;
+}
+
+.task2Css {
+ width: 100%;
+ height: 100%;
+ margin-left: 0;
+ background-color: #ac96ff;
+}
+
+.task3Css {
+ width: 100%;
+ height: 100%;
+ margin-left: 0;
+ background-color: rgb(255, 145, 0);
+}
+
+.gantt_scale_cell {
+ border: none !important;
+}
+
+.gantt_task_scale {
+ margin-left: -35px;
+}
+
+.gantt_scale_line:last-child {
+ width: 105%;
+}
+
+/*.gantt_task_bg:first-child > .gantt_task_row:first-child > .gantt_last_cell {*/
+/* border-top: 1px solid rgb(166, 166, 166);*/
+/*}*/
</style>
--
Gitblit v1.9.3