~admin/HangZhouMes.git

			@@ -2,15 +2,21 @@
			import {Search} from "@element-plus/icons-vue";
			import {reactive} from "vue";
			import {useRouter} from "vue-router"

			import { ref, onMounted, onBeforeUnmount } from 'vue';
			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' :{
			@@ -24,67 +30,160 @@
			}
			}
			}

			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 => {
			let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta;
			if (rect.angle === 90) {
			adjustedWidth = rect.height * 0.3;
			adjustedHeight = rect.width * 0.3;
			adjustedWidtha = rect.height;
			adjustedHeighta = rect.width;
			let socket = null;
			const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`;
			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;

			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 * scaleFactorY;
			} else {
			adjustedWidth = rect.width * 0.3;
			adjustedHeight = rect.height * 0.3;
			adjustedWidtha = rect.width;
			adjustedHeighta = rect.height;
			adjustedWidth = heighta * scaleFactor;
			adjustedHeight = widtha * scaleFactorY;
			}
			return {
			...rect, // 复制原始对象的其他属性
			xcoordinate: rect.xCoordinate * 0.3,
			ycoordinate: rect.yCoordinate * 0.3,
			...rect,
			xcoordinate: newX * scaleFactor,
			ycoordinate: rect.xCoordinate * scaleFactorY,
			width: adjustedWidth,
			height: adjustedHeight,
			widtha: adjustedWidtha,
			heighta: adjustedHeighta,
			};
			});
			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() {
			adjustedRects.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 8;
			}
			});
			}
			function getRectColora(state) {
			switch (state) {
			case 3:
			return '#eebe77';
			case 4:
			return '#CD6090';
			case 8:
			return '#911005';
			}
			}
			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;
			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;
			});
			blind.value = false;
			};
			// 破损
			const handleDamage = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			// temperingFeedSequence: currenttemperingFeedSequence.value,
			line: 4001,
			status: 8,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success(response.message);
			blind.value = false;
			updateRectColors();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			}
			onMounted(() => {
			// fetchFlowCardId();
			// fetchTableData(); // 获取数据
			initializeWebSocket(socketUrl, handleMessage);
			socket = initializeWebSocket(socketUrl, handleMessage);
			});

			onUnmounted(() => {
			if (socket) {
			closeWebSocket(socket);
			}
			});
			onBeforeUnmount(() => {
			console.log("关闭了")
			closeWebSocket();
			});
			</script>


			<template>
			<div style="margin-top: 10px;">
			<div>
			<el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" 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].flowCardId }}</div>
			<el-scrollbar height="600px">
			<div style="position: relative;width: 1400px;">
			<div style="text-align: center;">炉号：{{ adjustedRects[0].engineerId }}-{{ adjustedRects[0].temperingLayoutId }}</div>
			<el-scrollbar height="750px" width="1400px" style="background-color: #e9e9eb;">
			<div style="position: relative;">
			<div
			v-for="(rect, index) in adjustedRects"
			:key="index"
			@click="showDialog(rect)"
			class="rect"
			:style="{ position: 'absolute', top: `${rect.ycoordinate}px`, left: `${rect.xcoordinate}px`,
			width: `${rect.width}px`, height: `${rect.height}px`,
			backgroundColor: rect.state === 4 ? '#d1edc4' : '#f8e3c5' }">
			backgroundColor: rect.isActive ? '#ADFF2F' : getRectColora(rect.state)
			}">
			<div class="centered-text">
			<div >{{ rect.glassId }}</div>
			<div style="margin-top: 50px;margin-left: -85px;">{{ 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>
			@@ -92,10 +191,15 @@
			</div>
			</el-card>
			</div>
			<el-dialog v-model="blind" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose">
			<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);
			@@ -112,9 +216,10 @@
			}
			.centered-text {
			/* 设置文字居中样式 */
			display: flex;
			/* display: flex; */
			justify-content: center;
			align-items: center;
			height: 100%; /* 确保div占据整个矩形的高度 */
			font-size: small;
			}
			</style>