138 lines
3.9 KiB
HTML
138 lines
3.9 KiB
HTML
{% extends 'base.html' %}
|
||
{% load static %}
|
||
|
||
{% block head %}
|
||
<script src="{% static 'js/chart-4.4.1.umd.js' %}"></script>
|
||
<script src="{% static 'js/moment-2.js' %}"></script>
|
||
<script src="{% static 'js/chartjs-adapter-moment.js' %}"></script>
|
||
|
||
<script src="{% static 'js/index-main.js' %}"></script>
|
||
{% endblock %}
|
||
|
||
{% block styles %}
|
||
<style>
|
||
.content-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.content-block {
|
||
margin: 0.5em;
|
||
}
|
||
|
||
#canvas-wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
.value-good {
|
||
color: green;
|
||
}
|
||
|
||
.value-bad {
|
||
color: red;
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block header %}
|
||
<h1> Мониторинг водозаборного узла </h1>
|
||
{% if user.is_superuser %}
|
||
<a href="/admin">Админка</a>
|
||
{% endif %}
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
|
||
<div>
|
||
<div class="content-wrapper">
|
||
<div class="content-block">
|
||
<h2>Состояние насосной станции</h2>
|
||
<p>Последнее обновление: <span id="pump-last-update"></span></p>
|
||
<p>Частота ПЧ: <span id="pump-vfd-freq"></span>Гц</p>
|
||
<p>Ток ПЧ: <span id="pump-vfd-curr"></span>А</p>
|
||
<p>Ошибка ПЧ: <span id="pump-vfd-error"></span></p>
|
||
<p>Регистр аварий: <span id="pump-alarms"></span></p>
|
||
<p>Состояние КА: <span id="pump-stage"></span></p>
|
||
<p>Текущий расход: <span id="pump-flow-meter"></span>м³</p>
|
||
</div>
|
||
<div class="content-block">
|
||
<h2>Состояние резервуара</h2>
|
||
<p>Последнее обновление: <span id="tank-last-update"></span></p>
|
||
<p>Текущий уровень воды: <span id="tank-level-now"></span>%</p>
|
||
<p>Текущее значение с радара: <span id="tank-raw-now"></span></p>
|
||
<p>Уровень воды <span id="tank-level-dir"></span></p>
|
||
<p>Статус: <span id="tank-status"></span></p>
|
||
</div>
|
||
</div>
|
||
<div class="content-block chart">
|
||
<h2> Уровень воды в резервуаре, %</h2>
|
||
<div id="canvas-wrapper"><canvas id="water_level"></canvas></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
moment.locale('ru')
|
||
|
||
let bodyStyles = window.getComputedStyle(document.body);
|
||
|
||
const chart_dataset = {
|
||
label: "Резервуар",
|
||
color: bodyStyles.getPropertyValue('--brand-text'),
|
||
data: [],
|
||
pointRadius: 0
|
||
}
|
||
|
||
Chart.defaults.color = bodyStyles.getPropertyValue('--text-color2');
|
||
|
||
const chart = new Chart("water_level", {
|
||
type: "line",
|
||
data: {
|
||
datasets: [chart_dataset]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
legend: { display: false },
|
||
scales: {
|
||
y: { min: 0, max: 100 },
|
||
x: {
|
||
type: 'time',
|
||
time: {
|
||
unit: 'day'
|
||
},
|
||
scaleLabel: {
|
||
labelString: 'Timestamp'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", (event) => {
|
||
// запуск обновления статистики
|
||
updateStatus().then(() => {
|
||
setInterval(() => {
|
||
updateStatus().then()
|
||
}, RELOAD_STATS_INTERVAL)
|
||
})
|
||
|
||
function updateChart(data) {
|
||
chart_dataset.data = data.map((e) => {
|
||
return {x: new Date(e[0] * 1000), y: e[1]}
|
||
})
|
||
chart.update();
|
||
}
|
||
|
||
loadChartData().then((data) => {
|
||
updateChart(data)
|
||
|
||
setInterval(() => {
|
||
loadChartData().then((d) => {
|
||
updateChart(d)
|
||
})
|
||
}, RELOAD_CHART_INTERVAL)
|
||
})
|
||
});
|
||
</script>
|
||
{% endblock %}
|