<template>
|
<el-row>
|
<el-col :span="3">
|
|
<device-stacker v-for="stacker in Stackers" :key="stacker.deviceName" :Stacker="stacker"></device-stacker>
|
</el-col>
|
<el-col :span="21">
|
<device-line v-for="device in devices" :key="device.deviceName" :device="device" />
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup>
|
import { onMounted, reactive, toRefs } from "vue";
|
import eventBus from "@/uitils/eventBus";
|
import DeviceLine from "@/components/DeviceLine.vue";
|
import DeviceStacker from "@/components/DeviceStacker.vue";
|
|
// 堆垛机
|
const Stackers = reactive([]);
|
|
// 设备列表（修改重复设备名称）
|
const devices = reactive([]);
|
|
const intToBitArrayFromBinaryString = (num, numBits) => {
|
let binaryString = num.toString(2).padStart(numBits, '0');
|
return Array.from({ length: numBits }, (_, index) => binaryString[index] === '1');
|
};
|
|
// 监听设备数据变化
|
onMounted(() => {
|
eventBus.on('locationData', eventData => {
|
console.log(eventData)
|
if (eventData.deviceName === "陈化入库输送线"||eventData.deviceName === "陈化入库输送线") {
|
|
if (devices.length <= 0) {
|
devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.childDeviceCode });
|
}
|
else {
|
const device = devices.find(c => c.childDeviceCode == eventData.childDeviceCode)
|
if (device) {
|
const number = eventData.data.commandWrite.writeInteractiveSignal;
|
const writeInteractiveSignal = intToBitArrayFromBinaryString(number, 8)
|
eventData.data.writeInteractiveSignal = writeInteractiveSignal;
|
device.data = eventData.data
|
}
|
else {
|
const number = eventData.data.commandWrite.writeInteractiveSignal;
|
const writeInteractiveSignal = intToBitArrayFromBinaryString(number, 8)
|
eventData.data.writeInteractiveSignal = writeInteractiveSignal;
|
devices.push({ deviceName: eventData.deviceName, data: eventData.data, childDeviceCode: eventData.childDeviceCode });
|
}
|
}
|
}
|
});
|
eventBus.on('stackerData', eventData => {
|
if (eventData.deviceName == "陈化1号堆垛机"||eventData.deviceName == "陈化2号堆垛机") {
|
if (Stackers.length == 0) {
|
Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
|
}
|
else {
|
const Stacker = Stackers.find(c => c.deviceName == eventData.deviceName);
|
if (Stacker) {
|
Stacker.data = eventData.data
|
}
|
else {
|
Stackers.push({ deviceName: eventData.deviceName, data: eventData.data });
|
}
|
}
|
}
|
})
|
});
|
</script>
|
<style scoped>
|
.Stackerbox {
|
width: 220px;
|
float: left;
|
}
|
|
.Linebox {
|
width: 500px;
|
float: left;
|
}
|
|
.box1 {
|
float: left;
|
}
|
|
.card-body {
|
text-align: center;
|
border-radius: 6%;
|
}
|
|
.Stacker {
|
background-color: burlywood;
|
}
|
|
.lis {
|
float: left;
|
width: 233px;
|
}
|
</style>
|
