From 4e134b787a369771022faa69cff94fc77656f35a Mon Sep 17 00:00:00 2001 From: hwj Date: Wed, 22 Apr 2026 11:36:21 +0800 Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BB=BB=E5=8A=A1=E5=8D=95?= =?UTF-8?q?=E6=8E=92=E4=BA=A7-=E6=8E=92=E4=BA=A7=E7=94=98=E7=89=B9?= =?UTF-8?q?=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ScheduleGanttPanelEditable.vue | 147 +++++++++++++++--- 1 file changed, 129 insertions(+), 18 deletions(-) diff --git a/src/views/mes/tasksummary/components/ScheduleGanttPanelEditable.vue b/src/views/mes/tasksummary/components/ScheduleGanttPanelEditable.vue index 38f00989..97ec7d04 100644 --- a/src/views/mes/tasksummary/components/ScheduleGanttPanelEditable.vue +++ b/src/views/mes/tasksummary/components/ScheduleGanttPanelEditable.vue @@ -751,19 +751,27 @@ const initGanttPreview = () => { } gantt.plugins({ tooltip: true, inline_edit: true,undo: true }) - gantt.config.readonly = false - gantt.config.drag_move = true - gantt.config.drag_links = false - gantt.config.drag_progress = false - gantt.config.drag_resize = true - gantt.config.order_branch = true - gantt.config.order_branch_free = true - gantt.config.details_on_dblclick = false - gantt.config.show_progress = false - gantt.config.row_height = 40 - gantt.config.scale_height = 44 - gantt.config.xml_date = '%Y-%m-%d %H:%i' - gantt.config.task_height = 24 + + // 编辑相关配置 + gantt.config.readonly = false // 是否只读模式 + gantt.config.drag_move = true // 是否允许拖动任务 + gantt.config.drag_links = false // 是否允许拖动链接 + gantt.config.drag_progress = false // 是否允许拖动进度 + gantt.config.drag_resize = true // 是否允许调整任务大小 + gantt.config.order_branch = true // 是否允许分支内排序 + gantt.config.order_branch_free = true // 是否允许跨分支排序 + gantt.config.details_on_dblclick = false // 双击是否显示详情 + gantt.config.show_progress = false // 是否显示进度条 + + // 布局相关配置 + gantt.config.row_height = 48 // 任务行高度 + gantt.config.scale_height = 70 // 时间轴高度 + gantt.config.xml_date = '%Y-%m-%d %H:%i' // 日期格式 + gantt.config.task_height = 36 // 任务条高度 + gantt.config.min_column_width = 80 // 最小列宽 + gantt.config.column_width = 90 // 默认列宽 + gantt.config.bar_height = 34 // 任务条实际高度 + gantt.config.resize_step = 15 // 调整步长 gantt.config.columns = [ { @@ -1054,17 +1062,102 @@ onBeforeUnmount(() => { .schedule-gantt-container :deep(.gantt_grid_data .gantt_row) { font-weight: 600; + background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%); + border-bottom: 1px solid #e2e8f0; + height: 48px; + display: flex; + align-items: flex-end; +} + +.schedule-gantt-container :deep(.gantt_grid_data .gantt_row:nth-child(even)) { + background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%); +} + +.schedule-gantt-container :deep(.gantt_grid_data .gantt_row:hover) { + background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%) !important; } .schedule-gantt-container :deep(.gantt_grid_data .gantt_cell) { text-overflow: clip; + font-size: 13px; + color: #4b5563; + border-right: 1px solid #e5e7eb; + padding: 0 12px; + line-height: 36px; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.schedule-gantt-container :deep(.gantt_scale_line) { + border-bottom: 2px solid #d1d5db; + background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%); + display: flex; + align-items: center; + margin-bottom: 2px; +} + +.schedule-gantt-container :deep(.gantt_scale_line:last-child) { + margin-bottom: 0; + border-bottom: 1px solid #e5e7eb; +} + +.schedule-gantt-container :deep(.gantt_scale_cell) { + font-size: 14px; + font-weight: 600; + color: #374151; + border-right: 1px solid #e5e7eb; + padding: 0 8px; + text-align: center; + background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%); + display: flex; + align-items: center; + justify-content: center; + height: 35px; +} + +.schedule-gantt-container :deep(.gantt_scale_line:last-child .gantt_scale_cell) { + font-size: 13px; + font-weight: 500; + color: #6b7280; + background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%); + border-bottom: 1px solid #e5e7eb; + height: 35px; +} + +.schedule-gantt-container :deep(.gantt_task_bg) { + background: #ffffff; } .schedule-gantt-container :deep(.gantt_task_bg .gantt_task_cell) { - border-right-width: 2px; + border-right: 1px solid #f3f4f6; + border-bottom: 1px solid #f3f4f6; +} + +.schedule-gantt-container :deep(.gantt_task_bg .gantt_task_row:nth-child(even)) { + background: #f9fafb; +} + +.schedule-gantt-container :deep(.gantt_task_bg .gantt_task_row:hover) { + background: #f3f4f6 !important; +} + +.schedule-gantt-container :deep(.gantt_task_line) { + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border: none; } -.schedule-gantt-container :deep(.gantt-inline-editor-trigger) { +.schedule-gantt-container :deep(.gantt_task_content) { + font-size: 12px; + font-weight: 500; + color: #ffffff; + padding: 0 12px; + line-height: 32px; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.schedule-gantt-container :deep(.gantt_inline-editor-trigger) { display: inline-block; width: 100%; overflow: visible; @@ -1073,7 +1166,6 @@ onBeforeUnmount(() => { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task) { background: #67c23a; - border-color: #67c23a; } .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task .gantt_task_content) { @@ -1081,8 +1173,8 @@ onBeforeUnmount(() => { } .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history) { - background: #909399; - border-color: #909399; + background: #9ca3af; + opacity: 0.7; } .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history .gantt_task_content) { @@ -1091,5 +1183,24 @@ onBeforeUnmount(() => { :deep(.gantt_tooltip) { z-index: 5000 !important; + background: rgba(255, 255, 255, 0.95) !important; + border: 1px solid #e5e7eb !important; + border-radius: 8px !important; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; + padding: 12px !important; + font-size: 13px !important; + line-height: 1.5 !important; +} + +:deep(.gantt_tooltip) div { + margin-bottom: 6px !important; +} + +:deep(.gantt_tooltip) div:last-child { + margin-bottom: 0 !important; +} + +:deep(.gantt_tree_content) { + line-height: 50px; }