From e76c2f36a65dfb36a6ad6a9f7db93d90d5c54b32 Mon Sep 17 00:00:00 2001 From: 肖洋 <cathay_xy@163.com> Date: 星期六, 21 十二月 2024 09:48:11 +0800 Subject: [PATCH] 重构AgingLibrary.vue,优化设备状态管理,添加堆垛机组件,改进数据监听逻辑 --- Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/AgingLibrary.vue | 206 +++++++++++++++++++++++++-------------------------- 1 files changed, 101 insertions(+), 105 deletions(-) diff --git a/Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/AgingLibrary.vue b/Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/AgingLibrary.vue index 47c9bd9..e5de6b4 100644 --- a/Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/AgingLibrary.vue +++ b/Code Management/WCS/WIDESEAWCS_Client/src/views/Devicestatus/Craftlibrary/AgingLibrary.vue @@ -1,106 +1,102 @@ <template> - <div> - <div> - <div class="Stackerbox"> - <div class="card"> - <div class="card-header"> - <div> - <div class="card-body Stacker"> - {{ StackerOne.deviceName }} - </div> - </div> - </div> - <div class="card-body"> - <ul class="list-group"> - <li class="list-group-item list-group-item-secondary"> - 浠诲姟鍙凤細{{ StackerOne.data.currentTaskNum || '鏆傛棤浠诲姟鍙�' }} - </li> - <li :class="getStatusClass(StackerOne.data.stackerCraneAutoStatusDes)"> - 宸ヤ綔妯″紡锛歿{ StackerOne.data.stackerCraneAutoStatusDes }} - </li> - <li :class="getStatusClass(StackerOne.data.stackerCraneStatusDes)"> - 璁惧鐘舵�侊細{{ StackerOne.data.stackerCraneStatusDes }} - </li> - <li :class="getStatusClass(StackerOne.data.stackerCraneWorkStatusDes)"> - 宸ヤ綔鐘舵�侊細{{ StackerOne.data.stackerCraneWorkStatusDes }} - </li> - </ul> - </div> - </div> - </div> - </div> - <device-line v-for="device in devices" :key="device.deviceName" :device="device" /> - </div> -</template> - -<script setup> -import { onMounted, reactive, toRefs } from "vue"; -import eventBus from "@/uitils/eventBus"; -import DeviceLine from "@/components/DeviceLine.vue"; - -// 鍫嗗灈鏈� -const StackerOne = reactive({ - deviceName: "", - data: { - } -}); - -// 璁惧鍒楄〃锛堜慨鏀归噸澶嶈澶囧悕绉帮級 -const devices = reactive([ - { deviceName: "闄堝寲鍑哄簱杈撻�佺嚎", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } }, - { deviceName: "闄堝寲鍏ュ簱杈撻�佺嚎", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } }, - // { deviceName: "鍫嗗灈鏈�1", data: { command: {}, commandWrite: {}, writeInteractiveSignal: [] } }, - // Add all devices similarly... -]); - -// 鑾峰彇鐘舵�佺被鍚嶏紙浼樺寲鐘舵�佸垽鏂級 -const getStatusClass = (status) => { - if (status === '姝e父' || status === '鑷姩' || status === '寰呮満') { - return 'list-group-item list-group-item-success'; - } - if (status === '鏁呴殰' || status === '鍋滄満') { - return 'list-group-item list-group-item-danger'; - } - return 'list-group-item list-group-item-warning'; // 榛樿璀﹀憡鐘舵�� -}; - -// 鐩戝惉璁惧鏁版嵁鍙樺寲 -onMounted(() => { - eventBus.on('locationData', eventData => { - const device = devices.find(d => d.deviceName === eventData.deviceName); - if (device) { - // 浣跨敤鎵╁睍杩愮畻绗︽洿鏂板璞″睘鎬э紝淇濇寔鍝嶅簲鎬� - device.data = { ...device.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> \ No newline at end of file + <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> \ No newline at end of file -- Gitblit v1.9.3