|
|
|
|
@ -29,7 +29,15 @@ |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="4"> |
|
|
|
|
<el-form-item label="工序:"> |
|
|
|
|
<el-input v-model="formLabelAlign.processName" placeholder="请输入"></el-input> |
|
|
|
|
<!-- <el-input v-model="formLabelAlign.processName" placeholder="请输入"></el-input> --> |
|
|
|
|
<el-select v-model="formLabelAlign.processName" filterable placeholder="请选择"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in selectProcessOptions" |
|
|
|
|
:label="item.name" |
|
|
|
|
:value="item.id" |
|
|
|
|
:key="index" |
|
|
|
|
></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="4"> |
|
|
|
|
@ -75,10 +83,11 @@ |
|
|
|
|
<!-- 左侧信息列表 - 展示车间订单号等信息 --> |
|
|
|
|
<div class="info-list"> |
|
|
|
|
<div class="info-item-title"> |
|
|
|
|
<div class="info-title-cell">车间订单号</div> |
|
|
|
|
<div class="info-title-cell">零件号</div> |
|
|
|
|
<div class="info-title-cell info-title-no">车间订单号</div> |
|
|
|
|
<div class="info-title-cell info-title-no">零件号</div> |
|
|
|
|
<div class="info-title-cell">批次号</div> |
|
|
|
|
<div class="info-title-cell">数量</div> |
|
|
|
|
<div class="info-title-cell info-title-num">数量</div> |
|
|
|
|
<div class="info-title-cell">质量等级</div> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-for="(order, index) in currentPageOrders" |
|
|
|
|
@ -86,14 +95,15 @@ |
|
|
|
|
:style="{ |
|
|
|
|
height: getRowHeight(order.woCode) + 'px', |
|
|
|
|
borderBottom: '1px solid #ccc', |
|
|
|
|
lineHeight:getRowHeight(order.woCode) + 'px', |
|
|
|
|
lineHeight: getRowHeight(order.woCode) + 'px', |
|
|
|
|
}" |
|
|
|
|
> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<div class="info-cell">{{ order.woCode }}</div> |
|
|
|
|
<div class="info-cell">{{ order.partCode }}</div> |
|
|
|
|
<div class="info-cell info-title-no">{{ order.woCode }}</div> |
|
|
|
|
<div class="info-cell info-title-no">{{ order.partCode }}</div> |
|
|
|
|
<div class="info-cell">{{ order.batchNo }}</div> |
|
|
|
|
<div class="info-cell">{{ order.makeQty }}</div> |
|
|
|
|
<div class="info-cell info-title-num">{{ order.makeQty }}</div> |
|
|
|
|
<div class="info-cell">{{ order.productIdent }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -201,7 +211,6 @@ |
|
|
|
|
@size-change="handleSizeChange" |
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
:current-page="currentPage" |
|
|
|
|
|
|
|
|
|
:page-size="pageSize" |
|
|
|
|
layout="total, prev, pager, next, jumper" |
|
|
|
|
:total="totalOrders" |
|
|
|
|
@ -256,7 +265,7 @@ |
|
|
|
|
<span class="label">计划完成时间：</span> |
|
|
|
|
<span class="value">{{ tooltipData.planEndTime || '-' }}</span> |
|
|
|
|
</li> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<span class="label">实际完成时间：</span> |
|
|
|
|
<span class="value">{{ tooltipData.factEndTime || '-' }}</span> |
|
|
|
|
</li> |
|
|
|
|
@ -280,8 +289,12 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { getData, selectEquip, selectTeam } from '@/api/productionSchedulingPlan/scheduling'; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
getData, |
|
|
|
|
selectEquip, |
|
|
|
|
selectTeam, |
|
|
|
|
} from '@/api/productionSchedulingPlan/scheduling'; |
|
|
|
|
import { getProcessSet } from '@/api/productionSchedulingPlan/basic'; |
|
|
|
|
export default { |
|
|
|
|
name: 'GanttChart', |
|
|
|
|
data() { |
|
|
|
|
@ -318,6 +331,7 @@ export default { |
|
|
|
|
rowHeights: {}, |
|
|
|
|
selectTeamOptions: [], |
|
|
|
|
selectEquipOptions: [], |
|
|
|
|
selectProcessOptions: [], |
|
|
|
|
|
|
|
|
|
// 当前时间位置 |
|
|
|
|
currentTimePosition: 0, |
|
|
|
|
@ -343,6 +357,7 @@ export default { |
|
|
|
|
this.formLabelAlign.startTime = new Date().toISOString().substr(0, 10); |
|
|
|
|
this.getSelectTeam(); |
|
|
|
|
this.getSelectEquip(); |
|
|
|
|
this.getProcessSet(); |
|
|
|
|
this.getData(); |
|
|
|
|
this.calcCurrentTimePosition(); |
|
|
|
|
// 定时更新当前时间线位置 |
|
|
|
|
@ -405,6 +420,11 @@ export default { |
|
|
|
|
this.selectTeamOptions = res.data.data; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
getProcessSet() { |
|
|
|
|
getProcessSet().then(res => { |
|
|
|
|
this.selectProcessOptions = res.data.data; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 数据处理 |
|
|
|
|
processData(rawData) { |
|
|
|
|
@ -579,12 +599,12 @@ export default { |
|
|
|
|
const totalSpacing = totalLayers * 4; |
|
|
|
|
const availableHeight = rowHeight - totalSpacing; |
|
|
|
|
const layerHeight = availableHeight / totalLayers; |
|
|
|
|
return layerIndex * (layerHeight + 4) + 2; |
|
|
|
|
return layerIndex * (layerHeight + 18) + 2; |
|
|
|
|
}, |
|
|
|
|
getLayerTaskHeight(totalLayers, device) { |
|
|
|
|
const rowHeight = this.getRowHeight(device); |
|
|
|
|
if (totalLayers <= 1) { |
|
|
|
|
return rowHeight - 4; |
|
|
|
|
return rowHeight - 18; |
|
|
|
|
} else { |
|
|
|
|
const totalSpacing = totalLayers * 4; |
|
|
|
|
const availableHeight = rowHeight - totalSpacing; |
|
|
|
|
@ -688,7 +708,7 @@ export default { |
|
|
|
|
|
|
|
|
|
/* 左侧信息列表样式 */ |
|
|
|
|
.info-list { |
|
|
|
|
width: 400px; |
|
|
|
|
width: 450px; |
|
|
|
|
background-color: #f8f9fa; |
|
|
|
|
border-right: 1px solid #eee; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
@ -707,6 +727,15 @@ export default { |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 36px; |
|
|
|
|
border-right: 1px solid #eee; |
|
|
|
|
font-size:14px; |
|
|
|
|
} |
|
|
|
|
.info-title-num { |
|
|
|
|
width: 50px; |
|
|
|
|
flex: none !important; |
|
|
|
|
} |
|
|
|
|
.info-title-no { |
|
|
|
|
width: 125px; |
|
|
|
|
flex: none !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info-item { |
|
|
|
|
@ -723,7 +752,7 @@ export default { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
font-size:13px; |
|
|
|
|
font-size: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.timeline-container { |
|
|
|
|
@ -832,8 +861,8 @@ export default { |
|
|
|
|
/* background-color: #ff4d4f; */ |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
z-index: 10; |
|
|
|
|
height:100vh; |
|
|
|
|
border-left:1px dashed #ccc |
|
|
|
|
height: 100vh; |
|
|
|
|
border-left: 1px dashed #ccc; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 图表内容区域 */ |
|
|
|
|
@ -841,6 +870,7 @@ export default { |
|
|
|
|
flex: 1; |
|
|
|
|
position: relative; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
overflow-x: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.grid-lines { |
|
|
|
|
@ -864,6 +894,8 @@ export default { |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
/* overflow:hidden; */ |
|
|
|
|
overflow-x: hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.device-task-row { |
|
|
|
|
@ -893,7 +925,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.task-label { |
|
|
|
|
font-size: 13px; |
|
|
|
|
font-size: 10px; |
|
|
|
|
color: white; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow: hidden; |
|
|
|
|
@ -951,12 +983,12 @@ export default { |
|
|
|
|
|
|
|
|
|
/* 分页样式 */ |
|
|
|
|
.pagination-container { |
|
|
|
|
position: fixed; /* 固定定位 */ |
|
|
|
|
right: 20px; /* 距离右侧20px */ |
|
|
|
|
bottom: 20px; /* 距离底部20px */ |
|
|
|
|
position: fixed; /* 固定定位 */ |
|
|
|
|
right: 20px; /* 距离右侧20px */ |
|
|
|
|
bottom: 20px; /* 距离底部20px */ |
|
|
|
|
margin-top: 15px; |
|
|
|
|
background-color: #fff; /* 增加背景色避免与内容重叠时看不清 */ |
|
|
|
|
padding: 10px; /* 增加内边距 */ |
|
|
|
|
background-color: #fff; /* 增加背景色避免与内容重叠时看不清 */ |
|
|
|
|
padding: 10px; /* 增加内边距 */ |
|
|
|
|
z-index: 10; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
