~admin/HangZhouMes.git

			@@ -4,18 +4,19 @@
			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 currentRect = ref(null);
			const canSelectProject = ref(true);
			const dialogFormVisible = ref(true)
			const dialogFormVisiblea = ref(false)
			const blind = ref(false)


			const getTableRow = (row,type) =>{
			switch (type) {
			case 'edit' :{
			@@ -31,12 +32,18 @@
			}
			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 scaleFactor = 1621.78/5190;
			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 = 1390/5190;
			const scaleFactorY = 750/2800;
			let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta;
			let newX = rect.yCoordinate;

			@@ -49,91 +56,35 @@
			}
			if (rect.angle === 0) {
			adjustedWidth = widtha * scaleFactor;
			adjustedHeight = heighta * 0.16;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			// newX = 5190 - (rect.yCoordinate + rect.width);
			adjustedHeight = heighta * scaleFactorY;
			} else {
			adjustedWidth = heighta * scaleFactor;
			adjustedHeight = widtha * 0.16;
			// adjustedWidtha = heighta;
			// adjustedHeighta = widtha;
			// newX = 5190 - (rect.yCoordinate + rect.height);
			adjustedHeight = widtha * scaleFactorY;
			}
			return {
			...rect,
			xcoordinate: newX * scaleFactor,
			ycoordinate: rect.xCoordinate * 0.16,
			ycoordinate: rect.xCoordinate * scaleFactorY,
			width: adjustedWidth,
			height: adjustedHeight,
			widtha: rect.width,
			heighta: rect.height,
			// isActive: false,
			};
			});
			}
			});

			// 合并新旧矩形，并保留 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 = []
			}
			};
			// 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) {
			@@ -151,17 +102,28 @@
			return '#911005';
			}
			}
			function showDialog(rect) {
			rect.isActive = true;
			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;
			blind.value = true;
			currentRect.value = rect;
			if (currentRect.value.state == 8) {
			canSelectProject.value = false;
			} else if (currentRect.value.state !== 8) {
			canSelectProject.value = true;
			}
			}

			const handleDialogClose = () => {
			adjustedRects.value.forEach(rect => {
			rect.isActive = false; // 关闭对话框时重置所有矩形的 isActive 状态
			rect.isActive = false;
			});
			};
			blind.value = false;
			};
			// 破损
			const handleDamage = async () => {
			try {
			@@ -199,15 +161,15 @@
			closeWebSocket();
			});
			</script>


			<template>
			<div style="margin-top: 10px;">
			<div>
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 600px;" v-loading="loading">
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading">
			<!-- <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading"> -->
			<div v-if="adjustedRects.length > 0">
			<div style="text-align: center;">炉号：{{ adjustedRects[0].engineerId }}-{{ adjustedRects[0].temperingLayoutId }}</div>
			<el-scrollbar height="550px" width="1200px" style="background-color: #e9e9eb;">
			<el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;">
			<div style="position: relative;">
			<div
			v-for="(rect, index) in adjustedRects"
			@@ -219,10 +181,9 @@
			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>
			@@ -231,14 +192,14 @@
			</el-card>
			</div>
			<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;">
			<el-button :disabled="!canSelectProject" 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);