| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, watchEffect ,onMounted,onUnmounted} from 'vue'; |
| | | |
| | | import { useI18n } from 'vue-i18n' |
| | | const { t } = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | |
| | | const racks = ref([ |
| | | { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } }, |
| | | |
| | | { x: 140, y: 280, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } }, |
| | | |
| | | { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG12345678' } }, |
| | | |
| | | { x: 140, y: 280, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } } |
| | | |
| | | ]); |
| | | |
| | |
| | | if (index === 0) { |
| | | return rack.x; |
| | | } else if (index === 1) { |
| | | return rack.x + rack.width - item.width; |
| | | } else { |
| | | return rack.x + (rack.width - item.width) / 2; |
| | | } else { |
| | | return rack.x + rack.width - item.width; |
| | | } |
| | | }; |
| | | |
| | |
| | | if (index === 0) { |
| | | return rack.y + (rack.height - item.height) / 2; |
| | | } else if (index === 1) { |
| | | return rack.y + (rack.height - item.height) / 2; |
| | | } else { |
| | | return rack.y + rack.height - item.height; |
| | | } else { |
| | | return rack.y + (rack.height - item.height) / 2; |
| | | } |
| | | }; |
| | | |
| | |
| | | response.data.forEach((itemData, index) => { |
| | | if (index < racks.value.length) { |
| | | const rack = racks.value[index]; |
| | | const newItem = { |
| | | rack.fillColor = itemData.item.fullCardColor === 'red' ? '#911005' : '#6a6da9'; |
| | | const newItem = { |
| | | content: itemData.item.content, |
| | | fillColor: itemData.item.fillColor, |
| | | width: itemData.item.width === 0 ? "" : 10, |
| | | height: itemData.item.height === 0 ? "" : 90 |
| | | }; |
| | | console.log(itemData.item.fullCardColor); |
| | | |
| | | if (index === 2 && itemData.item.width > 0) { |
| | | if (index === 1 && itemData.item.width > 0) { |
| | | newItem.width = 100; |
| | | newItem.height = 20; |
| | | } |
| | |
| | | data.glassinfo2[0].forEach((itemData, index) => { |
| | | if (index < racks.value.length) { |
| | | const rack = racks.value[index]; |
| | | const newItem = { |
| | | rack.fillColor = itemData.item.fullCardColor === 'red' ? '#911005' : '#6a6da9'; |
| | | const newItem = { |
| | | content: itemData.item.content, |
| | | fillColor: itemData.item.fillColor, |
| | | width: itemData.item.width === 0 ? "" : 10, |
| | |
| | | downGlassInfoList:itemData.item.downGlassInfoList |
| | | }; |
| | | |
| | | if (index === 2 && itemData.item.width > 0) { |
| | | if (index === 1 && itemData.item.width > 0) { |
| | | newItem.width = 100; |
| | | newItem.height = 20; |
| | | } |
| | |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | |
| | | const showRectInfo = (rack) => { |
| | | const content = rack.item.content; |