|
|
|
@ -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.toDockCode }}</li> |
|
|
|
<li |
|
|
|
v-for="index in 24" |
|
|
|
:key="index" |
|
|
|
@ -45,8 +45,9 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { Purchasereceipt } from "@/api/board.js"; |
|
|
|
export default { |
|
|
|
name: "Index", |
|
|
|
name: "PurchaseArrivalBoard", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// 当前时间 |
|
|
|
@ -59,181 +60,31 @@ 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: {}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -274,19 +125,34 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 获取顶部数据 |
|
|
|
getTableList() { |
|
|
|
this.tableData.forEach((item, index) => { |
|
|
|
item.timeDifference = this.getTimeDifference( |
|
|
|
item.startTime, |
|
|
|
item.endTime |
|
|
|
); |
|
|
|
async getTableList() { |
|
|
|
await Purchasereceipt().then((res) => { |
|
|
|
this.tableData = res.data; |
|
|
|
this.tableData.forEach((item, index) => { |
|
|
|
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.timeDifference = this.getTimeDifference( |
|
|
|
item.requestTime, |
|
|
|
item.requestDueTime |
|
|
|
); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
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 +163,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].toDockCode) === -1) { |
|
|
|
this.tableList.push({ |
|
|
|
dock: this.tableData[i].dock, |
|
|
|
toDockCode: this.tableData[i].toDockCode, |
|
|
|
jobList: [this.tableData[i]], |
|
|
|
}); |
|
|
|
tempArr.push(this.tableData[i].dock); |
|
|
|
tempArr.push(this.tableData[i].toDockCode); |
|
|
|
} else { |
|
|
|
for (let j = 0; j < this.tableList.length; j++) { |
|
|
|
if (this.tableList[j].dock == this.tableData[i].dock) { |
|
|
|
if (this.tableList[j].toDockCode == this.tableData[i].toDockCode) { |
|
|
|
this.tableList[j].jobList.push(this.tableData[i]); |
|
|
|
break; |
|
|
|
} |
|
|
|
@ -317,21 +183,22 @@ 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.toDockCode); |
|
|
|
data1.push(item.supplierCode); |
|
|
|
data1.push(item.asnNumber); |
|
|
|
data1.push(item.vehiclePlateNumber); |
|
|
|
data1.push(item.requestDueTime1); |
|
|
|
data1.push(item.completeTime1); |
|
|
|
data2.push(data1); |
|
|
|
}); |
|
|
|
this.config = { |
|
|
|
@ -365,11 +232,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; |
|
|
|
@ -383,15 +255,10 @@ export default { |
|
|
|
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.requestTime - new Date(this.startTimePoint).getTime()) / |
|
|
|
1000 / |
|
|
|
60; |
|
|
|
cur.width = (cur.requestDueTime - cur.requestTime) / 1000 / 60; |
|
|
|
return `<div style='position:absolute;left:${ |
|
|
|
(cur.startPoint * width) / cells |
|
|
|
}px;top:5px;height:26px;background:${this.forrmerColor( |
|
|
|
@ -429,7 +296,7 @@ export default { |
|
|
|
} |
|
|
|
.table { |
|
|
|
width: 96vw; |
|
|
|
|
|
|
|
|
|
|
|
.time { |
|
|
|
display: flex; |
|
|
|
padding: 0px; |
|
|
|
@ -499,10 +366,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); |
|
|
|
|
