|
|
|
|
@ -5,7 +5,7 @@ |
|
|
|
|
<el-row> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<el-form-item label="维度:"> |
|
|
|
|
<el-select v-model="formLabelAlign.type" placeholder="请选择"> |
|
|
|
|
<el-select v-model="formLabelAlign.type" placeholder="请选择" @change="typeChange"> |
|
|
|
|
<el-option label="车间订单" value="1"> </el-option> |
|
|
|
|
<el-option label="班组" value="2"> </el-option> |
|
|
|
|
<el-option label="设备" value="3"> </el-option> |
|
|
|
|
@ -19,20 +19,31 @@ |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6" v-if="formLabelAlign.type == '2'"> |
|
|
|
|
<el-form-item label="班组:"> |
|
|
|
|
<el-input v-model="formLabelAlign.teamame" placeholder="请输入"></el-input> |
|
|
|
|
<!-- <el-select v-model="formLabelAlign.teamame" placeholder="请选择"> |
|
|
|
|
<el-option label="班组1" value="1"> </el-option> |
|
|
|
|
<el-option label="班组2" value="2"> </el-option> |
|
|
|
|
</el-select> --> |
|
|
|
|
<!-- <el-input v-model="formLabelAlign.teamame" placeholder="请输入"></el-input> --> |
|
|
|
|
<el-select v-model="formLabelAlign.teamName" filterable placeholder="请选择"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in selectTeamOptions" |
|
|
|
|
:label="item" |
|
|
|
|
:value="item" |
|
|
|
|
:key="index" |
|
|
|
|
> |
|
|
|
|
</el-option> |
|
|
|
|
<!-- <el-option label="班组2" value="2"> </el-option> --> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6" v-if="formLabelAlign.type == '3'"> |
|
|
|
|
<el-form-item label="设备:"> |
|
|
|
|
<el-input v-model="formLabelAlign.equipName" placeholder="请输入"></el-input> |
|
|
|
|
<!-- <el-select v-model="formLabelAlign.equipName" placeholder="请选择"> |
|
|
|
|
<el-option label="设备1" value="1"> </el-option> |
|
|
|
|
<el-option label="设备2" value="2"> </el-option> |
|
|
|
|
</el-select> --> |
|
|
|
|
<!-- <el-input v-model="formLabelAlign.equipName" placeholder="请输入"></el-input> --> |
|
|
|
|
<el-select v-model="formLabelAlign.equipName" filterable placeholder="请选择"> |
|
|
|
|
<el-option |
|
|
|
|
v-for="(item, index) in selectEquipOptions" |
|
|
|
|
:label="item" |
|
|
|
|
:value="item" |
|
|
|
|
:key="index" |
|
|
|
|
> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
@ -252,19 +263,19 @@ |
|
|
|
|
<span class="label">零件号:</span> |
|
|
|
|
<span class="value">{{ tooltipData.partCode || '-' }}</span> |
|
|
|
|
</li> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<span class="label">流程卡号:</span> |
|
|
|
|
<span class="value">{{ tooltipData.cardNo || '-' }}</span> |
|
|
|
|
</li> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<span class="label">批次号:</span> |
|
|
|
|
<span class="value">{{ tooltipData.batchNo || '-' }}</span> |
|
|
|
|
</li> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<span class="label">当前工序:</span> |
|
|
|
|
<span class="value">{{ tooltipData.currentProcessName || '-' }}</span> |
|
|
|
|
</li> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<li class="detail-item"> |
|
|
|
|
<span class="label">数量:</span> |
|
|
|
|
<span class="value">{{ tooltipData.makeQty || '-' }}</span> |
|
|
|
|
</li> |
|
|
|
|
@ -293,7 +304,6 @@ |
|
|
|
|
<i v-if="tooltipData.planStatus == '3'">报工完成</i> |
|
|
|
|
<i v-if="tooltipData.planStatus == '5'">已完成</i> |
|
|
|
|
<i v-if="tooltipData.planStatus == '6'">已返工</i> |
|
|
|
|
|
|
|
|
|
</el-tag> |
|
|
|
|
<el-tag v-if="searchType == '2' || searchType == '3'" :type="tooltipData.status"> |
|
|
|
|
<i v-if="tooltipData.orderStatus == '1'">未开始</i> |
|
|
|
|
@ -311,7 +321,7 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import { getData } from '@/api/productionSchedulingPlan/scheduling'; |
|
|
|
|
import { getData, selectEquip, selectTeam } from '@/api/productionSchedulingPlan/scheduling'; |
|
|
|
|
export default { |
|
|
|
|
name: 'GanttChart', |
|
|
|
|
data() { |
|
|
|
|
@ -341,6 +351,8 @@ export default { |
|
|
|
|
tooltipY: 0, |
|
|
|
|
baseRowHeight: 36, // 基础行高(单任务时的高度) |
|
|
|
|
rowHeights: {}, // 存储每个设备的动态行高 |
|
|
|
|
selectTeamOptions: [], //班组列表 |
|
|
|
|
selectEquipOptions: [], //设备列表 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -366,13 +378,29 @@ export default { |
|
|
|
|
this.searchType = this.formLabelAlign.type; |
|
|
|
|
this.formLabelAlign.startTime = new Date().toISOString().substr(0, 10); |
|
|
|
|
this.getData(); |
|
|
|
|
this.getSelectTeam(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
typeChange(){ |
|
|
|
|
this.formLabelAlign.teamName = '' |
|
|
|
|
this.formLabelAlign.equipName = '' |
|
|
|
|
this.formLabelAlign.woCode = '' |
|
|
|
|
}, |
|
|
|
|
getData() { |
|
|
|
|
getData(this.formLabelAlign).then(res => { |
|
|
|
|
this.processData(res.data.data); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
getSelectEquip() { |
|
|
|
|
selectEquip().then(res => { |
|
|
|
|
this.selectEquipOptions = res.data.data; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
getSelectTeam() { |
|
|
|
|
selectTeam().then(res => { |
|
|
|
|
this.selectTeamOptions = res.data.data; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
processData(rawData) { |
|
|
|
|
const tasks = []; |
|
|
|
|
const workOrders = Object.keys(rawData); |
|
|
|
|
@ -519,40 +547,40 @@ export default { |
|
|
|
|
|
|
|
|
|
// 提示框控制 |
|
|
|
|
showTooltip(e, task, device) { |
|
|
|
|
this.tooltipData = { ...task, device }; |
|
|
|
|
this.tooltipVisible = true; // 先显示tooltip以便获取尺寸 |
|
|
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
const tooltipEl = document.querySelector('.tooltip'); |
|
|
|
|
if (!tooltipEl) return; // 容错处理 |
|
|
|
|
|
|
|
|
|
const tooltipWidth = tooltipEl.offsetWidth; |
|
|
|
|
const tooltipHeight = tooltipEl.offsetHeight; |
|
|
|
|
const padding = 5; // 缩小边距,让tooltip更靠近鼠标 |
|
|
|
|
const mouseOffsetX = 8; // 水平偏移量(原10px改为8px) |
|
|
|
|
const mouseOffsetY = 8; // 垂直偏移量(原10px改为8px) |
|
|
|
|
|
|
|
|
|
// 初始位置(更靠近鼠标) |
|
|
|
|
let x = e.pageX + mouseOffsetX; |
|
|
|
|
let y = e.pageY + mouseOffsetY; |
|
|
|
|
|
|
|
|
|
// 右侧边界检测 |
|
|
|
|
if (x + tooltipWidth > document.documentElement.clientWidth) { |
|
|
|
|
x = e.pageX - tooltipWidth - mouseOffsetX; |
|
|
|
|
} |
|
|
|
|
this.tooltipData = { ...task, device }; |
|
|
|
|
this.tooltipVisible = true; // 先显示tooltip以便获取尺寸 |
|
|
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
const tooltipEl = document.querySelector('.tooltip'); |
|
|
|
|
if (!tooltipEl) return; // 容错处理 |
|
|
|
|
|
|
|
|
|
const tooltipWidth = tooltipEl.offsetWidth; |
|
|
|
|
const tooltipHeight = tooltipEl.offsetHeight; |
|
|
|
|
const padding = 5; // 缩小边距,让tooltip更靠近鼠标 |
|
|
|
|
const mouseOffsetX = 8; // 水平偏移量(原10px改为8px) |
|
|
|
|
const mouseOffsetY = 8; // 垂直偏移量(原10px改为8px) |
|
|
|
|
|
|
|
|
|
// 初始位置(更靠近鼠标) |
|
|
|
|
let x = e.pageX + mouseOffsetX; |
|
|
|
|
let y = e.pageY + mouseOffsetY; |
|
|
|
|
|
|
|
|
|
// 右侧边界检测 |
|
|
|
|
if (x + tooltipWidth > document.documentElement.clientWidth) { |
|
|
|
|
x = e.pageX - tooltipWidth - mouseOffsetX; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 底部边界检测 |
|
|
|
|
if (y + tooltipHeight > document.documentElement.clientHeight) { |
|
|
|
|
y = e.pageY - tooltipHeight - mouseOffsetY; |
|
|
|
|
} |
|
|
|
|
// 底部边界检测 |
|
|
|
|
if (y + tooltipHeight > document.documentElement.clientHeight) { |
|
|
|
|
y = e.pageY - tooltipHeight - mouseOffsetY; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 确保不超出顶部和左侧 |
|
|
|
|
x = Math.max(padding, x); |
|
|
|
|
y = Math.max(padding, y); |
|
|
|
|
// 确保不超出顶部和左侧 |
|
|
|
|
x = Math.max(padding, x); |
|
|
|
|
y = Math.max(padding, y); |
|
|
|
|
|
|
|
|
|
this.tooltipX = x; |
|
|
|
|
this.tooltipY = y; |
|
|
|
|
}); |
|
|
|
|
this.tooltipX = x; |
|
|
|
|
this.tooltipY = y; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
hideTooltip() { |
|
|
|
|
this.tooltipVisible = false; |
|
|
|
|
|