<template>
|
<div id="title">
|
<div id="bkuang" style="border-top: none">
|
<!-- GM仓堆垛机状态面板 -->
|
<div class="skuang">
|
<div class="zhuname">干膜仓堆垛机</div>
|
<div class="zhankuang">
|
<div class="xname">堆垛机状态:</div>
|
<div class="xzhi" :title="gmData.R_GM_Status">{{ gmData.R_GM_Status || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">堆垛机手自动状态:</div>
|
<div class="xzhi" :title="gmData.R_GM_AutoStatus">{{ gmData.R_GM_AutoStatus || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">正在执行的任务号:</div>
|
<div class="xzhi" :title="gmData.R_GM_TaskNum">{{ gmData.R_GM_TaskNum || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">堆垛机工作状态:</div>
|
<div class="xzhi" :title="gmData.R_GM_WorkStatus">{{ gmData.R_GM_WorkStatus || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">作业类型:</div>
|
<div class="xzhi" :title="gmData.R_GM_WorkType">{{ gmData.R_GM_WorkType || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">托盘类型:</div>
|
<div class="xzhi" :title="gmData.R_GM_TrayType">{{ gmData.R_GM_TrayType || '-' }}</div>
|
</div>
|
</div>
|
|
<!-- GM关联站台（入库7003） -->
|
<div class="skuang">
|
<div class="zhuname">入库7003站台</div>
|
<div class="zhankuang">
|
<div class="xname">读取箱体码(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Boxcode">{{ gmData.R_GM_Boxcode || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">握手信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_HandShake3">{{ gmData.R_GM_HandShake3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否联机(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Online3">{{ gmData.R_GM_Online3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否空闲(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Free3">{{ gmData.R_GM_Free3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否有货(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Goods3">{{ gmData.R_GM_Goods3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否故障(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Alarm3">{{ gmData.R_GM_Alarm3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_STB3">{{ gmData.R_GM_STB3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_ACK3">{{ gmData.R_GM_ACK3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(写):</div>
|
<div class="xzhi" :title="gmData.W_GM_STB3">{{ gmData.W_GM_STB3 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(写):</div>
|
<div class="xzhi" :title="gmData.W_GM_ACK3">{{ gmData.W_GM_ACK3 || '-' }}</div>
|
</div>
|
</div>
|
|
<!-- GM关联站台（出库7004+7005） -->
|
<div class="skuang">
|
<div class="zhuname">出库终点7004站台</div>
|
<div class="zhankuang">
|
<div class="xname">握手信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_HandShake4">{{ gmData.R_GM_HandShake4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否联机(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Online4">{{ gmData.R_GM_Online4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否空闲(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Free4">{{ gmData.R_GM_Free4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否有货(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Goods4">{{ gmData.R_GM_Goods4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否故障(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Alarm4">{{ gmData.R_GM_Alarm4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_STB4">{{ gmData.R_GM_STB4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_ACK4">{{ gmData.R_GM_ACK4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(写):</div>
|
<div class="xzhi" :title="gmData.W_GM_STB4">{{ gmData.W_GM_STB4 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(写):</div>
|
<div class="xzhi" :title="gmData.W_GM_ACK4">{{ gmData.W_GM_ACK4 || '-' }}</div>
|
</div>
|
|
<div class="zhuname">出库7005站台</div>
|
<div class="zhankuang">
|
<div class="xname">握手信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_HandShake5">{{ gmData.R_GM_HandShake5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否联机(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Online5">{{ gmData.R_GM_Online5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否空闲(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Free5">{{ gmData.R_GM_Free5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否有货(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Goods5">{{ gmData.R_GM_Goods5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">是否故障(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_Alarm5">{{ gmData.R_GM_Alarm5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_STB5">{{ gmData.R_GM_STB5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(读):</div>
|
<div class="xzhi" :title="gmData.R_GM_ACK5">{{ gmData.R_GM_ACK5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">请求信号(写):</div>
|
<div class="xzhi" :title="gmData.W_GM_STB5">{{ gmData.W_GM_STB5 || '-' }}</div>
|
</div>
|
<div class="zhankuang">
|
<div class="xname">响应信号(写):</div>
|
<div class="xzhi" :title="gmData.W_GM_ACK5">{{ gmData.W_GM_ACK5 || '-' }}</div>
|
</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();
|
// 仅存储GM数据，与其他仓数据隔离
|
const gmData = ref({});
|
|
// 延迟更新配置，解决闪烁问题
|
const UPDATE_DELAY = 300; // 300ms延迟，平衡实时性和界面稳定性
|
let updateTimer = null; // 定时器实例
|
|
// GM数据映射规则配置（按功能分组）
|
const gmStatusConfig = {
|
coreStatus: {
|
R_GM_Status: { 1: "正常", 2: "故障", 3: "急停" },
|
R_GM_AutoStatus: { 0: "维修", 1: "手动", 2: "半自动", 3: "自动" },
|
R_GM_WorkStatus: { 0: "待机", 1: "取货中", 2: "取货完成", 4: "放货中", 5: "放货完成", 6: "任务完成" },
|
R_GM_WorkType: { 0: "无作业任务(0)", 1: "取放货作业(1)", 2: "只取货作业(2)", 3: "只放货作业(3)", 4: "移动到指定位置" },
|
R_GM_TrayType: { "-1": "空箱(-1)", 1: "小托盘(1)", 2: "中托盘(2)", 3: "大托盘(3)", 4: "特大托盘(4)" }
|
},
|
onlineStatus: {
|
keys: ["R_GM_Online3", "R_GM_Online4", "R_GM_Online5"],
|
map: { true: "联机", false: "脱机" }
|
},
|
alarmStatus: {
|
keys: ["R_GM_Alarm3", "R_GM_Alarm4", "R_GM_Alarm5"],
|
map: { true: "故障", false: "正常" }
|
},
|
freeStatus: {
|
keys: ["R_GM_Free3", "R_GM_Free4", "R_GM_Free5"],
|
map: { true: "空闲", false: "繁忙" }
|
},
|
goodsStatus: {
|
keys: ["R_GM_Goods3", "R_GM_Goods4", "R_GM_Goods5"],
|
map: { true: "有货", false: "无货" }
|
},
|
signalFields: {
|
keys: [
|
"R_GM_HandShake3", "R_GM_STB3", "R_GM_ACK3", "W_GM_STB3", "W_GM_ACK3",
|
"R_GM_HandShake4", "R_GM_STB4", "R_GM_ACK4", "W_GM_STB4", "W_GM_ACK4",
|
"R_GM_HandShake5", "R_GM_STB5", "R_GM_ACK5", "W_GM_STB5", "W_GM_ACK5"
|
],
|
map: { true: "是", false: "否" }
|
}
|
};
|
|
// 处理GM原始数据
|
const processGMData = (rawData) => {
|
if (!rawData) return {};
|
const processed = { ...rawData };
|
|
// 处理核心状态字段
|
Object.entries(gmStatusConfig.coreStatus).forEach(([key, map]) => {
|
if (processed.hasOwnProperty(key)) {
|
processed[key] = map[processed[key]] || processed[key];
|
}
|
});
|
|
// 批量处理分组字段
|
[
|
gmStatusConfig.onlineStatus,
|
gmStatusConfig.alarmStatus,
|
gmStatusConfig.freeStatus,
|
gmStatusConfig.goodsStatus,
|
gmStatusConfig.signalFields
|
].forEach(group => {
|
group.keys.forEach(key => {
|
if (processed.hasOwnProperty(key)) {
|
processed[key] = group.map[processed[key]] || processed[key];
|
}
|
});
|
});
|
|
return processed;
|
};
|
|
// 延迟更新GM数据，避免高频刷新导致的闪烁
|
const delayedUpdateGMData = (newRawData) => {
|
if (updateTimer) clearTimeout(updateTimer);
|
|
updateTimer = setTimeout(() => {
|
// 仅处理包含GM特征字段的数据
|
if (newRawData && newRawData.R_GM_Status !== undefined) {
|
gmData.value = processGMData(newRawData);
|
|
// 更新样式
|
nextTick(() => {
|
const valueElements = document.getElementsByClassName("xzhi");
|
for (let i = 0; i < valueElements.length; i++) {
|
const text = valueElements[i].innerHTML;
|
if (text === "是" || text === "联机") {
|
valueElements[i].style.color = "yellow";
|
} else if (text === "否") {
|
valueElements[i].style.color = "red";
|
}
|
}
|
});
|
}
|
}, UPDATE_DELAY);
|
};
|
|
onMounted(() => {
|
// 初始加载数据
|
const initialData = store.state.homedata;
|
if (initialData && initialData.R_GM_Status !== undefined) {
|
gmData.value = processGMData(initialData);
|
}
|
|
// 监听数据变化，只处理GM数据
|
const unwatch = watch(
|
() => store.state.homedata,
|
(newData) => {
|
if (newData && newData.R_GM_Status !== undefined) {
|
delayedUpdateGMData(newData);
|
}
|
},
|
{ deep: true }
|
);
|
|
// 组件卸载时清理资源
|
onUnmounted(() => {
|
unwatch();
|
if (updateTimer) clearTimeout(updateTimer);
|
});
|
});
|
|
return {
|
gmData
|
};
|
}
|
};
|
</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;
|
}
|
</style>
|
|
