From 56fab901b298857ff4985b7429ef843c9a9d1471 Mon Sep 17 00:00:00 2001 From: wangfei <3597712270@qq.com> Date: 星期三, 28 八月 2024 16:20:02 +0800 Subject: [PATCH] 钢化模块打印功能,新增表格字段 --- UI-Project/src/views/UnLoadGlass/Landingindicationtwo.vue | 49 ++++++++++++++++++++++++++----------------------- 1 files changed, 26 insertions(+), 23 deletions(-) diff --git a/UI-Project/src/views/UnLoadGlass/Landingindicationtwo.vue b/UI-Project/src/views/UnLoadGlass/Landingindicationtwo.vue index c7fa71e..1817bb6 100644 --- a/UI-Project/src/views/UnLoadGlass/Landingindicationtwo.vue +++ b/UI-Project/src/views/UnLoadGlass/Landingindicationtwo.vue @@ -1,7 +1,7 @@ <template> <div class="glass-rack"> <div > - <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> + <svg width="500" height="370" xmlns="http://www.w3.org/2000/svg"> <g stroke="null" id="Layer_1"> <!-- 浣跨敤 v-for 寰幆娓叉煋鏁版嵁 --> <g v-for="(rack, index) in racks" :key="index"> @@ -30,23 +30,21 @@ </div> </div> </template> - <script setup> -import { ref, watchEffect ,onMounted} from 'vue'; - +import { ref, watchEffect ,onMounted,onUnmounted} from 'vue'; import { useI18n } from 'vue-i18n' const { t } = useI18n() let language = ref(localStorage.getItem('lang') || 'zh') import Swal from 'sweetalert2' import request from "@/utils/request"; -import { initializeWebSocket } from '@/utils/WebSocketService'; +import { initializeWebSocket,closeWebSocket } from '@/utils/WebSocketService'; import { WebSocketHost ,host} from '@/utils/constants' const racks = ref([ { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } }, + { x: 140, y: 280, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }, + { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG12345678' } }, - - { x: 140, y: 320, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } } ]); @@ -58,9 +56,9 @@ if (index === 0) { return rack.x; } else if (index === 1) { - return rack.x + rack.width - item.width; - } else { return rack.x + (rack.width - item.width) / 2; + } else { + return rack.x + rack.width - item.width; } }; @@ -68,9 +66,9 @@ if (index === 0) { return rack.y + (rack.height - item.height) / 2; } else if (index === 1) { - return rack.y + (rack.height - item.height) / 2; - } else { return rack.y + rack.height - item.height; + } else { + return rack.y + (rack.height - item.height) / 2; } }; @@ -85,14 +83,16 @@ response.data.forEach((itemData, index) => { if (index < racks.value.length) { const rack = racks.value[index]; - const newItem = { + rack.fillColor = itemData.item.fullCardColor === 'red' ? '#911005' : '#6a6da9'; + const newItem = { content: itemData.item.content, fillColor: itemData.item.fillColor, width: itemData.item.width === 0 ? "" : 10, height: itemData.item.height === 0 ? "" : 90 }; + console.log(itemData.item.fullCardColor); - if (index === 2 && itemData.item.width > 0) { + if (index === 1 && itemData.item.width > 0) { newItem.width = 100; newItem.height = 20; } @@ -115,6 +115,7 @@ } }; +let socket = null; const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass3`; // 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺 const handleMessage = (data) => { @@ -124,7 +125,8 @@ data.glassinfo2[0].forEach((itemData, index) => { if (index < racks.value.length) { const rack = racks.value[index]; - const newItem = { + rack.fillColor = itemData.item.fullCardColor === 'red' ? '#911005' : '#6a6da9'; + const newItem = { content: itemData.item.content, fillColor: itemData.item.fillColor, width: itemData.item.width === 0 ? "" : 10, @@ -132,7 +134,7 @@ downGlassInfoList:itemData.item.downGlassInfoList }; - if (index === 2 && itemData.item.width > 0) { + if (index === 1 && itemData.item.width > 0) { newItem.width = 100; newItem.height = 20; } @@ -143,13 +145,15 @@ } }); }; - -// 鍒濆鍖� WebSocket锛屽苟浼犻�掓秷鎭鐞嗗嚱鏁� - onMounted(() => { fetchFlowCardId(); // 鑾峰彇鏁版嵁 - initializeWebSocket(socketUrl, handleMessage); + socket = initializeWebSocket(socketUrl, handleMessage); }); + onUnmounted(() => { + if (socket) { + closeWebSocket(socket); + } + }); const showCustomAlert = (downGlassInfoList) => { let tableContent = '<table border="1" style="border-collapse: collapse; width: 100%;">'; tableContent += '<tr><th style="background-color: #f2f2f2;">鐜荤拑ID</th><th style="background-color: #f2f2f2;">鑶滅郴</th><th style="background-color: #f2f2f2;">鍘氬害</th><th style="background-color: #f2f2f2;">瀹藉害</th><th style="background-color: #f2f2f2;">楂樺害</th></tr>'; @@ -167,7 +171,7 @@ tableContent += '</table>'; Swal.fire({ - title: "$t('reportWork.glassinformation')", + title: t('reportWork.glassinformation'), // title: '鐜荤拑淇℃伅', html: tableContent, customClass: { @@ -175,7 +179,6 @@ } }); }; - const showRectInfo = (rack) => { const content = rack.item.content; @@ -193,9 +196,9 @@ <style scoped> .glass-rack { - margin-left: 20px; + /* margin-left: 20px; */ width: 500px; - margin-top: 10px; + margin-top: 5px; } .rack-rect:hover { cursor: pointer; -- Gitblit v1.8.0