From 1cded29e225b3a73768d8badfc19fba825673451 Mon Sep 17 00:00:00 2001 From: zhoushihao <zsh19950802@163.com> Date: 星期三, 12 六月 2024 09:30:30 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- UI-Project/src/views/PurchaseReturn/purchaseStorage.vue | 100 ++++++++++++++++++++++++++++---------------------- 1 files changed, 56 insertions(+), 44 deletions(-) diff --git a/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue b/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue index 11f2545..2a98019 100644 --- a/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue +++ b/UI-Project/src/views/PurchaseReturn/purchaseStorage.vue @@ -3,7 +3,10 @@ import {reactive} from "vue"; import {useRouter} from "vue-router" -import { ref } from 'vue' +import { ref, onMounted, onBeforeUnmount } from 'vue'; +import { WebSocketHost ,host} from '@/utils/constants' +import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; +const adjustedRects = ref([]); const dialogFormVisible = ref(true) const dialogFormVisiblea = ref(false) @@ -22,55 +25,53 @@ } } -const gridOptions = reactive({ - border: "full",//琛ㄦ牸鍔犺竟妗� - keepSource: true,//淇濇寔婧愭暟鎹� - align: 'center',//鏂囧瓧灞呬腑 - stripe:true,//鏂戦┈绾� - rowConfig: {isCurrent: true, isHover: true,height: 50},//榧犳爣绉诲姩鎴栭�夋嫨楂樹寒 - id: 'OrderList', - showFooter: true,//鏄剧ず鑴� - printConfig: {}, - importConfig: {}, - exportConfig: {}, - scrollY:{ enabled: true },//寮�鍚櫄鎷熸粴鍔� - showOverflow:true, - columnConfig: { - resizable: true, - useKey: true - }, - filterConfig: { //绛涢�夐厤缃」 - remote: true - }, - customConfig: { - storage: true - }, - editConfig: { - trigger: 'click', - mode: 'row', - showStatus: true - }, - data: [ - { - } - ], -}) +const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`; +// 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺 +const handleMessage = (data) => { + // 鏇存柊 tableData 鐨勬暟鎹� + adjustedRects.value = data.overGlass[0].map(rect => ({ + ...rect, // 澶嶅埗鍘熷瀵硅薄鐨勫叾浠栧睘鎬� + xcoordinate: rect.xCoordinate * 0.5, // 灏唜鍊奸櫎浠�3 + ycoordinate: rect.ycoordinate * 0.5, + width: rect.width * 0.4, + height: rect.height * 0.4, + widtha: rect.width, + heighta: rect.height, + })); + console.log(data.intoGlass[0]); +}; +onMounted(() => { + // fetchFlowCardId(); + // fetchTableData(); // 鑾峰彇鏁版嵁 + initializeWebSocket(socketUrl, handleMessage); +}); + +onBeforeUnmount(() => { + console.log("鍏抽棴浜�") + closeWebSocket(); +}); </script> <template> <div style="margin-top: 10px;"> <div> <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading"> - <div style="display: flex;margin-top: 20px;"> - <div style="margin-left: 400px;font-size: 20px;">宸ョ▼鍙凤細P20240305001 </div> - <div style="margin-left: 150px;font-size: 20px;">鐗堝浘缂栧彿锛�1</div> - </div> - <div> - <div id="boxa" style="width: 700px;height: 220px;margin-left: 260px;"> - <div style="margin-top: 85px;"> NG202405060798A01-1</div> - <div> 500脳1500</div> - </div> - </div> + <el-scrollbar height="630px"> + <div style="position: relative;width: 1400px;"> + <div + v-for="(rect, index) in adjustedRects" + :key="index" + class="rect" + :style="{ position: 'absolute', top: `${rect.ycoordinate}px`, left: `${rect.xcoordinate}px`, + width: `${rect.width}px`, height: `${rect.height}px`, + backgroundColor: rect.state === 4 ? '#d1edc4' : '#f8e3c5' }"> + <div class="centered-text"> + <div >{{ rect.flowcardId }}</div> + <div style="margin-top: 50px;margin-left: -50px;">{{ rect.widtha }}*{{ rect.heighta }}</div> + </div> + </div> + </div> + </el-scrollbar> </el-card> </div> </div> @@ -87,4 +88,15 @@ margin-top: 70px; margin-bottom: 50px; } +.rect { + border: 1px solid black; /* 璁剧疆鐭╁舰鐨勮竟妗� */ + background-color: lightblue; /* 璁剧疆鐭╁舰鐨勮儗鏅壊 */ +} +.centered-text { + /* 璁剧疆鏂囧瓧灞呬腑鏍峰紡 */ + display: flex; + justify-content: center; + align-items: center; + height: 100%; /* 纭繚div鍗犳嵁鏁翠釜鐭╁舰鐨勯珮搴� */ +} </style> \ No newline at end of file -- Gitblit v1.8.0