<template>
|
<div id="index" ref="appRef">
|
<div class="bg">
|
<div class="myhead"></div>
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
<div v-else class="host-body">
|
|
<div class="react-right" style="margin-left: 1510px">
|
<span class="text" style="width: 400px">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
</div>
|
<div class="body-box">
|
|
<div class="content-box">
|
<div class="boxOrderHeight"
|
style="margin-left: 0px; display: flex; align-items: center; position: relative; width: 100%;">
|
<span style="
|
width: 5px;
|
height: 40px;
|
background-color: #FF4500;
|
display: block;
|
"></span>
|
<span style="
|
padding-left: 15px;
|
font-size: 60px;
|
font-weight: bold;
|
color: #90EE90;
|
">抱纸指引看板</span>
|
//时间
|
<div style="position: absolute; right: 20px;">
|
<p style="
|
display: inline-block;
|
font-size: 35px;
|
font-weight: bold;
|
color: #f7b500;
|
margin: 0;
|
padding: 5px 15px;
|
">{{ currentTime }}</p>
|
</div>
|
</div>
|
<!-- 工单信息模块 -->
|
<dv-border-box-8 :reverse="true"
|
style="width: 100%; height: 950px; margin-top: 5px; margin-left: auto; margin-right: auto;">
|
<dv-scroll-board :config="config" ref="scrollBoard"
|
style="width: 100%; height: 950px; padding: 5px" />
|
</dv-border-box-8>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import drawMixin from "../utils/drawMixin";
|
import { formatTime } from "../utils/index.js";
|
import centerView1 from "./centerView1.vue";
|
import bottomView1 from "./bottomView1.vue";
|
import axios from "@/api/ajax.js";
|
// import{GetDateForLED} from "@/api/http.js"
|
|
export default {
|
mixins: [drawMixin],
|
data() {
|
return {
|
timing: null,
|
timeRequest: null,
|
loading: true,
|
dateDay: null,
|
dateYear: null,
|
dateWeek: null,
|
currentTime: '',
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
config: {
|
header: [
|
'<span style="font-size:35px;">系统顺序</span>',
|
'<span style="font-size:35px;">机位</span>',
|
'<span style="font-size:35px;">用纸顺序</span>',
|
'<span style="font-size:35px;">纸种</span>',
|
'<span style="font-size:35px;">门幅</span>',
|
'<span style="font-size:35px;">纸卷号</span>',
|
'<span style="font-size:35px;">长度(m)</span>',
|
'<span style="font-size:35px;">计划用纸(m)</span>',
|
'<span style="font-size:35px;">存放库区</span>',
|
'<span style="font-size:35px;">配送状态</span>',
|
'<span style="font-size:35px;">备注</span>'
|
],
|
data: [
|
[
|
'<span style="color:#FF4500; font-size:60px;">15</span>',
|
'<span style="color:#FF4500; font-size:60px;">1号</span>',
|
'<span style="color:#FF4500; font-size:60px;">1</span>',
|
'<span style="color:#FF4500; font-size:60px;">W3</span>',
|
'<span style="color:#FF4500; font-size:60px;">2250</span>',
|
'<span style="color:#FF4500; font-size:60px;">705010</span>',
|
'<span style="color:#FF4500; font-size:60px;">4798</span>',
|
'<span style="color:#FF4500; font-size:60px;">180</span>',
|
'<span style="color:#FF4500; font-size:60px;">产前周转区</span>',
|
'<span style="color:#FF4500; font-size:60px;">未配送</span>',
|
'<span style="color:#FF4500; font-size:60px;">已上机未领用/领用不显示</span>'
|
],
|
[
|
'<span style="color:#FF4500; font-size:60px;">15</span>',
|
'<span style="color:#FF4500; font-size:60px;">3号</span>',
|
'<span style="color:#FF4500; font-size:60px;">1</span>',
|
'<span style="color:#FF4500; font-size:60px;">I1</span>',
|
'<span style="color:#FF4500; font-size:60px;">2250</span>',
|
'<span style="color:#FF4500; font-size:60px;">705011</span>',
|
'<span style="color:#FF4500; font-size:60px;">4798</span>',
|
'<span style="color:#FF4500; font-size:60px;">180</span>',
|
'<span style="color:#FF4500; font-size:60px;">产前周转区</span>',
|
'<span style="color:#FF4500; font-size:60px;">已配送</span>',
|
'<span style="color:#FF4500; font-size:60px;">已上机未领用/领用不显示</span>'
|
],
|
],
|
headerHeight: 60,
|
oddRowBGC: "rgba(0, 0, 0, 0.6)",
|
evenRowBGC: "rgba(0, 0, 0, 0.6)",
|
headerBGC: "rgba(0, 0, 0, 0.6)",
|
waitTime: 5000,
|
columnWidth: [100, 100, 100, 100, 100, 200, 150, 150, 150, 150, 250],
|
rowNum: 10,
|
align: ["center", "center", "center", "center", "center", "center", "center", "center", "center", "center", "center"],
|
},
|
IsDetail: true,
|
showMsg:""
|
};
|
},
|
components: {
|
centerView1,
|
bottomView1,
|
},
|
mounted() {
|
this.updateTime(); // 初始化时间
|
this.timing = setInterval(() => {
|
this.updateTime(); // 每秒更新时间
|
}, 1000);
|
this.cancelLoading();
|
this.GetOrderDetail();
|
},
|
beforeDestroy() {
|
clearInterval(this.timing);
|
clearInterval(this.timeRequest);
|
},
|
methods: {
|
// 更新北京时间
|
updateTime() {
|
const now = new Date();
|
const year = now.getFullYear();
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
const day = String(now.getDate()).padStart(2, '0');
|
const hours = String(now.getHours()).padStart(2, '0');
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
const weekday = weekdays[now.getDay()];
|
|
this.currentTime = `${year}-${month}-${day} ${weekday} ${hours}:${minutes}:${seconds}`;
|
},
|
//刷新时间
|
timeFn() {
|
this.timing = setInterval(() => {
|
axios.post("/api/dt_WorkOrder/GetCurrentTime", null, "").then((x) => {
|
if (x.data.status) {
|
var data = x.data.data;
|
this.dateDay = formatTime(data, "HH: mm: ss");
|
this.dateYear = formatTime(data, "yyyy-MM-dd");
|
}
|
});
|
}, 1000);
|
},
|
cancelLoading() {
|
setTimeout(() => {
|
this.loading = false;
|
}, 1000);
|
},
|
GetOrderDetail() {
|
axios.post("/api/OutLineView/GetOutLineView", null, "").then((res) => {
|
if (res.data.status) {
|
if (res.data.data == null) {
|
return;
|
}
|
this.showMsg=res.data.message
|
|
// 1. 按纸卷号分组数据
|
const groupedData = {};
|
res.data.data.forEach((item) => {
|
const palletCode = item.palletCode || '';
|
if (!groupedData[palletCode]) {
|
groupedData[palletCode] = [];
|
}
|
groupedData[palletCode].push(item);
|
});
|
|
// 2. 处理分组后的数据：合并计划用纸
|
var arr = [];
|
Object.keys(groupedData).forEach((palletCode, index) => {
|
const group = groupedData[palletCode];
|
|
// 取第一条数据作为基础数据
|
const firstItem = group[0];
|
|
// 计算计划用纸总和
|
let totalOrderQuantity = 0;
|
group.forEach((item) => {
|
totalOrderQuantity += parseInt(item.orderQuantity) || 0;
|
});
|
|
// 处理其他数值
|
const originalQuantity = parseInt(firstItem.originalQuantity) || 0;
|
const materialWide = parseInt(firstItem.materialWide) || 0;
|
|
// 映射字段到新的表格结构
|
var tableRow = [
|
// 序号（从1开始递增）
|
'<span style="color:#FF4500; font-size:35px;">' + (index + 1) + '</span>',
|
// 机位
|
'<span style="color:#FF4500; font-size:35px;">' + (firstItem.machineName || '') + '</span>',
|
// 顺序
|
//'<span style="color:#FF4500; font-size:35px;">' + (firstItem.paperUseOrder || '') + '</span>',
|
// 纸种
|
'<span style="color:#FF4500; font-size:35px;">' + (firstItem.materielCode || '') + '</span>',
|
// 门幅
|
'<span style="color:#FF4500; font-size:35px;">' + materialWide + '</span>',
|
// 纸卷号
|
'<span style="color:#FF4500; font-size:35px;">' + (firstItem.palletCode || '') + '</span>',
|
// 长度(m)
|
'<span style="color:#FF4500; font-size:35px;">' + originalQuantity + '</span>',
|
// 计划用纸(m) - 合并后的值
|
'<span style="color:#FF4500; font-size:35px;">' + totalOrderQuantity + '</span>',
|
// 存放库区
|
'<span style="color:#FF4500; font-size:35px;">' + ('老厂暂存区') + '</span>',
|
// 配送状态
|
'<span style="color:#FF4500; font-size:35px;">' + ('未配送') + '</span>',
|
];
|
arr.push(tableRow);
|
});
|
|
if (this.IsDetail) {
|
this.config = {
|
header: [
|
'<span style="font-size:30px;">序号</span>',
|
'<span style="font-size:30px;">机位</span>',
|
// '<span style="font-size:30px;">顺序</span>',
|
'<span style="font-size:30px;">纸种</span>',
|
'<span style="font-size:30px;">门幅</span>',
|
'<span style="font-size:30px;">纸卷号</span>',
|
'<span style="font-size:30px;">长度(m)</span>',
|
'<span style="font-size:30px;">计划用纸(m)</span>',
|
'<span style="font-size:30px;">存放库区</span>',
|
'<span style="font-size:30px;">配送状态</span>',
|
],
|
data: arr,
|
headerHeight: 60,
|
oddRowBGC: "rgba(0, 0, 0, 0.6)",
|
evenRowBGC: "rgba(0, 0, 0, 0.6)",
|
headerBGC: "rgba(0, 0, 0, 0.6)",
|
waitTime: 5000,
|
columnWidth: [100, 150, 150, 200, 250, 200, 250, 250, 150, 200],
|
rowNum: 10,
|
align: ["center", "center", "center", "center", "center", "center", "center", "center", "center", "center"],
|
};
|
} else {
|
this.$refs["scrollBoard"].updateRows(arr)
|
}
|
|
if (this.IsDetail) {
|
this.timeRequest = setInterval(() => {
|
this.GetOrderDetail();
|
}, 10000);
|
this.IsDetail = false;
|
}
|
}
|
});
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
@import "../assets/scss/index.scss";
|
</style>
|
|
<style lang="css" scoped>
|
.myhead {
|
position: absolute;
|
width: 100%;
|
height: 100px;
|
/* background-color: red; */
|
top: 0;
|
left: 0;
|
z-index: 999;
|
background-size: cover;
|
background-position: center center;
|
}
|
|
.b-color {
|
width: 1420px;
|
}
|
|
.boxOrderHeight {
|
height: 40px;
|
line-height: 40px;
|
width: 400px;
|
display: flex;
|
}
|
|
.body-box {
|
display: flex;
|
flex-direction: column;
|
gap: 20px;
|
padding: 0 20px;
|
}
|
|
.content-box {
|
width: 100%;
|
}
|
|
.rows {
|
display: flex;
|
background-color: rgb(0, 0, 0);
|
color: #fff;
|
height: 30px;
|
line-height: 30px;
|
font-size: 18px;
|
}
|
|
.cell {
|
width: 160px;
|
border-right: #fff 1px solid;
|
text-align: center;
|
}
|
|
.bodys {
|
display: flex;
|
background-color: rgb(0, 59, 81);
|
color: #fff;
|
height: 32px;
|
line-height: 40px;
|
}
|
</style>
|
