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/InkWarehouse.vue | 177 +++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 112 insertions(+), 65 deletions(-) diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/InkWarehouse.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/InkWarehouse.vue" index dbc0396..23ed561 100644 --- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/InkWarehouse.vue" +++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/InkWarehouse.vue" @@ -1,95 +1,98 @@ <template> <div id="title"> <div id="bkuang" style="border-top: none"> + <!-- YM浠撳爢鍨涙満鐘舵�侀潰鏉� --> <div class="skuang"> <div class="zhuname">娌瑰ⅷ浠撳爢鍨涙満</div> <div class="zhankuang"> <div class="xname">鍫嗗灈鏈虹姸鎬�:</div> - <div class="xzhi" :title="data.R_YM_Status">{{ data.R_YM_Status }}</div> + <div class="xzhi" :title="ymData.R_YM_Status">{{ ymData.R_YM_Status || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍫嗗灈鏈烘墜鑷姩鐘舵��:</div> - <div class="xzhi" :title="data.R_YM_AutoStatus">{{ data.R_YM_AutoStatus }}</div> + <div class="xzhi" :title="ymData.R_YM_AutoStatus">{{ ymData.R_YM_AutoStatus || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">姝e湪鎵ц鐨勪换鍔″彿:</div> - <div class="xzhi" :title="data.R_YM_TaskNum">{{ data.R_YM_TaskNum }}</div> + <div class="xzhi" :title="ymData.R_YM_TaskNum">{{ ymData.R_YM_TaskNum || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍫嗗灈鏈哄伐浣滅姸鎬�:</div> - <div class="xzhi" :title="data.R_YM_WorkStatus">{{ data.R_YM_WorkStatus }}</div> + <div class="xzhi" :title="ymData.R_YM_WorkStatus">{{ ymData.R_YM_WorkStatus || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">浣滀笟绫诲瀷:</div> - <div class="xzhi" :title="data.R_YM_WorkType">{{ data.R_YM_WorkType }}</div> + <div class="xzhi" :title="ymData.R_YM_WorkType">{{ ymData.R_YM_WorkType || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鎵樼洏绫诲瀷:</div> - <div class="xzhi" :title="data.R_YM_TrayType">{{ data.R_YM_TrayType }}</div> + <div class="xzhi" :title="ymData.R_YM_TrayType">{{ ymData.R_YM_TrayType || '-' }}</div> </div> </div> + + <!-- YM鍏宠仈绔欏彴锛堝嚭鍏ュ簱9001锛� --> <div class="skuang"> <div class="zhuname">鍑哄叆搴�9001绔欏彴</div> <div class="zhankuang"> <div class="xname">鏈夎揣(璇�):</div> - <div class="xzhi" :title="data.R_YM_Tray1">{{ data.R_YM_Tray1 }}</div> + <div class="xzhi" :title="ymData.R_YM_Tray1">{{ ymData.R_YM_Tray1 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍏ュ簱鎵ц涓�(璇�):</div> - <div class="xzhi" :title="data.R_YM_Inbounding1">{{ data.R_YM_Inbounding1 }}</div> + <div class="xzhi" :title="ymData.R_YM_Inbounding1">{{ ymData.R_YM_Inbounding1 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鎻愬崌鏈虹┖闂�(璇�):</div> - <div class="xzhi" :title="data.R_YM_Leisure1">{{ data.R_YM_Leisure1 }}</div> + <div class="xzhi" :title="ymData.R_YM_Leisure1">{{ ymData.R_YM_Leisure1 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍑哄簱鎵ц涓�(璇�):</div> - <div class="xzhi" :title="data.R_YM_Outbounding1">{{ data.R_YM_Outbounding1 }}</div> + <div class="xzhi" :title="ymData.R_YM_Outbounding1">{{ ymData.R_YM_Outbounding1 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鐢宠鍏ュ簱(鍐�):</div> - <div class="xzhi" :title="data.W_YM_RequestIn1">{{ data.W_YM_RequestIn1 }}</div> + <div class="xzhi" :title="ymData.W_YM_RequestIn1">{{ ymData.W_YM_RequestIn1 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鐢宠鍑哄簱(鍐�):</div> - <div class="xzhi" :title="data.W_YM_RequestOut1">{{ data.W_YM_RequestOut1 }}</div> + <div class="xzhi" :title="ymData.W_YM_RequestOut1">{{ ymData.W_YM_RequestOut1 || '-' }}</div> </div> </div> - + + <!-- YM鍏宠仈绔欏彴锛堝嚭鍏ュ簱9002锛� --> <div class="skuang"> <div class="zhuname">鍑哄叆搴�9002绔欏彴</div> <div class="zhankuang"> <div class="xname">鏈夎揣(璇�):</div> - <div class="xzhi" :title="data.R_YM_Tray2">{{ data.R_YM_Tray2 }}</div> + <div class="xzhi" :title="ymData.R_YM_Tray2">{{ ymData.R_YM_Tray2 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍏ュ簱鎵ц涓�(璇�):</div> - <div class="xzhi" :title="data.R_YM_Inbounding2">{{ data.R_YM_Inbounding2 }}</div> + <div class="xzhi" :title="ymData.R_YM_Inbounding2">{{ ymData.R_YM_Inbounding2 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鎻愬崌鏈虹┖闂�(璇�):</div> - <div class="xzhi" :title="data.R_YM_Leisure2">{{ data.R_YM_Leisure2 }}</div> + <div class="xzhi" :title="ymData.R_YM_Leisure2">{{ ymData.R_YM_Leisure2 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鍑哄簱鎵ц涓�(璇�):</div> - <div class="xzhi" :title="data.R_YM_Outbounding2">{{ data.R_YM_Outbounding2 }}</div> + <div class="xzhi" :title="ymData.R_YM_Outbounding2">{{ ymData.R_YM_Outbounding2 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鐢宠鍏ュ簱(鍐�):</div> - <div class="xzhi" :title="data.W_YM_RequestIn2">{{ data.W_YM_RequestIn2 }}</div> + <div class="xzhi" :title="ymData.W_YM_RequestIn2">{{ ymData.W_YM_RequestIn2 || '-' }}</div> </div> <div class="zhankuang"> <div class="xname">鐢宠鍑哄簱(鍐�):</div> - <div class="xzhi" :title="data.W_YM_RequestOut2">{{ data.W_YM_RequestOut2 }}</div> + <div class="xzhi" :title="ymData.W_YM_RequestOut2">{{ ymData.W_YM_RequestOut2 || '-' }}</div> </div> </div> </div> - </div> </template> <script> -import { ref, nextTick } from "vue"; +import { ref, nextTick, watch, onUnmounted } from "vue"; import { useStore } from "vuex"; import { onMounted } from "vue"; @@ -99,14 +102,17 @@ xuan: 0 }; }, - methods: { - }, setup() { const store = useStore(); - const data = ref({}); + // 浠呭瓨鍌╕M鏁版嵁锛屼笌鍏朵粬鏁版嵁闅旂 + const ymData = ref({}); - // 1. 瀹氫箟鏅�氬瓧娈电殑鏄犲皠瑙勫垯 - const statusMap = { + // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽棯鐑侀棶棰� + const UPDATE_DELAY = 300; // 寤惰繜300ms鏇存柊UI + let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚� + + // YM鏁版嵁鏄犲皠瑙勫垯 + const ymStatusMap = { R_YM_Status: { 1: "姝e父", 2: "鏁呴殰", @@ -142,62 +148,103 @@ } }; - // 2. 瀹氫箟闇�瑕佸叡鐢ㄦ槧灏勮鍒欑殑瀛楁鍒楄〃鍜屽搴旂殑鏄犲皠瑙勫垯 - const booleanFields = [ - "R_YM_Tray1", "R_YM_Inbounding1", - "R_YM_Leisure1", "R_YM_Outbounding1", - "W_YM_RequestIn1", "W_YM_RequestOut1", - "R_YM_Tray2", "R_YM_Inbounding2", - "R_YM_Leisure2", "R_YM_Outbounding2", - "W_YM_RequestIn2", "W_YM_RequestOut2", - ]; - const booleanMap = { - true: "鏄�", - false: "鍚�" + // YM瀛楁鍒嗙粍 + const ymFieldGroups = { + statusFields: { + keys: [ + "R_YM_Tray1", "R_YM_Inbounding1", "R_YM_Leisure1", "R_YM_Outbounding1", + "R_YM_Tray2", "R_YM_Inbounding2", "R_YM_Leisure2", "R_YM_Outbounding2" + ], + map: { true: "鏄�", false: "鍚�" } + }, + requestFields: { + keys: [ + "W_YM_RequestIn1", "W_YM_RequestOut1", + "W_YM_RequestIn2", "W_YM_RequestOut2" + ], + map: { true: "鏄�", false: "鍚�" } + } }; - // 澶勭悊鏁版嵁锛屽厛澶勭悊鏅�氭槧灏勶紝鍐嶆壒閲忓鐞嗗叡鐢ㄦ槧灏勭殑瀛楁 - const processData = (rawData) => { + // 澶勭悊YM鍘熷鏁版嵁 + const processYMData = (rawData) => { if (!rawData) return {}; - const processed = { ...rawData }; + const processedData = { ...rawData }; - // 澶勭悊鏅�氬瓧娈垫槧灏� - Object.keys(statusMap).forEach(key => { - if (processed.hasOwnProperty(key)) { - const map = statusMap[key]; - processed[key] = map[processed[key]] || processed[key]; + // 澶勭悊鏍稿績鐘舵�佸瓧娈� + Object.keys(ymStatusMap).forEach(key => { + if (processedData.hasOwnProperty(key)) { + processedData[key] = ymStatusMap[key][processedData[key]] || processedData[key]; } }); - // 鎵归噺澶勭悊鍏辩敤鏄犲皠瑙勫垯鐨勫瓧娈� - booleanFields.forEach(key => { - if (processed.hasOwnProperty(key)) { - processed[key] = booleanMap[processed[key]] || processed[key]; - } + // 澶勭悊鍒嗙粍瀛楁 + Object.values(ymFieldGroups).forEach(group => { + group.keys.forEach(key => { + if (processedData.hasOwnProperty(key)) { + processedData[key] = group.map[processedData[key]] || processedData[key]; + } + }); }); - return processed; + return processedData; + }; + + // 寤惰繜鏇存柊YM鏁版嵁锛岄伩鍏嶉珮棰戝埛鏂� + const delayedUpdateYMData = (newRawData) => { + if (updateTimer) { + clearTimeout(updateTimer); + } + + updateTimer = setTimeout(() => { + // 鍙鐞嗗寘鍚玒M鐗瑰緛瀛楁鐨勬暟鎹� + if (newRawData && newRawData.R_YM_Status !== undefined) { + ymData.value = processYMData(newRawData); + + // 鏇存柊鏍峰紡 + nextTick(() => { + const valueElements = document.getElementsByClassName("xzhi"); + 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(() => { - 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].style.color = "yellow"; - } else if (xian[i].innerHTML === "鍚�") { - xian[i].style.color = "red"; - } + // 鍒濆鍔犺浇鏁版嵁 + const initialData = store.state.homedata; + if (initialData && initialData.R_YM_Status !== undefined) { + ymData.value = processYMData(initialData); + } + + // 鐩戝惉鏁版嵁鍙樺寲锛屽彧澶勭悊YM鏁版嵁 + const unwatch = watch( + () => store.state.homedata, + (newData) => { + if (newData && newData.R_YM_Status !== undefined) { + delayedUpdateYMData(newData); } - }); + }, + { deep: true } + ); + + // 缁勪欢鍗歌浇鏃舵竻鐞� + onUnmounted(() => { + unwatch(); + if (updateTimer) { + clearTimeout(updateTimer); + } }); }); return { - data, + ymData }; } }; -- Gitblit v1.9.3