75 lines
2.8 KiB
TypeScript
75 lines
2.8 KiB
TypeScript
|
import React from "react";
|
||
|
|
import PerformanceResult from "./result-card/PerformanceResult";
|
||
|
|
import EnergyUsage from "./result-card/EnergyUsage";
|
||
|
|
|
||
|
|
const ComparisonResult = () => {
|
||
|
|
return (
|
||
|
|
<div className="compare-result-container">
|
||
|
|
<div className="header">Performance Comparison</div>
|
||
|
|
<div className="compare-result-wrapper">
|
||
|
|
<EnergyUsage />
|
||
|
|
<div className="throughPutCard-container comparisionCard">
|
||
|
|
<h4>Throughput (units/hr)</h4>
|
||
|
|
<div className="layers-wrapper">
|
||
|
|
<div className="layer-wrapper">
|
||
|
|
<div className="key">Layout 1</div>
|
||
|
|
<div className="value">500/ hr</div>
|
||
|
|
</div>
|
||
|
|
<div className="layer-wrapper">
|
||
|
|
<div className="key">Layout 2</div>
|
||
|
|
<div className="value">550/ hr</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="chart"></div>
|
||
|
|
</div>
|
||
|
|
<div className="cycle-time-container comparisionCard">
|
||
|
|
<div className="cycle-main">
|
||
|
|
<div className="cycle-header">Cycle Time</div>
|
||
|
|
<div className="layers-wrapper">
|
||
|
|
<div className="layers">
|
||
|
|
<div className="layer-name">Layout 1</div>
|
||
|
|
<div className="layer-time">120 Sec</div>
|
||
|
|
<div className="layer-profit">
|
||
|
|
<span>↑</span>19.6%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="layers">
|
||
|
|
<div className="layer-name">Layout 2</div>
|
||
|
|
<div className="layer-time">110 Sec</div>
|
||
|
|
<div className="layer-profit">
|
||
|
|
<span>↑</span>19.6%1.6%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="overallDowntime-container comparisionCard">
|
||
|
|
<div className="overallDowntime-header">Overall Downtime</div>
|
||
|
|
<div className="totalDownTime">
|
||
|
|
<div className="totalDownTime-right">
|
||
|
|
<div className="totalDownTime-label">Total down time</div>
|
||
|
|
<div className="totalDownTime-subLabel">(Simulation 1)</div>
|
||
|
|
</div>
|
||
|
|
<div className="totalDownTime-left">
|
||
|
|
<div className="value">17</div>
|
||
|
|
<div className="key">mins</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="overallScrapRate comparisionCard">
|
||
|
|
<div className="overallScrapRate-header">Overall Scrap Rate</div>
|
||
|
|
<div className="overallScrapRate-value">
|
||
|
|
<div className="overallScrapRate-label">Layout 1</div>
|
||
|
|
<div className="overallScrapRate-key">Total scrap produced by</div>
|
||
|
|
<div className="overallScrapRate-value">2.7 ton</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<PerformanceResult />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ComparisonResult;
|