<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;
|
">立库输送轨道原纸信息（共{{showMsg}}卷）</span>
|
//时间
|
<div style="position: absolute; right: 20px;">
|
<p style="
|
display: inline-block;
|
font-size: 50px;
|
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:50px;">纸卷条码</span>',
|
'<span style="font-size:50px;">工单号</span>',
|
'<span style="font-size:50px;">代码</span>',
|
'<span style="font-size:50px;">上机位</span>',
|
'<span style="font-size:50px;">宽幅</span>',
|
'<span style="font-size:50px;">纸卷长</span>',
|
'<span style="font-size:50px;">需用纸长</span>'
|
],
|
data: [
|
[
|
'<span style="color:#FF4500; font-size:60px;">705010</span>',
|
'<span style="color:#FF4500; font-size:60px;">015004</span>',
|
'<span style="color:#FF4500; font-size:60px;">X2</span>',
|
'<span style="color:#FF4500; font-size:60px;">1</span>',
|
'<span style="color:#FF4500; font-size:60px;">1200</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;">705010</span>',
|
'<span style="color:#FF4500; font-size:60px;">015004</span>',
|
'<span style="color:#FF4500; font-size:60px;">X2</span>',
|
'<span style="color:#FF4500; font-size:60px;">2</span>',
|
'<span style="color:#FF4500; font-size:60px;">1200</span>',
|
'<span style="color:#FF4500; font-size:60px;;">4798</span>',
|
'<span style="color:#FF4500; font-size:60px;">180</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: [380, 380, 180, 200, 200, 250, 250],
|
rowNum: 10,
|
align: ["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((x) => {
|
console.log(x);
|
if (x.taskNum) {
|
if (!groupedData[x.palletCode]) {
|
groupedData[x.palletCode] = [];
|
}
|
groupedData[x.palletCode].push(x);
|
}
|
});
|
|
// 2. 处理数据：将每组相同纸卷条码的记录合并为一条
|
var arr = [];
|
Object.keys(groupedData).forEach((palletCode) => {
|
const group = groupedData[palletCode];
|
if (group.length === 0) return;
|
|
// 取第一条记录的基本信息
|
const firstItem = group[0];
|
let totalOrderQuantity = 0;
|
|
// 统计按纸卷条码去重后的合并卷数
|
const uniquePalletCodes = new Set();
|
res.data.data.forEach((item) => {
|
if (item.palletCode) {
|
uniquePalletCodes.add(item.palletCode);
|
}
|
});
|
|
// 直接处理每条记录，不进行分组
|
group.forEach((item) => {
|
totalOrderQuantity += parseFloat(item.orderQuantity) || 0;
|
});
|
|
// 处理上机位：只显示最后一位
|
const machineName = firstItem.machineName;
|
const machineLastChar = machineName ? machineName.slice(-3) : '';
|
|
// 处理数值：去除小数点
|
const materialWide = parseInt(firstItem.materialWide) || 0;
|
const originalQuantity = parseInt(firstItem.originalQuantity) || 0;
|
|
// 合并工单号：用逗号分隔显示所有工单号
|
const orderNos = group.map(item => item.orderNo).join(', ');
|
|
// 创建合并后的单条记录
|
var item = [
|
'<span style="color:#FF4500; font-size:90px;">' + palletCode + '</span>',
|
//'<span style="color:#FF4500; font-size:55px;">' + orderNos + '</span>',
|
'<span style="color:#FF4500; font-size:90px;">' + firstItem.materielCode + '</span>',
|
'<span style="color:#FF4500; font-size:90px;">' + machineLastChar + '</span>',
|
'<span style="color:#FF4500; font-size:90px;">' + materialWide + '</span>',
|
'<span style="color:#FF4500; font-size:90px;;">' + originalQuantity + '</span>',
|
'<span style="color:#FF4500; font-size:90px;">' + parseInt(totalOrderQuantity) + '</span>',
|
];
|
arr.push(item);
|
});
|
if (this.IsDetail) {
|
this.config = {
|
header: [
|
'<span style="font-size:68px;">纸卷条码</span>',
|
//'<span style="font-size:50px;">工单号</span>',
|
'<span style="font-size:68px;">代码</span>',
|
'<span style="font-size:68px;">上机位</span>',
|
'<span style="font-size:68px;">宽幅</span>',
|
'<span style="font-size:68px;">纸卷长</span>',
|
'<span style="font-size:68px;">需用纸长</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: [550, 200, 250, 250, 250, 300],
|
rowNum: 10,
|
align: ["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>
|
