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/DryFilmWarehouse.vue | 145 ++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 127 insertions(+), 18 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 d04a45a..bb67ba1 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"
@@ -28,6 +28,11 @@
<div class="xname">鎵樼洏绫诲瀷:</div>
<div class="xzhi" :title="gmData.R_GM_TrayType">{{ gmData.R_GM_TrayType || '-' }}</div>
</div>
+ <!-- 鏂板锛氬綋鍓嶅垪鐘舵�佹樉绀� -->
+ <div class="zhankuang">
+ <div class="xname">褰撳墠鎵�鍦ㄥ垪:</div>
+ <div class="xzhi" :title="gmData.R_GM_Column">{{ gmData.R_GM_Column || '鏈煡' }}</div>
+ </div>
</div>
<!-- GM鍏宠仈绔欏彴锛堝叆搴�7003锛� -->
@@ -154,6 +159,41 @@
</div>
</div>
</div>
+
+ <!-- 鏂板锛氬爢鍨涙満褰撳墠鍒楁枃瀛楁樉绀� -->
+ <div id="gm-nowcolumn" :class="{ 'abnormal-column': gmData.R_GM_Status !== '姝ｅ父' }">
+ <div>骞茶啘鍫嗗灈鏈哄綋鍓嶆墍鍦ㄥ垪:
+ <span :title="gmData.R_GM_Column">{{ gmData.R_GM_Column || '鏈煡' }}</span>
+ </div>
+ </div>
+
+ <!-- 鏂板锛氬垪鏂规牸灞曠ず鍖哄煙 -->
+ <div class="gm-column-container" :class="{ 'pp-status-abnormal': gmData.R_GM_Status !== '姝ｅ父' }">
+ <!-- 涓婃柟1-24鍒� -->
+ <div class="column-grid-container">
+ <div
+ v-for="num in 20"
+ :key="num"
+ class="column-grid-item"
+ :class="{ 'active': num == gmData.R_GM_Column }"
+ :title="`鍒楀彿: ${num}`"
+ >
+ {{ num }}
+ </div>
+ </div>
+ <!-- 涓嬫柟25-47鍒� (23涓�) -->
+ <div class="column-grid-container">
+ <div
+ v-for="i in 19"
+ :key="'gm-lower-' + i"
+ class="column-grid-item"
+ :class="{ 'active': (20 + i) == gmData.R_GM_Column }"
+ :title="`鍒楀彿: ${20 + i}`"
+ >
+ {{ 20 + i }}
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -170,21 +210,21 @@
},
setup() {
const store = useStore();
- // 浠呭瓨鍌℅M鏁版嵁锛屼笌鍏朵粬浠撴暟鎹殧绂�
const gmData = ref({});
- // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽棯鐑侀棶棰�
- const UPDATE_DELAY = 300; // 300ms寤惰繜锛屽钩琛″疄鏃舵�у拰鐣岄潰绋冲畾鎬�
- let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚�
+ const UPDATE_DELAY = 300;
+ let updateTimer = null;
- // GM鏁版嵁鏄犲皠瑙勫垯閰嶇疆锛堟寜鍔熻兘鍒嗙粍锛�
+ // GM鏁版嵁鏄犲皠瑙勫垯锛堟柊澧炲垪鍙峰鐞嗭級
const gmStatusConfig = {
coreStatus: {
- R_GM_Status: { 1: "姝ｅ父", 2: "鏁呴殰", 3: "鎬ュ仠" },
+ R_GM_Status: { 0: "姝ｅ父", 1: "鏁呴殰", 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_TrayType: { "-1": "绌虹(-1)", 1: "灏忔墭鐩�(1)", 2: "涓墭鐩�(2)", 3: "澶ф墭鐩�(3)", 4: "鐗瑰ぇ鎵樼洏(4)" },
+ // 鏂板锛氬垪鍙锋槧灏勫鐞�
+ R_GM_Column: (val) => val !== undefined ? val : "鏈煡"
},
onlineStatus: {
keys: ["R_GM_Online3", "R_GM_Online4", "R_GM_Online5"],
@@ -212,15 +252,18 @@
}
};
- // 澶勭悊GM鍘熷鏁版嵁
+ // 澶勭悊GM鍘熷鏁版嵁锛堝寘鍚垪鍙峰鐞嗭級
const processGMData = (rawData) => {
if (!rawData) return {};
const processed = { ...rawData };
// 澶勭悊鏍稿績鐘舵�佸瓧娈�
- Object.entries(gmStatusConfig.coreStatus).forEach(([key, map]) => {
+ Object.entries(gmStatusConfig.coreStatus).forEach(([key, handler]) => {
if (processed.hasOwnProperty(key)) {
- processed[key] = map[processed[key]] || processed[key];
+ // 鍒楀彿瀛楁浣跨敤鍑芥暟澶勭悊锛屽叾浠栦娇鐢ㄦ槧灏勮〃
+ processed[key] = typeof handler === 'function'
+ ? handler(processed[key])
+ : (handler[processed[key]] || processed[key]);
}
});
@@ -242,16 +285,13 @@
return processed;
};
- // 寤惰繜鏇存柊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++) {
@@ -268,13 +308,11 @@
};
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) => {
@@ -285,7 +323,6 @@
{ deep: true }
);
- // 缁勪欢鍗歌浇鏃舵竻鐞嗚祫婧�
onUnmounted(() => {
unwatch();
if (updateTimer) clearTimeout(updateTimer);
@@ -300,6 +337,7 @@
</script>
<style scoped>
+/* 鍘熸湁鏍峰紡淇濇寔涓嶅彉 */
.ding {
float: left;
width: 20px;
@@ -436,5 +474,76 @@
margin-left: 1.7%;
border-radius: 10px;
}
-</style>
-
\ No newline at end of file
+
+/* 鏂板锛欸M鍫嗗灈鏈哄綋鍓嶅垪鏍峰紡 */
+#gm-nowcolumn {
+ width: 100%;
+ height: 70px;
+ float: left;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.5cqw;
+ font-weight: bold;
+ color: #00ff4c;
+}
+
+/* 寮傚父鐘舵�佹枃瀛楀彉鑹� */
+#gm-nowcolumn.abnormal-column {
+ color: red !important;
+}
+#gm-nowcolumn.abnormal-column span {
+ color: red !important;
+}
+
+/* 鍒楀鍣ㄦ牱寮� */
+.gm-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