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/PpWarehouse.vue | 171 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 138 insertions(+), 33 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/PpWarehouse.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/PpWarehouse.vue"
index 27b8a2a..d5a5847 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/PpWarehouse.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/PpWarehouse.vue"
@@ -4,6 +4,7 @@
<!-- PP浠撳爢鍨涙満鐘舵�侀潰鏉� -->
<div class="skuang">
<div class="zhuname">PP浠撳爢鍨涙満</div>
+
<div class="zhankuang">
<div class="xname">鍫嗗灈鏈虹姸鎬�:</div>
<div class="xzhi" :title="ppData.R_PP_Status">{{ ppData.R_PP_Status }}</div>
@@ -192,6 +193,39 @@
</div>
</div>
</div>
+
+ <div id="nowcolumn" :class="{ 'abnormal-column': ppData.R_PP_Status !== '姝ｅ父' }">
+ <div>PP鍫嗗灈鏈哄綋鍓嶆墍鍦ㄥ垪:
+ <span :title="ppData.R_PP_Column">{{ ppData.R_PP_Column || '鏈煡' }}</span>
+ </div>
+ </div>
+
+ <div class="column-container" :class="{ 'pp-status-abnormal': ppData.R_PP_Status !== '姝ｅ父' }">
+ <!-- 涓婃柟1-24鍒� -->
+ <div class="column-grid-container">
+ <div
+ v-for="num in 24"
+ :key="num"
+ class="column-grid-item"
+ :class="{ 'active': num == ppData.R_PP_Column }"
+ :title="`鍒楀彿: ${num}`"
+ >
+ {{ num }}
+ </div>
+ </div>
+ <!-- 涓嬫柟25-47鍒� (23涓�) -->
+ <div class="column-grid-container">
+ <div
+ v-for="i in 23"
+ :key="'lower-' + i"
+ class="column-grid-item"
+ :class="{ 'active': (24 + i) == ppData.R_PP_Column }"
+ :title="`鍒楀彿: ${24 + i}`"
+ >
+ {{ 24 + i }}
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -208,19 +242,19 @@
},
setup() {
const store = useStore();
- // 浠呭瓨鍌≒P鏁版嵁锛岄伩鍏嶄笌ZH鏁版嵁娣锋穯
const ppData = ref({});
- // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽珮棰戝埛鏂板鑷寸殑闂儊
- const UPDATE_DELAY = 300; // 寤惰繜300ms鏇存柊UI
- let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚�
+ // 寤惰繜鏇存柊閰嶇疆
+ const UPDATE_DELAY = 300;
+ let updateTimer = null;
- // PP鏁版嵁鏄犲皠瑙勫垯锛堜粎澶勭悊PP鐩稿叧瀛楁锛�
+ // PP鏁版嵁鏄犲皠瑙勫垯
const statusMap = {
R_PP_Status: {
- 1: "姝ｅ父",
- 2: "鏁呴殰",
- 3: "鎬ュ仠",
+ 0: "姝ｅ父",
+ 1: "鏁呴殰",
+ 2: "鎬ュ仠",
+ 3: "鏈煡"
},
R_PP_AutoStatus: {
0: "缁翠慨",
@@ -249,7 +283,8 @@
2: "涓墭鐩�(2)",
3: "澶ф墭鐩�(3)",
4: "鐗瑰ぇ鎵樼洏(4)",
- }
+ },
+ R_PP_Column: (val) => val !== undefined ? val : "鏈煡"
};
// PP鐩稿叧甯冨皵瀛楁鍒嗙粍
@@ -284,14 +319,15 @@
// 澶勭悊PP鍘熷鏁版嵁
const processPPData = (rawData) => {
if (!rawData) return {};
-
- // 澶嶅埗鍘熷鏁版嵁锛岄伩鍏嶇洿鎺ヤ慨鏀�
const processed = { ...rawData };
// 澶勭悊鐘舵�佸瓧娈垫槧灏�
Object.keys(statusMap).forEach(key => {
if (processed.hasOwnProperty(key)) {
- processed[key] = statusMap[key][processed[key]] || processed[key];
+ const mapper = statusMap[key];
+ processed[key] = typeof mapper === 'function'
+ ? mapper(processed[key])
+ : (mapper[processed[key]] || processed[key]);
}
});
@@ -307,20 +343,12 @@
return processed;
};
- // 寤惰繜鏇存柊PP鏁版嵁锛岄伩鍏嶉珮棰戝埛鏂�
+ // 寤惰繜鏇存柊PP鏁版嵁
const delayedUpdatePPData = (newRawData) => {
- // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒锛岀‘淇濆彧鎵ц鏈�鍚庝竴娆℃洿鏂�
- if (updateTimer) {
- clearTimeout(updateTimer);
- }
-
- // 寤惰繜鎸囧畾鏃堕棿鍚庢洿鏂版暟鎹�
+ if (updateTimer) clearTimeout(updateTimer);
updateTimer = setTimeout(() => {
- // 鍙鐞嗗寘鍚玃P鐗瑰緛瀛楁鐨勬暟鎹�
if (newRawData && newRawData.R_PP_Status !== undefined) {
ppData.value = processPPData(newRawData);
-
- // 鏇存柊鏍峰紡
nextTick(() => {
const valueElements = document.getElementsByClassName("xzhi");
for (let i = 0; i < valueElements.length; i++) {
@@ -336,30 +364,24 @@
};
onMounted(() => {
- // 鍒濆鍔犺浇鏁版嵁
const initialData = store.state.homedata;
if (initialData && initialData.R_PP_Status !== undefined) {
ppData.value = processPPData(initialData);
}
-
- // 鐩戝惉鏁版嵁鍙樺寲锛屽彧澶勭悊PP鏁版嵁
+
const unwatch = watch(
() => store.state.homedata,
(newData) => {
- // 浠呭綋鏁版嵁鍖呭惈PP鐗瑰緛瀛楁鏃舵墠鏇存柊
if (newData && newData.R_PP_Status !== undefined) {
delayedUpdatePPData(newData);
}
},
- { deep: true } // 娣卞害鐩戝惉瀵硅薄鍐呴儴鍙樺寲
+ { deep: true }
);
- // 缁勪欢鍗歌浇鏃舵竻鐞嗚祫婧�
onUnmounted(() => {
unwatch();
- if (updateTimer) {
- clearTimeout(updateTimer);
- }
+ if (updateTimer) clearTimeout(updateTimer);
});
});
@@ -506,6 +528,89 @@
background: rgba(255, 255, 255, 0.2);
margin-left: 1.7%;
border-radius: 10px;
+ padding-bottom: 20px;
}
-</style>
-
\ No newline at end of file
+
+/* 鍫嗗灈鏈哄綋鍓嶅垪鏍峰紡 */
+#nowcolumn {
+ width: 100%;
+ height: 70px;
+ float: left;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.5cqw;
+ font-weight: bold;
+ color: #00ff4c;
+}
+
+/* 鍫嗗灈鏈虹姸鎬佸紓甯告椂锛屽綋鍓嶅垪鏂囧瓧鍙樹负绾㈣壊 */
+#nowcolumn.abnormal-column {
+ color: red !important;
+}
+#nowcolumn.abnormal-column span {
+ color: red !important;
+}
+
+/* 鍒楀鍣� */
+.column-container {
+ width: 95%;
+ margin: 0 auto;
+ position: relative;
+ clear: both;
+ padding-top: 15px;
+}
+
+/* 钃濊壊鍒嗗壊绾� */
+.column-separator {
+ width: 100%;
+ height: 20px;
+ background-color: #3bc0ed;
+ position: absolute;
+ top: 0; /* 璋冩暣鍒版柟鏍奸《閮ㄥ榻� */
+ left: 0;
+ z-index: 1; /* 纭繚鍦ㄦ柟鏍间笅鏂� */
+ border-radius: 4px 4px 0 0;
+}
+
+.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