| | |
| | | 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' :{ |
| | |
| | | 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; |
| | |
| | | height: adjustedHeight, |
| | | widtha: rect.width, |
| | | heighta: rect.height, |
| | | // isActive: false, |
| | | }; |
| | | }); |
| | | } |
| | | }; |
| | | // const handleMessage = (data) => { |
| | | // // 假设 data.overGlass[0] 是矩形数组 |
| | | // const newRects = data.overGlass[0].map(newRect => ({ |
| | | // ...newRect, |
| | | // const scaleFactor = 1621.78 / 5190; |
| | | // let widtha, heighta, adjustedWidth, adjustedHeight; |
| | | |
| | | // // 交换宽度和高度(如果矩形是“横向”的) |
| | | // if (rect.width < rect.height) { |
| | | // widtha = rect.height; |
| | | // heighta = rect.width; |
| | | // } else { |
| | | // widtha = rect.width; |
| | | // heighta = rect.height; |
| | | // } |
| | | |
| | | // // 根据角度调整宽度和高度 |
| | | // if (rect.angle === 0) { |
| | | // adjustedWidth = widtha * scaleFactor; |
| | | // adjustedHeight = heighta * 0.16; |
| | | // } else { |
| | | // adjustedWidth = heighta * scaleFactor; |
| | | // adjustedHeight = widtha * 0.16; |
| | | // } |
| | | |
| | | // // 注意:这里可能需要重新考虑 newX 的计算方式 |
| | | // // 暂时保留为原始 yCoordinate 的处理,但通常 x 坐标不应来自 y 坐标 |
| | | // let newX = rect.yCoordinate; // 可能是个错误,除非有特定用途 |
| | | |
| | | // // 返回新的矩形对象 |
| | | // return { |
| | | // ...rect, // 复制原始矩形的所有属性 |
| | | // xcoordinate: newX * scaleFactor, // 注意:这里的 newX 可能需要调整 |
| | | // ycoordinate: rect.xCoordinate * 0.16, |
| | | // width: adjustedWidth, |
| | | // height: adjustedHeight, |
| | | // widtha, |
| | | // heighta, |
| | | // isActive: false, // 默认为非激活状态 |
| | | // // 可以添加其他需要的属性 |
| | | // } |
| | | // })); |
| | | |
| | | // 使用新数据更新 adjustedRects |
| | | // 注意:这里我们假设 adjustedRects.value 中的矩形也有 id 属性 |
| | | // adjustedRects.value = adjustedRects.value.map(oldRect => { |
| | | // const updatedRect = newRects.find(newRect => newRect.id === oldRect.id); |
| | | // if (updatedRect) { |
| | | // // 如果找到了对应的矩形,则合并属性和保留原始激活状态(如果需要的话) |
| | | // // 但在这个例子中,我们总是将 isActive 设置为 false |
| | | // return { |
| | | // ...oldRect, |
| | | // ...updatedRect, // 合并新矩形的属性,但会覆盖 isActive |
| | | // isActive: false, // 总是设置为 false,除非您有更复杂的逻辑 |
| | | // }; |
| | | // } |
| | | // // 如果没有找到对应的矩形,则保留原样 |
| | | // return oldRect; |
| | | // }).concat(newRects.filter(newRect => !adjustedRects.value.some(oldRect => oldRect.id === newRect.id))); |
| | | // // concat 用于添加那些在 adjustedRects.value 中不存在的新矩形 |
| | | // }; |
| | | function updateRectColors() { |
| | | adjustedRects.value.forEach(rect => { |
| | | if (rect.glassId === glassId) { |
| | | rect.state = 8; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | function getRectColora(state) { |
| | | switch (state) { |
| | | case 3: |
| | |
| | | } |
| | | } |
| | | function showDialog(rect) { |
| | | rect.isActive = true; |
| | | currentGlassId.value = rect.glassId; |
| | | currenttemperingFeedSequence.value = rect.temperingFeedSequence; |
| | | blind.value = true; |
| | | } |
| | | const handleDialogClose = () => { |
| | | adjustedRects.value.forEach(rect => { |
| | | rect.isActive = false; // 关闭对话框时重置所有矩形的 isActive 状态 |
| | | }); |
| | | }; |
| | | // 破损 |
| | | 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> |
| | | </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); |