From 06eb604f71605c47f015b88b1620b72b6f69df8c Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期一, 22 九月 2025 05:20:41 +0800
Subject: [PATCH] 功能增加，代码优化
---
代码管理/WCS/WIDESEAWCS_Client/src/views/deviceMonitoring/TestFrameWarehouse.vue | 411 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 380 insertions(+), 31 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 e6514a3..ffa70bb 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"
@@ -1,45 +1,394 @@
<template>
- <div class="message-container">
- <div class="item" v-for="(item, index) in list" :key="index">
- <div class="title">{{ item.title }}({{ item.date }})</div>
- <div class="content">{{ item.message }}</div>
+ <div id="title">
+ <div id="bkuang" style="border-top: none">
+ <!-- CSJ浠撳爢鍨涙満鐘舵�侀潰鏉� -->
+ <div class="skuang">
+ <div class="csjuname">娴嬭瘯鏋朵粨鍫嗗灈鏈�</div>
+ <div class="csjankuang">
+ <div class="xname">鍫嗗灈鏈虹姸鎬�:</div>
+ <div class="xcsji" :title="csjData.R_CSJ_Status">{{ csjData.R_CSJ_Status || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鍫嗗灈鏈烘墜鑷姩鐘舵��:</div>
+ <div class="xcsji" :title="csjData.R_CSJ_AutoStatus">{{ csjData.R_CSJ_AutoStatus || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">姝ｅ湪鎵ц鐨勪换鍔″彿:</div>
+ <div class="xcsji" :title="csjData.R_CSJ_TaskNum">{{ csjData.R_CSJ_TaskNum || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鍫嗗灈鏈哄伐浣滅姸鎬�:</div>
+ <div class="xcsji" :title="csjData.R_CSJ_WorkStatus">{{ csjData.R_CSJ_WorkStatus || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">浣滀笟绫诲瀷:</div>
+ <div class="xcsji" :title="csjData.R_CSJ_WorkType">{{ csjData.R_CSJ_WorkType || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鎵樼洏绫诲瀷:</div>
+ <div class="xcsji" :title="csjData.R_CSJ_TrayType">{{ csjData.R_CSJ_TrayType || '-' }}</div>
+ </div>
+ </div>
+
+ <!-- CSJ鍏宠仈绔欏彴锛堝嚭搴�303+鍑哄簱304锛� -->
+ <div class="skuang">
+ <div class="csjuname">鍑哄簱103绔欏彴</div>
+ <div class="csjankuang">
+ <div class="xname">鏄惁鍏佽鏀捐揣(璇�):</div>
+ <div class="xcsji" :title="csjData.R_CSJ_IsCanPut3">{{ csjData.R_CSJ_IsCanPut3 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鏄惁鍏佽鍙栬揣(璇�):</div>
+ <div class="xcsji" :title="csjData.R_CSJ_IsCanTake3">{{ csjData.R_CSJ_IsCanTake3 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鏀捐揣璇锋眰(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_PutRequest3">{{ csjData.W_CSJ_PutRequest3 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鏀捐揣瀹屾垚(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_PutFinish3">{{ csjData.W_CSJ_PutFinish3 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鍙栬揣璇锋眰(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_TakeRequest3">{{ csjData.W_CSJ_TakeRequest3 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鍙栬揣瀹屾垚(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_TakeFinish3">{{ csjData.W_CSJ_TakeFinish3 || '-' }}</div>
+ </div>
+
+ <div class="csjuname">鍑哄簱104绔欏彴</div>
+ <div class="csjankuang">
+ <div class="xname">鏄惁鍏佽鏀捐揣(璇�):</div>
+ <div class="xcsji" :title="csjData.R_CSJ_IsCanPut4">{{ csjData.R_CSJ_IsCanPut4 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鏄惁鍏佽鍙栬揣(璇�):</div>
+ <div class="xcsji" :title="csjData.R_CSJ_IsCanTake4">{{ csjData.R_CSJ_IsCanTake4 || '-' }}</div>
+ </div>
+
+ <div class="csjankuang">
+ <div class="xname">鏀捐揣璇锋眰(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_PutRequest4">{{ csjData.W_CSJ_PutRequest4 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鏀捐揣瀹屾垚(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_PutFinish4">{{ csjData.W_CSJ_PutFinish4 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鍙栬揣璇锋眰(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_TakeRequest4">{{ csjData.W_CSJ_TakeRequest4 || '-' }}</div>
+ </div>
+ <div class="csjankuang">
+ <div class="xname">鍙栬揣瀹屾垚(鍐�):</div>
+ <div class="xcsji" :title="csjData.W_CSJ_TakeFinish4">{{ csjData.W_CSJ_TakeFinish4 || '-' }}</div>
+ </div>
+ </div>
</div>
</div>
</template>
<script>
+import { ref, nextTick, watch, onUnmounted } from "vue";
+import { useStore } from "vuex";
+import { onMounted } from "vue";
+
export default {
- props: {
- list: {
- type: Array,
- default: () => {
- return [];
- }
- }
+ data() {
+ return {
+ xuan: 0
+ };
},
- created() {
- if (!this.list.length) {
- this.list.push({
- title: '娑堟伅werwer娴嬭瘯鏍囬',
- message: '娑堟伅娴嬭瘯鍐呭娑堟伅娴嬭瘯鍐呭娑堟伅娴嬭瘯鍐呭娑堟伅娴嬭瘯鍐呭',
- date: '2022-05-02 03:10'
+ setup() {
+ const store = useStore();
+ // 浠呭瓨鍌–SJ鏁版嵁锛屼笌鍏朵粬鏁版嵁闅旂
+ const csjData = ref({});
+
+ // 寤惰繜鏇存柊閰嶇疆锛岃В鍐抽棯鐑侀棶棰�
+ const UPDATE_DELAY = 300; // 寤惰繜300ms鏇存柊UI
+ let updateTimer = null; // 瀹氭椂鍣ㄥ疄渚�
+
+ // CSJ鏁版嵁鏄犲皠瑙勫垯
+ const csjStatusMap = {
+ R_CSJ_Status: {
+ 1: "姝ｅ父",
+ 2: "鏁呴殰",
+ 3: "鎬ュ仠",
+ },
+ R_CSJ_AutoStatus: {
+ 0: "缁翠慨",
+ 1: "鎵嬪姩",
+ 2: "鍗婅嚜鍔�",
+ 3: "鑷姩",
+ },
+ R_CSJ_WorkStatus: {
+ 0: "寰呮満",
+ 1: "鍙栬揣涓�",
+ 2: "鍙栬揣瀹屾垚",
+ 4: "鏀捐揣涓�",
+ 5: "鏀捐揣瀹屾垚",
+ 6: "浠诲姟瀹屾垚",
+ },
+ R_CSJ_WorkType: {
+ 0: "鏃犱綔涓氫换鍔�(0)",
+ 1: "鍙栨斁璐т綔涓�(1)",
+ 2: "鍙彇璐т綔涓�(2)",
+ 3: "鍙斁璐т綔涓�(3)",
+ 4: "绉诲姩鍒版寚瀹氫綅缃�"
+ },
+ R_CSJ_TrayType: {
+ "-1": "绌虹(-1)",
+ 1: "灏忔墭鐩�(1)",
+ 2: "涓墭鐩�(2)",
+ 3: "澶ф墭鐩�(3)",
+ 4: "鐗瑰ぇ鎵樼洏(4)",
+ }
+ };
+
+ // CSJ瀛楁鍒嗙粍
+ const csjFieldGroups = {
+ permissionFields: {
+ keys: ["R_CSJ_IsCanPut1", "R_CSJ_IsCanTake1", "R_CSJ_IsCanPut2", "R_CSJ_IsCanTake2",
+ "R_CSJ_IsCanPut3", "R_CSJ_IsCanTake3", "R_CSJ_IsCanPut4", "R_CSJ_IsCanTake4"],
+ map: { true: "鏄�", false: "鍚�" }
+ },
+ requestFields: {
+ keys: ["W_CSJ_PutRequest1", "W_CSJ_TakeRequest1", "W_CSJ_PutRequest2", "W_CSJ_TakeRequest2",
+ "W_CSJ_PutRequest3", "W_CSJ_TakeRequest3", "W_CSJ_PutRequest4", "W_CSJ_TakeRequest4"],
+ map: { true: "鏄�", false: "鍚�" }
+ },
+ finishFields: {
+ keys: ["W_CSJ_PutFinish1", "W_CSJ_TakeFinish1", "W_CSJ_PutFinish2", "W_CSJ_TakeFinish2",
+ "W_CSJ_PutFinish3", "W_CSJ_TakeFinish3", "W_CSJ_PutFinish4", "W_CSJ_TakeFinish4"],
+ map: { true: "鏄�", false: "鍚�" }
+ },
+ palletTypeFields: {
+ keys: ["R_CSJ_TakePalletType1", "R_CSJ_TakePalletType2", "R_CSJ_TakePalletType3", "R_CSJ_TakePalletType4",
+ "W_CSJ_PutPalletType1", "W_CSJ_PutPalletType2", "W_CSJ_PutPalletType3", "W_CSJ_PutPalletType4"],
+ map: { "-1": "绌虹(-1)", 1: "灏忔墭鐩�(1)", 2: "涓墭鐩�(2)", 3: "澶ф墭鐩�(3)", 4: "鐗瑰ぇ鎵樼洏(4)" }
+ }
+ };
+
+ // 澶勭悊CSJ鍘熷鏁版嵁
+ const processCSJData = (rawData) => {
+ if (!rawData) return {};
+ const processedData = { ...rawData };
+
+ // 澶勭悊鏍稿績鐘舵�佸瓧娈�
+ Object.keys(csjStatusMap).forEach(key => {
+ if (processedData.hasOwnProperty(key)) {
+ processedData[key] = csjStatusMap[key][processedData[key]] || processedData[key];
+ }
});
- }
+
+ // 澶勭悊鍒嗙粍瀛楁
+ Object.values(csjFieldGroups).forEach(group => {
+ group.keys.forEach(key => {
+ if (processedData.hasOwnProperty(key)) {
+ processedData[key] = group.map[processedData[key]] || processedData[key];
+ }
+ });
+ });
+
+ return processedData;
+ };
+
+ // 寤惰繜鏇存柊CSJ鏁版嵁锛岄伩鍏嶉珮棰戝埛鏂�
+ const delayedUpdateCSJData = (newRawData) => {
+ if (updateTimer) {
+ clearTimeout(updateTimer);
+ }
+
+ updateTimer = setTimeout(() => {
+ // 鍙鐞嗗寘鍚獵SJ鐗瑰緛瀛楁鐨勬暟鎹�
+ if (newRawData && newRawData.R_CSJ_Status !== undefined) {
+ csjData.value = processCSJData(newRawData);
+
+ // 鏇存柊鏍峰紡
+ nextTick(() => {
+ const valueElements = document.getElementsByClassName("xcsji");
+ 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(() => {
+ // 鍒濆鍔犺浇鏁版嵁
+ const initialData = store.state.homedata;
+ if (initialData && initialData.R_CSJ_Status !== undefined) {
+ csjData.value = processCSJData(initialData);
+ }
+
+ // 鐩戝惉鏁版嵁鍙樺寲锛屽彧澶勭悊CSJ鏁版嵁
+ const unwatch = watch(
+ () => store.state.homedata,
+ (newData) => {
+ if (newData && newData.R_CSJ_Status !== undefined) {
+ delayedUpdateCSJData(newData);
+ }
+ },
+ { deep: true }
+ );
+
+ // 缁勪欢鍗歌浇鏃舵竻鐞�
+ onUnmounted(() => {
+ unwatch();
+ if (updateTimer) {
+ clearTimeout(updateTimer);
+ }
+ });
+ });
+
+ return {
+ csjData
+ };
}
};
</script>
-<style scoped lang="less">
-.message-container {
- .title {
- padding-bottom: 10px;
- }
- .item {
- border-bottom: 1px solid #eee;
- padding: 10px 20px;
- }
- .content {
- color: #7e7e7e;
- font-size: 13px;
- }
+
+<style scoped>
+.ding {
+ float: left;
+ width: 20px;
+ height: 20px;
+ margin-top: 7px;
+}
+.yan {
+ color: white;
+ float: left;
+ font-size: 25px;
+}
+.dakuang {
+ width: 250px;
+ height: 50px;
+ position: absolute;
+ top: 150px;
+ left: 200px;
+}
+#xiugai {
+ width: 100px;
+ height: 30px;
+ float: left;
+ border-radius: 5px;
+ text-align: center;
+ line-height: 30px;
+ cursor: pointer;
+ border: 1px solid white;
+ color: white;
+ background: rgba(255, 255, 255, 0.5);
+ font-size: 25px;
+ position: absolute;
+ top: 150px;
+ left: 450px;
+}
+#xiugai:hover {
+ background: #f60;
+}
+#shu1,
+#shu2 {
+ width: 200px;
+ height: 30px;
+ float: left;
+ margin-top: 0px;
+ margin-right: 0px;
+ border-radius: 5px;
+ border: 1px solid white;
+}
+#guan {
+ width: 40px;
+ height: 40px;
+ float: left;
+ font-size: 1.1cqw;
+ text-align: center;
+ line-height: 40px;
+ cursor: pointer;
+ margin-left: 560px;
+ color: white;
+ position: absolute;
+}
+#ti {
+ width: 600px;
+ height: 300px;
+ position: relative;
+ background: rgba(255, 255, 255, 1);
+ border-radius: 10px;
+ top: 230px;
+ left: 35%;
+ display: none;
+ background-image: url("../../img/1.png");
+ background-repeat: no-repeat;
+ background-size: 170%;
+ background-position: -220px 0px;
+}
+.csjuname {
+ width: 100%;
+ height: 5vh;
+ float: left;
+ text-align: center;
+ line-height: 50px;
+ font-weight: 700;
+ font-size: 1.1cqw;
+ color: white;
+}
+.xname {
+ width: 70%;
+ height: 80px;
+ float: left;
+ line-height: 7vh;
+ font-size: 1.1cqw;
+ color: white;
+}
+.xcsji {
+ width: 30%;
+ height: 7vh;
+ float: left;
+ line-height: 50px;
+ font-size: 1.1cqw;
+ color: rgb(242, 242, 50);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.csjankuang {
+ width: 45%;
+ height: 3vh;
+ margin-top: 10px;
+ margin-left: 5%;
+ float: left;
+}
+#title {
+ float: left;
+ width: 95%;
+ height: 88vh;
+ margin-top: 40px;
+ margin-left: 3%;
+ background-image: url("../../img/1.png");
+ background-repeat: no-repeat;
+ background-size: 100%;
+ container-type: inline-size;
+}
+#bkuang {
+ width: 100%;
+ height: 55vh;
+ float: left;
+}
+.skuang {
+ width: 31%;
+ height: 55vh;
+ float: left;
+ border-top: none;
+ border-left: none;
+ border-bottom: none;
+ background: rgba(255, 255, 255, 0.2);
+ margin-left: 1.7%;
+ border-radius: 10px;
}
</style>
--
Gitblit v1.9.3