| | |
| | | <div style="margin-left: 400px; font-size: 20px;">工程号:P20240305001 </div> |
| | | <div style="margin-left: 150px; font-size: 20px;">版图编号:1</div> |
| | | </div> |
| | | <el-scrollbar height="650px"> |
| | | <div id="home-card"> |
| | | <div id="home-item" v-for="n in 20" :key="n"> |
| | | <svg width="100%" height="690" xmlns="http://www.w3.org/2000/svg" style="margin-top: -40px;"> |
| | | <defs> |
| | | <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" |
| | |
| | | /> |
| | | <line x1='510' y1='309' x2='260' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> |
| | | </line> |
| | | <line x1='850' y1='309' x2='1100' y2='310' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> |
| | | </line> |
| | | <line x1='510' y1='409' x2='260' y2='410' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> |
| | | </line> |
| | | <line x1='1200' y1='650' x2='1200' y2='470' stroke='#911005' stroke-width='2' marker-end='url(#arrow)'> |
| | | </line> |
| | | <text x="370" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-01</text> |
| | | <text x="370" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text> |
| | | |
| | | <text x="970" y="240" dominant-baseline="middle" text-anchor="middle">NG2024030501A-02</text> |
| | | <text x="970" y="260" dominant-baseline="middle" text-anchor="middle">500*300</text> |
| | | |
| | | <text x="600" y="500" dominant-baseline="middle" text-anchor="middle">NG2024030501A-03</text> |
| | | <text x="600" y="520" dominant-baseline="middle" text-anchor="middle">800*450</text> |
| | | |
| | | |
| | | <text x="1280" y="520" dominant-baseline="middle" text-anchor="middle">NG2024030501A-04</text> |
| | | <text x="1280" y="540" dominant-baseline="middle" text-anchor="middle">400*300</text> |
| | | <g v-for="(item, itemIndex) in rack.items" :key="itemIndex"> |
| | | <rect |
| | | :x="calculateItemXPosition(rack, item, itemIndex)" |
| | |
| | | </g> |
| | | </g> |
| | | </svg> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | </template> |
| | | |
| | |
| | | { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG12345678' } |
| | | ] |
| | | }, |
| | | { |
| | | x: 685, y: 126, width: 600, height: 240, fillColor: '#93d2f3', |
| | | items: [ |
| | | { position: 'bottom-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, |
| | | { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, |
| | | { position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' } |
| | | ] |
| | | }, |
| | | { |
| | | x: 70, y: 380, width: 1100, height: 260, fillColor: '#81b337', |
| | | items: [ |
| | | { position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, |
| | | { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, |
| | | { position: 'top-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' } |
| | | ] |
| | | }, |
| | | { |
| | | x: 1185, y: 380, width: 200, height: 300,fillColor: '#81b337', |
| | | items: [ |
| | | { position: 'bottom-right', width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, |
| | | { position: 'top-right',width: 40, height: 30, fillColor: '#ffffff', content: 'NG123456' }, |
| | | { position: 'top-left', width: 40, height: 30, fillColor: '#ffffff', content: 'NG1234567' }, |
| | | ] |
| | | } |
| | | |
| | | // Add more racks and items here as needed |
| | | ], |
| | |
| | | color: black; |
| | | border: 1px solid black; |
| | | } |
| | | |
| | | #home-card { |
| | | width: 100%; |
| | | overflow: hidden; |
| | | padding: 10px 0px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | #home-item { |
| | | border-style: solid; |
| | | border-width: 1px; |
| | | border-color: #E4E4E4; |
| | | width: calc(34% - 20px); |
| | | padding: 20px 0px 20px 20px; |
| | | margin-right: 10px; |
| | | margin-bottom: 10px; |
| | | display: flex; |
| | | justify-content: center; |
| | | /* align-items: center; */ |
| | | background: #fff; |
| | | #home-img { |
| | | display: inline-block; |
| | | width: 160px; |
| | | height: 60px; |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | #home-right { |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | margin-left: 10px; |
| | | #home-num { |
| | | font-size: 40px; |
| | | margin: 5px 0; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |