~admin/HangZhouMes.git

			@@ -1,151 +1,909 @@
			<script setup>
			import {Search} from "@element-plus/icons-vue";
			<script setup lang="ts">
			import {Search ,Delete, Upload,Edit} from "@element-plus/icons-vue";
			import {reactive} from "vue";
			import {useRouter} from "vue-router"

			import { ref } from 'vue'

			const dialogFormVisible = ref(true)
			const dialogFormVisiblea = ref(false)

			const getTableRow = (row,type) =>{
			switch (type) {
			case 'edit' :{
			//alert('我接收到子组件传送的编辑信息')
			router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
			break
			import request from "@/utils/request"
			import { ref, onMounted, onBeforeUnmount,nextTick } from 'vue';
			import { WebSocketHost ,host} from '@/utils/constants'
			import { ElMessage, ElMessageBox } from 'element-plus'
			import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
			import { useI18n } from 'vue-i18n'
			import { useRouter } from 'vue-router'
			const { t } = useI18n()
			let language = ref(localStorage.getItem('lang') \|\| 'zh')
			const dialogFormVisible = ref(false)
			const dialogFormVisiblea = ref(true)
			const dialogFormVisibleb = ref(false)
			const dialogFormVisiblec = ref(false)
			const blind1 = ref(false)
			const blind2 = ref(false)
			const blinda = ref(false)
			const blindb = ref(false)
			const dialogVisible = ref(false)
			const width = ref();
			const height = ref();
			const currentRect = ref(null);
			const canSelectProject1 = ref(true);
			const canSelectProject2 = ref(true);
			const canSelectProjecta = ref(true);
			const cantakea = ref(true);
			const cantakeb = ref(true);
			const canona = ref(true);
			const canonb = ref(true);
			const canSelectProjectb = ref(true);
			const adjustedRects1 = ref([]);
			const adjustedRects2 = ref([]);
			const adjustedRectsa = ref([]);
			const adjustedRectsb = ref([]);
			const tableData = ref([])
			const engineerId = ref('')
			const router = useRouter()
			const currentGlassId = ref(null);
			const currenttemperingFeedSequence = ref(null);
			onMounted(async () => {
			try {
			const response = await request.post('/loadGlass/damage/selectDamagePrint', {
			type: 9,
			workingProcedure: '钢化',
			})
			if (response.code === 200) {
			tableData.value = response.data
			console.log(response.data);
			} else {
			ElMessage.warning(res.msg)
			}
			} catch (error) {
			// console.error('Error fetching rects :', error);
			}
			});
			const selectReportData = async () => {
			let postData = {
			type: 9,
			workingProcedure: '钢化',
			...(engineerId.value !== '' && { engineerId: engineerId.value }),
			};
			const response = await request.post("/loadGlass/damage/selectDamagePrint", postData)
			if (response.code === 200) {
			tableData.value = response.data;
			ElMessage.success(response.message);
			} else {
			ElMessage.error(response.message);
			}
			};
			const printing = async () => {
			let postData = {
			type: 9,
			workingProcedure: '钢化',
			...(engineerId.value !== '' && { engineerId: engineerId.value }),
			};
			console.log(engineerId.value);

			const response = await request.post("/loadGlass/damage/selectDamagePrintDetails", postData)
			if (response.code === 200) {
			dialogVisible.value = true;
			tableData.value = response.data;
			await nextTick();
			window.print();
			} else {
			ElMessage.error(response.message);
			}
			};
			const printTable = () => {
			// 这里可以添加一些CSS样式来优化打印效果
			// 例如，可以添加一个隐藏的打印样式表
			window.print();
			};
			const socketUrl = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/temperingGlass`;
			const handleMessage = (data) => {
			// 进炉中右
			if (data.intoGlass2 && data.intoGlass2.length > 0) {
			// 提取新的矩形ID
			const newGlassIds = new Set(data.intoGlass2[0].map(rect => rect.glassId));
			// 过滤出已存在的矩形
			const existingRects = adjustedRects2.value.filter(rect => newGlassIds.has(rect.glassId));
			// 计算新的矩形
			const newRects = data.intoGlass2[0].map(rect => {
			const scaleFactor = 794.67/5087;
			const scaleFactorY = 430/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;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			newX = 5087 - (rect.yCoordinate + widtha);
			} else {
			adjustedWidth = heighta * scaleFactor;
			adjustedHeight = widtha * scaleFactorY;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			newX = 5087 - (rect.yCoordinate + heighta);
			}
			return {
			...rect,
			xcoordinate: newX * scaleFactor,
			ycoordinate: rect.xCoordinate * scaleFactorY,
			width: adjustedWidth,
			height: adjustedHeight,
			widtha: rect.width,
			heighta: rect.height,
			}
			});
			// 合并新旧矩形，并保留 isActive 状态
			adjustedRects2.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.intoGlass2 == null) {
			adjustedRects2.value = []
			}
			// 进炉中左
			if (data.intoGlass && data.intoGlass.length > 0) {
			const newGlassIds = new Set(data.intoGlass[0].map(rect => rect.glassId));
			const existingRects = adjustedRects1.value.filter(rect => newGlassIds.has(rect.glassId));
			const newRects = data.intoGlass[0].map(rect => {
			const scaleFactor = 810.89/5087;
			const scaleFactorY = 430/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;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			newX = 5087 - (rect.yCoordinate + widtha);
			} else {
			adjustedWidth = heighta * scaleFactor;
			adjustedHeight = widtha * scaleFactorY;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			newX = 5087 - (rect.yCoordinate + heighta);
			}
			return {
			...rect,
			xcoordinate: newX * scaleFactor,
			ycoordinate: rect.xCoordinate * scaleFactorY,
			width: adjustedWidth,
			height: adjustedHeight,
			widtha: rect.width,
			heighta: rect.height,
			}
			});
			// 合并新旧矩形，并保留 isActive 状态
			adjustedRects1.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) {
			adjustedRects1.value = []
			}
			if (data.waitingGlass && data.waitingGlass.length > 0) {
			const newGlassIds = new Set(data.waitingGlass[0].map(rect => rect.glassId));
			const existingRects = adjustedRectsa.value.filter(rect => newGlassIds.has(rect.glassId));
			const newRects = data.waitingGlass[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;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			newX = 5190 - (rect.yCoordinate + widtha);
			} else {
			adjustedWidth = heighta * scaleFactor;
			adjustedHeight = widtha * scaleFactorY;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			newX = 5190 - (rect.yCoordinate + heighta);
			}
			return {
			...rect,
			x: newX * scaleFactor,
			y: rect.xCoordinate * scaleFactorY,
			width: adjustedWidth,
			height: adjustedHeight,
			widtha: rect.width,
			heighta: rect.height,
			}
			});
			// 合并新旧矩形，并保留 isActive 状态
			adjustedRectsa.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.waitingGlass == null) {
			adjustedRectsa.value = []
			}
			if (data.outGlass && data.outGlass.length > 0) {
			// 提取新的矩形ID
			const newGlassIds = new Set(data.outGlass[0].map(rect => rect.glassId));
			// 过滤出已存在的矩形
			const existingRects = adjustedRectsb.value.filter(rect => newGlassIds.has(rect.glassId));
			// 计算新的矩形
			const newRects = data.outGlass[0].map(rect => {
			const scaleFactor = 1390/5190;
			const scaleFactory = 750/2800;
			let adjustedWidth, adjustedHeight, adjustedWidtha, adjustedHeighta,widtha,heighta,newY;
			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;
			// adjustedWidtha = widtha;
			// adjustedHeighta = heighta;
			// newX = 5190 - (rect.yCoordinate + widtha);
			newY = 2800 - (rect.xCoordinate + heighta);
			} else {
			adjustedWidth = heighta * scaleFactor;
			adjustedHeight = widtha * scaleFactory;
			// adjustedWidtha = heighta;
			// adjustedHeighta = widtha;
			// newX = 5190 - (rect.yCoordinate + heighta);
			newY = 2800 - (rect.xCoordinate + widtha);
			}
			return {
			...rect, // 复制原始对象的其他属性
			x: newX * scaleFactor,
			y: newY * scaleFactory,
			width: adjustedWidth,
			height: adjustedHeight,
			widtha: rect.width,
			heighta: rect.height,
			}
			});

			// 合并新旧矩形，并保留 isActive 状态
			adjustedRectsb.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.outGlass == null) {
			adjustedRectsb.value = []
			}
			};
			onMounted(() => {
			initializeWebSocket(socketUrl, handleMessage);
			});
			function updateRectColorsa() {
			adjustedRectsa.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 8;
			}
			case 'delete':{
			alert('我接收到子组件传送的删除信息')
			break
			});
			}
			function updateoutColorsa() {
			adjustedRectsa.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 9;
			}
			});
			}
			function updateonColorsa() {
			adjustedRectsa.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 1;
			}
			});
			}
			function updateRectColorsb() {
			adjustedRectsb.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 8;
			}
			});
			}
			function updateoutColorsb() {
			adjustedRectsb.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 9;
			}
			});
			}
			function updateonColorsb() {
			adjustedRectsb.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 3;
			}
			});
			}
			function updateRectColors1() {
			adjustedRects1.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 8;
			}
			});
			}
			function updateRectColors2() {
			adjustedRects2.value.forEach(rect => {
			if (rect.glassId === glassId) {
			rect.state = 8;
			}
			});
			}
			function getRectColora(state) {
			switch (state) {
			case 0:
			return '#7AC5CD';
			case 1:
			return '#95d475';
			case -1:
			return '#CDAF95';
			case 8:
			return '#911005';
			case 9:
			return '#4682B4';
			}
			}

			const gridOptions = reactive({
			border: "full",//表格加边框
			keepSource: true,//保持源数据
			align: 'center',//文字居中
			stripe:true,//斑马纹
			rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
			id: 'OrderList',
			showFooter: true,//显示脚
			printConfig: {},
			importConfig: {},
			exportConfig: {},
			scrollY:{ enabled: true },//开启虚拟滚动
			showOverflow:true,
			columnConfig: {
			resizable: true,
			useKey: true
			},
			filterConfig: { //筛选配置项
			remote: true
			},
			customConfig: {
			storage: true
			},
			editConfig: {
			trigger: 'click',
			mode: 'row',
			showStatus: true
			},
			data: [
			{
			function getRectColorb(state) {
			switch (state) {
			case 3:
			return '#eebe77';
			case 4:
			return '#CD6090';
			case 8:
			return '#911005';
			case 9:
			return '#4682B4';
			}
			}
			function showDialog1(rect) {
			const index = adjustedRects1.value.findIndex(r => r.glassId === rect.glassId);
			if (index !== -1) {
			adjustedRects1.value[index].isActive = true;
			}
			currentGlassId.value = rect.glassId;
			currenttemperingFeedSequence.value = rect.temperingFeedSequence;
			blind1.value = true;
			currentRect.value = rect;
			if (currentRect.value.state == 8) {
			canSelectProject1.value = false;
			} else if (currentRect.value.state !== 8) {
			canSelectProject1.value = true;
			}
			}
			function showDialog2(rect) {
			const index = adjustedRects2.value.findIndex(r => r.glassId === rect.glassId);
			if (index !== -1) {
			adjustedRects2.value[index].isActive = true;
			}
			currentGlassId.value = rect.glassId;
			currenttemperingFeedSequence.value = rect.temperingFeedSequence;
			blind2.value = true;
			currentRect.value = rect;
			if (currentRect.value.state == 8) {
			canSelectProject2.value = false;
			} else if (currentRect.value.state !== 8) {
			canSelectProject2.value = true;
			}
			}
			function showDialoga(rect) {
			const index = adjustedRectsa.value.findIndex(r => r.glassId === rect.glassId);
			if (index !== -1) {
			adjustedRectsa.value[index].isActive = true;
			}
			currentGlassId.value = rect.glassId;
			currenttemperingFeedSequence.value = rect.temperingFeedSequence;
			blinda.value = true;
			currentRect.value = rect;
			if (currentRect.value.state == 8) {
			canSelectProjecta.value = false;
			} else if (currentRect.value.state !== 8) {
			canSelectProjecta.value = true;
			}
			if (currentRect.value.state == 9) {
			cantakea.value = false;
			} else if (currentRect.value.state !== 9) {
			cantakea.value = true;
			}
			if (currentRect.value.state == 1) {
			canona.value = false;
			} else if (currentRect.value.state == 0) {
			canona.value = true;
			}
			}
			function showDialogb(rect) {
			const index = adjustedRectsb.value.findIndex(r => r.glassId === rect.glassId);
			if (index !== -1) {
			adjustedRectsb.value[index].isActive = true;
			}
			currentGlassId.value = rect.glassId;
			currenttemperingFeedSequence.value = rect.temperingFeedSequence;
			blindb.value = true;
			currentRect.value = rect;
			if (currentRect.value.state == 8) {
			canSelectProjectb.value = false;
			} else if (currentRect.value.state !== 8) {
			canSelectProjectb.value = true;
			}
			if (currentRect.value.state == 9) {
			cantakeb.value = false;
			} else if (currentRect.value.state !== 9) {
			cantakeb.value = true;
			}
			if (currentRect.value.state == 3) {
			canonb.value = false;
			} else if (currentRect.value.state !== 3) {
			canonb.value = true;
			}
			}
			const handleDialogClose1 = () => {
			adjustedRects1.value.forEach(rect => {
			rect.isActive = false;
			});
			blind1.value = false;
			};
			const handleDialogClose2 = () => {
			adjustedRects2.value.forEach(rect => {
			rect.isActive = false;
			});
			blind2.value = false;
			};
			const handleDialogClosea = () => {
			adjustedRectsa.value.forEach(rect => {
			rect.isActive = false;
			});
			blinda.value = false;
			};
			const handleDialogCloseb = () => {
			adjustedRectsb.value.forEach(rect => {
			rect.isActive = false;
			});
			blindb.value = false;
			};
			// 破损
			const handleDamage1 = 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('成功！');
			blind1.value = false;
			updateRectColors1();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			],
			})
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			}
			const handleDamage2 = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			line: 4001,
			status: 8,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success('成功！');
			blind2.value = false;
			updateRectColors2();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			}
			// 进炉前破损
			const handleDamagea = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			line: 4001,
			status: 8,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success('成功！');
			blinda.value = false;
			updateRectColorsa();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			}
			// 进炉前人工拿走
			const takeouta = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			line: 4001,
			status: 9,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success('成功！');
			blinda.value = false;
			updateoutColorsa();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			}
			// 进炉前放回
			const takeona = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			line: 4001,
			status: 1,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success('成功！');
			blinda.value = false;
			updateonColorsa();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			console.error(error);
			}
			}
			// 已出炉破损
			const handleDamageb = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			line: 4001,
			status: 8,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success('成功！');
			blindb.value = false;
			updateRectColorsb();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			// console.error(error);
			}
			}
			// 已出炉人工拿走
			const takeoutb = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			line: 4001,
			status: 9,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success('成功！');
			blindb.value = false;
			updateoutColorsb();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			// console.error(error);
			}
			}
			// 已出炉放回
			const takeonb = async () => {
			try {
			const response = await request.post('/temperingGlass/temperingGlassInfo/updateTemperingState', {
			glassId: currentGlassId.value,
			line: 4001,
			status: 3,
			workingProcedure: '钢化',
			})
			if (response.code == 200) {
			ElMessage.success('成功！');
			blindb.value = false;
			updateonColorsb();
			} else {
			// 请求失败，显示错误消息
			ElMessage.error(response.message);
			}
			}
			catch (error) {
			// 处理错误
			// console.error(error);
			}
			}
			onBeforeUnmount(() => {
			console.log("关闭了")
			closeWebSocket();
			});
			</script>

			<template>
			<div style="margin-top: 10px;">
			<el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisible = true;dialogFormVisiblea = false">摆片版图</el-button>
			<el-button id="searchButton" type="success" @click="dialogFormVisiblea = true;dialogFormVisible = false">已出炉玻璃</el-button>
			<el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisiblea = true;dialogFormVisible = false;dialogFormVisibleb = false;dialogFormVisiblec = false;" >{{ $t('processCard.beforefurnace') }}</el-button>
			<el-button style="margin-left: 15px;" id="searchButton" type="primary" @click="dialogFormVisible = true;dialogFormVisiblea = false;dialogFormVisibleb = false;dialogFormVisiblec = false;">{{ $t('processCard.intofurnace') }}</el-button>
			<el-button id="searchButton" type="success" @click="dialogFormVisibleb = true;dialogFormVisible = false;dialogFormVisiblea = false;dialogFormVisiblec = false;">{{ $t('processCard.outfurnace') }}</el-button>
			<el-button id="searchButton" type="info" @click="dialogFormVisiblec = true;dialogFormVisibleb = false;dialogFormVisible = false;dialogFormVisiblea = false">{{ $t('processCard.print') }}</el-button>
			<div v-if="dialogFormVisible" >
			<el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
			<div style="display: flex;margin-bottom: 20px;">
			<div style="margin-left: 450px;font-size: 20px;">工程号：P20240305001 </div>
			<div style="margin-left: 150px;font-size: 20px;">版图编号：1</div>
			</div>
			<div>
			<div id="boxa" style="width: 200px;height: 300px;margin-left: 70px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			</div>
			<div style="margin-top: 20px;">
			<div id="boxa" style="width: 200px;height: 300px;margin-left: 70px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxa" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			<div id="boxb" style="width: 200px;height: 300px;">
			<div style="margin-top: 35px;"> NG202405060798A01-1</div>
			<div> 500×1000</div>
			</div>
			</div>
			</el-card>
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 600px;" v-loading="loading">
			<div style="width: 50%;float: left;background-color: #f4f4f5;height: 430px;">
			<div v-if="adjustedRects1.length > 0">
			<!-- <div style="text-align: center;">炉号：{{ engineerIdDisplay }}-{{ adjustedRects[0].temperingLayoutId }}</div> -->
			<div style="text-align: center;"> 炉号：{{ adjustedRects1[0].engineerId }}-{{ adjustedRects1[0].temperingLayoutId }} </div>
			<el-scrollbar height="430px" style="background-color: #e9e9eb;">
			<div style="position: relative;max-width: 1400px;">
			<div
			v-for="(rect, index) in adjustedRects1"
			:key="index"
			@click="showDialog1(rect)"
			class="rect"
			:style="{ position: 'absolute',
			top: `${rect.ycoordinate}px`,
			left: `${rect.xcoordinate}px`,
			width: `${rect.width}px`,
			height: `${rect.height}px`,
			backgroundColor: rect.isActive ? '#ADFF2F' : rect.state === 8 ? '#911005' : 'lightblue' }"
			>
			<div class="centered-text">
			<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>
			</el-scrollbar>
			</div>
			</div>
			<div style="width: 49%;float: right;background-color: #f4f4f5;height: 430px;">
			<div v-if="adjustedRects2.length > 0">
			<div style="text-align: center;"> 炉号：{{ adjustedRects2[0].engineerId }}-{{ adjustedRects2[0].temperingLayoutId }} </div>
			<!-- <div style="text-align: center;">炉号：{{ engineerIdDisplay2 }}-{{ adjustedRects[0].temperingLayoutId }}</div> -->
			<el-scrollbar height="430px" style="background-color: #e9e9eb;">
			<div style="position: relative;max-width: 1400px;">
			<div
			v-for="(rect, index) in adjustedRects2"
			:key="index"
			@click="showDialog2(rect)"
			class="rect"
			:style="{ position: 'absolute',
			top: `${rect.ycoordinate}px`,
			left: `${rect.xcoordinate}px`,
			width: `${rect.width}px`,
			height: `${rect.height}px`,
			backgroundColor: rect.isActive ? '#ADFF2F' : rect.state === 8 ? '#911005' : 'lightblue' }"
			>
			<div class="centered-text">
			<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>
			</el-scrollbar>
			</div>
			</div>
			</el-card>
			</div>
			<div v-if="dialogFormVisiblea">
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
			<el-scrollbar height="630px">
			<div id="home-card">
			<div id="home-item" v-for="n in 20" :key="n">
			<div id="box" style="width: 100px;height: 165px;">100*65</div>
			<div id="box" style="width: 107px;height: 150px;">107*60</div>
			<div id="box" style="width: 107px;height: 155px;">109*60</div>
			</div>
			</div>
			</el-scrollbar>
			</el-card>
			</div>
			<!-- 进炉前 -->
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading">
			<div v-if="adjustedRectsa.length > 0">
			<div style="text-align: center;"> 炉号：{{ adjustedRectsa[0].engineerId }}-{{ adjustedRectsa[0].temperingLayoutId }} </div>
			<!-- <div style="text-align: center;">炉号：{{ engineerIdDisplaya }}-{{ adjustedRects[0].temperingLayoutId }}</div> -->
			<el-scrollbar height="750px" style="background-color: #e9e9eb;">
			<div style="position: relative;max-width: 1400px;">
			<div
			v-for="(rect, index) in adjustedRectsa"
			:key="index"
			@click="showDialoga(rect)"
			class="rect"
			:style="{ position: 'absolute', top: `${rect.y}px`, left: `${rect.x}px`,
			width: `${rect.width}px`, height: `${rect.height}px`,
			backgroundColor: rect.isActive ? '#ADFF2F' : getRectColora(rect.state) }">
			<div class="centered-text">
			<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>
			</el-scrollbar>
			</div>
			</el-card>
			</div>
			<div v-if="dialogFormVisibleb">
			<!-- 已出炉 -->
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading">
			<div v-if="adjustedRectsb.length > 0">
			<div style="text-align: center;"> 炉号：{{ adjustedRectsb[0].engineerId }}-{{ adjustedRectsb[0].temperingLayoutId }} </div>
			<!-- <div style="text-align: center;">炉号：{{ engineerIdDisplayb }}-{{ adjustedRects[0].temperingLayoutId }}</div> -->
			<el-scrollbar height="750px" style="background-color: #e9e9eb;">
			<div style="position: relative;max-width: 1400px;">
			<div
			v-for="(rect, index) in adjustedRectsb"
			:key="index"
			@click="showDialogb(rect)"
			class="rect"
			:style="{ position: 'absolute', top: `${rect.y}px`, left: `${rect.x}px`,
			width: `${rect.width}px`, height: `${rect.height}px`,
			backgroundColor: rect.isActive ? '#ADFF2F' : getRectColorb(rect.state) }">
			<!-- backgroundColor: rect.state === 4 ? '#911005' : '#f8e3c5' }"> -->
			<div class="centered-text">
			<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>
			</el-scrollbar>
			</div>
			</el-card>
			</div>
			<div v-if="dialogFormVisiblec">
			<!-- 打印 -->
			<el-card style="flex: 1;margin-left: 10px;margin-top: 10px;margin-right: 10px;height: 800px;" v-loading="loading">
			<div style="display: flex; flex-direction: row; align-items: center; margin-top: 5px;margin-left: 10px;">
			<el-input :placeholder="$t('processCard.projectnumber')" v-model="engineerId" autocomplete="off" style="width: 300px;"/>
			<el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('processCard.inquire') }}</el-button>
			<el-button type="info" style="margin-left: 10px;" @click="printing()">{{ $t('processCard.printing') }}</el-button>
			</div>

			<el-card style="flex: 1;margin-left: 10px;margin-top: 15px;" v-loading="loading">
			<div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
			<el-table
			height="600"
			ref="table"
			:header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"
			:data="tableData"
			>
			<el-table-column prop="engineerId" :label="$t('processCard.project')" width="200" align="center"/>
			<el-table-column prop="temperingLayoutId" :label="$t('processCard.layoutID')" align="center"/>
			<el-table-column prop="temperingFeedSequence" :label="$t('processCard.temperingfeed')" align="center"/>
			<el-table-column prop="glassId" :label="$t('processCard.glassID')" align="center"/>
			<el-table-column prop="width" :label="$t('processCard.width')" align="center"/>
			<el-table-column prop="height" :label="$t('processCard.height')" align="center"/>
			<el-table-column prop="thickness" :label="$t('processCard.thickness')" align="center"/>
			</el-table>
			</div>
			</el-card>
			</el-card>
			</div>
			<!-- 进炉中 -->
			<el-dialog v-model="blind1" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose1">
			<el-button :disabled="!canSelectProject1" type="warning" plain :icon="Delete" @click="handleDamage1" style="width: 150px;margin-left: 10px;">
			{{ $t('order.dilapidation') }}
			</el-button>
			</el-dialog>
			<el-dialog v-model="blind2" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClose2">
			<el-button :disabled="!canSelectProject2" type="warning" plain :icon="Delete" @click="handleDamage2" style="width: 150px;margin-left: 10px;">
			{{ $t('order.dilapidation') }}
			</el-button>
			</el-dialog>
			<!-- 进炉前 -->
			<el-dialog v-model="blinda" top="30vh" width="15%" style="text-align: center;" @close="handleDialogClosea">
			<el-button type="warning" plain :icon="Delete" @click="handleDamagea" :disabled="!canSelectProjecta" style="width: 150px;margin-left: 10px;">
			{{ $t('order.dilapidation') }}
			</el-button>
			<el-button :disabled="!cantakea" type="danger" plain @click="takeouta" style="width: 150px;margin-left: 10px;margin-top: 10px;">
			<el-icon class="el-icon--right"><Upload /></el-icon>
			{{ $t('order.takeaway') }}
			</el-button>
			<el-button type="success" plain :icon="Edit" @click="takeona" :disabled="!canona" style="width: 150px;margin-left: 10px;margin-top: 10px;">
			{{ $t('order.takeon') }}
			</el-button>
			</el-dialog>
			<!-- 已出炉 -->
			<el-dialog v-model="blindb" top="30vh" width="15%" style="text-align: center;" @close="handleDialogCloseb">
			<el-button :disabled="!canSelectProjectb" type="warning" plain :icon="Delete" @click="handleDamageb" style="width: 150px;margin-left: 10px;">
			{{ $t('order.dilapidation') }}
			</el-button>
			<el-button :disabled="!cantakeb" type="danger" plain @click="takeoutb" style="width: 150px;margin-left: 10px;margin-top: 10px;">
			<el-icon class="el-icon--right"><Upload /></el-icon>
			{{ $t('order.takeaway') }}
			</el-button>
			<!-- <el-button type="success" plain :icon="Edit" @click="takeonb" :disabled="!canonb" style="width: 150px;margin-left: 10px;margin-top: 10px;">
			{{ $t('order.takeon') }}
			</el-button> -->
			</el-dialog>
			<el-dialog
			v-model="dialogVisible"
			width="100%"
			top="0vh"
			:show-close="false"
			>
			<div class="custom-title" style="text-align: center; margin-bottom: 20px;">
			{{ $t('processCard.glasstakeout') }}
			</div>
			<el-table
			:data="tableData"
			style="width: 100%;height: 760px"
			>
			<el-table-column prop="flowCardId" :label="$t('processCard.flowcard')" width="140" align="center"/>
			<el-table-column prop="layer" :label="$t('processCard.layer')" align="center" width="52"/>
			<el-table-column prop="engineerId" :label="$t('processCard.project')" align="center" width="110"/>
			<el-table-column prop="temperingLayoutId" :label="$t('processCard.temperinglayout')" align="center" width="52"/>
			<el-table-column prop="temperingFeedSequence" :label="$t('processCard.temperingfeed')" align="center" width="52"/>
			<el-table-column prop="width" :label="$t('processCard.width')" align="center" width="80"/>
			<el-table-column prop="height" :label="$t('processCard.height')" align="center" width="80"/>
			<el-table-column prop="thickness" :label="$t('processCard.thickness')" align="center" width="52"/>
			</el-table>
			</el-dialog>
			</div>
			</template>

			<style scoped>
			#boxa{
			border: 1px solid rgb(119, 116, 116);
			background-color: #529b2e;
			text-align: center;
			display: inline-block;
			/* align-items:center; */
			/* justify-content:center; */
			/* align-items:center; */
			/* justify-content:center; */
			margin-left: 20px;
			}
			#boxb{
			@@ -154,16 +912,16 @@
			/* display:flex; */
			text-align: center;
			display: inline-block;
			align-items:center;
			justify-content:center;
			align-items:center;
			justify-content:center;
			margin-left: 20px;
			}
			#box{
			border: 1px solid black;
			background-color: #337ecc;
			display:flex;
			align-items:center;
			justify-content:center;
			align-items:center;
			justify-content:center;
			}
			#home-card {
			width: 100%;
			@@ -203,4 +961,23 @@
			}
			}
			}
			.rect {
			border: 1px solid black; /* 设置矩形的边框 */
			/* background-color: lightblue; 设置矩形的背景色 */
			}
			#rect {
			position: relative; /* 确保箭头可以相对于矩形定位 */
			}
			.centered-text {
			/* 设置文字居中样式 */
			/* display: flex; */
			justify-content: center;
			align-items: center;
			height: 100%; /* 确保div占据整个矩形的高度 */
			/* font-size: small; */
			}
			.custom-title {
			font-size: 20px;
			font-weight: bold;
			}
			</style>