<template>
|
<div id="title">
|
<div id="bkuang" style="border-top: none">
|
<!-- PP仓堆垛机状态面板 -->
|
<div class="skuang">
|
<div class="zhuname">PP仓堆垛机</div>
|
|
<div class="zhankuang">
|
<div class="xname">堆垛机状态:</div>
|
<div class="xzhi" :title="ppData.R_PP_Status">{{ ppData.R_PP_Status }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">堆垛机手自动状态:</div>
|
<div class="xzhi" :title="ppData.R_PP_AutoStatus">{{ ppData.R_PP_AutoStatus }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">正在执行的任务号:</div>
|
<div class="xzhi" :title="ppData.R_PP_TaskNum">{{ ppData.R_PP_TaskNum }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">堆垛机工作状态:</div>
|
<div class="xzhi" :title="ppData.R_PP_WorkStatus">{{ ppData.R_PP_WorkStatus }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">作业类型:</div>
|
<div class="xzhi" :title="ppData.R_PP_WorkType">{{ ppData.R_PP_WorkType }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">托盘类型:</div>
|
<div class="xzhi" :title="ppData.R_PP_TrayType">{{ ppData.R_PP_TrayType }}</div>
|
</div>
|
</div>
|
|
<!-- PP关联站台（入库2004+出库2005） -->
|
<div class="skuang">
|
<div class="zhuname">入库2004站台</div>
|
<div class="zhankuang">
|
<div class="xname">读取箱体码(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Boxcode">{{ ppData.R_PP_Boxcode || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">握手信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_HandShake4">{{ ppData.R_PP_HandShake4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否联机(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Online4">{{ ppData.R_PP_Online4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否空闲(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Free4">{{ ppData.R_PP_Free4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否有货(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Goods4">{{ ppData.R_PP_Goods4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否故障(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Alarm4">{{ ppData.R_PP_Alarm4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_STB4">{{ ppData.R_PP_STB4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_ACK4">{{ ppData.R_PP_ACK4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_STB4">{{ ppData.W_PP_STB4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_ACK4">{{ ppData.W_PP_ACK4 || '-' }}</div>
|
</div>
|
|
<div class="zhuname">出库2005站台</div>
|
<div class="zhankuang">
|
<div class="xname">握手信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_HandShake5">{{ ppData.R_PP_HandShake5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否联机(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Online5">{{ ppData.R_PP_Online5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否空闲(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Free5">{{ ppData.R_PP_Free5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否有货(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Goods5">{{ ppData.R_PP_Goods5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否故障(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Alarm5">{{ ppData.R_PP_Alarm5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_STB5">{{ ppData.R_PP_STB5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_ACK5">{{ ppData.R_PP_ACK5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_STB5">{{ ppData.W_PP_STB5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_ACK5">{{ ppData.W_PP_ACK5 || '-' }}</div>
|
</div>
|
</div>
|
|
<!-- PP关联站台（出库2016+出库2017） -->
|
<div class="skuang">
|
<div class="zhuname">出库2016站台</div>
|
<div class="zhankuang">
|
<div class="xname">握手信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_HandShake6">{{ ppData.R_PP_HandShake6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否联机(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Online6">{{ ppData.R_PP_Online6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否空闲(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Free6">{{ ppData.R_PP_Free6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否有货(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Goods6">{{ ppData.R_PP_Goods6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否故障(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Alarm6">{{ ppData.R_PP_Alarm6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_STB6">{{ ppData.R_PP_STB6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_ACK6">{{ ppData.R_PP_ACK6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_STB6">{{ ppData.W_PP_STB6 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_ACK6">{{ ppData.W_PP_ACK6 || '-' }}</div>
|
</div>
|
|
<div class="zhuname">出库2017站台</div>
|
<div class="zhankuang">
|
<div class="xname">握手信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_HandShake7">{{ ppData.R_PP_HandShake7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否联机(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Online7">{{ ppData.R_PP_Online7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否空闲(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Free7">{{ ppData.R_PP_Free7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否有货(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Goods7">{{ ppData.R_PP_Goods7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否故障(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_Alarm7">{{ ppData.R_PP_Alarm7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_STB7">{{ ppData.R_PP_STB7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(读):</div>
|
<div class="xzhi" :title="ppData.R_PP_ACK7">{{ ppData.R_PP_ACK7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_STB7">{{ ppData.W_PP_STB7 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(写):</div>
|
<div class="xzhi" :title="ppData.W_PP_ACK7">{{ ppData.W_PP_ACK7 || '-' }}</div>
|
</div>
|
</div>
|
</div>
|
|
<div id="nowcolumn" :class="{ 'abnormal-column': ppData.R_PP_Status !== '正常' }">
|
<div>PP堆垛机当前所在列:
|
<span :title="ppData.R_PP_Column">{{ ppData.R_PP_Column || '未知' }}</span>
|
</div>
|
</div>
|
|
<div class="column-container" :class="{ 'pp-status-abnormal': ppData.R_PP_Status !== '正常' }">
|
<!-- 上方1-24列 -->
|
<div class="column-grid-container">
|
<div
|
v-for="num in 24"
|
:key="num"
|
class="column-grid-item"
|
:class="{ 'active': num == ppData.R_PP_Column }"
|
:title="`列号: ${num}`"
|
>
|
{{ num }}
|
</div>
|
</div>
|
<!-- 下方25-47列 (23个) -->
|
<div class="column-grid-container">
|
<div
|
v-for="i in 23"
|
:key="'lower-' + i"
|
class="column-grid-item"
|
:class="{ 'active': (24 + i) == ppData.R_PP_Column }"
|
:title="`列号: ${24 + i}`"
|
>
|
{{ 24 + i }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, nextTick, watch, onUnmounted } from "vue";
|
import { useStore } from "vuex";
|
import { onMounted } from "vue";
|
|
export default {
|
data() {
|
return {
|
xuan: 0
|
};
|
},
|
setup() {
|
const store = useStore();
|
const ppData = ref({});
|
|
// 延迟更新配置
|
const UPDATE_DELAY = 300;
|
let updateTimer = null;
|
|
// PP数据映射规则
|
const statusMap = {
|
R_PP_Status: {
|
0: "正常",
|
1: "故障",
|
2: "急停",
|
3: "未知"
|
},
|
R_PP_AutoStatus: {
|
0: "维修",
|
1: "手动",
|
2: "半自动",
|
3: "自动",
|
},
|
R_PP_WorkStatus: {
|
0: "待机",
|
1: "取货中",
|
2: "取货完成",
|
4: "放货中",
|
5: "放货完成",
|
6: "任务完成",
|
},
|
R_PP_WorkType: {
|
0: "无作业任务(0)",
|
1: "取放货作业(1)",
|
2: "只取货作业(2)",
|
3: "只放货作业(3)",
|
4: "移动到指定位置"
|
},
|
R_PP_TrayType: {
|
"-1": "空箱(-1)",
|
1: "小托盘(1)",
|
2: "中托盘(2)",
|
3: "大托盘(3)",
|
4: "特大托盘(4)",
|
},
|
R_PP_Column: (val) => val !== undefined ? val : "未知"
|
};
|
|
// PP相关布尔字段分组
|
const fieldGroups = {
|
online: {
|
fields: ["R_PP_Online6", "R_PP_Online4", "R_PP_Online5", "R_PP_Online7"],
|
map: { true: "联机", false: "脱机" }
|
},
|
alarm: {
|
fields: ["R_PP_Alarm6", "R_PP_Alarm4", "R_PP_Alarm5", "R_PP_Alarm7"],
|
map: { true: "故障", false: "正常" }
|
},
|
free: {
|
fields: ["R_PP_Free6", "R_PP_Free4", "R_PP_Free5", "R_PP_Free7"],
|
map: { true: "空闲", false: "繁忙" }
|
},
|
goods: {
|
fields: ["R_PP_Goods6", "R_PP_Goods4", "R_PP_Goods5", "R_PP_Goods7"],
|
map: { true: "有货", false: "无货" }
|
},
|
signal: {
|
fields: [
|
"R_PP_HandShake4", "R_PP_STB4", "R_PP_ACK4", "W_PP_STB4", "W_PP_ACK4",
|
"R_PP_HandShake5", "R_PP_STB5", "R_PP_ACK5", "W_PP_STB5", "W_PP_ACK5",
|
"R_PP_HandShake6", "R_PP_STB6", "R_PP_ACK6", "W_PP_STB6", "W_PP_ACK6",
|
"R_PP_HandShake7", "R_PP_STB7", "R_PP_ACK7", "W_PP_STB7", "W_PP_ACK7"
|
],
|
map: { true: "是", false: "否" }
|
}
|
};
|
|
// 处理PP原始数据
|
const processPPData = (rawData) => {
|
if (!rawData) return {};
|
const processed = { ...rawData };
|
|
// 处理状态字段映射
|
Object.keys(statusMap).forEach(key => {
|
if (processed.hasOwnProperty(key)) {
|
const mapper = statusMap[key];
|
processed[key] = typeof mapper === 'function'
|
? mapper(processed[key])
|
: (mapper[processed[key]] || processed[key]);
|
}
|
});
|
|
// 处理布尔型字段映射
|
Object.values(fieldGroups).forEach(group => {
|
group.fields.forEach(key => {
|
if (processed.hasOwnProperty(key)) {
|
processed[key] = group.map[processed[key]] || processed[key];
|
}
|
});
|
});
|
|
return processed;
|
};
|
|
// 延迟更新PP数据
|
const delayedUpdatePPData = (newRawData) => {
|
if (updateTimer) clearTimeout(updateTimer);
|
updateTimer = setTimeout(() => {
|
if (newRawData && newRawData.R_PP_Status !== undefined) {
|
ppData.value = processPPData(newRawData);
|
nextTick(() => {
|
const valueElements = document.getElementsByClassName("xzhi");
|
for (let i = 0; i < valueElements.length; i++) {
|
if (valueElements[i].innerHTML === "是") {
|
valueElements[i].style.color = "yellow";
|
} else if (valueElements[i].innerHTML === "否") {
|
valueElements[i].style.color = "red";
|
}
|
}
|
});
|
}
|
}, UPDATE_DELAY);
|
};
|
|
onMounted(() => {
|
const initialData = store.state.homedata;
|
if (initialData && initialData.R_PP_Status !== undefined) {
|
ppData.value = processPPData(initialData);
|
}
|
|
const unwatch = watch(
|
() => store.state.homedata,
|
(newData) => {
|
if (newData && newData.R_PP_Status !== undefined) {
|
delayedUpdatePPData(newData);
|
}
|
},
|
{ deep: true }
|
);
|
|
onUnmounted(() => {
|
unwatch();
|
if (updateTimer) clearTimeout(updateTimer);
|
});
|
});
|
|
return {
|
ppData
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
.ding {
|
float: left;
|
width: 20px;
|
height: 20px;
|
margin-top: 7px;
|
}
|
.yan {
|
color: white;
|
float: left;
|
font-size: 25px;
|
}
|
.dakuang {
|
width: 250px;
|
height: 50px;
|
position: absolute;
|
top: 150px;
|
left: 200px;
|
}
|
#xiugai {
|
width: 100px;
|
height: 30px;
|
float: left;
|
border-radius: 5px;
|
text-align: center;
|
line-height: 30px;
|
cursor: pointer;
|
border: 1px solid white;
|
color: white;
|
background: rgba(255, 255, 255, 0.5);
|
font-size: 25px;
|
position: absolute;
|
top: 150px;
|
left: 450px;
|
}
|
#xiugai:hover {
|
background: #f60;
|
}
|
#shu1,
|
#shu2 {
|
width: 200px;
|
height: 30px;
|
float: left;
|
margin-top: 0px;
|
margin-right: 0px;
|
border-radius: 5px;
|
border: 1px solid white;
|
}
|
#guan {
|
width: 40px;
|
height: 40px;
|
float: left;
|
font-size: 1.1cqw;
|
text-align: center;
|
line-height: 40px;
|
cursor: pointer;
|
margin-left: 560px;
|
color: white;
|
position: absolute;
|
}
|
#ti {
|
width: 600px;
|
height: 300px;
|
position: relative;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 10px;
|
top: 230px;
|
left: 35%;
|
display: none;
|
background-image: url("../../img/1.png");
|
background-repeat: no-repeat;
|
background-size: 170%;
|
background-position: -220px 0px;
|
}
|
.zhuname {
|
width: 100%;
|
height: 5vh;
|
float: left;
|
text-align: center;
|
line-height: 50px;
|
font-weight: 700;
|
font-size: 1.1cqw;
|
color: white;
|
}
|
.xname {
|
width: 70%;
|
height: 80px;
|
float: left;
|
line-height: 7vh;
|
font-size: 1.1cqw;
|
color: white;
|
}
|
.xzhi {
|
width: 30%;
|
height: 7vh;
|
float: left;
|
line-height: 50px;
|
font-size: 1.1cqw;
|
color: rgb(242, 242, 50);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.zhankuang {
|
width: 45%;
|
height: 3vh;
|
margin-top: 10px;
|
margin-left: 5%;
|
float: left;
|
}
|
#title {
|
float: left;
|
width: 95%;
|
height: 88vh;
|
margin-top: 40px;
|
margin-left: 3%;
|
background-image: url("../../img/1.png");
|
background-repeat: no-repeat;
|
background-size: 100%;
|
container-type: inline-size;
|
}
|
#bkuang {
|
width: 100%;
|
height: 55vh;
|
float: left;
|
}
|
.skuang {
|
width: 31%;
|
height: 55vh;
|
float: left;
|
border-top: none;
|
border-left: none;
|
border-bottom: none;
|
background: rgba(255, 255, 255, 0.2);
|
margin-left: 1.7%;
|
border-radius: 10px;
|
padding-bottom: 20px;
|
}
|
|
/* 堆垛机当前列样式 */
|
#nowcolumn {
|
width: 100%;
|
height: 70px;
|
float: left;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 1.5cqw;
|
font-weight: bold;
|
color: #00ff4c;
|
}
|
|
/* 堆垛机状态异常时，当前列文字变为红色 */
|
#nowcolumn.abnormal-column {
|
color: red !important;
|
}
|
#nowcolumn.abnormal-column span {
|
color: red !important;
|
}
|
|
/* 列容器 */
|
.column-container {
|
width: 95%;
|
margin: 0 auto;
|
position: relative;
|
clear: both;
|
padding-top: 15px;
|
}
|
|
/* 蓝色分割线 */
|
.column-separator {
|
width: 100%;
|
height: 20px;
|
background-color: #3bc0ed;
|
position: absolute;
|
top: 0; /* 调整到方格顶部对齐 */
|
left: 0;
|
z-index: 1; /* 确保在方格下方 */
|
border-radius: 4px 4px 0 0;
|
}
|
|
.column-grid-container {
|
width: 100%;
|
display: flex;
|
flex-wrap: nowrap; /* 禁止换行 */
|
justify-content: space-between; /* 均匀分布 */
|
align-items: center;
|
gap: 2px; /* 方格之间的间距 */
|
position: relative;
|
z-index: 2;
|
margin-bottom: 10px;
|
padding: 0 2px; /* 避免边缘方格贴边 */
|
}
|
|
/* 列方格样式 - 关键修改 */
|
.column-grid-item {
|
flex: 1; /* 核心：每个方格平均分配剩余空间 */
|
min-width: 24px; /* 最小宽度（避免过小） */
|
max-width: 60px; /* 最大宽度（避免过大） */
|
height: 30px;
|
border: 1px solid #fff;
|
border-radius:8px 8px 0 0;
|
color: white;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: clamp(8px, 1vw, 14px); /* 自适应字体 */
|
box-sizing: border-box;
|
transition: background-color 0.3s ease;
|
}
|
|
/* 当前列高亮（正常状态） */
|
.column-grid-item.active {
|
background-color: green;
|
font-weight: bold;
|
}
|
|
/* 堆垛机状态异常时，当前列高亮为红色 */
|
.pp-status-abnormal .column-grid-item.active {
|
background-color: red !important;
|
}
|
</style>
|
