diff --git a/src/views/productionSchedulingPlan/schedulingDashboard/container.vue b/src/views/productionSchedulingPlan/schedulingDashboard/container.vue
index cde572c..824ce13 100644
--- a/src/views/productionSchedulingPlan/schedulingDashboard/container.vue
+++ b/src/views/productionSchedulingPlan/schedulingDashboard/container.vue
@@ -328,6 +328,24 @@
@mouseleave="hideTooltip()"
>
+ {{ task.processName }}
+
+
-
{{ task.processName }}
-
+ -->
@@ -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,
+ };
+ }
+ },
},
};
@@ -2169,4 +2252,7 @@ export default {
text-align: right;
padding-right: 10px;
}
+.task-text-wrapper {
+ pointer-events: none; /* 避免遮挡 hover 事件 */
+}