|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<!-- 生产计划看板 --> |
|
|
|
<template> |
|
|
|
<div class="box"> |
|
|
|
<div class="title">采购到货看版</div> |
|
|
|
<div class="title">生产计划看板</div> |
|
|
|
<div class="table"> |
|
|
|
<ul class="time"> |
|
|
|
<li |
|
|
|
@ -22,7 +22,7 @@ |
|
|
|
</ul> |
|
|
|
<div class="table-list"> |
|
|
|
<ul v-for="(item, index) in tableList" :key="index"> |
|
|
|
<li class="first-col">{{ item.dock }}</li> |
|
|
|
<li class="first-col">{{ item.productionLine }}</li> |
|
|
|
<li |
|
|
|
v-for="index in 24" |
|
|
|
:key="index" |
|
|
|
@ -45,8 +45,9 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { Production } from "@/api/board.js"; |
|
|
|
export default { |
|
|
|
name: "ProductionPlanBoard", |
|
|
|
name: "PurchaseArrivalBoard", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 当前时间 |
|
|
|
@ -59,196 +60,35 @@ export default { |
|
|
|
color: [ |
|
|
|
{ |
|
|
|
status: 1, |
|
|
|
color: "#529b2f", |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 2, |
|
|
|
color: "#f46c6c", |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 3, |
|
|
|
color: "#e6a23d", |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 4, |
|
|
|
color: "#3275b9", |
|
|
|
text: "待处理", |
|
|
|
}, |
|
|
|
{ |
|
|
|
status: 5, |
|
|
|
color: "#90939a", |
|
|
|
}, |
|
|
|
], |
|
|
|
tableData: [ |
|
|
|
{ |
|
|
|
dock: "Dock1", |
|
|
|
startTime: "2023-12-22 11:30", |
|
|
|
endTime: "2023-12-22 12:00", |
|
|
|
status: 1, |
|
|
|
dockCode: "月台1", |
|
|
|
suppier: "供应商1", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock1", |
|
|
|
startTime: "2023-12-22 13:20", |
|
|
|
endTime: "2023-12-22 15:10", |
|
|
|
status: 2, |
|
|
|
dockCode: "月台1", |
|
|
|
suppier: "供应商1", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock1", |
|
|
|
startTime: "2023-12-22 16:20", |
|
|
|
endTime: "2023-12-22 17:30", |
|
|
|
status: 3, |
|
|
|
dockCode: "月台1", |
|
|
|
suppier: "供应商1", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
color: "#e6a23d", |
|
|
|
text: "进行中", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock1", |
|
|
|
startTime: "2023-12-22 21:10", |
|
|
|
endTime: "2023-12-23 1:00", |
|
|
|
status: 3, |
|
|
|
dockCode: "月台1", |
|
|
|
suppier: "供应商1", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock1", |
|
|
|
startTime: "2023-12-23 2:50", |
|
|
|
endTime: "2023-12-23 4:50", |
|
|
|
status: 4, |
|
|
|
dockCode: "月台1", |
|
|
|
suppier: "供应商1", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock1", |
|
|
|
startTime: "2023-12-23 5:00", |
|
|
|
endTime: "2023-12-23 6:59", |
|
|
|
status: 4, |
|
|
|
dockCode: "月台1", |
|
|
|
suppier: "供应商1", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock1", |
|
|
|
startTime: "2023-12-23 8:20", |
|
|
|
endTime: "2023-12-23 10:50", |
|
|
|
status: 4, |
|
|
|
dockCode: "月台1", |
|
|
|
suppier: "供应商1", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock2", |
|
|
|
startTime: "2023-12-22 10:20", |
|
|
|
endTime: "2023-12-22 10:50", |
|
|
|
status: 4, |
|
|
|
dockCode: "月台2", |
|
|
|
suppier: "供应商2", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
color: "#529b2f", |
|
|
|
text: "完成", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock2", |
|
|
|
startTime: "2023-12-22 12:00", |
|
|
|
endTime: "2023-12-22 14:50", |
|
|
|
status: 5, |
|
|
|
dockCode: "月台2", |
|
|
|
suppier: "供应商2", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock2", |
|
|
|
startTime: "2023-12-22 16:00", |
|
|
|
endTime: "2023-12-22 17:50", |
|
|
|
status: 1, |
|
|
|
dockCode: "月台2", |
|
|
|
suppier: "供应商2", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
color: "#f46c6c", |
|
|
|
text: "延误", |
|
|
|
}, |
|
|
|
{ |
|
|
|
dock: "Dock2", |
|
|
|
startTime: "2023-12-22 19:00", |
|
|
|
endTime: "2023-12-22 21:00", |
|
|
|
status: 2, |
|
|
|
dockCode: "月台2", |
|
|
|
suppier: "供应商2", |
|
|
|
fahuo: "3333", |
|
|
|
code: "3333", |
|
|
|
liushui: "55555", |
|
|
|
chepai: "9999", |
|
|
|
jihua: "2023-12-12", |
|
|
|
shiji: "2023-12-12", |
|
|
|
status: 4, |
|
|
|
color: "#90939a", |
|
|
|
text: "作废", |
|
|
|
}, |
|
|
|
], |
|
|
|
tableData: [], |
|
|
|
config: {}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//获取当前时间 |
|
|
|
// getFamtterTimer() { |
|
|
|
// //传入时间 |
|
|
|
// let date = new Date(), |
|
|
|
// Y = date.getFullYear(), // 年 |
|
|
|
// M = date.getMonth() + 1, //月 |
|
|
|
// D = date.getDate(), //日 |
|
|
|
// h = date.getHours(); //小时 |
|
|
|
// this.currentTime = h + ":00"; |
|
|
|
// // console.log(this.currentTime); |
|
|
|
// }, |
|
|
|
// 获取顶部时间列表 |
|
|
|
getTimerList() { |
|
|
|
// 获取当前时间 |
|
|
|
@ -274,19 +114,43 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 获取顶部数据 |
|
|
|
getTableList() { |
|
|
|
this.tableData.forEach((item, index) => { |
|
|
|
item.timeDifference = this.getTimeDifference( |
|
|
|
item.startTime, |
|
|
|
item.endTime |
|
|
|
); |
|
|
|
async getTableList() { |
|
|
|
await Production().then((res) => { |
|
|
|
this.tableData = res.data; |
|
|
|
this.tableData.forEach((item, index) => { |
|
|
|
if( item.status == 2 || item.status == 3 || item.status == 4){ |
|
|
|
item.status = 2 |
|
|
|
}else if( item.status == 7 || item.status == 6){ |
|
|
|
item.status = 3 |
|
|
|
}else if( item.status == 5 ){ |
|
|
|
item.status = 4 |
|
|
|
} |
|
|
|
if((!item.completeTime&&item.requestDueTime < new Date().getTime()) || item.completeTime > item.requestDueTime){ |
|
|
|
item.status = 5 |
|
|
|
} |
|
|
|
item.requestDueTime1 = this.parseTime( |
|
|
|
item.requestDueTime, |
|
|
|
"{y}-{m}-{d} {h}:{i}:{s}" |
|
|
|
); |
|
|
|
item.completeTime1 = this.parseTime( |
|
|
|
item.completeTime, |
|
|
|
"{y}-{m}-{d} {h}:{i}:{s}" |
|
|
|
); |
|
|
|
item.goodQtyB = (item.goodQty / item.planQty).toFixed(2) * 100; |
|
|
|
item.notGoodQtyB = (item.notGoodQty / item.planQty).toFixed(2) * 100; |
|
|
|
item.timeDifference = this.getTimeDifference( |
|
|
|
item.beginTime, |
|
|
|
item.endTime |
|
|
|
); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
getTimeDifference(time1, time2) { |
|
|
|
var date1 = new Date(time1); |
|
|
|
var date2 = new Date(time2); |
|
|
|
// var date1 = new Date(time1); |
|
|
|
// var date2 = new Date(time2); |
|
|
|
|
|
|
|
var difference = date2.getTime() - date1.getTime(); // 比较两个日期对象的毫秒数差值 |
|
|
|
// var difference = date2.getTime() - date1.getTime(); // 比较两个日期对象的毫秒数差值 |
|
|
|
var difference = time2 - time1; // 比较两个日期对象的毫秒数差值 |
|
|
|
|
|
|
|
// 计算差值的具体时间单位 |
|
|
|
var seconds = Math.floor(difference / 1000); |
|
|
|
@ -297,15 +161,15 @@ export default { |
|
|
|
setTableList() { |
|
|
|
let tempArr = []; |
|
|
|
for (let i = 0; i < this.tableData.length; i++) { |
|
|
|
if (tempArr.indexOf(this.tableData[i].dock) === -1) { |
|
|
|
if (tempArr.indexOf(this.tableData[i].productionLine) === -1) { |
|
|
|
this.tableList.push({ |
|
|
|
dock: this.tableData[i].dock, |
|
|
|
productionLine: this.tableData[i].productionLine, |
|
|
|
jobList: [this.tableData[i]], |
|
|
|
}); |
|
|
|
tempArr.push(this.tableData[i].dock); |
|
|
|
tempArr.push(this.tableData[i].productionLine); |
|
|
|
} else { |
|
|
|
for (let j = 0; j < this.tableList.length; j++) { |
|
|
|
if (this.tableList[j].dock == this.tableData[i].dock) { |
|
|
|
if (this.tableList[j].productionLine == this.tableData[i].productionLine) { |
|
|
|
this.tableList[j].jobList.push(this.tableData[i]); |
|
|
|
break; |
|
|
|
} |
|
|
|
@ -317,33 +181,36 @@ export default { |
|
|
|
}, |
|
|
|
// 设置滚动列表数据 |
|
|
|
setScrollTable() { |
|
|
|
console.log("tableData", this.tableData); |
|
|
|
let data2 = []; |
|
|
|
this.tableData.forEach((item) => { |
|
|
|
let data1 = []; |
|
|
|
data1.push( |
|
|
|
`<span style="background:${this.forrmerColor( |
|
|
|
item.status |
|
|
|
)};display:block">${item.status}</span>` |
|
|
|
)};display:block">${this.forrmerText(item.status)}</span>` |
|
|
|
); |
|
|
|
data1.push(item.liushui); |
|
|
|
data1.push(item.dockCode); |
|
|
|
data1.push(item.suppier); |
|
|
|
data1.push(item.fahuo); |
|
|
|
data1.push(item.chepai); |
|
|
|
data1.push(item.jihua); |
|
|
|
data1.push(item.shiji); |
|
|
|
data1.push(item.number); |
|
|
|
data1.push(item.productionLine); |
|
|
|
data1.push(item.itemCode); |
|
|
|
data1.push(item.planQty); |
|
|
|
data1.push(item.goodQty); |
|
|
|
data1.push(item.goodQtyB+'%'); |
|
|
|
data1.push(item.notGoodQty); |
|
|
|
data1.push(item.notGoodQtyB+'%'); |
|
|
|
data2.push(data1); |
|
|
|
}); |
|
|
|
this.config = { |
|
|
|
header: [ |
|
|
|
"状态", |
|
|
|
"流水号", |
|
|
|
"月台号", |
|
|
|
"供应商", |
|
|
|
"发货单", |
|
|
|
"车牌号", |
|
|
|
"计划到货时间", |
|
|
|
"实际到货时间", |
|
|
|
"生产线", |
|
|
|
"产品号", |
|
|
|
"计划数量", |
|
|
|
"完成数量", |
|
|
|
"完成百分比", |
|
|
|
"报废数量", |
|
|
|
"报废百分比", |
|
|
|
], |
|
|
|
data: data2, |
|
|
|
index: false, |
|
|
|
@ -357,6 +224,8 @@ export default { |
|
|
|
"center", |
|
|
|
"center", |
|
|
|
"center", |
|
|
|
"center", |
|
|
|
"center", |
|
|
|
], |
|
|
|
rowNum: 8, |
|
|
|
headerHeight: 50, |
|
|
|
@ -365,11 +234,16 @@ export default { |
|
|
|
evenRowBGC: "#303133", |
|
|
|
}; |
|
|
|
}, |
|
|
|
// 设置颜色 |
|
|
|
// 设置状态颜色 |
|
|
|
forrmerColor(status) { |
|
|
|
let color = this.color.filter((item) => item.status == status)[0].color; |
|
|
|
return color; |
|
|
|
}, |
|
|
|
// 设置状态文字 |
|
|
|
forrmerText(status) { |
|
|
|
let text = this.color.filter((item) => item.status == status)[0].text; |
|
|
|
return text; |
|
|
|
}, |
|
|
|
// 顶部列表画图 |
|
|
|
draw() { |
|
|
|
let cells = 60 * 24; |
|
|
|
@ -377,21 +251,15 @@ export default { |
|
|
|
let width = document.getElementById("topBox0").offsetWidth; |
|
|
|
console.log(width); |
|
|
|
this.tableList.forEach((item, index) => { |
|
|
|
console.log(document.getElementById("topBox" + index)); |
|
|
|
item.element = document.getElementById("topBox" + index); |
|
|
|
|
|
|
|
item.element.innerHTML = `${item.jobList |
|
|
|
.map((cur) => { |
|
|
|
cur.startPoint = |
|
|
|
(new Date(cur.startTime).getTime() - |
|
|
|
new Date(this.startTimePoint).getTime()) / |
|
|
|
1000 / |
|
|
|
60; |
|
|
|
cur.width = |
|
|
|
(new Date(cur.endTime).getTime() - |
|
|
|
new Date(cur.startTime).getTime()) / |
|
|
|
(cur.beginTime - new Date(this.startTimePoint).getTime()) / |
|
|
|
1000 / |
|
|
|
60; |
|
|
|
cur.width = (cur.endTime - cur.beginTime) / 1000 / 60; |
|
|
|
return `<div style='position:absolute;left:${ |
|
|
|
(cur.startPoint * width) / cells |
|
|
|
}px;top:5px;height:26px;background:${this.forrmerColor( |
|
|
|
@ -429,7 +297,7 @@ export default { |
|
|
|
} |
|
|
|
.table { |
|
|
|
width: 96vw; |
|
|
|
|
|
|
|
|
|
|
|
.time { |
|
|
|
display: flex; |
|
|
|
padding: 0px; |
|
|
|
@ -499,10 +367,15 @@ export default { |
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.5); |
|
|
|
padding: 0px !important; |
|
|
|
} |
|
|
|
.dv-scroll-board .rows .row-item .ceil:last-of-type(1) { |
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0) !important; |
|
|
|
padding: 0px !important; |
|
|
|
} |
|
|
|
.dv-scroll-board { |
|
|
|
border-top: 1px solid rgba(255, 255, 255, 0.5); |
|
|
|
border-left: 1px solid rgba(255, 255, 255, 0.5); |
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.5); |
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.5); |
|
|
|
} |
|
|
|
.dv-scroll-board .header-item { |
|
|
|
border-right: 1px solid rgba(255, 255, 255, 0.5); |
|
|
|
|
