<template>
|
<div class="home-contianer">
|
<div>
|
<el-tabs type="border-card" @tab-click="handleClick" style="width: 100%; height: 100%;">
|
<el-tab-pane label="陈化库" style="width: 100%;height: 100%;">
|
<div class="StackerOne">
|
<div class="content">{{ this.StackerOne.deviceName }}:</div>
|
<!-- <div :class="this.ConveyorlineOut.data.command.interactiveSignal==1 ? 'bool_false' : 'bool_true'"></div> -->
|
<div class="content">任务号：{{ this.StackerOne.data.currentTaskNum }}</div>
|
<div class="content display">
|
<div>工作模式：{{ this.StackerOne.data.stackerCraneAutoStatusDes }}</div>
|
<div :class="this.StackerOne.data.stackerCraneAutoStatusDes != '自动' ? 'bool_false' : 'bool_true'"></div>
|
</div>
|
<div class="content display">
|
<div>设备状态：{{ this.StackerOne.data.stackerCraneStatusDes }}</div>
|
<div :class="this.StackerOne.data.stackerCraneStatusDes != '正常' ? 'bool_false' : 'bool_true'"></div>
|
</div>
|
<div class="content display">
|
<div>作业状态：{{ this.StackerOne.data.stackerCraneWorkStatusDes }}</div>
|
<div :class="this.StackerOne.data.stackerCraneWorkStatusDes != '待机' ? 'bool_false' : 'bool_true'"></div>
|
</div>
|
</div>
|
<div class="ConveyorlineOut">
|
<div class="content">{{ this.ConveyorlineOut.deviceName }}-----{{
|
this.ConveyorlineOut.data.childDeviceCode}}:</div>
|
<div class="display">
|
<div>
|
<div class="Signal">读取信号：</div>
|
<div class="content ">任务号：{{ this.ConveyorlineOut.data.command.taskNum }}</div>
|
<div class="content ">托盘号：{{ this.ConveyorlineOut.data.command.barcode }}</div>
|
<div class="content ">终点地址：{{ this.ConveyorlineOut.data.command.targetAddress}}</div>
|
<div class="content display">
|
<div>扫码站台入库请求：</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[0] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
<div class="content display">
|
<div>堆垛机出库站台请求：</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[2] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
<div class="content display">
|
<div>堆垛机入库站台请求</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[4] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
<div class="content display">
|
<div>线体出库口请求：</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[6] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
</div>
|
<div style="margin-left: 40px;">
|
<div class="Signal">写入信号：</div>
|
<div class="content ">任务号：{{ this.ConveyorlineOut.data.commandWrite.taskNum }}</div>
|
<div class="content ">托盘号：{{ this.ConveyorlineOut.data.commandWrite.barcode }}</div>
|
<div class="content ">终点地址：{{ this.ConveyorlineOut.data.commandWrite.targetAddress}}</div>
|
<div class="content display">
|
<div>扫码站台入库请求：</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[1] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
<div class="content display">
|
<div>堆垛机出库站台请求：</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[3] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
<div class="content display">
|
<div>堆垛机入库站台请求</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[5] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
<div class="content display">
|
<div>线体出库口请求：</div>
|
<div
|
:class="this.ConveyorlineOut.data.writeInteractiveSignal[7] != true ? 'bool_false' : 'bool_true'">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="静置库" id="print-content">
|
|
</el-tab-pane>
|
<el-tab-pane label="分容库" id="print-content">
|
|
</el-tab-pane><el-tab-pane label="高温库" id="print-content">
|
|
</el-tab-pane>
|
<el-tab-pane label="常温库" id="print-content">
|
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive } from 'vue'
|
import eventBus from "../uitils/eventBus";
|
export default {
|
setup() {
|
return {
|
StackerOne: {
|
deviceName: "",
|
data: {},
|
},
|
ConveyorlineOut: {
|
deviceName: "",
|
data: {
|
command: {},
|
commandWrite: {},
|
writeInteractiveSignal:[],
|
},
|
},
|
ConveyorlineIn: {
|
deviceName: "",
|
data: {
|
command: {},
|
commandWrite: {},
|
writeInteractiveSignal:[],
|
},
|
}
|
}
|
|
},
|
methods: {
|
intToBitArrayFromBinaryString (num, numBits){
|
// 将整数转换为二进制字符串，并使用padStart方法补足到指定的位数（前面补0）
|
let binaryString = num.toString(2).padStart(numBits, '0');
|
let bitArray = [];
|
for (let i = 0; i < numBits; i++) {
|
// 直接根据字符串中字符是否为'1'来确定每一位的值（转换为布尔值）
|
bitArray.push(binaryString[i] === '1');
|
}
|
return bitArray;
|
}
|
},
|
mounted() {
|
eventBus.on('stackerData', eventData => {
|
if (eventData.deviceName == "陈化1号堆垛机") {
|
this.StackerOne.deviceName = eventData.deviceName;
|
this.StackerOne.data = eventData.data
|
}
|
// console.log(eventData);
|
})
|
eventBus.on('locationData', eventData => {
|
console.log(eventData);
|
if (eventData.deviceName == "陈化出库输送线") {
|
this.ConveyorlineOut.deviceName = eventData.deviceName;
|
this.ConveyorlineOut.data = eventData.data
|
}
|
if (eventData.data.childDeviceCode == '1018') {
|
this.ConveyorlineIn.deviceName = eventData.deviceName;
|
this.ConveyorlineIn.data = eventData.data
|
let number = eventData.data.commandWrite.writeInteractiveSignal
|
this.ConveyorlineIn.data.writeInteractiveSignal = this.intToBitArrayFromBinaryString(number, 8);
|
console.log(this.ConveyorlineIn.data.writeInteractiveSignal);
|
}
|
})
|
}
|
}
|
</script>
|
|
<style scoped>
|
.title {
|
line-height: 70vh;
|
text-align: center;
|
font-size: 28px;
|
color: orange;
|
}
|
|
.bool_true {
|
width: 30px;
|
height: 20px;
|
margin-top: 10px;
|
margin-left: 10px;
|
background-color: rgb(99, 155, 16);
|
}
|
|
.bool_info {
|
width: 30px;
|
height: 10px;
|
background-color: #ccc;
|
}
|
|
.StackerOne {
|
width: 100%;
|
margin-bottom: 10px;
|
padding-left: 30px;
|
font-size: 25px;
|
border: 1px solid #ccc;
|
}
|
|
.ConveyorlineOut {
|
width: 100%;
|
margin-bottom: 10px;
|
padding-left: 30px;
|
font-size: 25px;
|
border: 1px solid #ccc;
|
}
|
|
.bool_false {
|
display: block;
|
width: 30px;
|
height: 20px;
|
margin-top: 10px;
|
margin-left: 10px;
|
background-color: rgb(204, 71, 71);
|
}
|
|
.content {
|
margin-bottom: 20px;
|
}
|
.Signal{
|
margin-bottom: 20px;
|
color:blueviolet;
|
}
|
.display {
|
display: flex;
|
}
|
</style>
|
