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/Landingindication.vue | 203 ++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 160 insertions(+), 43 deletions(-)
diff --git a/UI-Project/src/views/UnLoadGlass/Landingindication.vue b/UI-Project/src/views/UnLoadGlass/Landingindication.vue
index 62fd6f9..e3d52c3 100644
--- a/UI-Project/src/views/UnLoadGlass/Landingindication.vue
+++ b/UI-Project/src/views/UnLoadGlass/Landingindication.vue
@@ -1,17 +1,19 @@
<template>
<div class="glass-rack">
<div >
- <svg width="300" 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">
+ <g v-for="(rack, index) in racks" :key="index" :data="tableData">
<rect
:x="rack.x"
:y="rack.y"
:width="rack.width"
:height="rack.height"
:fill="rack.fillColor"
-
+ :data-index="index"
+ class="rack-rect"
+ @click="showRectInfo(rack)"
/>
<rect
:x="calculateItemXPosition(rack, rack.item, index)"
@@ -20,7 +22,7 @@
:height="rack.item.height"
:fill="rack.item.fillColor"
/>
- <text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 1 }}鍙峰伐浣�</text>
+ <text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 1 }}{{ $t('reportWork.workstation') }}</text>
<text :x="rack.x + rack.width / 2" :y="rack.y + rack.height + 20" text-anchor="middle">{{ rack.item.content }}</text>
</g>
</g>
@@ -28,49 +30,164 @@
</div>
</div>
</template>
+<script setup>
+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,closeWebSocket } from '@/utils/WebSocketService';
+ import { WebSocketHost } 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',downGlassInfoList:"" } },
+
+ { x: 140, y: 280, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' ,downGlassInfoList:""} },
-<script>
-export default {
- data() {
- return {
- racks: [
- { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
- { x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
- { x: 190, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
- { x: 190, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
- { x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
- ]
- };
- },
- methods: {
- // 璁＄畻鍐呴儴鐗╁搧鐨� x 鍧愭爣浣嶇疆
- calculateItemXPosition(rack, item, index) {
- if (index === 0 || index === 1) { // 濡傛灉鏄涓�鎴栫浜屼釜鐗╁搧
- return rack.x; // 杩斿洖宸﹁竟鐣� x 鍧愭爣
- } else if (index === 2 || index === 3) { // 濡傛灉鏄涓夋垨绗洓涓墿鍝�
- return rack.x + rack.width - item.width; // 杩斿洖鍙宠竟鐣� x 鍧愭爣
- } else {
- return rack.x + (rack.width - item.width) / 2; // 杩斿洖姘村钩灞呬腑鐨� x 鍧愭爣
- }
- },
- // 璁＄畻鍐呴儴鐗╁搧鐨� y 鍧愭爣浣嶇疆
- calculateItemYPosition(rack, item, index) {
- if (index === 0 || index === 1) { // 濡傛灉鏄涓�鎴栫浜屼釜鐗╁搧
- return rack.y + (rack.height - item.height) / 2; // 杩斿洖鍨傜洿灞呬腑鐨� y 鍧愭爣
- } else if (index === 2 || index === 3) { // 濡傛灉鏄涓夋垨绗洓涓墿鍝�
- return rack.y + (rack.height - item.height) / 2; // 杩斿洖鍨傜洿灞呬腑鐨� y 鍧愭爣
- } else {
- return rack.y + rack.height - item.height; // 杩斿洖搴曢儴瀵归綈鐨� y 鍧愭爣
- }
- }
+ { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG12345678',downGlassInfoList:"" } },
+
+
+]);
+watchEffect(() => {
+ // 瑙﹀彂鏁版嵁鍙樺寲鏃堕噸鏂版覆鏌�
+});
+const calculateItemXPosition = (rack, item, index) => {
+ if (index === 0 ) {
+ return rack.x;
+ } else if (index === 1 ) {
+ return rack.x + (rack.width - item.width) / 2;
+ } else {
+ return rack.x + rack.width - item.width;
}
};
-</script>
+const calculateItemYPosition = (rack, item, index) => {
+ if (index === 0 ) {
+ return rack.y + (rack.height - item.height) / 2;
+ } else if (index === 1) {
+ return rack.y + rack.height - item.height;
+ } else {
+ return rack.y + (rack.height - item.height) / 2;
+ }
+};
+const fetchFlowCardId = async () => {
+ try {
+ const response = await request.get('unLoadGlass/downWorkStation/getwo');
+ if (response.code === 200) {
+ console.log(response);
+ // 閬嶅巻鍝嶅簲鏁版嵁骞舵浛鎹acks鏁扮粍涓殑item灞炴��
+ response.data.forEach((itemData, index) => {
+ if (index < racks.value.length) {
+ const rack = racks.value[index];
+ 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,
+ downGlassInfoList:itemData.item.downGlassInfoList
+ };
+ if (index === 1 && itemData.item.width > 0) {
+ newItem.width = 100;
+ newItem.height = 20;
+ }
+ rack.item = newItem;
+ console.log(racks.value); // 鎵撳嵃鏇存柊鍚庣殑 racks 鍊�
+ }
+});
+ } else {
+ ElMessage.error(response.msg);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+};
+let socket = null;
+const socketUrl = `ws://${WebSocketHost}:8085/api/talk/unloadglass2`;
+//const socketUrl = `ws://${WebSocketHost}:88/api/unLoadGlass/api/talk/unloadglass2`;
+// 瀹氫箟娑堟伅澶勭悊鍑芥暟锛屾洿鏂� receivedData 鍙橀噺
+const handleMessage = (data) => {
+ // 鏇存柊 tableData 鐨勬暟鎹�
+ data.glassinfo[0].forEach((itemData, index) => {
+ if (index < racks.value.length) {
+ const rack = racks.value[index];
+ 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,
+ downGlassInfoList:itemData.item.downGlassInfoList
+ };
+ if (index === 1 && itemData.item.width > 0) {
+ newItem.width = 100;
+ newItem.height = 20;
+ }
+ rack.item = newItem;
+ // console.log("鏄剧ず鍥�1",racks.value); // 鎵撳嵃鏇存柊鍚庣殑 racks 鍊�
+ }
+});
+};
+onMounted(() => {
+ fetchFlowCardId(); // 鑾峰彇鏁版嵁
+ 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>';
+ downGlassInfoList.forEach(info => {
+ tableContent += `<tr>
+ <td>${info.glassId}</td>
+ <td>${info.Filmsid}</td>
+ <td>${info.thickness}</td>
+ <td>${info.width}</td>
+ <td>${info.height}</td>
+ </tr>`;
+ });
+ tableContent += '</table>';
+ Swal.fire({
+ // title: '鐜荤拑淇℃伅',
+ title: t('reportWork.glassinformation'),
+ html: tableContent,
+ customClass: {
+ popup: 'format-pre'
+ }
+ });
+};
+ const showRectInfo = (rack) => {
+ const content = rack.item.content;
+ console.log(rack.item.downGlassInfoList[0].flowCardId)
+ console.log(content)
+ if(content==rack.item.downGlassInfoList[0].flowCardId){
+ const downGlassInfoList = rack.item.downGlassInfoList;
+ console.log(downGlassInfoList)
+ showCustomAlert(downGlassInfoList);
+ }
+ };
+</script>
<style scoped>
.glass-rack {
- margin-left: 20px;
- width: 300px;
- margin-top: 10px;
+ /* margin-left: 10px; */
+ width: 500px;
+ margin-top: 5px;
}
-</style>
+.rack-rect:hover {
+ cursor: pointer;
+}
+.custom-popover-class {
+ background-color: lightgrey;
+ color: black;
+ border: 1px solid black;
+}
+.format-pre pre {
+ background: #49483e;
+ color: #f7f7f7;
+ padding: 10px;
+ font-size: 14px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0