<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> 
 |