| | |
| | | @click="showDialog(rect.glass_id)" |
| | | :style="{ position: 'absolute', |
| | | top: `${rect.y_axis}px`, left: `${rect.x_axis}px`, width: `${rect.width}px`, height: `${rect.height}px`, |
| | | backgroundColor: getRectColor(rect.glass_state) |
| | | backgroundColor: rect.isActive ? '#ADFF2F' : getRectColor(rect.glass_state) |
| | | }" |
| | | > |
| | | <!-- 箭头 --> |
| | |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;"> |
| | | <el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose"> |
| | | <el-button type="warning" plain :icon="Delete" @click="handleDamage(currentGlassId)" style="width: 140px;margin-left: 10px;"> |
| | | {{ $t('order.dilapidation') }} |
| | | </el-button> |
| | |
| | | function showDialog(glassId: number) { |
| | | currentGlassId.value = glassId; |
| | | blind.value = true; |
| | | adjustedRects.value = adjustedRects.value.map(rect => |
| | | rect.glass_id === glassId ? { ...rect, isActive: true } : rect |
| | | ); |
| | | } |
| | | const handleDialogClose = () => { |
| | | adjustedRects.value = adjustedRects.value.map(rect => ({ |
| | | ...rect, |
| | | isActive: false |
| | | })); |
| | | } |
| | | // 破损 |
| | | const handleDamage = async () => { |
| | | try { |
| | |
| | | } |
| | | }); |
| | | } |
| | | // const connectWebSocket = () => { |
| | | // if (!webSocket) { |
| | | // const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`; |
| | | // webSocket = new WebSocket(socketUrl); |
| | | // webSocket.onmessage = (event) => { |
| | | // const data = JSON.parse(event.data); |
| | | // const scaleFactor = 1621.78/6000; |
| | | // adjustedRects.value = data.currentCutTerritory[0].map(rect => ({ |
| | | // ...rect, |
| | | // x_axis: (6000 -(rect.x_axis + rect.width)) * scaleFactor, |
| | | // y_axis: rect.y_axis * 0.17, |
| | | // width: rect.width * scaleFactor , |
| | | // widtha: rect.width , |
| | | // heighta: rect.height , |
| | | // height: rect.height * 0.165 , |
| | | // glass_state: rect.glass_state, |
| | | // isActive: false |
| | | // })); |
| | | // }; |
| | | // webSocket.onerror = (error) => { |
| | | // console.error('WebSocket Error:', error); |
| | | // }; |
| | | // webSocket.onclose = () => { |
| | | // console.log('WebSocket Connection Closed'); |
| | | // // 可以选择重新连接 |
| | | // }; |
| | | // } |
| | | // }; |
| | | const connectWebSocket = () => { |
| | | if (!webSocket) { |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`; |
| | | webSocket = new WebSocket(socketUrl); |
| | | webSocket.onmessage = (event) => { |
| | | const data = JSON.parse(event.data); |
| | | const scaleFactor = 1621.78/6000; |
| | | adjustedRects.value = data.currentCutTerritory[0].map(rect => ({ |
| | | ...rect, |
| | | x_axis: (6000 -(rect.x_axis + rect.width)) * scaleFactor, |
| | | y_axis: rect.y_axis * 0.17, |
| | | width: rect.width * scaleFactor , |
| | | widtha: rect.width , |
| | | heighta: rect.height , |
| | | height: rect.height * 0.165 , |
| | | glass_state: rect.glass_state |
| | | })); |
| | | const data = JSON.parse(event.data); |
| | | const scaleFactor = 1621.78 / 6000; |
| | | const newRects = data.currentCutTerritory[0].map(rect => { |
| | | const existingRect = adjustedRects.value.find(r => r.glass_id === rect.glass_id); |
| | | if (existingRect) { |
| | | return { |
| | | ...existingRect, |
| | | x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor, |
| | | y_axis: rect.y_axis * 0.17, |
| | | width: rect.width * scaleFactor, |
| | | height: rect.height * 0.165, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | glass_state: rect.glass_state, |
| | | // 保持 isActive 状态不变 |
| | | }; |
| | | } else { |
| | | // 如果不存在,则添加新矩形,默认 isActive 为 false |
| | | return { |
| | | ...rect, |
| | | x_axis: (6000 - (rect.x_axis + rect.width)) * scaleFactor, |
| | | y_axis: rect.y_axis * 0.17, |
| | | width: rect.width * scaleFactor, |
| | | height: rect.height * 0.165, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | glass_state: rect.glass_state, |
| | | isActive: false, |
| | | glass_id: rect.glass_id, |
| | | }; |
| | | } |
| | | }); |
| | | adjustedRects.value = newRects; |
| | | }; |
| | | webSocket.onerror = (error) => { |
| | | console.error('WebSocket Error:', error); |
| | | }; |
| | | webSocket.onclose = () => { |
| | | console.log('WebSocket Connection Closed'); |
| | | // 可以选择重新连接 |
| | | }; |
| | | } |
| | | } |
| | | }; |
| | | |
| | | onMounted(() => { |