Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Improved layout, better responsive design, label colors implemented f… 
…or faults/statuses
  • Loading branch information
@ema14006
ema14006 committed Apr 10, 2019
1 parent c17a3cb commit 23ffc34
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 108 deletions.
21 changes: 16 additions & 5 deletions src/app/statistics/statistics.component.css
View file
Expand Up @@ -21,11 +21,7 @@ mwl-gauge > .gauge > .value-text {
font-weight: bold;
font-size: 1em;
}
.fusioncharts
{
position: relative;
padding: 5px;
}

h6
{
font-size: 13px;
Expand All @@ -38,3 +34,18 @@ h6
{
font-size: 14px;
}
.gauges
{
display: flex;
justify-content: center;margin-right: auto;
margin-left: auto;
}
.badge
{
display:inline-block;
width:100%;
padding: 8px;
height: 100%;
height: 46px;
}

152 changes: 49 additions & 103 deletions src/app/statistics/statistics.component.html
View file
Expand Up @@ -25,74 +25,74 @@

</div>
<div class = "row mt-3">
<div class = "col-md-8">
<div class = "col-lg-8">
<div class = "row">
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l1.current')">
<radial-gauge width="200" units="Amps" title="Phase A Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pACurrent" >
<radial-gauge class = "gauges" width="200" units="Amps" title="Phase A Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pACurrent" >
</radial-gauge>
</div>
<div *ngIf="pACurrent; else loggedOut"></div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l2.current')">
<radial-gauge width="200" units="°C" title="Phase B Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pBCurrent">
<radial-gauge class = "gauges" width="200" units="Amps" title="Phase B Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pBCurrent">
</radial-gauge>
</div>
<div *ngIf="pBCurrent; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l3.current')">
<radial-gauge width="200" units="°C" title="Phase C Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pCCurrent">
<radial-gauge class = "gauges" width="200" units="Amps" title="Phase C Current" height="200" major-ticks="0,60,120,180,240,300" max-value = '300' [value]="pCCurrent">
</radial-gauge>
</div>
<div *ngIf="pCCurrent; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('engine.rpm')">
<radial-gauge width="200" units="RPM" title="Engine Speed" height="200" major-ticks="0,375,750,1125,1500,1875, 2250, 2625,3000" max-value = "3000" [value]="engineSpeed">
<radial-gauge class = "gauges" width="200" units="RPM" title="Engine Speed" height="200" major-ticks="0,375,750,1125,1500,1875, 2250, 2625,3000" max-value = "3000" [value]="engineSpeed">
</radial-gauge>
</div>
<div *ngIf="engineSpeed; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('fuel.pressure')">
<radial-gauge width="200" units="%" title="Fuel Pressure" height="200" major-ticks="0,12.5,25,37.5,50,62.5,75,87.5,100" max-value = "100" [value]="fuelPressure">
<radial-gauge class = "gauges" width="200" units="%" title="Fuel Pressure" height="200" major-ticks="0,12.5,25,37.5,50,62.5,75,87.5,100" max-value = "100" [value]="fuelPressure">
</radial-gauge>
</div>
<div *ngIf="fuelPressure; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l1.l0.voltage')">
<radial-gauge width="200" units="Volts" title="Phase A Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pAVoltage">
<radial-gauge class = "gauges" width="200" units="Volts" title="Phase A Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pAVoltage">
</radial-gauge>
</div>
<div *ngIf="pAVoltage; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l2.l0.voltage')">
<radial-gauge width="200" units="Volts" title="Phase B Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pBVoltage">
<radial-gauge class = "gauges" width="200" units="Volts" title="Phase B Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pBVoltage">
</radial-gauge>
</div>
<div *ngIf="pBVoltage; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('l3.l0.voltage')">
<radial-gauge width="200" units="Volts" title="Phase C Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pCVoltage">
<radial-gauge class = "gauges" width="200" units="Volts" title="Phase C Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pCVoltage">
</radial-gauge>
</div>
<div *ngIf="pCVoltage; else loggedOut">
</div>
</div>
<div class="col-md-4 p-4">
<div (click)= "goToGraphSpec('total.kw')">
<radial-gauge width="200" units="Volts" title="Total kiloWatt" height="200" major-ticks="0,125,250,375,500,625,750, 875, 1000" max-value = "1000" [value]="totalKw">
<radial-gauge class = "gauges" width="200" units="kW" title="Total kiloWatt" height="200" major-ticks="0,125,250,375,500,625,750, 875, 1000" max-value = "1000" [value]="totalKw">
</radial-gauge>
</div>
<div *ngIf="totalKw; else loggedOut">
Expand All @@ -101,118 +101,64 @@
</div>
</div>

<div class = "col-md-4 p-4 text-center">
<div class = "row faults">
<div class = "col-lg-4 p-4 text-center">
<div class = "row ">
<div class = "col-md-12 ">
<h3>Faults</h3>
<h3 class = "p-3">Faults</h3>
</div>
<div class = "col-md-3">
<p>Overcrank</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Overcrank</span></h5>
</div>
<div class = "col-md-3">
<p>light</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">High Engine<br>Temperature</span></h5>
</div>
<div class = "col-md-3">
<p>High Engine Temperature</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Low Oil<br>Pressure</span></h5>
</div>
<div class = "col-md-3">
<p>light</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Overspeed</span></h5>
</div>
<div class = "col-md-3">
<p>Low Oil Pressure</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Emergency Stop</span></h5>
</div>
<div class = "col-md-3">
<p>light</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Low Fuel</span></h5>
</div>
<div class = "col-md-3">
<p>Overspeed</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Low Coolant<br>Level/Aux</span></h5>
</div>
<div class = "col-md-3">
<p>light</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Low Cranking<br>Voltage</span></h5>
</div>
<div class = "col-md-3">
<p>Emergency Stop</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Battery Voltage<br>(Hi/Lo)</span></h5>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Low Fuel</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Low Coolant Level/Aux</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Low Coolant Temperature</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Low Cranking Voltage</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Battery Voltage (Hi/Lo)</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Battery Charger Fail</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Common Fault</p>
</div>
<div class = "col-md-3">
<p>light</p>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Battery Charger<br>Fail</span></h5>
</div>
<div class = "col-md-6">
<h5><span class="badge badge-danger">Common Fault</span></h5>
</div>
</div>
<div class = "row status">
<div class = "row status ">
<div class = "col-md-12 ">
<h3>System Status</h3>
</div>
<div class = "col-md-3">
<p>EPS Supplying Load</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>Not-In-Auto</p>
</div>
<div class = "col-md-3">
<p>light</p>
</div>
<div class = "col-md-3">
<p>System Ready</p>
</div>
<div class = "col-md-3">
<p>light</p>
<h3 class = "p-3">System Status</h3>
</div>
<div class = "col-md-3">
<p>Generator Running</p>
<div class = "col-md-6">
<h5><span class="badge badge-success">EPS Supplying<br>Load</span></h5>
</div>
<div class = "col-md-3">
<p>light</p>
<div class = "col-md-6">
<h5><span class="badge badge-success">Not-In-Auto</span></h5>
</div>
<div class = "col-md-3">
<p>Comm. Status</p>
<div class = "col-md-6">
<h5><span class="badge badge-success">System Running</span></h5>
</div>
<div class = "col-md-3">
<p>light</p>
<div class = "col-md-6">
<h5><span class="badge badge-success">Generator<br>Running</span></h5>
</div>
<div class = "col-md-6">
<h5><span class="badge badge-success">Communication<br>Status</span></h5>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 23ffc34

Please sign in to comment.