From 291067c13bfe8fb9c876e3764a828dc3ddd22f99 Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期一, 17 十一月 2025 16:50:12 +0800
Subject: [PATCH] 监控优化，代码功能优化
---
代码管理/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/TestFrameWarehouse.vue | 149 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 132 insertions(+), 17 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/TestFrameWarehouse.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/TestFrameWarehouse.vue"
index ffa70bb..26371e9 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/TestFrameWarehouse.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/TestFrameWarehouse.vue"
@@ -5,7 +5,8 @@
<div class="skuang">
<div class="csjuname">娴嬭瘯鏋朵粨鍫嗗灈鏈�</div>
<div class="csjankuang">
- <div class="xname">鍫嗗灈鏈虹姸鎬�:</div>
+ <div class="xname">鍫� 鍫嗗灈鏈虹姸鎬�:
+ </div>
<div class="xcsji" :title="csjData.R_CSJ_Status">{{ csjData.R_CSJ_Status || '-' }}</div>
</div>
<div class="csjankuang">
@@ -27,6 +28,11 @@
<div class="csjankuang">
<div class="xname">鎵樼洏绫诲瀷:</div>
<div class="xcsji" :title="csjData.R_CSJ_TrayType">{{ csjData.R_CSJ_TrayType || '-' }}</div>
+ </div>
+ <!-- 鏂板锛氬綋鍓嶆墍鍦ㄥ垪鏄剧ず -->
+ <div class="csjankuang">
+ <div class="xname">褰撳墠鎵�鍦ㄥ垪:</div>
+ <div class="xcsji" :title="csjData.R_CSJ_Column">{{ csjData.R_CSJ_Column || '鏈煡' }}</div>
</div>
</div>
@@ -86,6 +92,41 @@
</div>
</div>
</div>
+
+ <!-- 鏂板锛氬爢鍨涙満褰撳墠鍒楁枃瀛楁樉绀� -->
+ <div id="csj-nowcolumn" :class="{ 'abnormal-column': csjData.R_CSJ_Status !== '姝ｅ父' }">
+ <div>娴嬭瘯鏋跺爢鍨涙満褰撳墠鎵�鍦ㄥ垪:
+ <span :title="csjData.R_CSJ_Column">{{ csjData.R_CSJ_Column || '鏈煡' }}</span>
+ </div>
+ </div>
+
+ <!-- 鏂板锛氬垪鏂规牸灞曠ず鍖哄煙 -->
+ <div class="csj-column-container" :class="{ 'pp-status-abnormal': csjData.R_CSJ_Status !== '姝ｅ父' }">
+ <!-- 涓婃柟1-24鍒� -->
+ <div class="column-grid-container">
+ <div
+ v-for="num in 20"
+ :key="num"
+ class="column-grid-item"
+ :class="{ 'active': num == csjData.R_CSJ_Column }"
+ :title="`鍒楀彿: ${num}`"
+ >
+ {{ num }}
+ </div>
+ </div>
+ <!-- 涓嬫柟25-47鍒� (23涓�) -->
+ <div class="column-grid-container">
+ <div
+ v-for="i in 23"
+ :key="'csj-lower-' + i"
+ class="column-grid-item"
+ :class="{ 'active': (20 + i) == csjData.R_CSJ_Column }"
+ :title="`鍒楀彿: ${20 + i}`"
+ >
+ {{ 20 + i }}
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -102,19 +143,18 @@
},
setup() {
const store = useStore();
- // 浠呭瓨鍌–SJ鏁版嵁锛屼笌鍏朵粬鏁版嵁闅旂
const csjData = ref({});
- // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽棯鐑侀棶棰�
- const UPDATE_DELAY = 300; // 寤惰繜300ms鏇存柊UI
- let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚�
+ const UPDATE_DELAY = 300;
+ let updateTimer = null;
- // CSJ鏁版嵁鏄犲皠瑙勫垯
+ // CSJ鏁版嵁鏄犲皠瑙勫垯锛堟柊澧炲垪鍙峰鐞嗭級
const csjStatusMap = {
R_CSJ_Status: {
- 1: "姝ｅ父",
- 2: "鏁呴殰",
- 3: "鎬ュ仠",
+ 0: "姝ｅ父",
+ 1: "鏁呴殰",
+ 2: "鎬ュ仠",
+ 3: "鏈煡"
},
R_CSJ_AutoStatus: {
0: "缁翠慨",
@@ -143,7 +183,9 @@
2: "涓墭鐩�(2)",
3: "澶ф墭鐩�(3)",
4: "鐗瑰ぇ鎵樼洏(4)",
- }
+ },
+ // 鏂板锛氬垪鍙锋槧灏勫鐞�
+ R_CSJ_Column: (val) => val !== undefined ? val : "鏈煡"
};
// CSJ瀛楁鍒嗙粍
@@ -170,7 +212,7 @@
}
};
- // 澶勭悊CSJ鍘熷鏁版嵁
+ // 澶勭悊CSJ鍘熷鏁版嵁锛堝寘鍚垪鍙峰鐞嗭級
const processCSJData = (rawData) => {
if (!rawData) return {};
const processedData = { ...rawData };
@@ -178,7 +220,10 @@
// 澶勭悊鏍稿績鐘舵�佸瓧娈�
Object.keys(csjStatusMap).forEach(key => {
if (processedData.hasOwnProperty(key)) {
- processedData[key] = csjStatusMap[key][processedData[key]] || processedData[key];
+ const mapper = csjStatusMap[key];
+ processedData[key] = typeof mapper === 'function'
+ ? mapper(processedData[key])
+ : (mapper[processedData[key]] || processedData[key]);
}
});
@@ -194,14 +239,13 @@
return processedData;
};
- // 寤惰繜鏇存柊CSJ鏁版嵁锛岄伩鍏嶉珮棰戝埛鏂�
+ // 寤惰繜鏇存柊CSJ鏁版嵁
const delayedUpdateCSJData = (newRawData) => {
if (updateTimer) {
clearTimeout(updateTimer);
}
updateTimer = setTimeout(() => {
- // 鍙鐞嗗寘鍚獵SJ鐗瑰緛瀛楁鐨勬暟鎹�
if (newRawData && newRawData.R_CSJ_Status !== undefined) {
csjData.value = processCSJData(newRawData);
@@ -221,13 +265,11 @@
};
onMounted(() => {
- // 鍒濆鍔犺浇鏁版嵁
const initialData = store.state.homedata;
if (initialData && initialData.R_CSJ_Status !== undefined) {
csjData.value = processCSJData(initialData);
}
- // 鐩戝惉鏁版嵁鍙樺寲锛屽彧澶勭悊CSJ鏁版嵁
const unwatch = watch(
() => store.state.homedata,
(newData) => {
@@ -255,6 +297,7 @@
</script>
<style scoped>
+/* 鍘熸湁鏍峰紡淇濇寔涓嶅彉 */
.ding {
float: left;
width: 20px;
@@ -391,4 +434,76 @@
margin-left: 1.7%;
border-radius: 10px;
}
-</style>
+
+/* 鏂板锛欳SJ鍫嗗灈鏈哄綋鍓嶅垪鏍峰紡 */
+#csj-nowcolumn {
+ width: 100%;
+ height: 70px;
+ float: left;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.5cqw;
+ font-weight: bold;
+ color: #00ff4c;
+}
+
+/* 寮傚父鐘舵�佹枃瀛楀彉鑹� */
+#csj-nowcolumn.abnormal-column {
+ color: red !important;
+}
+#csj-nowcolumn.abnormal-column span {
+ color: red !important;
+}
+
+/* 鍒楀鍣ㄦ牱寮� */
+.csj-column-container {
+ width: 95%;
+ margin: 0 auto;
+ position: relative;
+ clear: both;
+ padding-top: 15px;
+}
+
+/* 鏂规牸瀹瑰櫒鏍峰紡 */
+.column-grid-container {
+ width: 100%;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: 2px;
+ position: relative;
+ z-index: 2;
+ margin-bottom: 10px;
+ padding: 0 2px;
+}
+
+/* 鏂规牸鏍峰紡 */
+.column-grid-item {
+ flex: 1;
+ min-width: 24px;
+ max-width: 60px;
+ height: 30px;
+ border: 1px solid #fff;
+ border-radius: 8px 8px 0 0;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: clamp(8px, 1vw, 14px);
+ box-sizing: border-box;
+ transition: background-color 0.3s ease;
+}
+
+/* 褰撳墠鍒楅珮浜� */
+.column-grid-item.active {
+ background-color: green;
+ font-weight: bold;
+}
+
+/* 寮傚父鐘舵�佷笅褰撳墠鍒楃孩鑹查珮浜� */
+.pp-status-abnormal .column-grid-item.active {
+ background-color: red !important;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3