From 06eb604f71605c47f015b88b1620b72b6f69df8c Mon Sep 17 00:00:00 2001 From: helongyang <647556386@qq.com> Date: 星期一, 22 九月 2025 05:20:41 +0800 Subject: [PATCH] 功能增加,代码优化 --- 代码管理/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/BoardWarehouse.vue | 360 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 328 insertions(+), 32 deletions(-) diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/BoardWarehouse.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/BoardWarehouse.vue" index 8b42e03..0e5e0f5 100644 --- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/BoardWarehouse.vue" +++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/BoardWarehouse.vue" @@ -1,45 +1,341 @@ <template> - <div class="message-container"> - <div class="item" v-for="(item, index) in list" :key="index"> - <div class="title">{{ item.title }}({{ item.date }})</div> - <div class="content">{{ item.message }}</div> + <div id="title"> + <div id="bkuang" style="border-top: none"> + <!-- BC浠撳爢鍨涙満鐘舵�侀潰鏉� --> + <div class="skuang"> + <div class="bcuname">鏉挎枡浠撳爢鍨涙満</div> + <div class="bcankuang"> + <div class="xname">鍫嗗灈鏈虹姸鎬�:</div> + <div class="xbci" :title="bcData.R_BC_Status">{{ bcData.R_BC_Status || '-' }}</div> + </div> + <div class="bcankuang"> + <div class="xname">鍫嗗灈鏈烘墜鑷姩鐘舵��:</div> + <div class="xbci" :title="bcData.R_BC_AutoStatus">{{ bcData.R_BC_AutoStatus || '-' }}</div> + </div> + <div class="bcankuang"> + <div class="xname">姝e湪鎵ц鐨勪换鍔″彿:</div> + <div class="xbci" :title="bcData.R_BC_TaskNum">{{ bcData.R_BC_TaskNum || '-' }}</div> + </div> + <div class="bcankuang"> + <div class="xname">鍫嗗灈鏈哄伐浣滅姸鎬�:</div> + <div class="xbci" :title="bcData.R_BC_WorkStatus">{{ bcData.R_BC_WorkStatus || '-' }}</div> + </div> + <div class="bcankuang"> + <div class="xname">浣滀笟绫诲瀷:</div> + <div class="xbci" :title="bcData.R_BC_WorkType">{{ bcData.R_BC_WorkType || '-' }}</div> + </div> + <div class="bcankuang"> + <div class="xname">鎵樼洏绫诲瀷:</div> + <div class="xbci" :title="bcData.R_BC_TrayType">{{ bcData.R_BC_TrayType || '-' }}</div> + </div> + </div> + + + </div> </div> </template> <script> +import { ref, nextTick, watch, onUnmounted } from "vue"; +import { useStore } from "vuex"; +import { onMounted } from "vue"; + export default { - props: { - list: { - type: Array, - default: () => { - return []; - } - } + data() { + return { + xuan: 0 + }; }, - created() { - if (!this.list.length) { - this.list.push({ - title: '娑堟伅娴嬭瘯鏍噏weqweqweqw棰�', - message: '娑堟伅娴嬭瘯鍐呭娑堟伅娴嬭瘯鍐呭娑堟伅娴嬭瘯鍐呭娑堟伅娴嬭瘯鍐呭', - date: '2022-05-02 03:10' + setup() { + const store = useStore(); + // 浠呭瓨鍌˙C鏁版嵁锛屼笌鍏朵粬鏁版嵁闅旂 + const bcData = ref({}); + + // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽棯鐑侀棶棰� + const UPDATE_DELAY = 300; // 寤惰繜300ms鏇存柊UI + let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚� + + // BC鏁版嵁鏄犲皠瑙勫垯 + const bcStatusMap = { + R_BC_Status: { + 1: "姝e父", + 2: "鏁呴殰", + 3: "鎬ュ仠", + }, + R_BC_AutoStatus: { + 0: "缁翠慨", + 1: "鎵嬪姩", + 2: "鍗婅嚜鍔�", + 3: "鑷姩", + }, + R_BC_WorkStatus: { + 0: "寰呮満", + 1: "鍙栬揣涓�", + 2: "鍙栬揣瀹屾垚", + 4: "鏀捐揣涓�", + 5: "鏀捐揣瀹屾垚", + 6: "浠诲姟瀹屾垚", + }, + R_BC_WorkType: { + 0: "鏃犱綔涓氫换鍔�(0)", + 1: "鍙栨斁璐т綔涓�(1)", + 2: "鍙彇璐т綔涓�(2)", + 3: "鍙斁璐т綔涓�(3)", + 4: "绉诲姩鍒版寚瀹氫綅缃�" + }, + R_BC_TrayType: { + "-1": "绌虹(-1)", + 1: "灏忔墭鐩�(1)", + 2: "涓墭鐩�(2)", + 3: "澶ф墭鐩�(3)", + 4: "鐗瑰ぇ鎵樼洏(4)", + } + }; + + // BC瀛楁鍒嗙粍 + const bcFieldGroups = { + permissionFields: { + keys: ["R_BC_IsCanPut1", "R_BC_IsCanTake1", "R_BC_IsCanPut2", "R_BC_IsCanTake2", + "R_BC_IsCanPut3", "R_BC_IsCanTake3", "R_BC_IsCanPut4", "R_BC_IsCanTake4"], + map: { true: "鏄�", false: "鍚�" } + }, + requestFields: { + keys: ["W_BC_PutRequest1", "W_BC_TakeRequest1", "W_BC_PutRequest2", "W_BC_TakeRequest2", + "W_BC_PutRequest3", "W_BC_TakeRequest3", "W_BC_PutRequest4", "W_BC_TakeRequest4"], + map: { true: "鏄�", false: "鍚�" } + }, + finishFields: { + keys: ["W_BC_PutFinish1", "W_BC_TakeFinish1", "W_BC_PutFinish2", "W_BC_TakeFinish2", + "W_BC_PutFinish3", "W_BC_TakeFinish3", "W_BC_PutFinish4", "W_BC_TakeFinish4"], + map: { true: "鏄�", false: "鍚�" } + }, + palletTypeFields: { + keys: ["R_BC_TakePalletType1", "R_BC_TakePalletType2", "R_BC_TakePalletType3", "R_BC_TakePalletType4", + "W_BC_PutPalletType1", "W_BC_PutPalletType2", "W_BC_PutPalletType3", "W_BC_PutPalletType4"], + map: { "-1": "绌虹(-1)", 1: "灏忔墭鐩�(1)", 2: "涓墭鐩�(2)", 3: "澶ф墭鐩�(3)", 4: "鐗瑰ぇ鎵樼洏(4)" } + } + }; + + // 澶勭悊BC鍘熷鏁版嵁 + const processBCData = (rawData) => { + if (!rawData) return {}; + const processedData = { ...rawData }; + + // 澶勭悊鏍稿績鐘舵�佸瓧娈� + Object.keys(bcStatusMap).forEach(key => { + if (processedData.hasOwnProperty(key)) { + processedData[key] = bcStatusMap[key][processedData[key]] || processedData[key]; + } }); - } + + // 澶勭悊鍒嗙粍瀛楁 + Object.values(bcFieldGroups).forEach(group => { + group.keys.forEach(key => { + if (processedData.hasOwnProperty(key)) { + processedData[key] = group.map[processedData[key]] || processedData[key]; + } + }); + }); + + return processedData; + }; + + // 寤惰繜鏇存柊BC鏁版嵁锛岄伩鍏嶉珮棰戝埛鏂� + const delayedUpdateBCData = (newRawData) => { + if (updateTimer) { + clearTimeout(updateTimer); + } + + updateTimer = setTimeout(() => { + // 鍙鐞嗗寘鍚獴C鐗瑰緛瀛楁鐨勬暟鎹� + if (newRawData && newRawData.R_BC_Status !== undefined) { + bcData.value = processBCData(newRawData); + + // 鏇存柊鏍峰紡 + nextTick(() => { + const valueElements = document.getElementsByClassName("xbci"); + for (let i = 0; i < valueElements.length; i++) { + if (valueElements[i].innerHTML === "鏄�") { + valueElements[i].style.color = "yellow"; + } else if (valueElements[i].innerHTML === "鍚�") { + valueElements[i].style.color = "red"; + } + } + }); + } + }, UPDATE_DELAY); + }; + + onMounted(() => { + // 鍒濆鍔犺浇鏁版嵁 + const initialData = store.state.homedata; + if (initialData && initialData.R_BC_Status !== undefined) { + bcData.value = processBCData(initialData); + } + + // 鐩戝惉鏁版嵁鍙樺寲锛屽彧澶勭悊BC鏁版嵁 + const unwatch = watch( + () => store.state.homedata, + (newData) => { + if (newData && newData.R_BC_Status !== undefined) { + delayedUpdateBCData(newData); + } + }, + { deep: true } + ); + + // 缁勪欢鍗歌浇鏃舵竻鐞� + onUnmounted(() => { + unwatch(); + if (updateTimer) { + clearTimeout(updateTimer); + } + }); + }); + + return { + bcData + }; } }; </script> -<style scoped lang="less"> -.message-container { - .title { - padding-bottom: 10px; - } - .item { - border-bottom: 1px solid #eee; - padding: 10px 20px; - } - .content { - color: #7e7e7e; - font-size: 13px; - } + +<style scoped> +.ding { + float: left; + width: 20px; + height: 20px; + margin-top: 7px; } -</style> \ No newline at end of file +.yan { + color: white; + float: left; + font-size: 25px; +} +.dakuang { + width: 250px; + height: 50px; + position: absolute; + top: 150px; + left: 200px; +} +#xiugai { + width: 100px; + height: 30px; + float: left; + border-radius: 5px; + text-align: center; + line-height: 30px; + cursor: pointer; + border: 1px solid white; + color: white; + background: rgba(255, 255, 255, 0.5); + font-size: 25px; + position: absolute; + top: 150px; + left: 450px; +} +#xiugai:hover { + background: #f60; +} +#shu1, +#shu2 { + width: 200px; + height: 30px; + float: left; + margin-top: 0px; + margin-right: 0px; + border-radius: 5px; + border: 1px solid white; +} +#guan { + width: 40px; + height: 40px; + float: left; + font-size: 1.1cqw; + text-align: center; + line-height: 40px; + cursor: pointer; + margin-left: 560px; + color: white; + position: absolute; +} +#ti { + width: 600px; + height: 300px; + position: relative; + background: rgba(255, 255, 255, 1); + border-radius: 10px; + top: 230px; + left: 35%; + display: none; + background-image: url("../../img/1.png"); + background-repeat: no-repeat; + background-size: 170%; + background-position: -220px 0px; +} +.bcuname { + width: 100%; + height: 5vh; + float: left; + text-align: center; + line-height: 50px; + font-weight: 700; + font-size: 1.1cqw; + color: white; +} +.xname { + width: 70%; + height: 80px; + float: left; + line-height: 7vh; + font-size: 1.1cqw; + color: white; +} +.xbci { + width: 30%; + height: 7vh; + float: left; + line-height: 50px; + font-size: 1.1cqw; + color: rgb(242, 242, 50); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.bcankuang { + width: 45%; + height: 3vh; + margin-top: 10px; + margin-left: 5%; + float: left; +} +#title { + float: left; + width: 95%; + height: 88vh; + margin-top: 40px; + margin-left: 3%; + background-image: url("../../img/1.png"); + background-repeat: no-repeat; + background-size: 100%; + container-type: inline-size; +} +#bkuang { + width: 100%; + height: 55vh; + float: left; +} +.skuang { + width: 31%; + height: 55vh; + float: left; + border-top: none; + border-left: none; + border-bottom: none; + background: rgba(255, 255, 255, 0.2); + margin-left: 1.7%; + border-radius: 10px; +} +</style> -- Gitblit v1.9.3