| <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.indexOf("陈化") != -1) { | 
|       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> |