From 6ab008b5129636fd460a980b1f04675cedf7c6a6 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Thu, 16 Apr 2026 15:10:06 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E7=94=98=E7=89=B9=E5=9B=BE?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A2=9C=E8=89=B2=E5=8C=BA=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mes/components/ScheduleGanttPanel.vue     | 176 +++++++++++++++++-
 1 file changed, 175 insertions(+), 1 deletion(-)

diff --git a/src/views/mes/components/ScheduleGanttPanel.vue b/src/views/mes/components/ScheduleGanttPanel.vue
index e5476e2e..0bf5399d 100644
--- a/src/views/mes/components/ScheduleGanttPanel.vue
+++ b/src/views/mes/components/ScheduleGanttPanel.vue
@@ -3,6 +3,17 @@
     <div ref="ganttContainerRef" class="schedule-gantt-container" :style="{ height }"></div>
     <div class="schedule-detail-panel">
       <div class="schedule-detail-title">计划信息</div>
+      <div v-if="!editable" class="schedule-status-legend">
+        <div
+          v-for="item in sortedPlanStatusList"
+          :key="item.key"
+          class="legend-item"
+          :style="{ borderLeftColor: item.color }"
+        >
+          <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
+          <span class="legend-label">{{ item.label }}</span>
+        </div>
+      </div>
       <template v-if="activePreviewDevice">
         <el-descriptions :column="1" border size="small">
           <el-descriptions-item label="设备名称">{{ activePreviewDevice.deviceName }}</el-descriptions-item>
@@ -21,6 +32,13 @@
           >
             <div class="schedule-plan-item-head">
               <span class="schedule-plan-item-title">{{ plan.productCode ?? '-' }} / {{ plan.productName ?? '-' }}</span>
+              <span
+                v-if="plan.planStatus && PLAN_STATUS_COLOR_MAP[plan.planStatus]"
+                class="plan-status-tag"
+                :style="{ backgroundColor: PLAN_STATUS_COLOR_MAP[plan.planStatus].color }"
+              >
+                {{ PLAN_STATUS_COLOR_MAP[plan.planStatus].label }}
+              </span>
             </div>
             <div>计划编码：{{ plan.taskCode ?? '-' }}</div>
             <div>计划数量：{{ plan.planNumber ?? '-' }}</div>
@@ -87,6 +105,19 @@ import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
 
 defineOptions({ name: 'ScheduleGanttPanel' })
 
+// 计划状态颜色映射表
+const PLAN_STATUS_COLOR_MAP = {
+  1: { label: '已排产', color: '#409eff', textColor: '#ffffff', sort: 1 },
+  8: { label: '已开工', color: '#67c23a', textColor: '#ffffff', sort: 2 },
+  3: { label: '暂停', color: '#e6a23c', textColor: '#ffffff', sort: 3 },
+  4: { label: '待入库', color: '#f56c6c', textColor: '#ffffff', sort: 4 },
+  5: { label: '已入库', color: '#8e7cc3', textColor: '#ffffff', sort: 5 },
+}
+
+const sortedPlanStatusList = Object.entries(PLAN_STATUS_COLOR_MAP)
+  .map(([key, val]) => ({ key: Number(key), ...val }))
+  .sort((a, b) => a.sort - b.sort)
+
 const props = withDefaults(
   defineProps<{
     scheduleList: any[]
@@ -726,7 +757,30 @@ const initGanttPreview = () => {
   gantt.templates.tooltip_text = (start, end, task: any) => buildTaskTooltipHtml(task, start, end)
   gantt.templates.task_class = (_start, _end, task: any) => {
     if (!task?._planData) return ''
-    return String(task?._planData?.sourceType ?? '').toUpperCase() === 'HISTORY' ? 'schedule-plan-task-history' : 'schedule-plan-task'
+    
+    // 当 editable 为 false 时，根据 planStatus 显示对应的颜色
+    if (!props.editable) {
+      const planStatus = task._planData?.planStatus
+      const statusMap: Record<number | string, string> = {
+        '1': 'schedule-plan-task-status-1',
+        1: 'schedule-plan-task-status-1',
+        '8': 'schedule-plan-task-status-8',
+        8: 'schedule-plan-task-status-8',
+        '3': 'schedule-plan-task-status-3',
+        3: 'schedule-plan-task-status-3',
+        '4': 'schedule-plan-task-status-4',
+        4: 'schedule-plan-task-status-4',
+        '5': 'schedule-plan-task-status-5',
+        5: 'schedule-plan-task-status-5',
+        '2': 'schedule-plan-task-status-2',
+        2: 'schedule-plan-task-status-2'
+      }
+      return statusMap[planStatus] || 'schedule-plan-task-default'
+    }
+    
+    // 当 editable 为 true 时，使用原来的逻辑
+    const sourceType = String(task?._planData?.sourceType ?? '').toUpperCase()
+    return sourceType === 'HISTORY' ? 'schedule-plan-task-history' : 'schedule-plan-task'
   }
 
   const globalRange = getGlobalDateRange(previewScheduleList.value)
@@ -737,6 +791,12 @@ const initGanttPreview = () => {
 
   const ganttData = buildPreviewGanttData(previewScheduleList.value)
   gantt.parse(ganttData)
+  
+  // 强制刷新所有任务的样式，确保颜色正确应用
+  gantt.eachTask((task: any) => {
+    gantt.refreshTask(task.id)
+  })
+  
   initTaskTooltips()
 
   if (ganttData.data.length) {
@@ -946,6 +1006,39 @@ onBeforeUnmount(() => {
   font-weight: 600;
 }
 
+.schedule-status-legend {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+  padding: 8px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-left: 3px solid;
+  font-size: 12px;
+}
+
+.legend-color {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.legend-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .schedule-plan-list-title {
   margin-top: 14px;
   margin-bottom: 10px;
@@ -979,6 +1072,17 @@ onBeforeUnmount(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.plan-status-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: 12px;
+  color: #ffffff;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
 .schedule-plan-item-active {
   border: 1px solid var(--el-color-success-light-5);
   background: var(--el-color-success-light-9);
@@ -1016,6 +1120,76 @@ onBeforeUnmount(() => {
   color: #ffffff;
 }
 
+/* 已排产状态 - 蓝色 */
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-1) {
+  background: #409eff !important;
+  border-color: #409eff !important;
+}
+
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-1 .gantt_task_content) {
+  color: #ffffff !important;
+}
+
+/* 已开工状态 - 绿色 */
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-8) {
+  background: #67c23a !important;
+  border-color: #67c23a !important;
+}
+
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-8 .gantt_task_content) {
+  color: #ffffff !important;
+}
+
+/* 暂停状态 - 橙色 */
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-3) {
+  background: #e6a23c !important;
+  border-color: #e6a23c !important;
+}
+
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-3 .gantt_task_content) {
+  color: #ffffff !important;
+}
+
+/* 待入库状态 - 红色 */
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-4) {
+  background: #f56c6c !important;
+  border-color: #f56c6c !important;
+}
+
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-4 .gantt_task_content) {
+  color: #ffffff !important;
+}
+
+/* 已入库状态 - 紫色 */
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-5) {
+  background: #8e7cc3 !important;
+  border-color: #8e7cc3 !important;
+}
+
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-5 .gantt_task_content) {
+  color: #ffffff !important;
+}
+
+/* 其他状态 - 深灰 */
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-2) {
+  background: #606266 !important;
+  border-color: #606266 !important;
+}
+
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-2 .gantt_task_content) {
+  color: #ffffff !important;
+}
+
+/* 默认状态 */
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-default) {
+  background: #909399;
+  border-color: #909399;
+}
+
+.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-default .gantt_task_content) {
+  color: #ffffff;
+}
+
 .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history) {
   background: #909399;
   border-color: #909399;