|
|
|
@ -0,0 +1,359 @@ |
|
|
|
<template> |
|
|
|
<div class="data-v-wrap"> |
|
|
|
<header class="title-wrap"> |
|
|
|
<span class="title-left" />{{ title }}看板<span class="title-right" /> |
|
|
|
</header> |
|
|
|
<div class="content-wrap"> |
|
|
|
<div class="content-title-wrap"> |
|
|
|
<p class="content-title-left"> |
|
|
|
<span class="content-title-img" />班组A |
|
|
|
</p> |
|
|
|
<p class="content-title-right">日期：{{ time }}</p> |
|
|
|
</div> |
|
|
|
<el-table :data="tableData" stripe style="width: 100%"> |
|
|
|
<el-table-column prop="OM_WorkOrder-ArtId"> |
|
|
|
<template slot="header"> |
|
|
|
<p><span class="code-img" />零件号</p> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="OM_WorkOrder-OrderInfo"> |
|
|
|
<template slot="header"> |
|
|
|
<p><span class="desc-img" />描述</p> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="OM_WorkOrder-PlanQty"> |
|
|
|
<template slot="header"> |
|
|
|
<p><span class="plan-img" />计划数量</p> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="OM_WorkOrderQty-ActQty"> |
|
|
|
<template slot="header"> |
|
|
|
<p><span class="complete-img" />完成数量</p> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="OM_WorkOrderStatus-Status"> |
|
|
|
<template slot="header"> |
|
|
|
<p><span class="state-img" />状态</p> |
|
|
|
</template> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span class="status-class" :style="{background:colorValue(scope.row['OM_WorkOrderStatus-Status'])}"/> |
|
|
|
{{colorTextValue(scope.row['OM_WorkOrderStatus-Status'])}} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="OM_WorkOrderStatus-Completion"> |
|
|
|
<template slot="header"> |
|
|
|
<p><span class="completion-img" />完成进度</p> |
|
|
|
</template> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-progress color="#BFD732" :percentage="((100/scope.row['OM_WorkOrderQty-PlanQty'])*100).toFixed(0)" /> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { |
|
|
|
notPlan, |
|
|
|
inProduction, |
|
|
|
hasIssued, |
|
|
|
hasPlan, |
|
|
|
hasComplete, |
|
|
|
hasLock, |
|
|
|
hasCancel, |
|
|
|
hasShipment, |
|
|
|
freeze, |
|
|
|
interrupt, |
|
|
|
} from '@/styles/variables.scss' |
|
|
|
import moment from 'moment' |
|
|
|
import { |
|
|
|
getWorkorder |
|
|
|
} from '../../api/dataL.js' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [], |
|
|
|
titleData:{ |
|
|
|
g:{ |
|
|
|
workLineId:'G-Frame Assy', |
|
|
|
title:'G-Frame 坐盆骨架装配', |
|
|
|
}, |
|
|
|
l:{ |
|
|
|
workLineId:'LaserWelding', |
|
|
|
title:'靠背激光焊接生产线', |
|
|
|
} |
|
|
|
}, |
|
|
|
// 订单状态对应色值 |
|
|
|
orderColors: { |
|
|
|
10: notPlan, |
|
|
|
20: hasPlan, |
|
|
|
24: hasLock, |
|
|
|
26: hasIssued, |
|
|
|
39: interrupt, |
|
|
|
40: inProduction, |
|
|
|
80: hasComplete, |
|
|
|
90: hasShipment, |
|
|
|
95: freeze, |
|
|
|
98: hasCancel, |
|
|
|
}, |
|
|
|
orderColorTexts:{ |
|
|
|
10: '未计划', |
|
|
|
20: '已计划', |
|
|
|
24: '已锁定', |
|
|
|
26: '已下达', |
|
|
|
39: '中断', |
|
|
|
40: '执行中', |
|
|
|
80: '已完成', |
|
|
|
90: '已发运', |
|
|
|
95: '冻结', |
|
|
|
98: '已取消', |
|
|
|
}, |
|
|
|
title:"", |
|
|
|
time:moment().format('YYYY-MM-DD') |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getData(); |
|
|
|
this.title=this.titleData[this.getQueryVariable('type')]?this.titleData[this.getQueryVariable('type')].title:'' |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 根据状态获取色值 |
|
|
|
colorValue(status){ |
|
|
|
return this.orderColors[status]; |
|
|
|
}, |
|
|
|
// 根据状态取中文翻译 |
|
|
|
colorTextValue(status){ |
|
|
|
return this.orderColorTexts[status]; |
|
|
|
}, |
|
|
|
// 获取列表数据 |
|
|
|
getData() { |
|
|
|
const _this = this |
|
|
|
getWorkorder({ |
|
|
|
workLineId:this.titleData[this.getQueryVariable('type')]?this.titleData[this.getQueryVariable('type')].workLineId:'', |
|
|
|
date:moment().format('YYYY-MM-DD') |
|
|
|
}).then(({ |
|
|
|
code, |
|
|
|
data |
|
|
|
}) => { |
|
|
|
if (code === 200 && data.length) { |
|
|
|
_this.tableData = data.map(e=>{ |
|
|
|
e['OM_WorkOrderStatus-Completion']=(e['OM_WorkOrderQty-ActQty']/e['OM_WorkOrder-PlanQty'])*100; |
|
|
|
return e; |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
_this.tableData = []; |
|
|
|
} |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
_this.getData() |
|
|
|
}, 10000) |
|
|
|
}, |
|
|
|
getQueryVariable(type){ |
|
|
|
var query = window.location.search.substring(1); |
|
|
|
var vars = query.split("&"); |
|
|
|
for (var i=0;i<vars.length;i++) { |
|
|
|
var pair = vars[i].split("="); |
|
|
|
if(pair[0] == type){return pair[1];} |
|
|
|
} |
|
|
|
return(false); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.data-v-wrap { |
|
|
|
position: relative; |
|
|
|
min-width: 1920px; |
|
|
|
min-height: 1080px; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 30px; |
|
|
|
padding-top: 88px; |
|
|
|
background: #01082e; |
|
|
|
} |
|
|
|
|
|
|
|
.title-wrap { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 88px; |
|
|
|
font-size: 26px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #d6f6ff; |
|
|
|
line-height: 88px; |
|
|
|
text-align: center; |
|
|
|
text-shadow: 0px 1px 0px rgba(7, 18, 58, 0.24); |
|
|
|
background: url(../../assets/imgs/data-p/title-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.title-left { |
|
|
|
display: inline-block; |
|
|
|
width: 17px; |
|
|
|
height: 15px; |
|
|
|
margin-right: 10px; |
|
|
|
background: url(../../assets/imgs/data-p/right-img.png) no-repeat; |
|
|
|
background-size: 17px 10px; |
|
|
|
} |
|
|
|
.title-right { |
|
|
|
display: inline-block; |
|
|
|
width: 17px; |
|
|
|
height: 15px; |
|
|
|
margin-left: 10px; |
|
|
|
background: url(../../assets/imgs/data-p/left-img.png) no-repeat; |
|
|
|
background-size: 17px 10px; |
|
|
|
} |
|
|
|
/* 内家 */ |
|
|
|
.content-wrap { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 40px; |
|
|
|
padding-top: 90px; |
|
|
|
background: url(../../assets/imgs/data-p/content-bg.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.content-title-wrap { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 70px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.content-title-left { |
|
|
|
float: left; |
|
|
|
width: 40%; |
|
|
|
line-height: 85px; |
|
|
|
text-align: center; |
|
|
|
margin: 0; |
|
|
|
font-size: 24px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #d6f6ff; |
|
|
|
text-shadow: 0px 1px 0px #011a23; |
|
|
|
} |
|
|
|
.content-title-img { |
|
|
|
display: inline-block; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
margin-right: 10px; |
|
|
|
background: url(../../assets/imgs/data-p/team-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.content-title-right { |
|
|
|
float: right; |
|
|
|
width: 41%; |
|
|
|
line-height: 85px; |
|
|
|
text-align: center; |
|
|
|
margin: 0; |
|
|
|
font-size: 24px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #d6f6ff; |
|
|
|
text-shadow: 0px 1px 0px #011a23; |
|
|
|
} |
|
|
|
.el-table { |
|
|
|
background: none; |
|
|
|
} |
|
|
|
/deep/ .el-table .el-table__header-wrapper th { |
|
|
|
background: none; |
|
|
|
} |
|
|
|
/deep/ .el-table tr { |
|
|
|
background: none; |
|
|
|
} |
|
|
|
/deep/ .el-table th.is-leaf { |
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
|
} |
|
|
|
/deep/ .el-table td { |
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
|
} |
|
|
|
/deep/.el-table .cell { |
|
|
|
font-size: 22px; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #d6f6ff; |
|
|
|
} |
|
|
|
/deep/.el-table--group::after, |
|
|
|
.el-table--border::after, |
|
|
|
.el-table::before { |
|
|
|
background: none; |
|
|
|
} |
|
|
|
|
|
|
|
.el-table--enable-row-hover .el-table_body tr:hover > td { |
|
|
|
background: none !important; |
|
|
|
} |
|
|
|
.code-img { |
|
|
|
display: inline-block; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
margin-right: 5px; |
|
|
|
background: url(../../assets/imgs/data-p/code-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.desc-img { |
|
|
|
display: inline-block; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
margin-right: 5px; |
|
|
|
background: url(../../assets/imgs/data-p/desc-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.plan-img { |
|
|
|
display: inline-block; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
margin-right: 5px; |
|
|
|
background: url(../../assets/imgs/data-p/plan-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.complete-img { |
|
|
|
display: inline-block; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
margin-right: 5px; |
|
|
|
background: url(../../assets/imgs/data-p/complete-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.state-img { |
|
|
|
display: inline-block; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
margin-right: 5px; |
|
|
|
background: url(../../assets/imgs/data-p/state-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.completion-img { |
|
|
|
display: inline-block; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
margin-right: 5px; |
|
|
|
background: url(../../assets/imgs/data-p/completion-img.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.status-class{ |
|
|
|
display: inline-block; |
|
|
|
width: 10px; |
|
|
|
height: 10px; |
|
|
|
border-radius: 5px; |
|
|
|
float: left; |
|
|
|
margin-top: 6px; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
/deep/ .el-progress__text{ |
|
|
|
color: #d6f6ff; |
|
|
|
font-size: 22px; |
|
|
|
font-weight: 500; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
} |
|
|
|
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td { |
|
|
|
background: none; |
|
|
|
} |
|
|
|
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td { |
|
|
|
background: rgba(1, 44, 56, 0.7); |
|
|
|
} |
|
|
|
</style> |
