Refine capacity summary and analysis presentation
This commit is contained in:
@@ -289,6 +289,23 @@
|
||||
border-left: 4px solid #2BAC70;
|
||||
}
|
||||
.lo-results-summary h4 { margin-top: 0; color: #333; font-size: 14px; margin-bottom: 12px; }
|
||||
.lo-summary-section {
|
||||
padding-top: 12px;
|
||||
margin-top: 12px;
|
||||
border-top: 1px solid #e6ece9;
|
||||
}
|
||||
.lo-summary-section:first-of-type {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
.lo-summary-section-title {
|
||||
margin-bottom: 8px;
|
||||
color: #1F5438;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.lo-summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -415,6 +432,11 @@
|
||||
}
|
||||
.lo-sideview-section.show { display: block; }
|
||||
.lo-sideview-section h4 { margin: 0 0 12px 0; font-size: 14px; color: #333; }
|
||||
.lo-sideview-context {
|
||||
margin: -6px 0 12px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
.lo-sideview-wrap {
|
||||
background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden;
|
||||
}
|
||||
@@ -827,32 +849,43 @@
|
||||
|
||||
<div class="lo-results-summary">
|
||||
<h4>Capacity Summary:</h4>
|
||||
<div class="lo-summary-item lo-governing-summary">
|
||||
<span><strong>Governing Constraint:</strong></span>
|
||||
<span id="limitingFactorValue" class="lo-value-highlight">–</span>
|
||||
</div>
|
||||
<div class="lo-summary-item">
|
||||
<span><strong>Total Rolls:</strong></span>
|
||||
<div style="text-align:right;">
|
||||
<span id="totalRollsValue" class="lo-value-highlight">–</span>
|
||||
<small id="rollsDetailValue" style="display:block;color:#888;"></small>
|
||||
<div class="lo-summary-section">
|
||||
<div class="lo-summary-section-title">Governing Constraint</div>
|
||||
<div class="lo-summary-item lo-governing-summary">
|
||||
<span><strong>Constraint:</strong></span>
|
||||
<span id="limitingFactorValue" class="lo-value-highlight">–</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lo-summary-item">
|
||||
<span><strong>Utilization:</strong></span>
|
||||
<div class="lo-util-group">
|
||||
<div>Weight: <span id="weightUtilValue" class="lo-value-number">–</span> %</div>
|
||||
<div>Volume: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div>
|
||||
<div>Product: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
|
||||
|
||||
<div class="lo-summary-section">
|
||||
<div class="lo-summary-section-title">Transport Result</div>
|
||||
<div class="lo-summary-item">
|
||||
<span><strong>Total Rolls:</strong></span>
|
||||
<div style="text-align:right;">
|
||||
<span id="totalRollsValue" class="lo-value-highlight">–</span>
|
||||
<small id="rollsDetailValue" style="display:block;color:#888;"></small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lo-summary-item">
|
||||
<span><strong>Utilization:</strong></span>
|
||||
<div class="lo-util-group">
|
||||
<div>Weight Utilization: <span id="weightUtilValue" class="lo-value-number">–</span> %</div>
|
||||
<div>Volume Utilization: <span id="volumeUtilValue" class="lo-value-number">–</span> %</div>
|
||||
<div>Transported Product Area: <span id="productM2Value" class="lo-value-number">–</span> m²</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lo-summary-item">
|
||||
<span><strong>Remaining Capacity:</strong></span>
|
||||
<div class="lo-util-group">
|
||||
<div>Payload: <span id="remainingPayloadValue" class="lo-value-number">–</span> kg</div>
|
||||
<div>Unused Payload: <span id="unusedPayloadValue" class="lo-value-number">–</span> %</div>
|
||||
<div>Unused Volume: <span id="unusedVolumeValue" class="lo-value-number">–</span> %</div>
|
||||
<div id="capacityInterpretationValue" class="lo-reserve-note"></div>
|
||||
|
||||
<div class="lo-summary-section">
|
||||
<div class="lo-summary-section-title">Remaining Capacity</div>
|
||||
<div class="lo-summary-item">
|
||||
<span><strong>Remaining Capacity:</strong></span>
|
||||
<div class="lo-util-group">
|
||||
<div>Remaining Payload: <span id="remainingPayloadValue" class="lo-value-number">–</span> kg</div>
|
||||
<div>Unused Payload: <span id="unusedPayloadValue" class="lo-value-number">–</span> %</div>
|
||||
<div>Unused Volume: <span id="unusedVolumeValue" class="lo-value-number">–</span> %</div>
|
||||
<div id="capacityInterpretationValue" class="lo-reserve-note"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -863,8 +896,8 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Constraint</th>
|
||||
<th>Theoretical Max Rolls</th>
|
||||
<th>Theoretical Total Weight</th>
|
||||
<th>Max Rolls</th>
|
||||
<th>Total Weight</th>
|
||||
<th>Transported Area [m²]</th>
|
||||
<th>Payload Util. %</th>
|
||||
</tr>
|
||||
@@ -875,6 +908,7 @@
|
||||
|
||||
<div class="lo-sideview-section" id="sideViewSection">
|
||||
<h4>🔍 Front View – Cross-Section</h4>
|
||||
<p class="lo-sideview-context">Cross-section of the actual loading configuration.</p>
|
||||
<div class="lo-sideview-wrap">
|
||||
<svg id="sideViewSVG" width="100%" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
|
||||
<text x="400" y="130" text-anchor="middle" fill="#aaa" font-size="14">Run a calculation to see the side view.</text>
|
||||
@@ -1382,9 +1416,9 @@ class LoadOptimizerUI {
|
||||
const unusedPayload = Math.max(0, 100 - res.utilizationWeight);
|
||||
const unusedVolume = Math.max(0, 100 - res.utilizationVolume);
|
||||
const interpretations = {
|
||||
geometry: 'Payload remains available; no additional roll fits geometrically.',
|
||||
weight: 'Payload limit is reached before volume or geometry.',
|
||||
volume: 'Volume capacity is reached before payload or geometry.'
|
||||
geometry: 'Geometry prevents loading additional rolls although payload capacity remains available.',
|
||||
weight: 'Payload limit is reached before the available geometry or volume is fully used.',
|
||||
volume: 'Volume capacity is reached before payload or geometric capacity is fully used.'
|
||||
};
|
||||
document.getElementById('limitingFactorValue').textContent = res.limiting.name;
|
||||
document.getElementById('totalRollsValue').textContent = res.finalRolls;
|
||||
|
||||
Reference in New Issue
Block a user