349 lines
13 KiB
HTML
349 lines
13 KiB
HTML
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Volume Flow</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-volume_flow"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.volume_flow"
|
|
data-units="MCF/Day"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.volume_flow'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="volume_flow">
|
|
<%= channels["abbflow.volume_flow"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-volume_flow" data-chart="chart" data-nodename1="abbflow.volume_flow" data-datalabel1="Volume Flow" data-daysofhistory="2" data-chartlabel="Volume Flow" data-ylabel="" data-xlabel="Date" data-units=" MCF/Day"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Today Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-today_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.today_volume"
|
|
data-units="MCF"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.today_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="today_volume">
|
|
<%= channels["abbflow.today_volume"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-today_volume" data-chart="chart" data-nodename1="abbflow.today_volume" data-datalabel1="Today Volume" data-daysofhistory="2" data-chartlabel="Today Volume" data-ylabel="" data-xlabel="Date" data-units=" MCF"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Differential Pressure</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-differential_pressure"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.differential_pressure"
|
|
data-units="PSIA"
|
|
data-min="0"
|
|
data-max="75"
|
|
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['abbflow.differential_pressure'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="differential_pressure">
|
|
<%= channels["abbflow.differential_pressure"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-differential_pressure" data-chart="chart" data-nodename1="abbflow.differential_pressure" data-datalabel1="Differential Pressure" data-daysofhistory="2" data-chartlabel="Differential Pressure" data-ylabel="" data-xlabel="Date" data-units=" inH2O"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Static Pressure</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-static_pressure"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.static_pressure"
|
|
data-units="PSIA"
|
|
data-min="0"
|
|
data-max="150"
|
|
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['abbflow.static_pressure'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="static_pressure">
|
|
<%= channels["abbflow.static_pressure"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-static_pressure" data-chart="chart" data-nodename1="abbflow.static_pressure" data-datalabel1="Static Pressure" data-daysofhistory="2" data-chartlabel="Static Pressure" data-ylabel="" data-xlabel="Date" data-units=" PSIA"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Temperature</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-temperature"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.temperature"
|
|
data-units="deg F"
|
|
data-min="0"
|
|
data-max="150"
|
|
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['abbflow.temperature'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="temperature">
|
|
<%= channels["abbflow.temperature"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-temperature" data-chart="chart" data-nodename1="abbflow.temperature" data-datalabel1="Temperature" data-daysofhistory="2" data-chartlabel="Temperature" data-ylabel="" data-xlabel="Date" data-units=" deg F"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Battery Voltage</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-battery_voltage"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.battery_voltage"
|
|
data-units="V"
|
|
data-min="0"
|
|
data-max="25"
|
|
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['abbflow.battery_voltage'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="battery_voltage">
|
|
<%= channels["abbflow.battery_voltage"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-battery_voltage" data-chart="chart" data-nodename1="abbflow.battery_voltage" data-datalabel1="Battery Voltage" data-daysofhistory="2" data-chartlabel="Battery Voltage" data-ylabel="" data-xlabel="Date" data-units=" V"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Charger Voltage</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-charger_voltage"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.charger_voltage"
|
|
data-units="V"
|
|
data-min="0"
|
|
data-max="25"
|
|
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['abbflow.charger_voltage'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="charger_voltage">
|
|
<%= channels["abbflow.charger_voltage"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='col-xs-8'>
|
|
<div style="height:300px" id="chart-charger_voltage" data-chart="chart" data-nodename1="abbflow.charger_voltage" data-datalabel1="Battery Voltage" data-daysofhistory="2" data-chartlabel="Charger Voltage" data-ylabel="" data-xlabel="Date" data-units=" V"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='row row-flex box-me'>
|
|
<div class='col-xs-4 text-center box-me'>
|
|
<h2>Yesterday Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-yesterday_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.yesterday_volume"
|
|
data-units="MCF"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.yesterday_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="yesterday_volume">
|
|
<%= channels["abbflow.yesterday_volume"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-4 text-center box-me'>
|
|
<h2>Last Calc. Period Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-last_calculation_period_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.last_calculation_period_volume"
|
|
data-units="SCF"
|
|
data-min="0"
|
|
data-max="1000"
|
|
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['abbflow.last_calculation_period_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="last_calculation_period_volume">
|
|
<%= channels["abbflow.last_calculation_period_volume"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='col-xs-4 text-center'>
|
|
<h2>Accumulated Volume</h2>
|
|
<div class="gauge-box">
|
|
<div data-labelheight="10"
|
|
style="height: 170px; background: transparent; margin: 0 auto;"
|
|
id="gauge-accumulated_volume"
|
|
data-chart="solidgauge"
|
|
data-nodename="abbflow.accumulated_volume"
|
|
data-units="MCF"
|
|
data-min="0"
|
|
data-max="1000000"
|
|
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['abbflow.accumulated_volume'].channelId %>" class="data-table" title="Download Channel History">
|
|
<i class="fa fa-download"></i>
|
|
</a>
|
|
</div>
|
|
<span data-timeupdate="accumulated_volume">
|
|
<%= channels["abbflow.accumulated_volume"].timestamp %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.box-me {
|
|
position: relative;
|
|
padding: 0.5em;
|
|
padding-bottom: 1.5em;
|
|
border: 1px solid #eee;
|
|
/*margin: 1em 0;*/
|
|
}
|
|
.box-me .gauge-box {
|
|
margin-top: -0.25em;
|
|
}
|
|
|
|
.pad15 {
|
|
margin: 15px 15px;
|
|
}
|
|
|
|
.box-me h2 {
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
color: #666;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
z-index: 100;
|
|
}
|
|
.dynamic-chart-form {
|
|
background-color: whiteSmoke;
|
|
padding: 1em 0.5em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.row-flex {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.row-flex > [class*='col-'] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#systemStatusTimelineContainer h2 {
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
color: #666;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
z-index: 100;
|
|
}
|
|
</style>
|