<template>
|
<div>
|
<el-row style="padding-bottom: 5px;">
|
<template v-for="item in 65" :key="item">
|
<el-col :span="24/65">
|
<span class="image-text">{{ 66 - item }}</span>
|
<img src="../../public/货架.jpeg" />
|
</el-col>
|
</template>
|
</el-row>
|
</div>
|
<div class="line-container">
|
<div class="line"></div>
|
<div :class="update()" :style="{ transform: `translateX(${calculateDotPosition()}px)` }"
|
ref="childDot" @click="mouseClick"></div>
|
</div>
|
<div>
|
<el-row style="padding-top: 5px;">
|
<template v-for="item in 65" :key="item">
|
<el-col :span="24/65">
|
<span class="image-text">{{ 66 - item }}</span>
|
<img src="../../public/货架.jpeg" />
|
</el-col>
|
<div style="margin-top: 60px;"></div>
|
</template>
|
</el-row>
|
</div>
|
|
<el-dialog v-model="dialogVisible" :before-close="handleClose" width="520px" class="modern-dialog">
|
<div class="dialog-header">
|
<h3 class="dialog-title">堆垛机信息</h3>
|
</div>
|
<div class="dialog-content">
|
<div class="info-list">
|
<div class="info-item">
|
<span class="item-label">设备编号</span>
|
<span class="item-value">{{ yL_DB.R_PP_Status || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">设备状态</span>
|
<span :class="['item-value', statusClass]">{{ yL_DB.YL_Status || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">工作模式</span>
|
<span :class="['item-value', autoStatusClass]">{{ yL_DB.YL_AutoStatus || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">任务号</span>
|
<span class="item-value">{{ yL_DB.YL_TaskNum || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">作业状态</span>
|
<span class="item-value">{{ yL_DB.YL_WorkStatus || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">当前行列层</span>
|
<span class="item-value">{{ yL_DB.YL_Row + '-' + yL_DB.YL_Column + '-' + yL_DB.YL_Layer || '无' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="item-label">报警信息</span>
|
<span class="item-value">{{ yL_DB.StackerAlarm || '无' }}</span>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import JElDescription from "./JElDescription";
|
export default {
|
components: {
|
JElDescription
|
},
|
data() {
|
return {
|
YLDBMap: {
|
YL_Status: {
|
0: "不在线",
|
1: "在线",
|
2: "急停",
|
3: "未知",
|
},
|
YL_AutoStatus: {
|
1: "半自动",
|
2: "未知",
|
3: "自动",
|
4: "手动",
|
5: "未知",
|
},
|
YL_WorkStatus: {
|
1: "待命",
|
2: "取货完成",
|
3: "取货中",
|
5: "放货中",
|
6: "任务执行错误",
|
7: "未知",
|
9: "任务完成",
|
},
|
},
|
x: 0, // 初始x值
|
dialogVisible: false,
|
timer1: null,
|
yL_DB: {
|
R_PP_Status: "",
|
YL_Status: "",
|
YL_AutoStatus: "",
|
YL_TaskNum: "",
|
YL_WorkStatus: "",
|
YL_WorkType: "",
|
YL_Row: "",
|
YL_Column: "",
|
YL_Layer: "",
|
StackerAlarm: "",
|
CurrentColumn: "1"
|
},
|
form: {
|
TaskType: "",
|
SourceAddress: "",
|
TargetAddress: "",
|
DeviceCode: "",
|
},
|
};
|
},
|
|
props: {
|
equipNo: {
|
type: String,
|
default: "0",
|
},
|
},
|
computed: {
|
dotPosition() {
|
return this.x;
|
},
|
// 设备状态文字颜色
|
statusClass() {
|
const status = this.yL_DB.YL_Status;
|
if (status === '不在线') {
|
return 'status-red';
|
} else if (status === '在线') {
|
return 'status-green';
|
}
|
return '';
|
},
|
// 工作模式文字颜色
|
autoStatusClass() {
|
const status = this.yL_DB.YL_AutoStatus;
|
if (status === '自动' || status === '半自动') {
|
return 'status-green';
|
} else if (status === '手动') {
|
return 'status-blue';
|
} else if (status === '脱机') {
|
return 'status-red';
|
}
|
return '';
|
}
|
},
|
mounted() {
|
// 初始化时传递空对象，避免类型不匹配错误
|
this.moveDot({});
|
// 启动定时器，每秒更新一次数据
|
this.timer1 = setInterval(() => {
|
this.updateData();
|
}, 1000);
|
},
|
beforeUnmount() {
|
// 清除定时器
|
if (this.timer1) {
|
clearInterval(this.timer1);
|
this.timer1 = null;
|
}
|
},
|
watch: {
|
'$root.stackerData': {
|
handler() {
|
this.updateData();
|
},
|
deep: true
|
}
|
},
|
methods: {
|
updateData() {
|
const equipNoStr = String(this.equipNo);
|
if (this.$root.stackerData && this.$root.stackerData[equipNoStr]) {
|
const stackerData = this.$root.stackerData[equipNoStr];
|
this.moveDot(stackerData);
|
}
|
},
|
// 计算指示器位置
|
calculateDotPosition() {
|
// 未收到信息或CurrentColumn为0，指示器在外面
|
if (!this.yL_DB.CurrentColumn || this.yL_DB.CurrentColumn == "0") {
|
return -30; // 显示在货位区域左侧外面
|
}
|
|
// 计算指示器位置，确保与对应列对齐
|
const currentColumn = parseInt(this.yL_DB.CurrentColumn);
|
// 实际列10对应模板中从左到右第56列(66-10=56)
|
// 每列宽度计算：line-container宽度1950px / 65列 = 30px/列
|
// 指示器宽度25px，需要居中显示在列中
|
const columnWidth = 1950 / 65; // 30px
|
const dotWidth = 25; // 指示器宽度
|
// 计算位置：(列索引 * 列宽度) + (列宽度/2) - (指示器宽度/2)
|
const position = (currentColumn - 1) * columnWidth + (columnWidth / 2) - (dotWidth / 2);
|
return position;
|
},
|
|
moveDot(x) {
|
// 映射工作模式
|
const autoStatusCode = x.YL_AutoStatus;
|
if (autoStatusCode !== undefined) {
|
this.yL_DB.YL_AutoStatus = this.YLDBMap.YL_AutoStatus[autoStatusCode] || autoStatusCode;
|
} else {
|
this.yL_DB.YL_AutoStatus = "无";
|
}
|
|
// 映射设备状态
|
const statusCode = parseInt(x.YL_Status);
|
if (!isNaN(statusCode)) {
|
this.yL_DB.YL_Status = this.YLDBMap.YL_Status[statusCode] || statusCode.toString();
|
} else {
|
this.yL_DB.YL_Status = "无";
|
}
|
|
// 映射工作状态
|
const workStatusCode = x.YL_WorkStatus;
|
if (workStatusCode !== undefined) {
|
this.yL_DB.YL_WorkStatus = this.YLDBMap.YL_WorkStatus[workStatusCode] || workStatusCode;
|
} else {
|
this.yL_DB.YL_WorkStatus = "无";
|
}
|
|
// 其他数据赋值
|
this.yL_DB.R_PP_Status = x.DeviceCode || "无";
|
this.yL_DB.YL_WorkType = x.YL_WorkType || "无";
|
this.yL_DB.YL_TaskNum = x.YL_TaskNum || "无";
|
|
// 成品库：直接使用小货位号作为列号，不合并
|
const smallColumn = parseInt(x.YL_Column);
|
let column;
|
|
// 处理行号
|
const rowValue = parseInt(x.YL_Row);
|
|
// 处理层号
|
const layerValue = parseInt(x.YL_Layer);
|
|
if (!isNaN(smallColumn) && smallColumn > 0) {
|
// 成品库所有堆垛机都不合并小货位，直接使用小货位号
|
column = smallColumn;
|
this.yL_DB.YL_Row = (!isNaN(rowValue) && rowValue > 0) ? rowValue.toString() : "0";
|
this.yL_DB.YL_Layer = (!isNaN(layerValue) && layerValue > 0) ? layerValue.toString() : "0";
|
} else {
|
// 没有收到信息，指示器在外面
|
column = 0;
|
this.yL_DB.YL_Row = "0";
|
this.yL_DB.YL_Layer = "0";
|
}
|
|
// 直接使用实际列号作为显示列号，确保实际列10对应模板中显示的第10列
|
// 用户期望指示器对齐到模板中显示的对应列号
|
const displayColumn = column > 0 ? (66 - column) : 0;
|
|
// 处理列号
|
this.yL_DB.YL_Column = (!isNaN(smallColumn) && smallColumn > 0) ? smallColumn.toString() : "0";
|
this.yL_DB.StackerAlarm = x.StackerAlarm || "无";
|
this.yL_DB.CurrentColumn = displayColumn.toString();
|
|
console.log('成品库小货位:', smallColumn, '对应列:', column, '显示列:', displayColumn);
|
this.form.DeviceCode = x.DeviceCode || "";
|
},
|
update() {
|
// 获取StackerAlarm的值，转换为字符串进行比较
|
const alarmValue = String(this.yL_DB.StackerAlarm).trim();
|
// 当StackerAlarm字段的值不为0或空时，就故障报警（显示红色）
|
if (alarmValue !== '' && alarmValue !== '0' && alarmValue !== '无') {
|
return 'dot-Fault ';
|
}
|
if (this.yL_DB.YL_Status == "在线" && (this.yL_DB.YL_AutoStatus == "自动" || this.yL_DB.YL_AutoStatus == "半自动")) {
|
return 'dot-Automatic ';
|
}
|
else if (this.yL_DB.YL_Status == "在线" && this.yL_DB.YL_AutoStatus == "手动") {
|
return 'dot-Running ';
|
} else {
|
return 'dot-Fault ';
|
}
|
},
|
mouseClick() {
|
this.fullscreenLoading = true;
|
this.dialogVisible = true;
|
this.fullscreenLoading = false;
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.line-container {
|
position: relative;
|
height: 25px;
|
background-color: #ecf5ff;
|
width: 1950px; /* 65列 * 30px每列 */
|
}
|
|
.line {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: 0px;
|
background-color: #a0cfff;
|
}
|
|
.dot-Running {
|
position: absolute;
|
top: 0px;
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
background-color: #409eff;
|
transition: transform 0.3s ease;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 9px;
|
font-weight: bold;
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
color: #ffffff;
|
}
|
|
.dot-Automatic {
|
position: absolute;
|
top: 0px;
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
background-color: #0df705;
|
transition: transform 0.3s ease;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 9px;
|
font-weight: bold;
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
color: #ffffff;
|
}
|
|
.dot-Fault {
|
position: absolute;
|
top: 0px;
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
background-color: #f80410;
|
transition: transform 0.3s ease;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 9px;
|
font-weight: bold;
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
color: #ffffff;
|
}
|
|
img {
|
width: 30px;
|
height: 30px;
|
}
|
|
.image-text {
|
position: absolute;
|
top: 5px;
|
color: #000000;
|
font-size: 12px;
|
font-weight: bold;
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
margin-left: 5px;
|
}
|
|
.modern-dialog {
|
border-radius: 16px !important;
|
overflow: hidden;
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
}
|
|
.modern-dialog .el-dialog__header {
|
display: none;
|
}
|
|
.modern-dialog .el-dialog__body {
|
padding: 0;
|
margin: 0;
|
}
|
|
.dialog-header {
|
background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
|
padding: 20px 24px;
|
text-align: center;
|
}
|
|
.dialog-title {
|
color: #fff;
|
font-size: 18px;
|
font-weight: 600;
|
margin: 0;
|
letter-spacing: 2px;
|
}
|
|
.dialog-content {
|
padding: 28px;
|
background: #f8fafc;
|
display: flex;
|
justify-content: center;
|
}
|
|
.info-list {
|
width: 100%;
|
max-width: 420px;
|
display: flex;
|
flex-direction: column;
|
gap: 12px;
|
}
|
|
.info-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 16px 20px;
|
background: #fff;
|
border-radius: 12px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
transition: all 0.3s ease;
|
}
|
|
.info-item:hover {
|
transform: translateX(4px);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
}
|
|
.item-label {
|
font-size: 14px;
|
color: #6b7280;
|
font-weight: 500;
|
min-width: 80px;
|
text-align: left;
|
}
|
|
.item-value {
|
font-size: 15px;
|
color: #1f2937;
|
font-weight: 500;
|
text-align: right;
|
flex: 1;
|
margin-left: 20px;
|
word-break: break-all;
|
padding-left: 20px;
|
border-left: 1px solid #e5e7eb;
|
}
|
|
.status-blue {
|
color: #409eff !important;
|
font-weight: 600;
|
}
|
|
.status-green {
|
color: #67c23a !important;
|
font-weight: 600;
|
}
|
|
.status-red {
|
color: #f56c6c !important;
|
font-weight: 600;
|
}
|
</style>
|
