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