From bf5c42b55da25fbcbb8f92bde539a8e27d800b40 Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期二, 26 三月 2024 14:16:59 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes
---
UI-Project/src/views/UnLoadGlass/Landingindication.vue | 150 +++++++++++++++++++++++++------------------------
1 files changed, 76 insertions(+), 74 deletions(-)
diff --git a/UI-Project/src/views/UnLoadGlass/Landingindication.vue b/UI-Project/src/views/UnLoadGlass/Landingindication.vue
index 172fc33..62fd6f9 100644
--- a/UI-Project/src/views/UnLoadGlass/Landingindication.vue
+++ b/UI-Project/src/views/UnLoadGlass/Landingindication.vue
@@ -1,74 +1,76 @@
-<template>
- <div class="glass-rack">
- <div style="background:#eeeeee">
- <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 + 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>
-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: {
- // 璁＄畻鍐呴儴鐗╁搧鐨� x 鍧愭爣浣嶇疆
- calculateItemXPosition(rack, item, index) {
- if (index === 0 || index === 1) { // 濡傛灉鏄涓�鎴栫浜屼釜鐗╁搧
- return rack.x; // 杩斿洖宸﹁竟鐣� x 鍧愭爣
- } else if (index === 2 || index === 3) { // 濡傛灉鏄涓夋垨绗洓涓墿鍝�
- return rack.x + rack.width - item.width; // 杩斿洖鍙宠竟鐣� x 鍧愭爣
- } else {
- return rack.x + (rack.width - item.width) / 2; // 杩斿洖姘村钩灞呬腑鐨� x 鍧愭爣
- }
- },
- // 璁＄畻鍐呴儴鐗╁搧鐨� y 鍧愭爣浣嶇疆
- calculateItemYPosition(rack, item, index) {
- if (index === 0 || index === 1) { // 濡傛灉鏄涓�鎴栫浜屼釜鐗╁搧
- return rack.y + (rack.height - item.height) / 2; // 杩斿洖鍨傜洿灞呬腑鐨� y 鍧愭爣
- } else if (index === 2 || index === 3) { // 濡傛灉鏄涓夋垨绗洓涓墿鍝�
- return rack.y + (rack.height - item.height) / 2; // 杩斿洖鍨傜洿灞呬腑鐨� y 鍧愭爣
- } else {
- return rack.y + rack.height - item.height; // 杩斿洖搴曢儴瀵归綈鐨� y 鍧愭爣
- }
- }
- }
-};
-</script>
-
-<style scoped>
-.glass-rack {
- margin-left: 20px;
- width: 300px;
-}
-</style>
+<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 + 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>
+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: {
+ // 璁＄畻鍐呴儴鐗╁搧鐨� x 鍧愭爣浣嶇疆
+ calculateItemXPosition(rack, item, index) {
+ if (index === 0 || index === 1) { // 濡傛灉鏄涓�鎴栫浜屼釜鐗╁搧
+ return rack.x; // 杩斿洖宸﹁竟鐣� x 鍧愭爣
+ } else if (index === 2 || index === 3) { // 濡傛灉鏄涓夋垨绗洓涓墿鍝�
+ return rack.x + rack.width - item.width; // 杩斿洖鍙宠竟鐣� x 鍧愭爣
+ } else {
+ return rack.x + (rack.width - item.width) / 2; // 杩斿洖姘村钩灞呬腑鐨� x 鍧愭爣
+ }
+ },
+ // 璁＄畻鍐呴儴鐗╁搧鐨� y 鍧愭爣浣嶇疆
+ calculateItemYPosition(rack, item, index) {
+ if (index === 0 || index === 1) { // 濡傛灉鏄涓�鎴栫浜屼釜鐗╁搧
+ return rack.y + (rack.height - item.height) / 2; // 杩斿洖鍨傜洿灞呬腑鐨� y 鍧愭爣
+ } else if (index === 2 || index === 3) { // 濡傛灉鏄涓夋垨绗洓涓墿鍝�
+ return rack.y + (rack.height - item.height) / 2; // 杩斿洖鍨傜洿灞呬腑鐨� y 鍧愭爣
+ } else {
+ return rack.y + rack.height - item.height; // 杩斿洖搴曢儴瀵归綈鐨� y 鍧愭爣
+ }
+ }
+ }
+};
+</script>
+
+<style scoped>
+.glass-rack {
+ margin-left: 20px;
+ width: 300px;
+ margin-top: 10px;
+}
+</style>
--
Gitblit v1.8.0