добавил моточасы и запущенный насос в прочие показатели, изменил немного верстку

This commit is contained in:
VladislavOstapov 2024-01-15 17:00:57 +03:00
parent 097257c1f5
commit 96acd59ff1
2 changed files with 52 additions and 21 deletions

View File

@ -45,7 +45,7 @@ body {
} }
#content { #content {
margin: 0.2em; margin: 0.5em;
} }
/* ========== MAIN STYLES ========== */ /* ========== MAIN STYLES ========== */

View File

@ -11,15 +11,25 @@
{% block styles %} {% block styles %}
<style> <style>
.content-wrapper { /* родительский блок для всех групп параметров */
.params-wrapper, .multiply-params-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.content-block { /* блок с заголовком и группой параметров */
.params-wrapper > div {
margin: 0.5em; margin: 0.5em;
} }
.multiply-params-wrapper > .params-group {
margin-right: 1em;
}
/* блок непосредственно с параметрами */
.params-group {
/*border: red 1px dashed;*/
}
#canvas-wrapper { #canvas-wrapper {
max-width: 1000px; max-width: 1000px;
@ -28,38 +38,59 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div> <div class="params-wrapper">
<div class="content-wrapper"> <div>
<div class="content-block"> <h2>Состояние насосной станции</h2>
<h2>Состояние насосной станции</h2> <div class="params-group">
<p>Последнее обновление: <span id="pump-last-update"></span></p> <p>Последнее обновление: <span id="pump-last-update"></span></p>
<p>Регистр аварий: <span id="pump-alarms"></span></p> <p>Регистр аварий: <span id="pump-alarms"></span></p>
<p>Состояние КА: <span id="pump-stage"></span></p> <p>Состояние КА: <span id="pump-stage"></span></p>
<p>Текущий расход: <span id="pump-flow-meter"></span>м³</p> <p>Текущий расход: <span id="pump-flow-meter"></span>м³</p>
</div> </div>
<div class="content-block"> </div>
<h2>Состояние резервуара</h2> <div>
<h2>Состояние резервуара</h2>
<div class="params-group">
<p>Последнее обновление: <span id="tank-last-update"></span></p> <p>Последнее обновление: <span id="tank-last-update"></span></p>
<p>Текущий уровень воды: <span id="tank-level-now"></span>%</p> <p>Текущий уровень воды: <span id="tank-level-now"></span>%</p>
<p>Уровень воды <span id="tank-level-dir"></span></p> <p>Уровень воды <span id="tank-level-dir"></span></p>
<p>Статус: <span id="tank-status"></span></p> <p>Статус: <span id="tank-status"></span></p>
</div> </div>
</div> </div>
<div class="content-block chart"> </div>
<div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
</div> <div class="content-block chart">
<div class="content-block"> <div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
</div>
<div class="params-wrapper">
<div>
<h2>Прочие показатели</h2> <h2>Прочие показатели</h2>
<p>Частота ПЧ: <span id="pump-vfd-freq"></span>Гц</p> <div class="multiply-params-wrapper">
<p>Ток ПЧ: <span id="pump-vfd-curr"></span>А</p> <div class="params-group">
<p>Ошибка ПЧ: <span id="pump-vfd-error"></span></p> <p>Частота ПЧ: <span id="pump-vfd-freq"></span>Гц</p>
<p>Текущее значение с радара: <span id="tank-raw-now"></span></p> <p>Ток ПЧ: <span id="pump-vfd-curr"></span>А</p>
<p>Ошибка ПЧ: <span id="pump-vfd-error"></span></p>
<p>Текущее значение с радара: <span id="tank-raw-now"></span></p>
</div>
<div class="params-group">
<p>Запущенный насос: <span id="pump-running" class="value-bad">NI</span></p>
<p>Моточасы насоса 1: <span id="pump-moto-watch-1" class="value-bad">NI</span></p>
<p>Моточасы насоса 2: <span id="pump-moto-watch-2" class="value-bad">NI</span></p>
</div>
</div>
</div> </div>
<div class="content-block"> </div>
<div class="params-wrapper">
<div>
<h2>Настройки</h2> <h2>Настройки</h2>
<div> <div class="params-group">
<label for="settings-chart-time">Период на графике (дней): </label> <p>
<input id="settings-chart-time" type="number" min="1" max="31"> <label for="settings-chart-time">Период на графике (дней): </label>
<input id="settings-chart-time" type="number" min="1" max="31">
</p>
</div> </div>
</div> </div>
</div> </div>