1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| <template>
| <div class="glass-rack">
| <div>
| <svg width="300" 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"
| />
| <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 + 6 }}号工位</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>
| 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: {
| 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;
| }
| },
| 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;
| }
| }
| }
| };
| </script>
|
| <style scoped>
| .glass-rack {
| margin-left: 20px;
| width: 300px;
| }
| </style>
|
|
