From 81a8f262aa2c39f0afae40bdabbc1580af9b099a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 16 Mar 2026 13:03:15 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=94=98=E7=89=B9=E5=9B=BE=E6=95=B0=E6=8D=AE=E9=A1=B9=20VO=20?=
 =?UTF-8?q?=E5=92=8C=E7=9B=B8=E5=85=B3=E6=8E=A5=E5=8F=A3=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 GanttDataRespVO 类以支持甘特图数据结构，并在 MesProTaskController 中实现获取甘特图任务列表的接口。此变更旨在优化任务管理界面，提升用户体验。
---
 .../mes/pro/task/components/GanttChart.vue    | 131 +++++++++---------
 src/views/mes/pro/task/index.vue              |   2 +-
 2 files changed, 70 insertions(+), 63 deletions(-)

diff --git a/src/views/mes/pro/task/components/GanttChart.vue b/src/views/mes/pro/task/components/GanttChart.vue
index 5dad33013..844042828 100644
--- a/src/views/mes/pro/task/components/GanttChart.vue
+++ b/src/views/mes/pro/task/components/GanttChart.vue
@@ -4,6 +4,7 @@
 </template>
 
 <script setup lang="ts">
+// TODO @AI：生产工单：绿色；生产任务：蓝色；然后，根据进度（progress）将，已已完成比例的蓝色、绿色加深（这个你调研下，看看是不是这个逻辑；）
 import { gantt } from 'dhtmlx-gantt'
 import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
 
@@ -42,7 +43,9 @@ const ganttInited = ref(false)
 
 /** 初始化甘特图配置 */
 const initGantt = () => {
-  if (!ganttContainer.value) return
+  if (!ganttContainer.value) {
+    return
+  }
 
   // 中文 locale
   gantt.locale = {
@@ -78,6 +81,7 @@ const initGantt = () => {
       day_full: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
       day_short: ['日', '一', '二', '三', '四', '五', '六']
     },
+    // TODO @AI：linter 报错；
     labels: {
       new_task: '新任务',
       icon_save: '保存',
@@ -123,6 +127,7 @@ const initGantt = () => {
   gantt.config.details_on_create = false
   gantt.config.details_on_dblclick = false
   gantt.config.show_progress = true
+  gantt.config.open_tree_initially = true
 
   // 只读模式
   if (props.readonly) {
@@ -135,35 +140,61 @@ const initGantt = () => {
     gantt.config.drag_progress = false
   }
 
-  // 时间刻度：日 > 8小时（00:00 / 08:00 / 16:00）
+  // 时间刻度：周 > 日 > 8小时（对齐 KTG）
+  const weekScaleTemplate = (date: Date) => {
+    const dateToStr = gantt.date.date_to_str('%M %d')
+    const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day')
+    return dateToStr(date) + ' - ' + dateToStr(endDate)
+  }
+  const dayTemplate = (date: Date) => {
+    return gantt.date.date_to_str('%M %d')(date)
+  }
+  const daysStyle = (date: Date) => {
+    return date.getDay() === 0 || date.getDay() === 6 ? 'weekend' : ''
+  }
   gantt.config.scales = [
-    { unit: 'day', step: 1, format: '%Y-%m-%d %D' },
-    {
-      unit: 'hour',
-      step: 8,
-      format: (date: Date) => {
-        return String(date.getHours()).padStart(2, '0') + ':00'
-      }
-    }
+    { unit: 'week', step: 1, format: weekScaleTemplate },
+    { unit: 'day', step: 1, format: dayTemplate, css: daysStyle },
+    { unit: 'hour', step: 8, format: '%H:%i' }
   ]
+  gantt.config.scale_height = 50
+  gantt.config.show_task_cells = true
 
   // 左侧列配置
   gantt.config.columns = [
     { name: 'text', label: '任务名称', tree: true, width: 180, resize: true },
-    { name: 'workstationName', label: '工作站', align: 'center', width: 100, resize: true },
-    { name: 'processName', label: '工序', align: 'center', width: 100, resize: true },
+    { name: 'workstation', label: '工作站', align: 'center', width: 100, resize: true },
+    { name: 'process', label: '工序', align: 'center', width: 100, resize: true },
     { name: 'start_date', label: '开始时间', align: 'center', width: 130 },
     { name: 'end_date', label: '结束时间', align: 'center', width: 130 }
   ]
 
-  // 今天标记线
-  gantt.plugins({ marker: true })
+  // 今天标记线 + tooltip 插件
+  gantt.plugins({ marker: true, tooltip: true })
   gantt.addMarker({
     start_date: new Date(),
     css: 'today',
     text: '今天'
   })
 
+  // 甘特条上的文本
+  gantt.templates.task_text = (_start: any, _end: any, task: any) => {
+    const percent = Math.round((task.progress || 0) * 100)
+    if (task.type === 'project') {
+      return `<b>生产工单:</b> ${task.text} <span>完成比例：${percent}%</span>`
+    }
+    return `<b>生产任务:</b> ${task.process || ''} ${task.text} <span>完成比例：${percent}%</span>`
+  }
+
+  // 鼠标悬浮提示
+  gantt.templates.tooltip_text = (_start: any, _end: any, task: any) => {
+    const percent = Math.round((task.progress || 0) * 100)
+    if (task.type === 'project') {
+      return `<b>生产工单:</b> ${task.text} <span>完成比例：${percent}%</span>`
+    }
+    return `<b>生产任务:</b> ${task.process || ''} ${task.text} <span>完成比例：${percent}%</span>`
+  }
+
   // 任务颜色模板
   gantt.templates.task_class = (_start: any, _end: any, task: any) => {
     if (task.type === gantt.config.types.project) return 'gantt-project-bar'
@@ -177,7 +208,7 @@ const initGantt = () => {
     gantt.attachEvent('onAfterTaskDrag', (id: string | number) => {
       const task = gantt.getTask(id)
       emit('task-update', {
-        id: task.taskId || id,
+        id: task.originalId || id,
         startTime: task.start_date,
         endTime: task.end_date,
         duration: (task.duration as number) / 8 // 转回工作日
@@ -185,76 +216,51 @@ const initGantt = () => {
     })
   }
 
+  // TODO @AI：注释
   gantt.attachEvent('onTaskClick', (id: string | number) => {
     emit('task-click', id)
     return true
   })
 
+  // 初始化
   gantt.init(ganttContainer.value)
   ganttInited.value = true
 }
 
-/** 转换数据为甘特图格式 */
-const convertToGanttData = (tasks: any[]) => {
-  const data: any[] = []
-  // 按工单分组
-  const workOrderMap = new Map<number, any[]>()
-  tasks.forEach((task) => {
-    const woId = task.workOrderId
-    if (!workOrderMap.has(woId)) {
-      workOrderMap.set(woId, [])
-    }
-    workOrderMap.get(woId)!.push(task)
-  })
-
-  workOrderMap.forEach((woTasks, woId) => {
-    const firstTask = woTasks[0]
-    // 工单作为 project 行
-    data.push({
-      id: 'wo_' + woId,
-      text: firstTask.workOrderCode + ' ' + firstTask.workOrderName,
-      type: gantt.config.types.project,
-      open: true
-    })
-    // 任务行
-    woTasks.forEach((t) => {
-      data.push({
-        id: 'task_' + t.id,
-        taskId: t.id,
-        text: t.name,
-        workstationName: t.workstationName || '',
-        processName: t.processName || '',
-        start_date: t.startTime ? new Date(t.startTime) : new Date(),
-        duration: (t.duration || 1) * 8, // 工作日 -> 小时（end_date 由 gantt 自动计算）
-        parent: 'wo_' + woId,
-        progress: t.quantity > 0 ? t.producedQuantity / t.quantity : 0,
-        color: t.colorCode || '#00AEF3'
-      })
-    })
-  })
-
-  return { data, links: [] }
-}
-
 /** 加载数据到甘特图 */
 const loadData = (tasks: any[]) => {
-  if (!ganttInited.value) return
+  if (!ganttInited.value) {
+    return
+  }
   gantt.clearAll()
-  const ganttData = convertToGanttData(tasks)
-  gantt.parse(ganttData)
+  // TODO @AI：使用下枚举，mes utils 下有的；
+  // 后端 type: 301=工单(project), 303=任务(task)
+  const TYPE_MAP: Record<number, string> = { 301: 'project', 303: 'task' }
+  const transformed = {
+    data: tasks.map((item: any) => ({
+      ...item,
+      // TODO @AI：是不是用枚举，就可以么？不用 TYPE_MAP?
+      type: TYPE_MAP[item.type] || item.type,
+      start_date: item.startDate ? new Date(item.startDate) : undefined,
+      end_date: item.endDate ? new Date(item.endDate) : undefined
+    })),
+    links: []
+  }
+  gantt.parse(transformed)
 }
 
-// 监听 tasks 变化
+/** 监听 tasks 变化 */
 watch(
   () => props.tasks,
   (val) => {
-    if (val && ganttInited.value) {
+    if (val?.length && ganttInited.value) {
       loadData(val)
     }
   },
   { deep: true }
 )
 
+// TODO @AI：注释
 onMounted(() => {
   initGantt()
   if (props.tasks?.length) {
@@ -262,6 +268,7 @@ onMounted(() => {
   }
 })
 
+// TODO @AI：注释
 onBeforeUnmount(() => {
   if (ganttInited.value) {
     gantt.clearAll()
diff --git a/src/views/mes/pro/task/index.vue b/src/views/mes/pro/task/index.vue
index afc3a8598..5724fca98 100644
--- a/src/views/mes/pro/task/index.vue
+++ b/src/views/mes/pro/task/index.vue
@@ -189,7 +189,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索表单 ref
 
 const ganttLoading = ref(false) // 甘特图加载状态
-const ganttTasks = ref<any[]>([]) // 甘特图任务数据，格式与 ProTaskVO 相同，供 GanttChart 组件渲染
+const ganttTasks = ref<any[]>([]) // 甘特图数据
 
 /** 查询待排产工单列表（支持父子工单树形展示） */
 const getWorkOrderList = async () => {