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