<template>
|
<div id="kuang">
|
<div id="shangk">
|
<p class="tiwen">堆垛机</p>
|
<div class="xhk">
|
<div class="namek" style="margin: 3% 0%;">操作模式:</div>
|
<div class="xinhao" style="margin: 3% 0%;"></div>
|
<div class="namek">设备状态:</div>
|
<div class="xinhao"></div>
|
<div class="namek">货叉状态:</div>
|
<div class="xinhao"></div>
|
<div class="namek">消防状态:</div>
|
<div class="xinhao"></div>
|
<div class="namek">任务执行阶段:</div>
|
<div class="xinhao"></div>
|
</div>
|
<div class="xhk">
|
<div class="namek" style="margin: 3% 0%;">当前任务号:</div>
|
<div class="xinhao" style="margin: 3% 0%;"></div>
|
<div class="namek">故障码:</div>
|
<div class="xinhao"></div>
|
<div class="namek"></div>
|
<div class="xinhao"></div>
|
<div class="namek"></div>
|
<div class="xinhao"></div>
|
<div class="namek"></div>
|
<div class="xinhao"></div>
|
</div>
|
</div>
|
<div id="xiak">
|
<p class="tiwen">输送线</p>
|
<div class="xhk">
|
<div class="namek" style="margin: 3% 0%;">(1)设备状态:</div>
|
<div class="xinhao" style="margin: 3% 0%;"></div>
|
<div class="namek">(1)申请取(放)料:</div>
|
<div class="xinhao"></div>
|
<div class="namek">(2)设备状态:</div>
|
<div class="xinhao"></div>
|
<div class="namek">(2)申请取(放)料:</div>
|
<div class="xinhao"></div>
|
</div>
|
<div class="xhk">
|
<div class="namek" style="margin: 3% 0%;">(3)设备状态:</div>
|
<div class="xinhao" style="margin: 3% 0%;"></div>
|
<div class="namek">(3)申请取(放)料:</div>
|
<div class="xinhao"></div>
|
<div class="namek">(4)设备状态:</div>
|
<div class="xinhao"></div>
|
<div class="namek">(4)申请取(放)料:</div>
|
<div class="xinhao"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
ws: null, // WebSocket实例
|
messages: [], // 消息列表
|
status: {
|
// 连接状态
|
isConnected: false,
|
error: null
|
}
|
};
|
},
|
//连接websocket
|
created() {
|
this.ws = new WebSocket("ws://192.168.10.203:9260/");
|
this.ws.onmessage = event => {
|
try {
|
const data = JSON.parse(event.data);
|
console.log("收到消息:", data);
|
|
let xinhao = document.getElementsByClassName("xinhao");
|
//堆垛机
|
//操作模式
|
if (data.R_ControlMode == 0) {
|
xinhao[0].innerHTML = "未选择";
|
} else if (data.R_ControlMode == 1) {
|
xinhao[0].innerHTML = "脱机";
|
} else if (data.R_ControlMode == 2) {
|
xinhao[0].innerHTML = "联机自动";
|
}
|
//设备状态
|
if (data.R_TaskStatus == 0) {
|
xinhao[1].innerHTML = "初始化";
|
} else if (data.R_TaskStatus == 1) {
|
xinhao[1].innerHTML = "工作中";
|
} else if (data.R_TaskStatus == 2) {
|
xinhao[1].innerHTML = "允许下发";
|
} else if (data.R_TaskStatus == 3) {
|
xinhao[1].innerHTML = "故障";
|
}
|
//货叉状态
|
if (data.R_LoadStatus == 0) {
|
xinhao[2].innerHTML = "无货";
|
} else if (data.R_LoadStatus == 1) {
|
xinhao[2].innerHTML = "有货";
|
} else if (data.R_LoadStatus == 2) {
|
xinhao[2].innerHTML = "货叉被禁用";
|
}
|
//消防状态
|
if (data.R_FireStatus == 1) {
|
xinhao[3].innerHTML = "堆垛机烟温感警告";
|
} else if (data.R_FireStatus == 2) {
|
xinhao[3].innerHTML = "热成像确认超温";
|
} else if (data.R_FireStatus == 3) {
|
xinhao[3].innerHTML = "热成像确认未超温";
|
} else if (data.R_FireStatus == 4) {
|
xinhao[3].innerHTML = "消防任务人工强制执行反馈";
|
} else if (data.R_FireStatus == 5) {
|
xinhao[3].innerHTML = "消防任务人工强制取消反馈";
|
} else{
|
xinhao[3].innerHTML = "无";
|
}
|
//任务执行阶段
|
if (data.R_TaskPhases == 1) {
|
xinhao[4].innerHTML = "取货行走";
|
} else if (data.R_TaskPhases == 2) {
|
xinhao[4].innerHTML = "取货";
|
} else if (data.R_TaskPhases == 3) {
|
xinhao[4].innerHTML = "放货行走";
|
} else if (data.R_TaskPhases == 4) {
|
xinhao[4].innerHTML = "放货";
|
} else if (data.R_TaskPhases == 5) {
|
xinhao[4].innerHTML = "任务完成";
|
} else{
|
xinhao[4].innerHTML = "无";
|
}
|
//当前任务号
|
xinhao[5].innerHTML = data.R_OrderNo;
|
//故障码
|
xinhao[6].innerHTML = data.R_FaultCode;
|
//输送线
|
//(1)设备状态
|
if (data.R_StatusA == 1) {
|
xinhao[10].innerHTML = "自动状态";
|
} else{
|
xinhao[10].innerHTML = "非自动状态";
|
}
|
//(1)申请取(放)料
|
if (data.R_PickA == 1) {
|
xinhao[11].innerHTML = "允许出(入)";
|
} else{
|
xinhao[11].innerHTML = "不允许出(入)";
|
}
|
//(2)设备状态
|
if (data.R_StatusB == 1) {
|
xinhao[12].innerHTML = "自动状态";
|
} else{
|
xinhao[12].innerHTML = "非自动状态";
|
}
|
//(2)申请取(放)料
|
if (data.R_PickB == 1) {
|
xinhao[13].innerHTML = "允许出(入)";
|
} else{
|
xinhao[13].innerHTML = "不允许出(入)";
|
}
|
//(3)设备状态
|
if (data.R_StatusC == 1) {
|
xinhao[14].innerHTML = "自动状态";
|
} else{
|
xinhao[14].innerHTML = "非自动状态";
|
}
|
//(3)申请取(放)料
|
if (data.R_PickC == 1) {
|
xinhao[15].innerHTML = "允许出(入)";
|
} else{
|
xinhao[15].innerHTML = "不允许出(入)";
|
}
|
//(4)设备状态
|
if (data.R_StatusD == 1) {
|
xinhao[16].innerHTML = "自动状态";
|
} else{
|
xinhao[16].innerHTML = "非自动状态";
|
}
|
//(4)申请取(放)料
|
if (data.R_PickD == 1) {
|
xinhao[17].innerHTML = "允许出(入)";
|
} else{
|
xinhao[17].innerHTML = "不允许出(入)";
|
}
|
} catch (e) {
|
console.error("消息解析失败", e);
|
}
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
.xinhao {
|
width: 55%;
|
height: 15%;
|
float: left;
|
margin: 1.8% 0%;
|
font-size: 18px;
|
line-height: 180%;
|
}
|
.namek {
|
width: 45%;
|
height: 15%;
|
float: left;
|
margin: 1.8% 0%;
|
font-size: 20px;
|
}
|
.xhk {
|
width: 25%;
|
height: 85%;
|
float: left;
|
margin: 4% 0.5%;
|
}
|
.tiwen {
|
width: 5%;
|
height: 10%;
|
float: left;
|
margin: 1% 1%;
|
text-align: center;
|
font-weight: 600;
|
font-size: 25px;
|
}
|
#kuang {
|
width: 100%;
|
height: 89.8vh;
|
float: left;
|
}
|
#shangk {
|
width: 95%;
|
margin: 1% 2.5%;
|
float: left;
|
background: rgb(230, 230, 243);
|
height: 47%;
|
border-radius: 10px;
|
}
|
#xiak {
|
width: 95%;
|
margin: 0% 2.5%;
|
float: left;
|
background: rgb(230, 230, 243);
|
height: 47%;
|
border-radius: 10px;
|
}
|
</style>
|
