html
(custom)
<link rel="stylesheet" href="/css/ui-kit.css">
<div class="uk-container">
<div class="ui uk-row mb-16">
<div class="ui uk-row">
<span class="ui header uppercase">Статистика</span>
<i class="majordomo icon medium right-floated"></i>
</div>
<div class="ui divider"></div>
<div class="ui uk-row">
<span class="ui header">%ThisComputer.timeNow%</span>
<span class="ui header right-floated">%ThisComputer.Date%</span>
</div>
</div>
<div class="ui uk-panel mb-16">
<div class="uk-row mb-32">
<div class="uk-left-part">
<div class="header">Электроэнергия</div>
<div class="content">%HomePowerMeter.KWH% КВт·ч</div>
</div>
<div class="uk-icon-part tertiary"><i class="tertiary lightning icon medium"></i></div>
</div>
<div class="uk-row">
<div class="widget">
<div class="header">День</div>
<div class="content"><span data-id="energy-day"></span> КВт·ч<i data-id="energy-day"></i></div>
</div>
<div class="widget">
<div class="header">Неделя</div>
<div class="content"><span data-id="energy-week"></span> КВт·ч<i data-id="energy-week"></i></div>
</div>
<div class="widget">
<div class="header">Месяц</div>
<div class="content"><span data-id="energy-month"></span> КВт·ч<i data-id="energy-month"></i></div>
</div>
</div>
</div>
<div class="ui uk-panel mb-16">
<div class="uk-row mb-32">
<div class="uk-left-part">
<div class="header">Газ</div>
<div class="content">%gasMeter.value% м<sup>3</sup></div>
</div>
<div class="uk-icon-part primary"><i class="primary fire icon medium"></i></div>
</div>
<div class="uk-row">
<div class="widget">
<div class="header">День</div>
<div class="content"><span data-id="gas-day"></span> м<sup>3</sup><i data-id="gas-day"></i></div>
</div>
<div class="widget">
<div class="header">Неделя</div>
<div class="content"><span data-id="gas-week"></span> м<sup>3</sup><i data-id="gas-week"></i></div>
</div>
<div class="widget">
<div class="header">Месяц</div>
<div class="content"><span data-id="gas-month"></span> м<sup>3</sup><i data-id="gas-month"></i></div>
</div>
</div>
</div>
<div class="ui uk-row">
<div class="ui divider"></div>
<div class="ui uk-row bottom-menu">
<a href="/menu/205.html"><i class="user icon medium"></i></a>
<a href="/menu/206.html"><i class="thermometer icon medium"></i></a>
<a href="/menu/208.html"><i class="camera icon medium"></i></a>
<a href="/menu/212.html"><i class="chart-donut icon medium"></i></a>
<a href="/menu/227.html"><i class="home-3-alt icon medium"></i></a>
</div>
</div>
</div>
<script type="text/javascript">
$.ajax({
url: '/objects/?script=GetEnergyAndGasTileStatistic',
type: 'GET',
dataType: "json",
async: false,
success: function (data) {
$("span[data-id='energy-day']").html(data.Energy.Day.This);
if (data.Energy.Day.Direction == 'up') { $("i[data-id='energy-day']").addClass('red up arrow icon micro'); }
else { $("i[data-id='energy-day']").addClass('green down arrow icon micro'); }
$("span[data-id='energy-week']").html(data.Energy.Week.This);
if (data.Energy.Week.Direction == 'up') { $("i[data-id='energy-week']").addClass('red up arrow icon micro'); }
else { $("i[data-id='energy-week']").addClass('green down arrow icon micro'); }
$("span[data-id='energy-month']").html(data.Energy.Month.This);
if (data.Energy.Month.Direction == 'up') { $("i[data-id='energy-month']").addClass('red up arrow icon micro'); }
else { $("i[data-id='energy-month']").addClass('green down arrow icon micro'); }
$("span[data-id='gas-day']").html(data.Gas.Day.This);
if (data.Gas.Day.Direction == 'up') { $("i[data-id='gas-day']").addClass('red up arrow icon micro'); }
else { $("i[data-id='gas-day']").addClass('green down arrow icon micro'); }
$("span[data-id='gas-week']").html(data.Gas.Week.This);
if (data.Gas.Week.Direction == 'up') { $("i[data-id='gas-week']").addClass('red up arrow icon micro'); }
else { $("i[data-id='gas-week']").addClass('green down arrow icon micro'); }
$("span[data-id='gas-month']").html(data.Gas.Month.This);
if (data.Gas.Month.Direction == 'up') { $("i[data-id='gas-month']").addClass('red up arrow icon micro'); }
else { $("i[data-id='gas-month']").addClass('green down arrow icon micro'); }
}
});
</script>