sfms3.0
/
sfms3.0-board
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

看板

master
zhang_li 9 months ago
parent
d31fe083e8
commit
c402497852
3 changed files with 178 additions and 436 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 275
      src/views/board/productShippingBoard.vue
  2. 42
      src/views/board/productionMaterialBoard.vue
  3. 297
      src/views/board/productionPlanBoard.vue

275
src/views/board/productShippingBoard.vue
View File

@ -1,7 +1,7 @@
<!-- 成品发运看板 --> <!-- 成品发运看板 -->
<template> <template>
<div class="box"> <div class="box">
<div class="title">采购到货看版</div> <div class="title">成品发运看板</div>
<div class="table"> <div class="table">
<ul class="time"> <ul class="time">
<li <li
@ -22,7 +22,7 @@
</ul> </ul>
<div class="table-list"> <div class="table-list">
<ul v-for="(item, index) in tableList" :key="index"> <ul v-for="(item, index) in tableList" :key="index">
<li class="first-col">{{ item.dock }}</li> <li class="first-col">{{ item.deliverDock }}</li>
<li <li
v-for="index in 24" v-for="index in 24"
:key="index" :key="index"
@ -45,8 +45,9 @@
</template> </template>
<script> <script>
import { Deliver } from "@/api/board.js";
export default { export default {
name: "ProductShippingBoard", name: "PurchaseArrivalBoard",
data() { data() {
return { return {
// 当前时间 // 当前时间
@ -59,196 +60,35 @@ export default {
color: [ color: [
{ {
status: 1, status: 1,
color: "#529b2f",
},
{
status: 2,
color: "#f46c6c",
},
{
status: 3,
color: "#e6a23d",
},
{
status: 4,
color: "#3275b9", 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, status: 2,
dockCode: "月台1", color: "#e6a23d",
suppier: "供应商1", text: "进行中",
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",
}, },
{ {
dock: "Dock1",
startTime: "2023-12-22 21:10",
endTime: "2023-12-23 1:00",
status: 3, status: 3,
dockCode: "月台1", color: "#529b2f",
suppier: "供应商1", text: "完成",
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",
}, },
{ {
dock: "Dock2",
startTime: "2023-12-22 12:00",
endTime: "2023-12-22 14:50",
status: 5, status: 5,
dockCode: "月台2", color: "#f46c6c",
suppier: "供应商2", text: "延误",
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",
}, },
{ {
dock: "Dock2", status: 4,
startTime: "2023-12-22 19:00", color: "#90939a",
endTime: "2023-12-22 21:00", text: "作废",
status: 2,
dockCode: "月台2",
suppier: "供应商2",
fahuo: "3333",
code: "3333",
liushui: "55555",
chepai: "9999",
jihua: "2023-12-12",
shiji: "2023-12-12",
}, },
], ],
tableData: [],
config: {}, config: {},
}; };
}, },
methods: { 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() { getTimerList() {
// 获取当前时间 // 获取当前时间
@ -274,19 +114,34 @@ export default {
}); });
}, },
// 获取顶部数据 // 获取顶部数据
getTableList() { async getTableList() {
this.tableData.forEach((item, index) => { await Deliver().then((res) => {
item.timeDifference = this.getTimeDifference( this.tableData = res.data;
item.startTime, this.tableData.forEach((item, index) => {
item.endTime 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) { getTimeDifference(time1, time2) {
var date1 = new Date(time1); // var date1 = new Date(time1);
var date2 = new Date(time2); // 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); var seconds = Math.floor(difference / 1000);
@ -297,15 +152,15 @@ export default {
setTableList() { setTableList() {
let tempArr = []; let tempArr = [];
for (let i = 0; i < this.tableData.length; i++) { for (let i = 0; i < this.tableData.length; i++) {
if (tempArr.indexOf(this.tableData[i].dock) === -1) { if (tempArr.indexOf(this.tableData[i].deliverDock) === -1) {
this.tableList.push({ this.tableList.push({
dock: this.tableData[i].dock, deliverDock: this.tableData[i].deliverDock,
jobList: [this.tableData[i]], jobList: [this.tableData[i]],
}); });
tempArr.push(this.tableData[i].dock); tempArr.push(this.tableData[i].deliverDock);
} else { } else {
for (let j = 0; j < this.tableList.length; j++) { for (let j = 0; j < this.tableList.length; j++) {
if (this.tableList[j].dock == this.tableData[i].dock) { if (this.tableList[j].deliverDock == this.tableData[i].deliverDock) {
this.tableList[j].jobList.push(this.tableData[i]); this.tableList[j].jobList.push(this.tableData[i]);
break; break;
} }
@ -317,21 +172,22 @@ export default {
}, },
// 设置滚动列表数据 // 设置滚动列表数据
setScrollTable() { setScrollTable() {
console.log("tableData", this.tableData);
let data2 = []; let data2 = [];
this.tableData.forEach((item) => { this.tableData.forEach((item) => {
let data1 = []; let data1 = [];
data1.push( data1.push(
`<span style="background:${this.forrmerColor( `<span style="background:${this.forrmerColor(
item.status item.status
)};display:block">${item.status}</span>` )};display:block">${this.forrmerText(item.status)}</span>`
); );
data1.push(item.liushui); data1.push(item.number);
data1.push(item.dockCode); data1.push(item.deliverDock);
data1.push(item.suppier); data1.push(item.customerCode);
data1.push(item.fahuo); data1.push(item.customerDeliverNumber);
data1.push(item.chepai); data1.push(item.vehiclePlateNumber);
data1.push(item.jihua); data1.push(item.requestDueTime1);
data1.push(item.shiji); data1.push(item.completeTime1);
data2.push(data1); data2.push(data1);
}); });
this.config = { this.config = {
@ -339,11 +195,11 @@ export default {
"状态", "状态",
"流水号", "流水号",
"月台号", "月台号",
"供应商", "客户",
"发货单", "发货单",
"车牌号", "车牌号",
"计划到货时间", "计划发货时间",
"实际到货时间", "实际发货时间",
], ],
data: data2, data: data2,
index: false, index: false,
@ -365,11 +221,16 @@ export default {
evenRowBGC: "#303133", evenRowBGC: "#303133",
}; };
}, },
// 设置颜色 // 设置状态颜色
forrmerColor(status) { forrmerColor(status) {
let color = this.color.filter((item) => item.status == status)[0].color; let color = this.color.filter((item) => item.status == status)[0].color;
return color; return color;
}, },
// 设置状态文字
forrmerText(status) {
let text = this.color.filter((item) => item.status == status)[0].text;
return text;
},
// 顶部列表画图 // 顶部列表画图
draw() { draw() {
let cells = 60 * 24; let cells = 60 * 24;
@ -383,15 +244,10 @@ export default {
item.element.innerHTML = `${item.jobList item.element.innerHTML = `${item.jobList
.map((cur) => { .map((cur) => {
cur.startPoint = cur.startPoint =
(new Date(cur.startTime).getTime() - (cur.requestTime - new Date(this.startTimePoint).getTime()) /
new Date(this.startTimePoint).getTime()) /
1000 /
60;
cur.width =
(new Date(cur.endTime).getTime() -
new Date(cur.startTime).getTime()) /
1000 / 1000 /
60; 60;
cur.width = (cur.requestDueTime - cur.requestTime) / 1000 / 60;
return `<div style='position:absolute;left:${ return `<div style='position:absolute;left:${
(cur.startPoint * width) / cells (cur.startPoint * width) / cells
}px;top:5px;height:26px;background:${this.forrmerColor( }px;top:5px;height:26px;background:${this.forrmerColor(
@ -499,10 +355,15 @@ export default {
border-right: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.5);
padding: 0px !important; 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 { .dv-scroll-board {
border-top: 1px solid rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 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-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
} }
.dv-scroll-board .header-item { .dv-scroll-board .header-item {
border-right: 1px solid rgba(255, 255, 255, 0.5); border-right: 1px solid rgba(255, 255, 255, 0.5);

42
src/views/board/productionMaterialBoard.vue
View File

@ -22,7 +22,7 @@
</ul> </ul>
<div class="table-list"> <div class="table-list">
<ul v-for="(item, index) in tableList" :key="index"> <ul v-for="(item, index) in tableList" :key="index">
<li class="first-col">{{ item.toDockCode }}</li> <li class="first-col">{{ item.productionLineCode }}</li>
<li <li
v-for="index in 24" v-for="index in 24"
:key="index" :key="index"
@ -45,7 +45,7 @@
</template> </template>
<script> <script>
import { Purchasereceipt } from "@/api/board.js"; import { Issue } from "@/api/board.js";
export default { export default {
name: "PurchaseArrivalBoard", name: "PurchaseArrivalBoard",
data() { data() {
@ -126,7 +126,7 @@ export default {
}, },
// 获取顶部数据 // 获取顶部数据
async getTableList() { async getTableList() {
await Purchasereceipt().then((res) => { await Issue().then((res) => {
this.tableData = res.data; this.tableData = res.data;
this.tableData.forEach((item, index) => { this.tableData.forEach((item, index) => {
if((!item.completeTime&&item.requestDueTime < new Date().getTime()) || item.completeTime > item.requestDueTime){ if((!item.completeTime&&item.requestDueTime < new Date().getTime()) || item.completeTime > item.requestDueTime){
@ -140,6 +140,7 @@ export default {
item.completeTime, item.completeTime,
"{y}-{m}-{d} {h}:{i}:{s}" "{y}-{m}-{d} {h}:{i}:{s}"
); );
item.timeDifference = this.getTimeDifference( item.timeDifference = this.getTimeDifference(
item.requestTime, item.requestTime,
item.requestDueTime item.requestDueTime
@ -163,15 +164,15 @@ export default {
setTableList() { setTableList() {
let tempArr = []; let tempArr = [];
for (let i = 0; i < this.tableData.length; i++) { for (let i = 0; i < this.tableData.length; i++) {
if (tempArr.indexOf(this.tableData[i].toDockCode) === -1) { if (tempArr.indexOf(this.tableData[i].productionLineCode) === -1) {
this.tableList.push({ this.tableList.push({
toDockCode: this.tableData[i].toDockCode, productionLineCode: this.tableData[i].productionLineCode,
jobList: [this.tableData[i]], jobList: [this.tableData[i]],
}); });
tempArr.push(this.tableData[i].toDockCode); tempArr.push(this.tableData[i].productionLineCode);
} else { } else {
for (let j = 0; j < this.tableList.length; j++) { for (let j = 0; j < this.tableList.length; j++) {
if (this.tableList[j].toDockCode == this.tableData[i].toDockCode) { if (this.tableList[j].productionLineCode == this.tableData[i].productionLineCode) {
this.tableList[j].jobList.push(this.tableData[i]); this.tableList[j].jobList.push(this.tableData[i]);
break; break;
} }
@ -193,10 +194,13 @@ export default {
)};display:block">${this.forrmerText(item.status)}</span>` )};display:block">${this.forrmerText(item.status)}</span>`
); );
data1.push(item.number); data1.push(item.number);
data1.push(item.toDockCode); data1.push(item.productionLineCode);
data1.push(item.supplierCode); data1.push(item.workStationCode);
data1.push(item.asnNumber); data1.push(item.requestNumber);
data1.push(item.vehiclePlateNumber); data1.push(item.itemCode);
data1.push(item.qty);
// data1.push(item.completeUserName);
// data1.push(item.requestDueTime1);
data1.push(item.requestDueTime1); data1.push(item.requestDueTime1);
data1.push(item.completeTime1); data1.push(item.completeTime1);
data2.push(data1); data2.push(data1);
@ -205,12 +209,13 @@ export default {
header: [ header: [
"状态", "状态",
"流水号", "流水号",
"月台号", "生产线",
"供应商", "工位",
"发货单", "叫料单",
"车牌号", "物料号",
"计划到货时间", "数量",
"实际到货时间", "要求送达时间",
"实际送达时间",
], ],
data: data2, data: data2,
index: false, index: false,
@ -224,6 +229,9 @@ export default {
"center", "center",
"center", "center",
"center", "center",
"center",
"center",
"center",
], ],
rowNum: 8, rowNum: 8,
headerHeight: 50, headerHeight: 50,

297
src/views/board/productionPlanBoard.vue
View File

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

Write Preview
Loading…
Cancel
Save