~admin/HangZhouMes.git

			@@ -1,17 +1,19 @@
			<template>
			<div class="glass-rack">
			<div >
			<svg width="300" height="500" xmlns="http://www.w3.org/2000/svg">
			<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
			<g stroke="null" id="Layer_1">
			<!-- 使用 v-for 循环渲染数据 -->
			<g v-for="(rack, index) in racks" :key="index">
			<g v-for="(rack, index) in racks" :key="index" :data="tableData">
			<rect
			:x="rack.x"
			:y="rack.y"
			:width="rack.width"
			:height="rack.height"
			:fill="rack.fillColor"

			:data-index="index"
			class="rack-rect"
			@click="showRectInfo(rack)"
			/>
			<rect
			:x="calculateItemXPosition(rack, rack.item, index)"
			@@ -29,48 +31,132 @@
			</div>
			</template>

			<script>
			export default {
			data() {
			return {
			racks: [
			{ x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },
			{ x: 50, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 20, width: 10, fillColor: 'yellow', content: 'NG1234567' } },
			{ x: 190, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
			{ x: 190, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
			{ x: 95, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
			]
			};
			},
			methods: {
			// 计算内部物品的 x 坐标位置
			calculateItemXPosition(rack, item, index) {
			if (index === 0 \|\| index === 1) { // 如果是第一或第二个物品
			return rack.x; // 返回左边界 x 坐标
			} else if (index === 2 \|\| index === 3) { // 如果是第三或第四个物品
			return rack.x + rack.width - item.width; // 返回右边界 x 坐标
			} else {
			return rack.x + (rack.width - item.width) / 2; // 返回水平居中的 x 坐标
			}
			},
			// 计算内部物品的 y 坐标位置
			calculateItemYPosition(rack, item, index) {
			if (index === 0 \|\| index === 1) { // 如果是第一或第二个物品
			return rack.y + (rack.height - item.height) / 2; // 返回垂直居中的 y 坐标
			} else if (index === 2 \|\| index === 3) { // 如果是第三或第四个物品
			return rack.y + (rack.height - item.height) / 2; // 返回垂直居中的 y 坐标
			} else {
			return rack.y + rack.height - item.height; // 返回底部对齐的 y 坐标
			}
			}
			<script setup>
			import { ref, watchEffect } from 'vue';
			import Swal from 'sweetalert2'
			import request from "@/utils/request";
			const racks = ref([
			{ x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } },

			{ x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG12345678' } },

			{ x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }

			]);

			watchEffect(() => {
			// 触发数据变化时重新渲染
			});


			const calculateItemXPosition = (rack, item, index) => {
			if (index === 0 ) {
			return rack.x;
			} else if (index === 1 ) {
			return rack.x + rack.width - item.width;
			} else {
			return rack.x + (rack.width - item.width) / 2;
			}
			};

			const calculateItemYPosition = (rack, item, index) => {
			if (index === 0 ) {
			return rack.y + (rack.height - item.height) / 2;
			} else if (index === 1) {
			return rack.y + (rack.height - item.height) / 2;
			} else {
			return rack.y + rack.height - item.height;
			}
			};


			const fetchFlowCardId = async () => {
			try {
			const response = await request.get('unLoadGlass/downWorkStation/getwo');

			if (response.code === 200) {
			console.log(response);
			// 遍历响应数据并替换racks数组中的item属性
			response.data.forEach((itemData, index) => {
			if (index < racks.value.length) {
			const rack = racks.value[index];
			const newItem = {
			content: itemData.item.content,
			fillColor: itemData.item.fillColor,
			width: itemData.item.width === 0 ? "" : 10,
			height: itemData.item.height === 0 ? "" : 90
			};

			if (index === 2 && itemData.item.width > 0) {
			newItem.width = 100;
			newItem.height = 20;
			}

			rack.item = newItem;

			console.log(racks.value); // 打印更新后的 racks 值
			}
			});





			} else {
			ElMessage.error(response.msg);
			}
			} catch (error) {
			console.error(error);
			}
			};

			fetchFlowCardId()
			// setTimeout(fetchFlowCardId(),1000);
			//setInterval(fetchFlowCardId, 2000)


			const showCustomAlert = (content) => {
			var str="架号 : 111\n" +
			"长 : 111\n" +
			"宽 : 111\n" +
			"厚 : 111\n"+
			"玻璃ID : 111\n"+
			"膜系 : 111\n";

			Swal.fire({
			title: '玻璃信息',
			html: '<pre>' + str + '</pre>',
			customClass: {
			popup: 'format-pre'
			}
			});
			};

			const showRectInfo = (rectInfo) => {
			const content = rectInfo.item.content;
			showCustomAlert(content);
			};

			</script>

			<style scoped>
			.glass-rack {
			margin-left: 20px;
			width: 300px;
			width: 500px;
			margin-top: 10px;
			}
			</style>
			.rack-rect:hover {
			cursor: pointer;
			}
			.custom-popover-class {
			background-color: lightgrey;
			color: black;
			border: 1px solid black;
			}
			.format-pre pre {
			background: #49483e;
			color: #f7f7f7;
			padding: 10px;
			font-size: 14px;
			}
			</style>