排产看板工序文字展示样式优化

src/views/productionSchedulingPlan/schedulingDashboard/index.vue

@@ -297,7 +297,7 @@
                     :key="taskIndex"
                     class="task-bar"
                     :class="{
-                      'task-bar-narrow': getWidthPercent(task.planStartTime, task.planEndTime) < 6,
+                      'task-bar-narrow': getWidthPercent(task.planStartTime, task.planEndTime) < 1,
                     }"
                     :style="{
                       left: `${getPositionPercent(task.planStartTime)}%`,
@@ -318,17 +318,13 @@
                   >
                     <div class="task-label">
                       <span
-                        v-if="getWidthPercent(task.planStartTime, task.planEndTime) >= 6"
+                        v-if="getWidthPercent(task.planStartTime, task.planEndTime) >= 1"
                         class="task-label-txt task-label-txt-inside"
-                        :style="{
-                          top: '50%',
-                          transform: 'translateY(-50%)',
-                        }"
                         >{{ task.processName }}</span
                       >
                     </div>
                     <div
-                      v-if="getWidthPercent(task.planStartTime, task.planEndTime) < 6"
+                      v-if="getWidthPercent(task.planStartTime, task.planEndTime) < 1"
                       class="task-overlay-text"
                     >
                       {{ task.processName }}
@@ -1376,8 +1372,6 @@ export default {
 .info-item {
   display: flex;
   height: 100%;
-
-  /* padding: 5px; */
 }
 
 .info-cell {
@@ -1531,7 +1525,6 @@ export default {
   top: 0px;
   bottom: 0;
   width: 2px;
-  /* background-color: #ff4d4f; */
   transform: translateX(-50%);
   z-index: 10;
   height: calc(100vh - 130px);
@@ -1544,9 +1537,6 @@ export default {
   position: relative;
   overflow-y: auto;
   overflow-x: auto;
-  /* 预留横向滚动条高度 */
-  /* padding-bottom: 16px;
-  margin-bottom: -16px; */
 }
 
 .grid-lines {
@@ -1570,7 +1560,6 @@ export default {
   position: relative;
   width: 100%;
   min-height: 100%;
-  /* height:500px; */
 
   overflow-x: hidden;
 }
@@ -1612,10 +1601,11 @@ export default {
   width: 100%;
   height: 100%;
   text-align: center;
+   display: inline-block;
+  transform: scale(0.7);
 }
 .task-label-txt {
    position: absolute;
-  /* left: 2px; */
   font-size: 9px;
   color: white;
   white-space: nowrap;
@@ -1623,10 +1613,14 @@ export default {
   text-overflow: ellipsis;
   max-width: 95%;
   text-align: center;
+  /* 正确的居中方式 */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+   
 }
 .task-label-txt-inside {
-  top: 50%;
-  transform: translateY(-50%);
+
 }
 .task-overlay-text {
   position: absolute;
@@ -1697,9 +1691,6 @@ export default {
 
 /* 分页样式 */
 .pagination-container {
-  /* position: fixed; */
-  /* right: 20px; 
-  bottom: 20px;  */
   height: 35px;
   margin-top: 15px;
   background-color: #fff; /* 增加背景色避免与内容重叠时看不清 */
@@ -1707,7 +1698,6 @@ export default {
   z-index: 10;
   float: right;
   width: calc(100% - 20px);
-  /* width:100%; */
 }
 :deep(.el-pagination) {
   float: right;