From 3cd89b88edd913530062e13e20e7d6b866fd190f Mon Sep 17 00:00:00 2001 From: helongyang <647556386@qq.com> Date: 星期五, 19 九月 2025 10:02:43 +0800 Subject: [PATCH] 更新 --- 代码管理/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/DryFilmWarehouse.vue | 302 +++++++++++++++++++++++--------------------------- 1 files changed, 139 insertions(+), 163 deletions(-) diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/DryFilmWarehouse.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/DryFilmWarehouse.vue" index 94a238c..d04a45a 100644 --- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/DryFilmWarehouse.vue" +++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/DryFilmWarehouse.vue" @@ -1,151 +1,156 @@ <template> <div id="title"> <div id="bkuang" style="border-top: none"> + <!-- GM浠撳爢鍨涙満鐘舵�侀潰鏉� --> <div class="skuang"> <div class="zhuname">骞茶啘浠撳爢鍨涙満</div> <div class="zhankuang"> <div class="xname">鍫嗗灈鏈虹姸鎬�:</div> - <div class="xzhi" :title="data.R_GM_Status">{{ data.R_GM_Status }}</div> + <div class="xzhi" :title="gmData.R_GM_Status">{{ gmData.R_GM_Status || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍫嗗灈鏈烘墜鑷姩鐘舵��:</div> - <div class="xzhi" :title="data.R_GM_AutoStatus">{{ data.R_GM_AutoStatus }}</div> + <div class="xzhi" :title="gmData.R_GM_AutoStatus">{{ gmData.R_GM_AutoStatus || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">姝e湪鎵ц鐨勪换鍔″彿:</div> - <div class="xzhi" :title="data.R_GM_TaskNum">{{ data.R_GM_TaskNum }}</div> + <div class="xzhi" :title="gmData.R_GM_TaskNum">{{ gmData.R_GM_TaskNum || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍫嗗灈鏈哄伐浣滅姸鎬�:</div> - <div class="xzhi" :title="data.R_GM_WorkStatus">{{ data.R_GM_WorkStatus }}</div> + <div class="xzhi" :title="gmData.R_GM_WorkStatus">{{ gmData.R_GM_WorkStatus || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">浣滀笟绫诲瀷:</div> - <div class="xzhi" :title="data.R_GM_WorkType">{{ data.R_GM_WorkType }}</div> + <div class="xzhi" :title="gmData.R_GM_WorkType">{{ gmData.R_GM_WorkType || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鎵樼洏绫诲瀷:</div> - <div class="xzhi" :title="data.R_GM_TrayType">{{ data.R_GM_TrayType }}</div> + <div class="xzhi" :title="gmData.R_GM_TrayType">{{ gmData.R_GM_TrayType || '-' }}</div> </div> </div> + + <!-- GM鍏宠仈绔欏彴锛堝叆搴�7003锛� --> <div class="skuang"> <div class="zhuname">鍏ュ簱7003绔欏彴</div> <div class="zhankuang"> <div class="xname">璇诲彇绠变綋鐮�(璇�):</div> - <div class="xzhi" :title="data.R_GM_Boxcode">{{ data.R_GM_Boxcode }}</div> + <div class="xzhi" :title="gmData.R_GM_Boxcode">{{ gmData.R_GM_Boxcode || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鎻℃墜淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_HandShake3">{{ data.R_GM_HandShake3 }}</div> + <div class="xzhi" :title="gmData.R_GM_HandShake3">{{ gmData.R_GM_HandShake3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鑱旀満(璇�):</div> - <div class="xzhi" :title="data.R_GM_Online3">{{ data.R_GM_Online3 }}</div> + <div class="xzhi" :title="gmData.R_GM_Online3">{{ gmData.R_GM_Online3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁绌洪棽(璇�):</div> - <div class="xzhi" :title="data.R_GM_Free3">{{ data.R_GM_Free3 }}</div> + <div class="xzhi" :title="gmData.R_GM_Free3">{{ gmData.R_GM_Free3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鏈夎揣(璇�):</div> - <div class="xzhi" :title="data.R_GM_Goods3">{{ data.R_GM_Goods3 }}</div> + <div class="xzhi" :title="gmData.R_GM_Goods3">{{ gmData.R_GM_Goods3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鏁呴殰(璇�):</div> - <div class="xzhi" :title="data.R_GM_Alarm3">{{ data.R_GM_Alarm3 }}</div> + <div class="xzhi" :title="gmData.R_GM_Alarm3">{{ gmData.R_GM_Alarm3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">璇锋眰淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_STB3">{{ data.R_GM_STB3 }}</div> + <div class="xzhi" :title="gmData.R_GM_STB3">{{ gmData.R_GM_STB3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍝嶅簲淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_ACK3">{{ data.R_GM_ACK3 }}</div> + <div class="xzhi" :title="gmData.R_GM_ACK3">{{ gmData.R_GM_ACK3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">璇锋眰淇″彿(鍐�):</div> - <div class="xzhi" :title="data.W_GM_STB3">{{ data.W_GM_STB3 }}</div> + <div class="xzhi" :title="gmData.W_GM_STB3">{{ gmData.W_GM_STB3 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍝嶅簲淇″彿(鍐�):</div> - <div class="xzhi" :title="data.W_GM_ACK3">{{ data.W_GM_ACK3 }}</div> + <div class="xzhi" :title="gmData.W_GM_ACK3">{{ gmData.W_GM_ACK3 || '-' }}</div> </div> </div> - + + <!-- GM鍏宠仈绔欏彴锛堝嚭搴�7004+7005锛� --> <div class="skuang"> <div class="zhuname">鍑哄簱缁堢偣7004绔欏彴</div> <div class="zhankuang"> <div class="xname">鎻℃墜淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_HandShake4">{{ data.R_GM_HandShake4 }}</div> + <div class="xzhi" :title="gmData.R_GM_HandShake4">{{ gmData.R_GM_HandShake4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鑱旀満(璇�):</div> - <div class="xzhi" :title="data.R_GM_Online4">{{ data.R_GM_Online4 }}</div> + <div class="xzhi" :title="gmData.R_GM_Online4">{{ gmData.R_GM_Online4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁绌洪棽(璇�):</div> - <div class="xzhi" :title="data.R_GM_Free4">{{ data.R_GM_Free4 }}</div> + <div class="xzhi" :title="gmData.R_GM_Free4">{{ gmData.R_GM_Free4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鏈夎揣(璇�):</div> - <div class="xzhi" :title="data.R_GM_Goods4">{{ data.R_GM_Goods4 }}</div> + <div class="xzhi" :title="gmData.R_GM_Goods4">{{ gmData.R_GM_Goods4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鏁呴殰(璇�):</div> - <div class="xzhi" :title="data.R_GM_Alarm4">{{ data.R_GM_Alarm4 }}</div> + <div class="xzhi" :title="gmData.R_GM_Alarm4">{{ gmData.R_GM_Alarm4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">璇锋眰淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_STB4">{{ data.R_GM_STB4 }}</div> + <div class="xzhi" :title="gmData.R_GM_STB4">{{ gmData.R_GM_STB4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍝嶅簲淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_ACK4">{{ data.R_GM_ACK4 }}</div> + <div class="xzhi" :title="gmData.R_GM_ACK4">{{ gmData.R_GM_ACK4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">璇锋眰淇″彿(鍐�):</div> - <div class="xzhi" :title="data.W_GM_STB4">{{ data.W_GM_STB4 }}</div> + <div class="xzhi" :title="gmData.W_GM_STB4">{{ gmData.W_GM_STB4 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍝嶅簲淇″彿(鍐�):</div> - <div class="xzhi" :title="data.W_GM_ACK4">{{ data.W_GM_ACK4 }}</div> + <div class="xzhi" :title="gmData.W_GM_ACK4">{{ gmData.W_GM_ACK4 || '-' }}</div> </div> + <div class="zhuname">鍑哄簱7005绔欏彴</div> <div class="zhankuang"> <div class="xname">鎻℃墜淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_HandShake5">{{ data.R_GM_HandShake5 }}</div> + <div class="xzhi" :title="gmData.R_GM_HandShake5">{{ gmData.R_GM_HandShake5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鑱旀満(璇�):</div> - <div class="xzhi" :title="data.R_GM_Online5">{{ data.R_GM_Online5 }}</div> + <div class="xzhi" :title="gmData.R_GM_Online5">{{ gmData.R_GM_Online5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁绌洪棽(璇�):</div> - <div class="xzhi" :title="data.R_GM_Free5">{{ data.R_GM_Free5 }}</div> + <div class="xzhi" :title="gmData.R_GM_Free5">{{ gmData.R_GM_Free5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鏈夎揣(璇�):</div> - <div class="xzhi" :title="data.R_GM_Goods5">{{ data.R_GM_Goods5 }}</div> + <div class="xzhi" :title="gmData.R_GM_Goods5">{{ gmData.R_GM_Goods5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鏄惁鏁呴殰(璇�):</div> - <div class="xzhi" :title="data.R_GM_Alarm5">{{ data.R_GM_Alarm5 }}</div> + <div class="xzhi" :title="gmData.R_GM_Alarm5">{{ gmData.R_GM_Alarm5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">璇锋眰淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_STB5">{{ data.R_GM_STB5 }}</div> + <div class="xzhi" :title="gmData.R_GM_STB5">{{ gmData.R_GM_STB5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍝嶅簲淇″彿(璇�):</div> - <div class="xzhi" :title="data.R_GM_ACK5">{{ data.R_GM_ACK5 }}</div> + <div class="xzhi" :title="gmData.R_GM_ACK5">{{ gmData.R_GM_ACK5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">璇锋眰淇″彿(鍐�):</div> - <div class="xzhi" :title="data.W_GM_STB5">{{ data.W_GM_STB5 }}</div> + <div class="xzhi" :title="gmData.W_GM_STB5">{{ gmData.W_GM_STB5 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍝嶅簲淇″彿(鍐�):</div> - <div class="xzhi" :title="data.W_GM_ACK5">{{ data.W_GM_ACK5 }}</div> + <div class="xzhi" :title="gmData.W_GM_ACK5">{{ gmData.W_GM_ACK5 || '-' }}</div> </div> </div> </div> @@ -153,7 +158,7 @@ </template> <script> -import { ref, nextTick } from "vue"; +import { ref, nextTick, watch, onUnmounted } from "vue"; import { useStore } from "vuex"; import { onMounted } from "vue"; @@ -163,162 +168,132 @@ xuan: 0 }; }, - methods: { - }, setup() { const store = useStore(); - const data = ref({}); + // 浠呭瓨鍌℅M鏁版嵁锛屼笌鍏朵粬浠撴暟鎹殧绂� + const gmData = ref({}); - // 1. 瀹氫箟鏅�氬瓧娈电殑鏄犲皠瑙勫垯 - const statusMap = { - R_GM_Status: { - 1: "姝e父", - 2: "鏁呴殰", - 3: "鎬ュ仠", + // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽棯鐑侀棶棰� + const UPDATE_DELAY = 300; // 300ms寤惰繜锛屽钩琛″疄鏃舵�у拰鐣岄潰绋冲畾鎬� + let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚� + + // GM鏁版嵁鏄犲皠瑙勫垯閰嶇疆锛堟寜鍔熻兘鍒嗙粍锛� + const gmStatusConfig = { + coreStatus: { + R_GM_Status: { 1: "姝e父", 2: "鏁呴殰", 3: "鎬ュ仠" }, + R_GM_AutoStatus: { 0: "缁翠慨", 1: "鎵嬪姩", 2: "鍗婅嚜鍔�", 3: "鑷姩" }, + R_GM_WorkStatus: { 0: "寰呮満", 1: "鍙栬揣涓�", 2: "鍙栬揣瀹屾垚", 4: "鏀捐揣涓�", 5: "鏀捐揣瀹屾垚", 6: "浠诲姟瀹屾垚" }, + R_GM_WorkType: { 0: "鏃犱綔涓氫换鍔�(0)", 1: "鍙栨斁璐т綔涓�(1)", 2: "鍙彇璐т綔涓�(2)", 3: "鍙斁璐т綔涓�(3)", 4: "绉诲姩鍒版寚瀹氫綅缃�" }, + R_GM_TrayType: { "-1": "绌虹(-1)", 1: "灏忔墭鐩�(1)", 2: "涓墭鐩�(2)", 3: "澶ф墭鐩�(3)", 4: "鐗瑰ぇ鎵樼洏(4)" } }, - R_GM_AutoStatus: { - 0: "缁翠慨", - 1: "鎵嬪姩", - 2: "鍗婅嚜鍔�", - 3: "鑷姩", + onlineStatus: { + keys: ["R_GM_Online3", "R_GM_Online4", "R_GM_Online5"], + map: { true: "鑱旀満", false: "鑴辨満" } }, - R_GM_WorkStatus: { - 0: "寰呮満", - 1: "鍙栬揣涓�", - 2: "鍙栬揣瀹屾垚", - 4: "鏀捐揣涓�", - 5: "鏀捐揣瀹屾垚", - 6: "浠诲姟瀹屾垚", + alarmStatus: { + keys: ["R_GM_Alarm3", "R_GM_Alarm4", "R_GM_Alarm5"], + map: { true: "鏁呴殰", false: "姝e父" } }, - R_GM_WorkType: { - 0: "鏃犱綔涓氫换鍔�(0)", - 1: "鍙栨斁璐т綔涓�(1)", - 2: "鍙彇璐т綔涓�(2)", - 3: "鍙斁璐т綔涓�(3)", - 4: "绉诲姩鍒版寚瀹氫綅缃�" + freeStatus: { + keys: ["R_GM_Free3", "R_GM_Free4", "R_GM_Free5"], + map: { true: "绌洪棽", false: "绻佸繖" } }, - R_GM_TrayType: { - "-1": "绌虹(-1)", - 1: "灏忔墭鐩�(1)", - 2: "涓墭鐩�(2)", - 3: "澶ф墭鐩�(3)", - 4: "鐗瑰ぇ鎵樼洏(4)", + goodsStatus: { + keys: ["R_GM_Goods3", "R_GM_Goods4", "R_GM_Goods5"], + map: { true: "鏈夎揣", false: "鏃犺揣" } + }, + signalFields: { + keys: [ + "R_GM_HandShake3", "R_GM_STB3", "R_GM_ACK3", "W_GM_STB3", "W_GM_ACK3", + "R_GM_HandShake4", "R_GM_STB4", "R_GM_ACK4", "W_GM_STB4", "W_GM_ACK4", + "R_GM_HandShake5", "R_GM_STB5", "R_GM_ACK5", "W_GM_STB5", "W_GM_ACK5" + ], + map: { true: "鏄�", false: "鍚�" } } }; - const onlines = [ - "R_GM_Online3","R_GM_Online4", - "R_GM_Online5", - ] - const online = { - 1: "鑱旀満", - 0: "鑴辨満" - }; - const alarms = [ - "R_GM_Alarm3","R_GM_Alarm4", - "R_GM_Alarm5", - ] - const alarm = { - 1: "鏁呴殰", - 0: "姝e父" - }; - const frees = [ - "R_GM_Free3","R_GM_Free4", - "R_GM_Free5", - ] - const free = { - 1: "绌洪棽", - 0: "绻佸繖" - }; - const goods = [ - "R_GM_Goods3", "R_GM_Goods4", - "R_GM_Goods5", - ] - const good = { - 1: "鏈夎揣", - 0: "鏃犺揣" - }; - // 2. 瀹氫箟闇�瑕佸叡鐢ㄦ槧灏勮鍒欑殑瀛楁鍒楄〃鍜屽搴旂殑鏄犲皠瑙勫垯 - const booleanFields = [ - "R_GM_HandShake3", - "R_GM_STB3", - "R_GM_ACK3", "W_GM_STB3", - "W_GM_ACK3", - "R_GM_HandShake4", - "R_GM_STB4", - "R_GM_ACK4", "W_GM_STB4", - "W_GM_ACK4", - "R_GM_HandShake5", - "R_GM_STB5", - "R_GM_ACK5", "W_GM_STB5", - "W_GM_ACK5", - ]; - const booleanMap = { - true: "鏄�", - false: "鍚�" - }; - // 澶勭悊鏁版嵁锛屽厛澶勭悊鏅�氭槧灏勶紝鍐嶆壒閲忓鐞嗗叡鐢ㄦ槧灏勭殑瀛楁 - const processData = (rawData) => { + // 澶勭悊GM鍘熷鏁版嵁 + const processGMData = (rawData) => { if (!rawData) return {}; const processed = { ...rawData }; - // 澶勭悊鏅�氬瓧娈垫槧灏� - Object.keys(statusMap).forEach(key => { + // 澶勭悊鏍稿績鐘舵�佸瓧娈� + Object.entries(gmStatusConfig.coreStatus).forEach(([key, map]) => { if (processed.hasOwnProperty(key)) { - const map = statusMap[key]; processed[key] = map[processed[key]] || processed[key]; } }); - // 鎵归噺澶勭悊鍏辩敤鏄犲皠瑙勫垯鐨勫瓧娈� - booleanFields.forEach(key => { - if (processed.hasOwnProperty(key)) { - processed[key] = booleanMap[processed[key]] || processed[key]; - } - }); - onlines.forEach(key => { - if (processed.hasOwnProperty(key)) { - processed[key] = online[processed[key]] || processed[key]; - } - }); - alarms.forEach(key => { - if (processed.hasOwnProperty(key)) { - processed[key] = alarm[processed[key]] || processed[key]; - } - }); - frees.forEach(key => { - if (processed.hasOwnProperty(key)) { - processed[key] = free[processed[key]] || processed[key]; - } - }); - goods.forEach(key => { - if (processed.hasOwnProperty(key)) { - processed[key] = good[processed[key]] || processed[key]; - } + // 鎵归噺澶勭悊鍒嗙粍瀛楁 + [ + gmStatusConfig.onlineStatus, + gmStatusConfig.alarmStatus, + gmStatusConfig.freeStatus, + gmStatusConfig.goodsStatus, + gmStatusConfig.signalFields + ].forEach(group => { + group.keys.forEach(key => { + if (processed.hasOwnProperty(key)) { + processed[key] = group.map[processed[key]] || processed[key]; + } + }); }); return processed; }; - onMounted(() => { - nextTick(() => { - setInterval(() => { - const rawData = store.state.homedata; - data.value = processData(rawData); - const xian = document.getElementsByClassName("xzhi"); - for (let i = 0; i < xian.length; i++) { - if (xian[i].innerHTML === "鏄�" || xian[i].innerHTML === "鑱旀満") { - xian[i].style.color = "yellow"; - } else if (xian[i].innerHTML === "鍚�") { - xian[i].style.color = "red"; + // 寤惰繜鏇存柊GM鏁版嵁锛岄伩鍏嶉珮棰戝埛鏂板鑷寸殑闂儊 + const delayedUpdateGMData = (newRawData) => { + if (updateTimer) clearTimeout(updateTimer); + + updateTimer = setTimeout(() => { + // 浠呭鐞嗗寘鍚獹M鐗瑰緛瀛楁鐨勬暟鎹� + if (newRawData && newRawData.R_GM_Status !== undefined) { + gmData.value = processGMData(newRawData); + + // 鏇存柊鏍峰紡 + nextTick(() => { + const valueElements = document.getElementsByClassName("xzhi"); + for (let i = 0; i < valueElements.length; i++) { + const text = valueElements[i].innerHTML; + if (text === "鏄�" || text === "鑱旀満") { + valueElements[i].style.color = "yellow"; + } else if (text === "鍚�") { + valueElements[i].style.color = "red"; + } } + }); + } + }, UPDATE_DELAY); + }; + + onMounted(() => { + // 鍒濆鍔犺浇鏁版嵁 + const initialData = store.state.homedata; + if (initialData && initialData.R_GM_Status !== undefined) { + gmData.value = processGMData(initialData); + } + + // 鐩戝惉鏁版嵁鍙樺寲锛屽彧澶勭悊GM鏁版嵁 + const unwatch = watch( + () => store.state.homedata, + (newData) => { + if (newData && newData.R_GM_Status !== undefined) { + delayedUpdateGMData(newData); } - }); + }, + { deep: true } + ); + + // 缁勪欢鍗歌浇鏃舵竻鐞嗚祫婧� + onUnmounted(() => { + unwatch(); + if (updateTimer) clearTimeout(updateTimer); }); }); return { - data, + gmData }; } }; @@ -462,3 +437,4 @@ border-radius: 10px; } </style> + \ No newline at end of file -- Gitblit v1.9.3