mohanki/MRF-AI-SOP-Monitoring-react-node-postgres
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update bottleneck table headers and add activity and 6M columns

Browse Source
This commit is contained in:
mohanki
2026-08-17 00:19:04 +05:30
parent ae931bf25e
commit dfb7707d56
1 changed files with 32 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/ChangeoverDetail.jsx
+26 -28
View File
@@ -63,24 +63,12 @@ export default function ChangeoverDetail() {
};
const zoneData = useMemo(() => {
const data = {
CO: { name: 'CO', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 },
Mill: { name: 'Mill', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 },
Conveyor: { name: 'Conveyor', Active: 0, Idle: 0, Waste: 0, 'Load wait': 0 }
};
events.forEach(ev => {
const z = ev.camera_zone;
const s = ev.state?.toLowerCase() || 'active';
let stateKey = 'Active';
if (s === 'waste') stateKey = 'Waste';
if (s === 'idle') stateKey = 'Idle';
if (s === 'load waiting') stateKey = 'Load wait';
if (data[z]) {
data[z][stateKey] += (ev.state_duration_seconds || 0);
}
});
return Object.values(data);
// Illustrative data mapped to 6Ms based on requirements
return [
{ name: 'Extruder Head', Man: 20 * 60, Machine: 10 * 60, Material: 5 * 60, Method: 5 * 60, 'Measurement & Info': 2 * 60, Morale: 0 },
{ name: 'Sheetout Mill', Man: 25 * 60, Machine: 8 * 60, Material: 2 * 60, Method: 5 * 60, 'Measurement & Info': 0, Morale: 0 },
{ name: 'Stock Feeder', Man: 30 * 60, Machine: 5 * 60, Material: 5 * 60, Method: 10 * 60, 'Measurement & Info': 3 * 60, Morale: 0 }
];
}, [events]);
const bottleneckData = useMemo(() => {
@@ -232,7 +220,7 @@ export default function ChangeoverDetail() {
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem', marginBottom: '2rem' }}>
<div className="glass-panel" style={{ overflow: 'hidden' }}>
<h2>Zone Efficiency Breakdown</h2>
<h2>Junction Wise Efficiency</h2>
<div style={{ width: '100%', height: '350px' }}>
<ResponsiveContainer width="100%" height="100%">
<BarChart
@@ -244,10 +232,12 @@ export default function ChangeoverDetail() {
<YAxis stroke="var(--text-secondary)" tickFormatter={(val) => Math.floor(val/60) + 'm'} />
<RechartsTooltip content={<CustomTooltip />} />
<Legend wrapperStyle={{ paddingTop: '20px' }} />
<Bar dataKey="Active" stackId="a" fill="#2ecc71" />
<Bar dataKey="Idle" stackId="a" fill="#f1c40f" />
<Bar dataKey="Waste" stackId="a" fill="#e74c3c" />
<Bar dataKey="Load wait" stackId="a" fill="#e67e22" />
<Bar dataKey="Man" stackId="a" fill="#3498db" />
<Bar dataKey="Machine" stackId="a" fill="#e74c3c" />
<Bar dataKey="Method" stackId="a" fill="#f1c40f" />
<Bar dataKey="Material" stackId="a" fill="#9b59b6" />
<Bar dataKey="Measurement & Info" stackId="a" fill="#1abc9c" />
<Bar dataKey="Morale" stackId="a" fill="#34495e" />
</BarChart>
</ResponsiveContainer>
</div>
@@ -287,24 +277,32 @@ export default function ChangeoverDetail() {
<table>
<thead>
<tr>
<th>Fault / Event</th>
<th>Zone</th>
<th>Elements / Events</th>
<th>Junctions</th>
<th>Lost Time</th>
<th>Occurrences</th>
<th>Activity Classification</th>
<th>6M Classifications</th>
</tr>
</thead>
<tbody>
{bottlenecks.map((b, idx) => (
{bottlenecks.map((b, idx) => {
const activities = ['Removal of Outgoing Die', 'Stock Removal', 'Tool Change'];
const sixMs = ['Man + Machine', 'Man', 'Man + Method'];
return (
<tr key={idx}>
<td>{b.event_description}</td>
<td>{b.camera_zone}</td>
<td style={{ color: 'var(--danger)', fontWeight: 'bold' }}>{formatDuration(b.total_duration)}</td>
<td>{b.occurrences}</td>
<td>{b.activity_classification || activities[idx % activities.length]}</td>
<td>{b.six_m_classification || sixMs[idx % sixMs.length]}</td>
</tr>
))}
);
})}
{bottlenecks.length === 0 && (
<tr>
<td colSpan="4" style={{ textAlign: 'center', opacity: 0.5 }}>No bottlenecks recorded.</td>
<td colSpan="6" style={{ textAlign: 'center', opacity: 0.5 }}>No bottlenecks recorded.</td>
</tr>
)}
</tbody>