112 lines
4.9 KiB
TypeScript
112 lines
4.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import {
|
|
useInputValues,
|
|
useMachineUptime,
|
|
useMaterialCycle,
|
|
useThroughPutData,
|
|
} from "../../../store/builder/store";
|
|
import { ThroughputSummaryIcon } from "../../icons/analysis";
|
|
import SkeletonUI from "../../templates/SkeletonUI";
|
|
|
|
const ProductionCapacity = ({
|
|
avgProcessTime = "28.4 Secs/unit",
|
|
machineUtilization = "78%",
|
|
throughputValue = 128,
|
|
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
|
|
}) => {
|
|
const { machineActiveTime } = useMachineUptime();
|
|
const { materialCycleTime } = useMaterialCycle();
|
|
const { throughputData } = useThroughPutData();
|
|
const { inputValues } = useInputValues();
|
|
|
|
const progressPercent = machineActiveTime;
|
|
|
|
const shiftLength = parseFloat(inputValues["Shift length"]);
|
|
|
|
const totalBars = 6;
|
|
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
|
|
const partialFillPercent = ((progressPercent / 1000) * totalBars - barsToFill) * 100;
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (throughputData > 0) {
|
|
setIsLoading(false);
|
|
} else {
|
|
setIsLoading(false);
|
|
}
|
|
}, [throughputData]);
|
|
|
|
const Units_per_hour = (shiftLength * 60) / (materialCycleTime / 60) / shiftLength;
|
|
|
|
return (
|
|
<>
|
|
{!isLoading && (
|
|
<div className="throughtputSummary-container analysis-card">
|
|
<div className="throughtputSummary-wrapper analysis-card-wrapper">
|
|
<div className="card-header">
|
|
<div className="header">
|
|
<div className="main-header">Throughput Summary</div>
|
|
<div className="sub-header">
|
|
{timeRange.startTime} - {timeRange.endTime}
|
|
</div>
|
|
</div>
|
|
<div className="icon-wrapper">
|
|
<ThroughputSummaryIcon />
|
|
</div>
|
|
</div>
|
|
{!isLoading ? (
|
|
<>
|
|
<div className="process-container">
|
|
<div className="throughput-value">
|
|
<span className="value">
|
|
{Units_per_hour.toFixed(2) === "Infinity"
|
|
? 0
|
|
: Units_per_hour.toFixed(2)}
|
|
</span>{" "}
|
|
Units/hour
|
|
</div>
|
|
|
|
{/* Dynamic Progress Bar */}
|
|
<div className="progress-bar-wrapper">
|
|
{[...Array(totalBars)].map((_, i) => (
|
|
<div className="progress-bar" key={i}>
|
|
{i < barsToFill ? (
|
|
<div className="bar-fill full" />
|
|
) : i === barsToFill ? (
|
|
<div
|
|
className="bar-fill partial"
|
|
style={{ width: `${partialFillPercent}%` }}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="metrics-section">
|
|
<div className="metric">
|
|
<span className="label">Avg. Process Time</span>
|
|
<span className="value">
|
|
{materialCycleTime} secs/unit{" "}
|
|
</span>
|
|
</div>
|
|
<div className="metric">
|
|
<span className="label">Machine Utilization</span>
|
|
<span className="value">{machineActiveTime}</span>
|
|
{/* <span className="value">{machineActiveTime}</span> */}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<SkeletonUI type={"default"} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProductionCapacity;
|