~admin/HangZhouMes.git

			@@ -1,7 +1,7 @@
			<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">
			@@ -11,6 +11,9 @@
			: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,15 +32,16 @@
			</template>

			<script>
			import Swal from 'sweetalert2'
			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' } }
			{ x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 30, width: 20, fillColor: 'yellow', content: 'NG12345678' } },
			{ x: 280, y: 270, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 35, width: 23, fillColor: 'yellow', content: 'NG123456910' } },
			{ x: 140, y: 420, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 30, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }
			]
			};
			},
			@@ -59,7 +63,30 @@
			} else {
			return rack.y + rack.height - item.height;
			}
			}
			},
			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'
			}
			});

			},
			showRectInfo( rectInfo) {
			const content = rectInfo.item.content;
			this.$nextTick(() => {
			this.showCustomAlert(content);
			});
			},
			}
			};
			</script>
			@@ -67,6 +94,21 @@
			<style scoped>
			.glass-rack {
			margin-left: 20px;
			width: 300px;
			width: 500px;
			}
			.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>