| | |
|---|
| | | <template> |
|---|
| | | <div class="glass-rack"> |
|---|
| | | <div > |
|---|
| | | <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> |
|---|
| | | <svg width="500" height="370" xmlns="http://www.w3.org/2000/svg"> |
|---|
| | | <g stroke="null" id="Layer_1"> |
|---|
| | | <!-- 使用 v-for 循环渲染数据 --> |
|---|
| | | <g v-for="(rack, index) in racks" :key="index"> |
|---|
| | |
|---|
| | | import { initializeWebSocket } from '@/utils/WebSocketService'; |
|---|
| | | import { WebSocketHost ,host} from '@/utils/constants' |
|---|
| | | const racks = ref([ |
|---|
| | | { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: '' } }, |
|---|
| | | { x: 50, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG123456' } }, |
|---|
| | | |
|---|
| | | { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: '' } }, |
|---|
| | | { x: 280, y: 100, height: 100, width: 60, fillColor: '#6a6da9', item: { height: 90, width: 10, fillColor: 'yellow', content: 'NG12345678' } }, |
|---|
| | | |
|---|
| | | { x: 140, y: 320, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: '' } } |
|---|
| | | { x: 140, y: 280, height: 60, width: 110, fillColor: '#6a6da9', item: { height: 20, width: 100, fillColor: 'yellow', content: 'NG1234561454' } } |
|---|
| | | |
|---|
| | | ]); |
|---|
| | | |
|---|
