| | |
| | | <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"> |
| | |
| | | </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: '' } }, |
| | | { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } }, |
| | | |
| | | { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: '' } }, |
| | | { 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: '' } } |
| | | { x: 140, y: 280, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } } |
| | | |
| | | ]); |
| | | |
| | |
| | | } |
| | | }; |
| | | |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/unLoadGlass/api/talk/unloadglass3`; |
| | | // 定义消息处理函数,更新 receivedData 变量 |
| | | const handleMessage = (data) => { |
| | |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | // 初始化 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>'; |
| | |
| | | tableContent += '</table>'; |
| | | |
| | | Swal.fire({ |
| | | title: "$t('reportWork.glassinformation')", |
| | | title: t('reportWork.glassinformation'), |
| | | // title: '玻璃信息', |
| | | html: tableContent, |
| | | customClass: { |
| | |
| | | |
| | | <style scoped> |
| | | .glass-rack { |
| | | margin-left: 20px; |
| | | /* margin-left: 20px; */ |
| | | width: 500px; |
| | | margin-top: 10px; |
| | | margin-top: 5px; |
| | | } |
| | | .rack-rect:hover { |
| | | cursor: pointer; |