<template>
|
<el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
|
<div style="display: flex;">
|
<div style="margin-left: 400px;font-size: 20px;">工程号：P20240305001 </div>
|
<div style="margin-left: 150px;font-size: 20px;">版图编号：1</div>
|
</div>
|
<svg width="100%" height="650" xmlns="http://www.w3.org/2000/svg">
|
<g stroke="null" id="Layer_1">
|
<title stroke="null">Layer 1</title>
|
<image x="100" y="50" width="100" xlink:href="${pageContext.request.contextPath}/static/images/log2.png"/>
|
<!-- <text stroke="#000" xml:space="preserve" font-family="'Catamaran'" font-size="25" class="font1" y="105" x="740">1号线玻璃落架指导</text> -->
|
|
<!-- 使用 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"/>
|
<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" :y="rack.y-10" text-anchor="middle">{{ index + 1 }}号工位</text> -->
|
<!-- <text :x="rack.x" :y="rack.y-30" text-anchor="middle">{{rack.item.content}}</text> -->
|
</g>
|
|
<!-- 其他元素 -->
|
<!-- <text id="glass_size" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text> -->
|
<!-- <text id="glass_pos" font-size="30px" font-weight="bold" x="100" y="600" text-anchor="middle" alignment-baseline="middle"></text> -->
|
</g>
|
</svg>
|
</el-card>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
racks: [
|
{ x: 70, y: 126, width: 600, height: 240, fillColor: '#79bbff', item: { width: 40, height: 30, top:5, fillColor: '#911005' ,content:'NG123456'} },
|
{ x: 675, y: 126, width: 600, height: 240, fillColor: '#a0cfff', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG1234567'} },
|
{ x: 70, y: 370, width: 1100, height: 260, fillColor: '#529b2e', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG12345678'} },
|
{ x: 1175, y: 370, width: 200, height: 300, fillColor: '#529b2e', item: { width: 40, height: 30, fillColor: 'yellow' ,content:'NG123456910'} },
|
]
|
};
|
},
|
methods: {
|
calculateItemXPosition(rack, item, index) {
|
if (index === 4) {
|
// 第五个矩形，确保不超出架子右边界
|
return Math.min(rack.x + rack.width - item.width, rack.x + rack.width);
|
} else {
|
return Math.max(rack.x, Math.min(rack.x + rack.width / 2 - item.width / 2, rack.x + rack.width - item.width));
|
}
|
},
|
calculateItemYPosition(rack, item, index) {
|
if (index === 0 || index === 2) {
|
// 第一个和第三个矩形，贴近架子顶部
|
return Math.min(rack.y, rack.y + rack.height);
|
} else if (index === 1 || index === 3) {
|
// 第二个和第四个矩形，贴近架子底部
|
return Math.max(rack.y, Math.min(rack.y + rack.height - item.height, rack.y + rack.height));
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.glass-rack {
|
width: 100%;
|
height: 80vh;
|
}
|
</style>
|
