<template>
|
<div>
|
<el-alert
|
v-if="!operationTasks || operationTasks.length == 0"
|
title="还没有工单下发到此机台！"
|
type="warning"
|
effect="dark"
|
>
|
</el-alert>
|
<el-card
|
v-for="(item, index) in operationTasks"
|
@click.native="setCheckFlag(item)"
|
shadow="hover"
|
:class="[
|
'task-item',
|
item.checkFlag ? 'card-checked-bgcolor' : 'card-bgcolor'
|
]"
|
>
|
<div class="title">
|
<div class="part-info">
|
<label class="name">{{ item.partName }}</label>
|
<label class="no">{{ item.partNo }}</label>
|
</div>
|
<div class="priority" title="优先级" v-if="item.priority">
|
{{ item.priority }}
|
</div>
|
</div>
|
|
<el-progress
|
class="task-progress"
|
:text-inside="true"
|
:stroke-width="15"
|
:format="formatProgress(item)"
|
:percentage="
|
Number((item.completedQuantity / item.plannedQuantity).toFixed(2)) *
|
100
|
"
|
></el-progress>
|
|
<div class="task-bottom">
|
<div title="编号">
|
<el-image
|
src="/img/icon/barcode.png"
|
class="task-bottom-image"
|
></el-image>
|
<label>{{ item.taskNo }}</label>
|
</div>
|
<div title="计划完成时间">
|
<el-image
|
src="/img/icon/clock.png"
|
class="task-bottom-image"
|
></el-image>
|
<label>{{ item.planFinishDay }}</label>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.task-item {
|
cursor: pointer;
|
margin-bottom: 15px;
|
min-height: 150px;
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
|
.el-card__body {
|
min-height: 140px;
|
position: relative;
|
}
|
|
.title {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.priority {
|
font-weight: 700;
|
font-size: 25px;
|
color: #e74c3c;
|
text-align: center;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.part-info {
|
display: flex;
|
flex-direction: column;
|
margin: 6px 0;
|
|
.name {
|
color: #333;
|
font-size: 15px;
|
font-weight: 700;
|
line-height: 20px;
|
}
|
|
.no {
|
font-size: 12px;
|
color: #999;
|
line-height: 20px;
|
}
|
}
|
}
|
|
.card-checked-bgcolor {
|
background-color: #bae7ff;
|
}
|
|
.task-progress {
|
width: 90%;
|
margin: 0 auto;
|
padding-top: 20px;
|
padding-bottom: 30px;
|
}
|
|
.task-progress >>> .el-progress-bar__outer {
|
background-color: #bcbec3;
|
}
|
|
.task-bottom {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
font-size: 12px;
|
padding: 10px 0;
|
margin-top: 4px;
|
color: #666;
|
|
div {
|
display: flex;
|
align-items: center;
|
}
|
|
label {
|
margin-left: 6px;
|
}
|
}
|
|
.task-bottom-image {
|
width: 16px;
|
height: 16px;
|
}
|
</style>
|
<script>
|
import { getOperationTask } from '@/api/product/personboard'
|
import { getOperationTaskById } from '@/api/plan/operationtask'
|
const task_storage_key = 'OPERATION_TASK_ID'
|
export default {
|
props: {
|
workstationId: {
|
type: Number
|
}
|
},
|
data() {
|
return {
|
operationTasks: [],
|
currOperateTask: {
|
id: null,
|
taskNo: null,
|
technologyName: null,
|
technologyRequire: null,
|
partName: null,
|
manufacturingOrder: null,
|
status: null,
|
statusDesc: null,
|
saleOrder: null,
|
custom: null,
|
remark: null,
|
partId: null,
|
partNo: null,
|
unit: null,
|
operationName: null,
|
routingId: null,
|
operationId: null
|
},
|
defaultOperationId: null
|
}
|
},
|
created() {
|
if (!this.defaultOperationId) {
|
const opId = localStorage.getItem(task_storage_key)
|
if (opId) {
|
this.defaultOperationId = parseInt(opId)
|
this.currOperateTask.id = this.defaultOperationId
|
}
|
}
|
this.loadOperateTaskByWorkstation(this.currOperateTask.id)
|
},
|
methods: {
|
// 点击工单，选中工单
|
setCheckFlag(item) {
|
if (item.checkFlag) {
|
item.checkFlag = false
|
} else {
|
item.checkFlag = true
|
}
|
this.changeTask(item)
|
this.currentTaskChange(item)
|
// 点击工单时，触发事件，当前选中工单信息
|
this.$emit('changeCurrOperateTask', this.currOperateTask)
|
},
|
// 修改各工单选中情况
|
changeTask(item) {
|
this.operationTasks.forEach(function(el) {
|
if (item.id != el.id) {
|
el.checkFlag = false
|
}
|
})
|
},
|
// 为当前工单赋值
|
currentTaskChange(val) {
|
if (val.checkFlag) {
|
var operationTask = val
|
this.currOperateTask.id = operationTask.id
|
this.currOperateTask.taskNo = operationTask.taskNo
|
this.currOperateTask.technologyName = operationTask.technologyName
|
this.currOperateTask.technologyRequire = operationTask.technologyRequire
|
this.currOperateTask.partName = operationTask.partName
|
this.currOperateTask.manufacturingOrder =
|
operationTask.manufacturingOrder
|
this.currOperateTask.status = operationTask.status
|
this.currOperateTask.statusDesc = operationTask.statusDesc
|
this.currOperateTask.saleOrder = operationTask.saleOrder
|
this.currOperateTask.custom = operationTask.custom
|
this.currOperateTask.remark = operationTask.remark
|
this.currOperateTask.partNo = operationTask.partNo
|
this.currOperateTask.partId = operationTask.partId
|
this.currOperateTask.unit = operationTask.unit
|
this.currOperateTask.operationName = operationTask.operationName
|
this.currOperateTask.routingId = operationTask.routingId
|
this.currOperateTask.operationId = operationTask.operationId
|
} else {
|
this.initOperateTask()
|
}
|
},
|
// 格式化工单进度内容
|
formatProgress(item) {
|
return () => {
|
return item.completedQuantity + ' / ' + item.plannedQuantity
|
}
|
},
|
// 根据工作站，加载工单信息，选中当前工单
|
loadOperateTaskByWorkstation(taskId) {
|
return new Promise((resolve, reject) => {
|
this.operationTasks = []
|
if (this.workstationId && this.workstationId != null) {
|
var query = { workstationId: this.workstationId }
|
getOperationTask(query)
|
.then((response) => {
|
var data = response.data
|
if (data.code == 0) {
|
var tasks = data.data
|
var operationTask
|
for (var i = 0; i < tasks.length; i++) {
|
operationTask = {}
|
Object.assign(operationTask, tasks[i])
|
operationTask.taskNo = tasks[i].optaskNo
|
if (tasks[i].state == '01pending') {
|
operationTask.cssStyle = 'waitClass'
|
} else if (tasks[i].state == '02inProgress') {
|
operationTask.cssStyle = 'inprogressClass'
|
} else if (tasks[i].state == '03interrupted') {
|
operationTask.cssStyle = 'pauseClass'
|
} else if (tasks[i].state == '04completed') {
|
operationTask.cssStyle = 'completeClass'
|
}
|
operationTask.checkFlag = false
|
operationTask.completedQuantity =
|
tasks[i].completedQuantity == null
|
? 0
|
: tasks[i].completedQuantity
|
operationTask.technologyRequire =
|
tasks[i].technologyRequirement
|
operationTask.status = tasks[i].state
|
operationTask.statusDesc = this.formaterState(tasks[i].state)
|
operationTask.custom = tasks[i].customer
|
operationTask.saleOrder = tasks[i].salesOrder
|
|
this.operationTasks.push(operationTask)
|
}
|
// 选中当前工单
|
if (
|
this.operationTasks.length > 0 &&
|
taskId != null &&
|
taskId
|
) {
|
var isResetCurrOpertionTaskFlag = true
|
for (var k = 0; k < this.operationTasks.length; k++) {
|
if (this.operationTasks[k].id === taskId) {
|
this.setCheckFlag(this.operationTasks[k])
|
isResetCurrOpertionTaskFlag = false
|
break
|
}
|
}
|
// 若当前工单在工单列表未被找到且当前工单状态为已完成时，则将当前工单重置为空并抛出事件，否则不管
|
if (isResetCurrOpertionTaskFlag) {
|
getOperationTaskById(taskId).then((res) => {
|
var resData = res.data
|
if (resData.code === 0) {
|
// 当前工单状态为已完成或不存在
|
if (resData.data.status === '1') {
|
this.initOperateTask()
|
this.$emit(
|
'changeCurrOperateTask',
|
this.currOperateTask
|
)
|
}
|
}
|
})
|
}
|
}
|
|
resolve()
|
} else {
|
this.$message.error('获取工单信息失败')
|
reject()
|
}
|
})
|
.catch((error) => {
|
reject(error)
|
})
|
}
|
})
|
},
|
// 工单状态格式化
|
formaterState(val) {
|
var statusDesc = ''
|
if (val == '01pending') {
|
statusDesc = '等待'
|
} else if (val == '02inProgress') {
|
statusDesc = '进行中'
|
} else if (val == '03interrupted') {
|
statusDesc = '已暂停'
|
} else if (val == '04completed') {
|
statusDesc = '已完成'
|
}
|
return statusDesc
|
},
|
// 初始化页面变量
|
initOperateTask() {
|
this.currOperateTask.id = null
|
this.currOperateTask.taskNo = null
|
this.currOperateTask.technologyName = null
|
this.currOperateTask.technologyRequire = null
|
this.currOperateTask.partName = null
|
this.currOperateTask.manufacturingOrder = null
|
this.currOperateTask.status = null
|
this.currOperateTask.statusDesc = null
|
this.currOperateTask.saleOrder = null
|
this.currOperateTask.custom = null
|
this.currOperateTask.remark = null
|
this.currOperateTask.partNo = null
|
this.currOperateTask.partId = null
|
this.currOperateTask.unit = null
|
this.currOperateTask.operationName = null
|
this.currOperateTask.routingId = null
|
this.currOperateTask.operationId = null
|
}
|
},
|
watch: {
|
workstationId() {
|
if (this.workstationId) {
|
this.loadOperateTaskByWorkstation(this.currOperateTask.id)
|
}
|
},
|
currOperateTask: {
|
handler(newValue, oldValue) {
|
if (newValue.id) {
|
localStorage.setItem(task_storage_key, newValue.id)
|
} else {
|
localStorage.setItem(task_storage_key, null)
|
}
|
},
|
deep: true
|
}
|
}
|
}
|
</script>
|
