231 lines
8.6 KiB
HTML
231 lines
8.6 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 class='col-xs-3 text-center box-me'>
|
|
<h2>Gallons Today</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-gal_total"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.gal_total"
|
|
data-units="Gal."
|
|
data-min="0"
|
|
data-max="150000"
|
|
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.gal_total'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="gal_total">
|
|
<%= channels["flowmonitor.gal_total"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-3 text-center box-me'>
|
|
<h2>Gallons Yesterday</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-gal_total_yesterday"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.gal_total_yesterday"
|
|
data-units="Gal."
|
|
data-min="0"
|
|
data-max="150000"
|
|
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.gal_total_yesterday'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="gal_total_yesterday">
|
|
<%= channels["flowmonitor.gal_total_yesterday"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-3 text-center box-me'>
|
|
<h2>Barrels Today</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-bbl_total"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.bbl_total"
|
|
data-units="BBL"
|
|
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.bbl_total'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="bbl_total">
|
|
<%= channels["flowmonitor.bbl_total"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-3 text-center box-me'>
|
|
<h2>Barrels Yesterday</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-bbl_total_yesterday"
|
|
data-chart="solidgauge"
|
|
data-nodename="flowmonitor.bbl_total_yesterday"
|
|
data-units="BBL"
|
|
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.bbl_total_yesterday'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="bbl_total_yesterday">
|
|
<%= channels["flowmonitor.bbl_total_yesterday"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-3 text-center box-me'>
|
|
<h2>Gallons This Month</h2>
|
|
|
|
<h4 data-updatevalue="gal_total_thismonth">
|
|
<%= Math.round(channels["flowmonitor.gal_total_thismonth"].value * 100) / 100 %>
|
|
</h4>
|
|
|
|
<p data-timeupdate="gal_total_thismonth">
|
|
<%= channels["flowmonitor.gal_total_thismonth"].timestamp %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class='col-xs-3 text-center box-me'>
|
|
<h2>Gallons Last Month</h2>
|
|
|
|
<h4 data-updatevalue="gal_total_lastmonth">
|
|
<%= Math.round(channels["flowmonitor.gal_total_lastmonth"].value * 100) / 100 %>
|
|
</h4>
|
|
|
|
<p data-timeupdate="gal_total_lastmonth">
|
|
<%= channels["flowmonitor.gal_total_lastmonth"].timestamp %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class='col-xs-3 text-center box-me'>
|
|
<h2>BBL This Month</h2>
|
|
|
|
<h4 data-updatevalue="bbl_total_thismonth">
|
|
<%= Math.round(channels["flowmonitor.bbl_total_thismonth"].value * 100) / 100 %>
|
|
</h4>
|
|
|
|
<% if (channels["flowmonitor.cost_per_bbl"].value > 0.0){ %>
|
|
<h4 data-updatevalue="bbl_total_thismonth">
|
|
$<%= Math.round(channels["flowmonitor.bbl_total_thismonth"].value * channels["flowmonitor.cost_per_bbl"].value * 100) / 100 %>
|
|
</h4>
|
|
<% } %>
|
|
|
|
<p data-timeupdate="bbl_total_thismonth">
|
|
<%= channels["flowmonitor.bbl_total_thismonth"].timestamp %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class='col-xs-3 text-center box-me'>
|
|
<h2>BBL Last Month</h2>
|
|
|
|
<h4 data-updatevalue="bbl_total_lastmonth">
|
|
<%= Math.round(channels["flowmonitor.bbl_total_lastmonth"].value * 100) / 100 %>
|
|
</h4>
|
|
|
|
<% if (channels["flowmonitor.cost_per_bbl"].value > 0.0){ %>
|
|
<h4 data-updatevalue="bbl_total_lastmonth">
|
|
$<%= Math.round(channels["flowmonitor.bbl_total_lastmonth"].value * channels["flowmonitor.cost_per_bbl"].value * 100) / 100 %>
|
|
</h4>
|
|
<% } %>
|
|
|
|
<p data-timeupdate="bbl_total_lastmonth">
|
|
<%= channels["flowmonitor.bbl_total_lastmonth"].timestamp %>
|
|
</p>
|
|
</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> |