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/BoardWarehouse.vue | 161 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 138 insertions(+), 23 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 0e5e0f5..39b9a75 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"
@@ -28,10 +28,58 @@
<div class="xname">鎵樼洏绫诲瀷:</div>
<div class="xbci" :title="bcData.R_BC_TrayType">{{ bcData.R_BC_TrayType || '-' }}</div>
</div>
+ <!-- 鏂板锛氬綋鍓嶅垪鐘舵�佹樉绀� -->
+ <div class="bcankuang">
+ <div class="xname">褰撳墠鎵�鍦ㄥ垪:</div>
+ <div class="xbci" :title="bcData.R_BC_Column">{{ bcData.R_BC_Column || '鏈煡' }}</div>
+ </div>
</div>
+ </div>
-
-
+ <!-- 鏂板锛氬爢鍨涙満褰撳墠鍒楁枃瀛楁樉绀猴紙涓嶱P浠撲竴鑷达級 -->
+ <div id="bc-nowcolumn" :class="{ 'abnormal-column': bcData.R_BC_Status !== '姝ｅ父' }">
+ <div>鏉挎枡鍫嗗灈鏈哄綋鍓嶆墍鍦ㄥ垪:
+ <span :title="bcData.R_BC_Column">{{ bcData.R_BC_Column || '鏈煡' }}</span>
+ </div>
+ </div>
+
+ <!-- 鏂板锛氬垪鏂规牸灞曠ず鍖哄煙锛堜笌PP浠撻�昏緫涓�鑷达級 -->
+ <div class="bc-column-container" :class="{ 'pp-status-abnormal': bcData.R_BC_Status !== '姝ｅ父' }">
+ <!-- 涓婃柟1-24鍒� -->
+ <div class="column-grid-container">
+ <div
+ v-for="num in 37"
+ :key="num"
+ class="column-grid-item"
+ :class="{ 'active': num == bcData.R_BC_Column }"
+ :title="`鍒楀彿: ${num}`"
+ >
+ {{ num }}
+ </div>
+ </div>
+ <!-- 涓嬫柟25-47鍒� (23涓�) -->
+ <div class="column-grid-container">
+ <div
+ v-for="i in 34"
+ :key="'bc-lower-' + i"
+ class="column-grid-item"
+ :class="{ 'active': (103 + i) == bcData.R_BC_Column }"
+ :title="`鍒楀彿: ${103 + i}`"
+ >
+ {{ 103 + i }}
+ </div>
+ </div>
+ <div class="column-grid-container">
+ <div
+ v-for="i in 34"
+ :key="'bc-lower-' + i"
+ class="column-grid-item"
+ :class="{ 'active': (203 + i) == bcData.R_BC_Column }"
+ :title="`鍒楀彿: ${203 + i}`"
+ >
+ {{ 203 + i }}
+ </div>
+ </div>
</div>
</div>
</template>
@@ -49,19 +97,18 @@
},
setup() {
const store = useStore();
- // 浠呭瓨鍌˙C鏁版嵁锛屼笌鍏朵粬鏁版嵁闅旂
const bcData = ref({});
- // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽棯鐑侀棶棰�
- const UPDATE_DELAY = 300; // 寤惰繜300ms鏇存柊UI
- let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚�
+ const UPDATE_DELAY = 300;
+ let updateTimer = null;
- // BC鏁版嵁鏄犲皠瑙勫垯
+ // BC鏁版嵁鏄犲皠瑙勫垯锛堟柊澧濺_BC_Column鍒楀彿澶勭悊锛�
const bcStatusMap = {
R_BC_Status: {
- 1: "姝ｅ父",
- 2: "鏁呴殰",
- 3: "鎬ュ仠",
+ 0: "姝ｅ父",
+ 1: "鏁呴殰",
+ 2: "鎬ュ仠",
+ 3: "鏈煡"
},
R_BC_AutoStatus: {
0: "缁翠慨",
@@ -90,10 +137,11 @@
2: "涓墭鐩�(2)",
3: "澶ф墭鐩�(3)",
4: "鐗瑰ぇ鎵樼洏(4)",
- }
+ },
+ // 鏂板锛氬垪鍙锋槧灏勶紙涓嶱P浠撲竴鑷达級
+ R_BC_Column: (val) => val !== undefined ? val : "鏈煡"
};
- // BC瀛楁鍒嗙粍
const bcFieldGroups = {
permissionFields: {
keys: ["R_BC_IsCanPut1", "R_BC_IsCanTake1", "R_BC_IsCanPut2", "R_BC_IsCanTake2",
@@ -117,19 +165,20 @@
}
};
- // 澶勭悊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];
+ const mapper = bcStatusMap[key];
+ processedData[key] = typeof mapper === 'function'
+ ? mapper(processedData[key])
+ : (mapper[processedData[key]] || processedData[key]);
}
});
- // 澶勭悊鍒嗙粍瀛楁
Object.values(bcFieldGroups).forEach(group => {
group.keys.forEach(key => {
if (processedData.hasOwnProperty(key)) {
@@ -141,18 +190,15 @@
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++) {
@@ -168,13 +214,11 @@
};
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) => {
@@ -185,7 +229,6 @@
{ deep: true }
);
- // 缁勪欢鍗歌浇鏃舵竻鐞�
onUnmounted(() => {
unwatch();
if (updateTimer) {
@@ -338,4 +381,76 @@
margin-left: 1.7%;
border-radius: 10px;
}
-</style>
+
+/* 鏂板锛欱C鍫嗗灈鏈哄綋鍓嶅垪鏂囧瓧鏍峰紡锛堜笌PP浠撲竴鑷达級 */
+#bc-nowcolumn {
+ width: 100%;
+ height: 70px;
+ float: left;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.5cqw;
+ font-weight: bold;
+ color: #00ff4c;
+}
+
+/* 鏂板锛欱C鍫嗗灈鏈哄紓甯哥姸鎬佹枃瀛楀彉鑹� */
+#bc-nowcolumn.abnormal-column {
+ color: red !important;
+}
+#bc-nowcolumn.abnormal-column span {
+ color: red !important;
+}
+
+/* 鏂板锛欱C鍒楀鍣ㄦ牱寮� */
+.bc-column-container {
+ width: 95%;
+ margin: 0 auto;
+ position: relative;
+ clear: both;
+ padding-top: 15px;
+}
+
+/* 澶嶇敤锛氭柟鏍煎鍣ㄦ牱寮忥紙涓嶱P浠撲竴鑷达級 */
+.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;
+}
+
+/* 澶嶇敤锛氭柟鏍兼牱寮忥紙涓嶱P浠撲竴鑷达級 */
+.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