109 lines
7.4 KiB
HTML
109 lines
7.4 KiB
HTML
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<a href="/#/dashboard">Dashboard</a>
|
|
</li>
|
|
<li class="list-group-item" ng-repeat="date in dates" ng-class="{active :date.unconv==currentDate.unconv}">
|
|
<a ng-if="date.unconv!=currentDate.unconv" href="/#/files/{{date.unconv}}">{{date.conv}}</a>
|
|
<span ng-if="date.unconv==currentDate.unconv">{{date.conv}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-10 pull-right">
|
|
<div ng-if="loading" class="well"><img src="/img/loading.gif" style="display: table-cell; vertical-align: middle"/></div>
|
|
<div ng-if="!loading">
|
|
<div ng-if="error" class="well"><h2>Error: {{error}}</h2></div>
|
|
<div ng-if="!error">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="active"><a href="/#/card/{{cardData.id}}/overview">Overview - Stroke {{cardData.Card_ID}}</a></li>
|
|
<li><a href="/#/card/{{cardData.id}}/data">Data</a></li>
|
|
<li><a href="/#/card/{{cardData.id}}/cards">Cards</a></li>
|
|
<li><a href="/csv/{{cardData.id}}">CSV</a></li>
|
|
</ul>
|
|
|
|
<h5><a href="/#/card/{{cardData.id - 1}}" class="pull-left"><< Prev. Card</a> <a href="/#/card/{{cardData.id + 1}}" class="pull-right">Next Card >></a></h5>
|
|
<h1 style="text-align:center;">{{cardData.Stroke_Time | date: 'medium'}}</h1>
|
|
|
|
|
|
<div class="row">
|
|
<pre>{{tagData}}</pre>
|
|
<div class="col-sm-4">
|
|
<div id="Status" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Status:</h4><h5>{{cardData.Card_Type}}</h5><h6>at {{tagData.fillage_percent.dtime * 1000 | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="FillageGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Pump Fillage:</h4><h5>{{tagData.fillage_percent.val | number:3}} %</h5><h6>at {{tagData.fillage_percent.dtime * 1000 | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="FAPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Fluid Above Pump:</h4><h5>{{tagData.fluid_level.val | number:3}} ft.</h5><h6>at {{tagData.fluid_level.dtime * 1000 | date: "medium"}}</h6></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="PRHPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Polished Rod HP:</h4><h5>{{tagData.polished_rod_hp.val | number:3}} HP</h5></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="PMPHPGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Pump HP:</h4><h5>{{tagData.pump_hp.val | number:3}} HP</h5></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="SpeedGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Speed:</h4><h5>{{tagData.spm.val | number:3}} SPM</h5></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="FluidLoadGauge" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Fluid Load:</h4><h5>{{tagData.downhole_fluid_load.val | number:3}} lbs.</h5></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="LastUpdated" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Current Stroke:</h4><h5>{{cardData.Stroke_Time | date: "medium"}}</h5></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div id="cardButton" class="well" style="width:95%; text-align:center; margin:10px">
|
|
<a href="/#/files/{{folder}}" class="btn btn-primary active" style="width:40%;">View<br/>Cards</a>
|
|
<a href="/#/gaugeOff" class="btn btn-primary active" style="margin-left:10px; width:40%;">Gauge<br/>Off</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active" id="surface_stroke_length" role="progressbar" aria-valuenow="{{ tagData.surface_stroke_length.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagData.surface_stroke_length.val }}%;">
|
|
Surface Stroke Length: {{ tagData.surface_stroke_length.val | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active" id="downhole_gross_stroke" role="progressbar" aria-valuenow="{{ tagData.downhole_gross_stroke.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagData.downhole_gross_stroke.val }}%;">
|
|
Downhole Gross Stroke: {{ tagData.downhole_gross_stroke.val | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active" id="downhole_adjusted_gross_stroke" role="progressbar" aria-valuenow="{{ tagData.downhole_adjusted_gross_stroke.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagData.downhole_adjusted_gross_stroke.val }}%;">
|
|
Downhole Adjusted Gross Stroke: {{ tagData.downhole_adjusted_gross_stroke.val | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress" style="margin:10px;">
|
|
<div class="progress-bar progress-bar-striped active" id="downhole_net_stroke" role="progressbar" aria-valuenow="{{ tagData.downhole_net_stroke.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagData.downhole_net_stroke.val }}%;">
|
|
Downhole Net Stroke: {{ tagData.downhole_net_stroke.val | number:3 }} in.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h1>Surface Card</h1>
|
|
<div class="surfaceCard" style="height:500px">
|
|
<linechart data="card_graph_data" options="surfaceOptions"></linechart>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12">
|
|
<h1>Downhole Card</h1>
|
|
<div class="downholeCard" style="height:500px">
|
|
<linechart data="card_graph_data" options="downholeOptions"></linechart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--col-sm-10-->
|
|
</div>
|