排产看板提交数据

src/views/productionSchedulingPlan/schedulingDashboard/index.vue

@@ -10,7 +10,7 @@
               clearable
               filterable
               placeholder="请选择"
-              size="small"
+              size="medium"
               value-key="id"
               @change="teamChange"
             >
@@ -30,7 +30,7 @@
               clearable
               filterable
               placeholder="请选择"
-              size="small"
+              size="medium"
               value-key="id"
               @change="equipChange"
             >
@@ -50,7 +50,7 @@
               clearable
               filterable
               placeholder="请选择"
-              size="small"
+              size="medium"
               @change="processChange"
               value-key="id"
             >
@@ -59,7 +59,6 @@
                 :label="item.name"
                 :value="item"
                 :key="index"
-                
               ></el-option>
             </el-select>
           </el-form-item>
@@ -71,16 +70,16 @@
               type="date"
               value-format="YYYY-MM-DD"
               placeholder="选择日期"
-              size="small"
+              size="medium"
             ></el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="4">
           <div style="float: right">
-            <el-button type="primary" icon="el-icon-search" @click="handleSubmit" size="small">
+            <el-button type="primary" icon="el-icon-search" @click="handleSubmit" size="medium">
               搜索
             </el-button>
-            <el-button icon="el-icon-delete" @click="handleReset" size="small"> 清空 </el-button>
+            <el-button icon="el-icon-delete" @click="handleReset" size="medium"> 清空 </el-button>
           </div>
         </el-col>
       </el-row>
@@ -91,7 +90,7 @@
       <div class="gantt-header">
         <div class="status-legend">
           <div class="legend-item">
-            <el-button type="primary" size="small" @click="exportXls">导出</el-button>
+            <el-button type="primary" size="medium" @click="exportXls">导出</el-button>
           </div>
           <div class="legend-item">
             <span class="legend-color completed"></span>
@@ -264,7 +263,19 @@
                     @mouseenter="showTooltip($event, task, order.woCode)"
                     @mouseleave="hideTooltip()"
                   >
-                    <span class="task-label">{{ task.processName }}</span>
+                    <div class="task-label">
+                      <span
+                        class="task-label-txt"
+                        :style="{
+                          top: `${getTastTopOffset(
+                            layerIndex,
+                            getLayeredTasks(order.woCode).length,
+                            order.woCode
+                          )}px`,
+                        }"
+                        >{{ task.processName }}</span
+                      >
+                    </div>
                   </div>
                 </template>
               </div>
@@ -358,7 +369,12 @@
 
 <script>
 import { getData, selectEquip, selectTeam } from '@/api/productionSchedulingPlan/scheduling';
-import { getProcessSet, exportBlob,getEquipment,getTeamSet } from '@/api/productionSchedulingPlan/basic';
+import {
+  getProcessSet,
+  exportBlob,
+  getEquipment,
+  getTeamSet,
+} from '@/api/productionSchedulingPlan/basic';
 import { downloadXls } from '@/utils/util';
 // import { exportBlob } from '@/api/common';
 export default {
@@ -460,14 +476,14 @@ export default {
     }, 600000); // 每分钟更新一次
   },
   methods: {
-    processChange(val){
-      this.formLabelAlign.processName = val.name
+    processChange(val) {
+      this.formLabelAlign.processName = val.name;
     },
-    equipChange(val){
-      this.formLabelAlign.equipName = val.deviceName
+    equipChange(val) {
+      this.formLabelAlign.equipName = val.deviceName;
     },
-    teamChange(val){
-      this.formLabelAlign.teamName = val.tsName
+    teamChange(val) {
+      this.formLabelAlign.teamName = val.tsName;
     },
 
     // 导出
@@ -614,11 +630,11 @@ export default {
       this.formLabelAlign = {
         startTime: new Date().toISOString().substr(0, 10),
         teamName: '',
-        teamId:'',
+        teamId: '',
         equipName: '',
-        equipId:'',
+        equipId: '',
         processName: '',
-        processId:'',
+        processId: '',
         woCode: '',
       };
       this.getData();
@@ -649,13 +665,13 @@ export default {
       return (duration / (24 * 60)) * 100;
     },
 
-    // 样式计算
+    // 任务 样式计算
     getStatusColor(row) {
       switch (row.planStatus) {
-        case '3':
         case '5':
           return '#28a745';
         case '2':
+        case '3':
           return '#007bff';
         case '1':
           return '#6c757d';
@@ -667,10 +683,10 @@ export default {
     },
     getStatusTagType(row) {
       switch (row.planStatus) {
-        case '3':
         case '5':
           return 'success';
         case '2':
+        case '3':
           return 'primary';
         case '1':
           return 'info';
@@ -722,37 +738,44 @@ export default {
 
     // 左侧行高计算
     getRowHeight(device) {
-      const layers = this.getLayeredTasks(device);
-      const layerCount = layers.length;
-      const height = Math.max(this.baseRowHeight, layerCount * this.baseRowHeight);
-      this.rowHeights[device] = height;
-      return height;
+      return this.baseRowHeight;
     },
     // 右侧行高计算
     getRowChartHeight(device) {
-      const layers = this.getLayeredTasks(device);
-      const layerCount = layers.length;
-      const height = Math.max(this.baseRowChartHeight, layerCount * this.baseRowChartHeight);
-      this.rowHeights[device] = height;
-      return height;
+      // 固定行高，不随层数变化
+      return this.baseRowChartHeight;
     },
     getLayerOffset(layerIndex, totalLayers, device) {
       const rowHeight = this.getRowChartHeight(device);
       if (totalLayers <= 1) return 2;
 
-      const totalSpacing = totalLayers * 4;
-      const availableHeight = rowHeight - totalSpacing;
+      // 计算总间隔和可用高度
+      const totalSpacing = (totalLayers - 1) * 4; // 层间间隔
+      const availableHeight = rowHeight - 40 - totalSpacing; // 减去上下边距
+      const layerHeight = availableHeight / totalLayers;
+
+      // 计算当前层的偏移量
+      return 20 + layerIndex * (layerHeight + 4); // 20是顶部边距
+    },
+    getTastTopOffset(layerIndex, totalLayers, device) {
+      const rowHeight = this.getRowChartHeight(device);
+      if (totalLayers <= 1) return 8;
+
+      // 计算总间隔和可用高度
+      const totalSpacing = (totalLayers - 1) * 4; // 层间间隔
+      const availableHeight = rowHeight - 40 - totalSpacing; // 减去上下边距
       const layerHeight = availableHeight / totalLayers;
-      return layerIndex * (layerHeight + 18) + 4;
+      // 计算当前层的偏移量
+      return 0; // 20是顶部边距
     },
     getLayerTaskHeight(totalLayers, device) {
       const rowHeight = this.getRowChartHeight(device);
       if (totalLayers <= 1) {
-        return rowHeight - 40;
+        return rowHeight - 40; // 减去上下边距
       } else {
-        const totalSpacing = totalLayers * 18;
-        const availableHeight = rowHeight - 40 - totalSpacing;
-        return availableHeight / totalLayers;
+        const totalSpacing = (totalLayers - 1) * 4;
+        const availableHeight = rowHeight - 30 - totalSpacing;
+        return availableHeight / totalLayers; // 平均分配高度
       }
     },
 
@@ -1124,6 +1147,14 @@ export default {
 }
 
 .task-label {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.task-label-txt {
+  position: absolute;
+  /* top: 8px; */
+  left: -5px;
   font-size: 10px;
   color: white;
   white-space: nowrap;