<template>
|
<div class="glass-rack">
|
<div >
|
<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">
|
<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)"
|
:y="calculateItemYPosition(rack, rack.item, index)"
|
:width="rack.item.width"
|
:height="rack.item.height"
|
:fill="rack.item.fillColor"
|
/>
|
<text :x="rack.x + rack.width / 2" :y="rack.y - 10" text-anchor="middle">{{ index + 1 }}号工位</text>
|
<text :x="rack.x + rack.width / 2" :y="rack.y + rack.height + 20" text-anchor="middle">{{ rack.item.content }}</text>
|
</g>
|
</g>
|
</svg>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import Swal from 'sweetalert2'
|
|
const 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: 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' } }
|
];
|
|
const calculateItemXPosition = (rack, item, index) => {
|
if (index === 0 || index === 1) {
|
return rack.x;
|
} else if (index === 2 || index === 3) {
|
return rack.x + rack.width - item.width;
|
} else {
|
return rack.x + (rack.width - item.width) / 2;
|
}
|
};
|
|
const calculateItemYPosition = (rack, item, index) => {
|
if (index === 0 || index === 1) {
|
return rack.y + (rack.height - item.height) / 2;
|
} else if (index === 2 || index === 3) {
|
return rack.y + (rack.height - item.height) / 2;
|
} else {
|
return rack.y + rack.height - item.height;
|
}
|
};
|
|
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: 500px;
|
margin-top: 10px;
|
}
|
.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>
|
