112 lines
5.3 KiB
HTML
112 lines
5.3 KiB
HTML
<div class="row row-flex box-me">
|
|
<div class='col-xs-6 text-center box-me'>
|
|
<h2>GPM Flow</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-gpm_flow"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.gpm_flow"
|
|
data-units="GPM"
|
|
data-min="0"
|
|
data-max="100"
|
|
data-decimalplaces="2"
|
|
data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
|
|
data-valuefontsize="18px">
|
|
</div>
|
|
<div class- "timestamp-box">
|
|
<a href="#" data-channelId="<%= channels['flowmonitor.gpm_flow'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="gpm_flow">
|
|
<%= channels["flowmonitor.gpm_flow"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-6 text-center box-me'>
|
|
<h2>BPD Flow</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-bpd_flow"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.bpd_flow"
|
|
data-units="BPD"
|
|
data-min="0"
|
|
data-max="5000"
|
|
data-decimalplaces="2"
|
|
data-colors="0.1:#DF5353,0.5:#DDDF0D,0.9:#55BF3B"
|
|
data-valuefontsize="18px">
|
|
</div>
|
|
<div class- "timestamp-box">
|
|
<a href="#" data-channelId="<%= channels['flowmonitor.bpd_flow'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="bpd_flow">
|
|
<%= channels["flowmonitor.bpd_flow"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row box-me">
|
|
<div class="col-md-12">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Today</th>
|
|
<th>Yesterday</th>
|
|
<th>This Month</th>
|
|
<th>Last Month</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Gallon Total</td>
|
|
<td data-valueupdate="gal_total" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="gal_total_yesterday" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total_yesterday"].value * 100) / 100 %> Gal.</td>
|
|
<td data-valueupdate="gal_total_thismonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total_thismonth"].value * 100) / 100 %> Gal.</td>
|
|
<td data-valueupdate="gal_total_lastmonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.gal_total_lastmonth"].value * 100) / 100 %> Gal.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>BBL Total</td>
|
|
<td data-valueupdate="bbl_total" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_yesterday" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total_yesterday"].value * 100) / 100 %> BBL</td>
|
|
<td data-valueupdate="bbl_total_thismonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total_thismonth"].value * 100) / 100 %> BBL</td>
|
|
<td data-valueupdate="bbl_total_lastmonth" data-refreshonupdate=true><%= Math.round(channels["flowmonitor.bbl_total_lastmonth"].value * 100) / 100 %> BBL</td>
|
|
</tr>
|
|
<% if (channels["flowmonitor.cost_per_bbl"].value > 0.0){ %>
|
|
<tr>
|
|
<td>Cost ($<%= channels["flowmonitor.cost_per_bbl"].value %> / BBL)</td>
|
|
<td data-valueupdate="bbl_total" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.gal_total"].value * channels["flowmonitor.cost_per_bbl"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_yesterday" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.gal_total_yesterday"].value * channels["flowmonitor.cost_per_bbl"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_thismonth" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.cost_thismonth"].value * 100) / 100 %></td>
|
|
<td data-valueupdate="bbl_total_lastmonth" data-refreshonupdate=true>$<%= Math.round(channels["flowmonitor.cost_lastmonth"].value * 100) / 100 %></td>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row box-me">
|
|
<div class='col-xs-12'>
|
|
<div style="height:300px"
|
|
id="chart-overview"
|
|
data-chart="chart"
|
|
data-nodename1="flowmonitor.bpd_flow"
|
|
data-datalabel1="Flow Rate (BPD)"
|
|
data-daysofhistory="2"
|
|
data-chartlabel="Last 48 Hours"
|
|
data-ylabel=""
|
|
data-xlabel="Date"
|
|
data-units=""></div>
|
|
</div>
|
|
</div>
|
|
|