| | |
| | | import {useRouter} from "vue-router" |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import request from "@/utils/request" |
| | | |
| | | |
| | | import { ref, onMounted, onBeforeUnmount,onUnmounted } from 'vue'; |
| | | import { WebSocketHost ,host} from '@/utils/constants' |
| | | import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; |
| | | const adjustedRects = ref([]); |
| | | const currentGlassId = ref(null); |
| | | const currenttemperingFeedSequence = ref(null); |
| | | |
| | | |
| | | const dialogFormVisible = ref(true) |
| | | const dialogFormVisiblea = ref(false) |
| | | const blind = ref(false) |
| | | |
| | | |
| | | const getTableRow = (row,type) =>{ |
| | | switch (type) { |
| | | case 'edit' :{ |
| | |
| | | } |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`; |
| | | // 定义消息处理函数,更新 receivedData 变量 |
| | | const handleMessage = (data) => { |
| | | // 更新 tableData 的数据 |
| | | if(data.overGlass!=null){ |
| | | adjustedRects.value = data.overGlass[0].map(rect => { |
| | | const handleMessage = (data) => { |
| | | if (data.overGlass && data.overGlass.length > 0) { |
| | | // 提取新的矩形ID |
| | | const newGlassIds = new Set(data.overGlass[0].map(rect => rect.glassId)); |
| | | |
| | | // 过滤出已存在的矩形 |
| | | const existingRects = adjustedRects.value.filter(rect => newGlassIds.has(rect.glassId)); |
| | | |
| | | // 计算新的矩形 |
| | | const newRects = data.overGlass[0].map(rect => { |
| | | const scaleFactor = 1621.78/5190; |
| | | let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta; |
| | | let newX = rect.yCoordinate; |
| | | |
| | | if (rect.width < rect.height) { |
| | | widtha = rect.height; |
| | | heighta = rect.width; |
| | |
| | | if (rect.angle === 0) { |
| | | adjustedWidth = widtha * scaleFactor; |
| | | adjustedHeight = heighta * 0.16; |
| | | // adjustedWidtha = widtha; |
| | | // adjustedHeighta = heighta; |
| | | // newX = 5190 - (rect.yCoordinate + rect.width); |
| | | } else { |
| | | adjustedWidth = heighta * scaleFactor; |
| | | adjustedHeight = widtha * 0.16; |
| | | // adjustedWidtha = heighta; |
| | | // adjustedHeighta = widtha; |
| | | // newX = 5190 - (rect.yCoordinate + rect.height); |
| | | } |
| | | return { |
| | | ...rect, |
| | |
| | | height: adjustedHeight, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | }; |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | // 合并新旧矩形,并保留 isActive 状态 |
| | | adjustedRects.value = existingRects.map(oldRect => { |
| | | const newRect = newRects.find(r => r.glassId === oldRect.glassId); |
| | | if (newRect) { |
| | | return { ...oldRect, ...newRect, isActive: oldRect.isActive }; |
| | | } |
| | | return oldRect; // 如果旧矩形在新数据中不存在,但保留在newGlassIds中,则保留原样 |
| | | }).concat(newRects.filter(r => !existingRects.some(o => o.glassId === r.glassId))); |
| | | } |
| | | else if (data.overGlass == null) { |
| | | adjustedRects.value = [] |
| | | } |
| | | }; |
| | | function updateRectColors() { |
| | |
| | | rect.state = 8; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | function getRectColora(state) { |
| | | switch (state) { |
| | | case 3: |
| | |
| | | return '#911005'; |
| | | } |
| | | } |
| | | function showDialog(rect) { |
| | | function showDialog(rect) { |
| | | const index = adjustedRects.value.findIndex(r => r.glassId === rect.glassId); |
| | | if (index !== -1) { |
| | | adjustedRects.value[index].isActive = true; |
| | | } |
| | | currentGlassId.value = rect.glassId; |
| | | currenttemperingFeedSequence.value = rect.temperingFeedSequence; |
| | | blind.value = true; |
| | | } |
| | | |
| | | const handleDialogClose = () => { |
| | | adjustedRects.value.forEach(rect => { |
| | | rect.isActive = false; |
| | | }); |
| | | blind.value = false; |
| | | }; |
| | | // 破损 |
| | | const handleDamage = async () => { |
| | | try { |
| | |
| | | closeWebSocket(); |
| | | }); |
| | | </script> |
| | | |
| | | |
| | | <template> |
| | | <div style="margin-top: 10px;"> |
| | | <div> |
| | |
| | | class="rect" |
| | | :style="{ position: 'absolute', top: `${rect.ycoordinate}px`, left: `${rect.xcoordinate}px`, |
| | | width: `${rect.width}px`, height: `${rect.height}px`, |
| | | backgroundColor: getRectColora(rect.state) }"> |
| | | backgroundColor: rect.isActive ? '#ADFF2F' : getRectColora(rect.state) |
| | | }"> |
| | | <div class="centered-text"> |
| | | <div >{{ rect.glassId }}</div> |
| | | <div >{{ rect.flowCardId }}</div> |
| | | <div>{{ rect.widtha }}*{{ rect.heighta }}</div> |
| | | <!-- <div style="margin-top: 25px;margin-left: -60px;">{{ rect.widtha }}*{{ rect.heighta }}</div> --> |
| | | <div style="font-size: 15px;font-weight: bold;">{{ rect.glassId }}</div> |
| | | <div style="font-size: 15px;font-weight: bold;">{{ rect.flowCardId }}</div> |
| | | <div style="font-size: 30px;font-weight: bold;">{{ rect.widtha }}*{{ rect.heighta }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <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" style="width: 140px;margin-left: 10px;"> |
| | | {{ $t('order.dilapidation') }} |
| | | </el-button> |
| | | </el-dialog> |
| | | </div> |
| | | |
| | | |
| | | </template> |
| | | |
| | | |
| | | <style scoped> |
| | | #boxa{ |
| | | border: 1px solid rgb(119, 116, 116); |