~admin/HangZhouMes.git

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

			import { ref } 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' :{
			@@ -21,62 +30,176 @@
			}
			}
			}

			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: [
			{
			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 = heighta * scaleFactor;
			adjustedHeight = widtha * scaleFactorY;
			}
			return {
			...rect,
			xcoordinate: newX * scaleFactor,
			ycoordinate: rect.xCoordinate * scaleFactorY,
			width: adjustedWidth,
			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() {
			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(() => {
			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">
			<div style="display: flex;margin-top: 20px;">
			<div style="margin-left: 400px;font-size: 20px;">工程号：P20240305001 </div>
			<div style="margin-left: 150px;font-size: 20px;">版图编号：1</div>
			</div>
			<div>
			<div id="boxa" style="width: 700px;height: 220px;margin-left: 260px;">
			<div style="margin-top: 85px;"> NG202405060798A01-1</div>
			<div> 500×1500</div>
			</div>
			</div>
			<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="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.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>
			<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);
			@@ -87,4 +210,16 @@
			margin-top: 70px;
			margin-bottom: 50px;
			}
			.rect {
			border: 1px solid black; /* 设置矩形的边框 */
			background-color: lightblue; /* 设置矩形的背景色 */
			}
			.centered-text {
			/* 设置文字居中样式 */
			/* display: flex; */
			justify-content: center;
			align-items: center;
			height: 100%; /* 确保div占据整个矩形的高度 */
			font-size: small;
			}
			</style>