网页端高效展示可变长宽2D集装箱堆叠数组的技术方案问询

Got it, let's work through this container stacking grid problem— I've built a few similar inventory visualization tools, so here's a practical, efficient approach that'll handle variable widths and heights reliably:

1. First: Standardize & Preprocess Your Database Data #

Before generating the grid, you need to structure the raw DB data into something usable. Each container record should include at minimum:

• container_id: Unique identifier
• stack_column: Which vertical stack (column) the container is in (e.g., 1, 2, 3...)
• stack_level: How high up the stack it sits (1 = bottom of the column, incrementing upward)

First, run a quick pass on the data to calculate your grid dimensions:

• Grid Width: The total number of columns (or the highest stack_column value, assuming columns are sequentially numbered; if not, map non-sequential columns to 0-indexed positions)
• Grid Height: The maximum number of containers in any single column (the highest stack_level across all columns)

2. Generate the 2D Grid Array Efficiently #

Once you have your dimensions, create a blank grid then populate it with container data. Here's a JavaScript example (easily adaptable to other frameworks):

// Sample DB data (replace with your actual fetch call)
const containers = [
  { id: 'CNTR-001', stackColumn: 1, stackLevel: 1 },
  { id: 'CNTR-002', stackColumn: 1, stackLevel: 2 },
  { id: 'CNTR-003', stackColumn: 2, stackLevel: 1 },
  { id: 'CNTR-004', stackColumn: 3, stackLevel: 3 }
];

// Step 1: Calculate grid bounds
const maxColumn = Math.max(...containers.map(c => c.stackColumn));
const columnMaxLevels = containers.reduce((acc, c) => {
  acc[c.stackColumn] = Math.max(acc[c.stackColumn] || 0, c.stackLevel);
  return acc;
}, {});
const maxHeight = Math.max(...Object.values(columnMaxLevels), 1); // Ensure at least 1 row

// Step 2: Initialize empty grid (null = empty cell)
const grid = Array.from({ length: maxHeight }, () => 
  Array.from({ length: maxColumn }, () => null)
);

// Step 3: Populate containers (map stack levels to grid rows)
// Note: We're treating grid row 0 as the TOP of the stack, last row as the BOTTOM
// Adjust this if you want the first row to be the bottom
containers.forEach(c => {
  const rowIndex = maxHeight - c.stackLevel; // Convert level to grid row
  const colIndex = c.stackColumn - 1; // Convert column to 0-indexed
  grid[rowIndex][colIndex] = c;
});

3. Render as a Square Grid (Web Frontend) #

To ensure every cell stays a square (even as the screen resizes), use CSS aspect-ratio (modern browsers) or a padding-top fallback. Here's a simple HTML/CSS example:

HTML (using Handlebars-style templating; adapt to React/Vue/Angular as needed) #

<div class="container-stack-grid">
  {{#each grid}}
    <div class="grid-row">
      {{#each this}}
        <div class="grid-cell {{#if this}}occupied{{/if}}">
          {{#if this}}
            <div class="container-label">{{this.id}}</div>
          {{/if}}
        </div>
      {{/each}}
    </div>
  {{/each}}
</div>

CSS #

.container-stack-grid {
  width: 100%;
  max-width: 900px;
  margin: 2rem auto;
}

.grid-row {
  display: flex;
  width: 100%;
}

.grid-cell {
  flex: 1;
  aspect-ratio: 1 / 1; /* Forces square shape */
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-cell.occupied {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

.container-label {
  font-size: 0.9rem;
  font-weight: 500;
}

4. Key Reliability & Optimization Tips #

• Data Validation: Add checks for duplicate containers in the same column/level, invalid column/level values (e.g., 0 or negative numbers) before generating the grid— this prevents rendering bugs.
• Incremental Updates: If your DB data changes in real-time, don't regenerate the entire grid. Instead, update only the specific cells that changed (use WebSockets or polling to detect updates).
• Responsive Handling: On mobile, add horizontal scrolling to the grid container so cells don't shrink to unreadable sizes while staying square.
• Empty State Handling: For cells with no container, you can add a subtle placeholder (like a light gray fill or "Empty" text) to make the grid structure clear.

内容的提问来源于stack exchange，提问作者E. Lynch