<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="690" xmlns="http://www.w3.org/2000/svg" style="margin-top: -40px;">
|
<defs>
|
<marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6"
|
refY="6" orient="auto">
|
<path d="M2,2 L10,6 L2,10 L2,2" style="fill: #911005;" />
|
</marker>
|
</defs>
|
<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"
|
style="stroke:#c8c9cc;stroke-width:3;"
|
@click="showRectInfo(rack)"
|
/>
|
<line x1='510' y1='309' x2='260' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
|
</line>
|
<line x1='850' y1='309' x2='1100' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
|
</line>
|
<line x1='510' y1='409' x2='260' y2='410' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
|
</line>
|
<line x1='1200' y1='650' x2='1200' y2='470' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'>
|
</line>
|
<text x="370" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-01</text>
|
<text x="370" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text>
|
|
<text x="970" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-02</text>
|
<text x="970" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text>
|
|
<text x="600" y="500" dominant-baseline="middle" text-anchor="middle">NG2024030501A-03</text>
|
<text x="600" y="520" dominant-baseline="middle" text-anchor="middle">800*450</text>
|
|
|
<text x="1280" y="520" dominant-baseline="middle" text-anchor="middle">NG2024030501A-04</text>
|
<text x="1280" y="540" dominant-baseline="middle" text-anchor="middle">400*300</text>
|
<g v-for="(item, itemIndex) in rack.items" :key="itemIndex">
|
<rect
|
:x="calculateItemXPosition(rack, item, itemIndex)"
|
:y="calculateItemYPosition(rack, item, itemIndex)"
|
:width="item.width"
|
:height="item.height"
|
:fill="item.fillColor"
|
/>
|
</g>
|
</g>
|
</svg>
|
</el-card>
|
</template>
|
|
<script>
|
import Swal from 'sweetalert2'
|
export default {
|
data() {
|
return {
|
loading: false,
|
racks: [
|
{
|
x: 70, y: 126, width: 600, height: 240, fillColor: '#93d2f3',
|
items: [
|
{ position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456',y: '20'},
|
{ position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' },
|
{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG12345678' }
|
]
|
},
|
{
|
x: 685, y: 126, width: 600, height: 240, fillColor: '#93d2f3',
|
items: [
|
{ position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
|
{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
|
{ position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }
|
]
|
},
|
{
|
x: 70, y: 380, width: 1100, height: 260, fillColor: '#81b337',
|
items: [
|
{ position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
|
{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
|
{ position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }
|
]
|
},
|
{
|
x: 1185, y: 380, width: 200, height: 300,fillColor: '#81b337',
|
items: [
|
{ position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
|
{ position: 'top-right',width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' },
|
{ position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' },
|
]
|
}
|
|
// Add more racks and items here as needed
|
],
|
};
|
},
|
|
methods: {
|
calculateItemXPosition(rack, item, index) {
|
if (item.position === 'top-right' || item.position === 'bottom-right') {
|
return Math.min(rack.x + rack.width - item.width, rack.x + rack.width);
|
} else {
|
return rack.x;
|
}
|
},
|
|
calculateItemYPosition(rack, item, index) {
|
if (item.position === 'bottom-left' || item.position === 'bottom-right') {
|
return Math.min(rack.y + rack.height - item.height, rack.y + rack.height);
|
} else {
|
return rack.y;
|
}
|
},
|
|
showCustomAlert(content) {
|
Swal.fire({
|
// type: 'warning', // 弹框类型
|
title: '该片玻璃状态', //标题
|
// text: "注销后将无法恢复，请谨慎操作！", //显示内容
|
|
confirmButtonColor: '#3085d6',// 确定按钮的 颜色
|
confirmButtonText: '人工拿走',// 确定按钮的 文字
|
showCancelButton: true, // 是否显示取消按钮
|
cancelButtonColor: '#d33', // 取消按钮的 颜色
|
cancelButtonText: "破损", // 取消按钮的 文字
|
|
// focusCancel: true, // 是否聚焦 取消按钮
|
reverseButtons: true // 是否 反转 两个按钮的位置 默认是 左边 确定 右边 取消
|
}).then((isConfirm) => {
|
try {
|
//判断 是否 点击的 确定按钮
|
if (isConfirm.value) {
|
Swal.fire("人工拿走", "点击了人工拿走", "success");
|
}
|
else {
|
Swal.fire("破损", "点击了破损", "error");
|
}
|
} catch (e) {
|
alert(e);
|
}
|
});
|
},
|
|
showRectInfo(rectInfo) {
|
const contents = rectInfo.items.map(item => item.content).join(', ');
|
this.$nextTick(() => {
|
this.showCustomAlert(contents);
|
});
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.glass-rack {
|
width: 100%;
|
height: 80vh;
|
}
|
.rack-rect:hover {
|
cursor: pointer;
|
}
|
.custom-popover-class {
|
background-color: lightgrey;
|
color: black;
|
border: 1px solid black;
|
}
|
</style>
|
