排产看板工序名字展示调整

src/views/productionSchedulingPlan/schedulingDashboard/container.vue

@@ -304,7 +304,8 @@
                     :key="taskIndex"
                     class="task-bar"
                     :class="{
-                      'task-bar-narrow': getWidthPercent(task.planStartTime, task.planEndTime) < 2.1,
+                      'task-bar-narrow':
+                        getWidthPercent(task.planStartTime, task.planEndTime) < 2.1,
                     }"
                     :style="{
                       left: `${getPositionPercent(task.planStartTime)}%`,
@@ -323,12 +324,13 @@
                     @mouseenter="showTooltip($event, task, order.woCode)"
                     @mouseleave="hideTooltip()"
                   >
-                  
+                    <div
-                    <div class="task-label"  v-if="getWidthPercent(task.planStartTime, task.planEndTime) >= 1.5">
+                      class="task-label"
-                      <span
+                      v-if="getWidthPercent(task.planStartTime, task.planEndTime) >= 1.5"
-                        class="task-label-txt task-label-txt-inside"
+                    >
-                        >{{ task.processName }}</span
+                      <span class="task-label-txt task-label-txt-inside">{{
-                      >
+                        task.processName
+                      }}</span>
                     </div>
 
                     <!-- 为窄任务添加带偏移的文本显示   task.processName-->
@@ -337,9 +339,13 @@
                       v-else
                       class="task-overlay-text"
                       :style="{
-                        width:`${getWidthPercent(task.planStartTime, task.planEndTime)}%`,
+                        width: `${getWidthPercent(task.planStartTime, task.planEndTime)}%`,
                         top: `${getNarrowTaskOffsetByLayer(layerIndex)}px`,
-                        left: `${getNarrowTaskOffsetByLayerLeft(task.processName,getWidthPercent(task.planStartTime, task.planEndTime),layerIndex)}px`,
+                        left: `${getNarrowTaskOffsetByLayerLeft(
+                          task.processName,
+                          getWidthPercent(task.planStartTime, task.planEndTime),
+                          layerIndex
+                        )}px`,
                       }"
                     >
                       {{ task.processName }}
@@ -450,7 +456,7 @@ export default {
   name: 'GanttChart',
   data() {
     return {
-      valuerrr:'铜合金化学镀镍',//
+      valuerrr: '铜合金化学镀镍', //
       loading: false,
       formLabelAlign: {
         startTime: null, //时间
@@ -775,17 +781,28 @@ export default {
       return offset;
     },
     // 根据层索引确定窄任务文本的垂直偏移
-    getNarrowTaskOffsetByLayerLeft(processName,width,layerIndex) {
+    getNarrowTaskOffsetByLayerLeft(processName, widthPercent, layerIndex) {
       // 偶数层在上方显示（负值），奇数层在下方显示（正值）
-      const offset = null;
+      const textWidth = processName.length * 2;
-
+      const timeLine = this.$refs.timelineContainer.clientWidth;
-      if (processName.length >= 6) {
+      const taskBarWidth = (timeLine * widthPercent) / 100;
-        return -15;
+
-      }
+      if (textWidth > taskBarWidth) {
-      if (processName.length >= 5) {
+         console.log('大于宽度的', textWidth, taskBarWidth,processName);
-        return -17;
+        if (processName <= 4) {
+          return -7; // 文字超出任务条时，向左偏移一半文字宽度
+        } else {
+          return -textWidth*1.5; // 文字超出任务条时，向左偏移一半文字宽度
+        }
+      } else {
+        // console.log('小于宽度的', textWidth, taskBarWidth,processName);
+        if (processName <= 4) {
+          return -7; // 文字超出任务条时，向左偏移一半文字宽度
+        } else {
+          return -textWidth; // 文字超出任务条时，向左偏移一半文字宽度
+        }
       }
-      return -7
+      // return -7; // 默认偏移
     },
     handleParamsChange() {
       // 参数变化时的处理逻辑