From f42bb93047f0aba68f358968499e1174e67a715a Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期一, 01 四月 2024 08:40:31 +0800
Subject: [PATCH] 更新下片逻辑
---
UI-Project/src/views/mm/identify/identify.vue | 144 ++++++++++++++++++++++++++++++++----------------
1 files changed, 96 insertions(+), 48 deletions(-)
diff --git a/UI-Project/src/views/mm/identify/identify.vue b/UI-Project/src/views/mm/identify/identify.vue
index 9306199..71d125a 100644
--- a/UI-Project/src/views/mm/identify/identify.vue
+++ b/UI-Project/src/views/mm/identify/identify.vue
@@ -1,67 +1,107 @@
<template>
- <el-card style="margin-left: 10px;margin-top: 10px;margin-right: 10px;" v-loading="loading">
+ <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 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> -->
+ <svg width="100%" height="650" xmlns="http://www.w3.org/2000/svg">
+ <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)"
+ />
+ <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>
- </svg>
+ </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: '#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'} },
- ]
+ {
+ x: 70, y: 126, width: 600, height: 240, fillColor: '#79bbff',
+ items: [
+ { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
+ { position: 'bottom-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
+ ]
+ },
+ {
+ x: 675, y: 126, width: 600, height: 240, fillColor: '#79bbff',
+ items: [
+ { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
+ { position: 'top-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
+ ]
+ },
+ {
+ x: 70, y: 370, width: 1100, height: 260, fillColor: '#79bbff',
+ items: [
+ { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
+ { position: 'top-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
+ ]
+ },
+ {
+ x: 1175, y: 370, width: 200, height: 300,fillColor: '#79bbff',
+ items: [
+ { position: 'top-left', width: 40, height: 30, fillColor: '#911005', content: 'NG123456' },
+ { position: 'top-right', width: 40, height: 30, fillColor: 'yellow', content: 'NG1234567' }
+ ]
+ }
+
+ // Add more racks and items here as needed
+ ],
};
},
+
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));
- }
-}
+ 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({
+ title: 'Rack Information',
+ text: content,
+ icon: 'info',
+ });
+ },
+
+ showRectInfo(rectInfo) {
+ const contents = rectInfo.items.map(item => item.content).join(', ');
+ this.$nextTick(() => {
+ this.showCustomAlert(contents);
+ });
+ },
}
};
</script>
@@ -71,4 +111,12 @@
width: 100%;
height: 80vh;
}
+.rack-rect:hover {
+ cursor: pointer;
+}
+.custom-popover-class {
+ background-color: lightgrey;
+ color: black;
+ border: 1px solid black;
+}
</style>
--
Gitblit v1.8.0