127 lines
5.7 KiB
HTML
127 lines
5.7 KiB
HTML
<div class="container">
|
|
<div class="row">
|
|
<div google-chart chart="timelineData"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<div ng-if="dateListLoading" class="well"><img src="/img/loading.gif" /></div>
|
|
<div ng-if="!dateListLoading">
|
|
<!-- <pagination total-items="totalFiles" ng-model="currentPage" max-size="maxSize" items-per-page="numPerPage" class="pagination-sm" boundary-links="false" rotate="false" num-pages="numPages"></pagination> -->
|
|
<ul class="list-group">
|
|
<li class="list-group-item active animate">Dashboard</li>
|
|
<li class="list-group-item animate" ng-repeat="date in dates">
|
|
<a href="/#/files/{{date.unconv}}">{{date.conv}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="active"><a href="/">Last Stroke</a></li>
|
|
<li><a href="/#/totals">Today's Totals</a></li>
|
|
</ul>
|
|
|
|
<h1 style="text-align:center;">Dashboard - Stroke {{cardData.Card_ID}}</h1>
|
|
|
|
<div style="text-align:center;"><button class="btn btn-primary active" id="refreshButton" ng-click="dashboard()">Refresh Data</button></div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<div id="Status" class="gauge well" style="width:95%; text-align:center; margin:10px;"><h4>Status: {{status}}</h4><h6>Last Changed: {{status_datetime | 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>{{tagValues.fillage_percent.val | number:3}} %</h5>
|
|
</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>{{tagValues.fluid_level.val | number:3}} ft.</h5>
|
|
</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>{{tagValues.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>{{tagValues.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>{{tagValues.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>{{tagValues.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>
|
|
<!--<h5>{{cardData.time_month}}/{{cardData.time_day}}/{{cardData.time_year}} {{cardData.time_hour}}:{{cardData.time_minute}}:{{cardData.time_second}}</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="{{ tagValues.surface_stroke_length.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues.surface_stroke_length.val }}%;">
|
|
Surface Stroke Length: {{ tagValues.surface_stroke_length.val }} 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="{{ tagValues.donwhole_gross_stroke.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues.downhole_gross_stroke.val }}%;">
|
|
Downhole Gross Stroke: {{ tagValues.downhole_gross_stroke.val }} 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="{{ tagValues.downhole_adjusted_gross_stroke.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues.downhole_adjusted_gross_stroke.val }}%;">
|
|
Downhole Adjusted Gross Stroke: {{ tagValues.downhole_adjusted_gross_stroke.val }} 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="{{ tagValues.downhole_net_stroke.val }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ tagValues.downhole_net_stroke.val }}%;">
|
|
Downhole Net Stroke: {{ tagValues.downhole_net_stroke.val }} 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>
|