排产看板页面调整

src/views/productionSchedulingPlan/schedulingDashboard/container.vue

@@ -328,6 +328,24 @@
                     @mouseleave="hideTooltip()"
                   >
                     <div
+                      class="task-text-wrapper"
+                      :class="{
+                        'text-inside': canFitText(
+                          task.processName,
+                          task.planStartTime,
+                          task.planEndTime
+                        ),
+                        'text-outside': !canFitText(
+                          task.processName,
+                          task.planStartTime,
+                          task.planEndTime
+                        ),
+                      }"
+                      :style="getTaskTextStyle(task, layerIndex)"
+                    >
+                      {{ task.processName }}
+                    </div>
+                    <!-- <div
                       class="task-label"
                       v-if="getWidthPercent(task.planStartTime, task.planEndTime) >= 1.5"
                     >
@@ -335,9 +353,6 @@
                         task.processName
                       }}</span>
                     </div>
-
-                    <!-- 为窄任务添加带偏移的文本显示   task.processName-->
-
                     <div
                       v-else
                       class="task-overlay-text"
@@ -352,7 +367,7 @@
                       }"
                     >
                       {{ task.processName }}
-                    </div>
+                    </div> -->
                   </div>
                 </template>
               </div>
@@ -1329,14 +1344,21 @@ export default {
     },
     // 任务 样式计算
     getStatusColor(row) {
+      if (row.planStatus === '1') {
+        if (row.remindStatus === '1') {
+          return '#FFD700'; // 黄色（可自定义）
+        } else if (row.remindStatus === '2') {
+          return '#dc3545'; // 红色（与返工状态一致，或自定义）
+        }
+        // 如果没有 remindStatus，默认保持原灰色
+        return '#6c757d';
+      }
       switch (row.planStatus) {
         case '5':
           return '#007bff';
         case '2':
         case '3':
           return '#28a745';
-        case '1':
-          return '#6c757d';
         case '6':
           return '#dc3545';
         default:
@@ -1494,6 +1516,8 @@ export default {
 
     // 计算任务宽度百分比
     getWidthPercent(startTime, endTime) {
+      let labelsWidth = document.querySelector('.date-label').offsetWidth;
+
       const startHour = this.parseTimeToHours(startTime);
       const endHour = this.parseTimeToHours(endTime);
 
@@ -1572,6 +1596,65 @@ export default {
       const day = String(d.getDate()).padStart(2, '0');
       return `${year}-${month}-${day}`;
     },
+    // 判断文字是否能在任务条内完整显示
+    canFitText(text, startTime, endTime) {
+      if (!text || !startTime || !endTime || !this.$refs.timelineContainer) {
+        return false;
+      }
+      const taskWidthPercent = this.getWidthPercent(startTime, endTime);
+      
+      const containerWidth = this.$refs.timelineContainer.scrollWidth;
+      if (containerWidth <= 0) return false; // 防止除零或无效计算
+      
+
+      const taskPixelWidth = (containerWidth * taskWidthPercent)/100;
+      console.log(taskWidthPercent,taskPixelWidth,'任务宽度百分比和容器宽度');
+      const textWidth = this.getTextWidth(text, 10); // 确保字体大小匹配实际样式
+      return taskPixelWidth >= textWidth + 4; // 4px 是左右 padding 缓冲
+    },
+
+    // 估算文字像素宽度（简单方法）
+    getTextWidth(text, fontSize = 12) {
+      // 创建一个临时 canvas 来测量文字宽度
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      context.font = `${fontSize}px Arial`;
+      const metrics = context.measureText(text);
+      return Math.ceil(metrics.width);
+    },
+    // 根据是否能容纳文字，返回不同的样式
+    getTaskTextStyle(task, layerIndex) {
+      const canFit = this.canFitText(task.processName, task.planStartTime, task.planEndTime);
+
+      if (canFit) {
+        // 文字在内部居中
+        return {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          color: 'white',
+          fontSize: '10px',
+          whiteSpace: 'nowrap',
+          textShadow: '0 0 2px rgba(0,0,0,0.5)',
+        };
+      } else {
+        // 文字在外部：偶数层在上方，奇数层在下方
+        const isEvenLayer = layerIndex % 2 === 0;
+        return {
+          position: 'absolute',
+          top: isEvenLayer ? '-15px' : 'calc(100% )',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          color: '#333',
+          fontSize: '10px',
+          whiteSpace: 'nowrap',
+          padding: '2px 6px',
+          borderRadius: '3px',
+          zIndex: 10,
+        };
+      }
+    },
   },
 };
 </script>
@@ -2169,4 +2252,7 @@ export default {
   text-align: right;
   padding-right: 10px;
 }
+.task-text-wrapper {
+  pointer-events: none; /* 避免遮挡 hover 事件 */
+}
 </style>