Update online.html
Browse files- online.html +124 -42
online.html
CHANGED
@@ -105,7 +105,11 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
105 |
|
106 |
|
107 |
|
108 |
-
|
|
|
|
|
|
|
|
|
109 |
|
110 |
|
111 |
|
@@ -460,48 +464,126 @@ document.getElementById("but_sliv").addEventListener("click", function() {
|
|
460 |
|
461 |
|
462 |
|
463 |
-
|
464 |
-
|
465 |
-
|
466 |
-
|
467 |
-
|
468 |
-
|
469 |
-
|
470 |
-
|
471 |
-
|
472 |
-
|
473 |
-
|
474 |
-
|
475 |
-
|
476 |
-
|
477 |
-
|
478 |
-
|
479 |
-
|
480 |
-
|
481 |
-
|
482 |
-
|
483 |
-
|
484 |
-
|
485 |
-
|
486 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
487 |
}
|
488 |
-
|
489 |
-
|
490 |
-
|
491 |
-
|
492 |
-
|
493 |
-
|
494 |
-
|
495 |
-
|
496 |
-
|
497 |
-
|
498 |
-
|
499 |
-
|
500 |
-
|
501 |
-
|
502 |
-
|
503 |
-
|
504 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
505 |
|
506 |
|
507 |
|
|
|
105 |
|
106 |
|
107 |
|
108 |
+
<div class="container text-center">
|
109 |
+
<h3>График последних 60 значений параметров</h3>
|
110 |
+
<div id="parametersChart" style="width: 100%; height: 400px;"></div>
|
111 |
+
</div>
|
112 |
+
<br><br>
|
113 |
|
114 |
|
115 |
|
|
|
464 |
|
465 |
|
466 |
|
467 |
+
<script>
|
468 |
+
// Объект для хранения истории данных (до 60 значений)
|
469 |
+
let dataHistory = {
|
470 |
+
labels: [], // Метки времени
|
471 |
+
ph: [],
|
472 |
+
ec: [],
|
473 |
+
tS: [],
|
474 |
+
tA: [],
|
475 |
+
hDm: [],
|
476 |
+
sVen: []
|
477 |
+
};
|
478 |
+
|
479 |
+
// Инициализация графика Plotly
|
480 |
+
const layout = {
|
481 |
+
title: "График последних 60 значений параметров",
|
482 |
+
xaxis: { title: "Время (последние 60 измерений)" },
|
483 |
+
yaxis: { title: "Значения" },
|
484 |
+
showlegend: true,
|
485 |
+
height: 400
|
486 |
+
};
|
487 |
+
|
488 |
+
const traces = [
|
489 |
+
{ x: dataHistory.labels, y: dataHistory.ph, name: "pH", mode: "lines", line: { color: "blue" } },
|
490 |
+
{ x: dataHistory.labels, y: dataHistory.ec, name: "EC", mode: "lines", line: { color: "green" } },
|
491 |
+
{ x: dataHistory.labels, y: dataHistory.tS, name: "Т. раствора", mode: "lines", line: { color: "red" } },
|
492 |
+
{ x: dataHistory.labels, y: dataHistory.tA, name: "Т. воздуха", mode: "lines", line: { color: "orange" } },
|
493 |
+
{ x: dataHistory.labels, y: dataHistory.hDm, name: "Вл. воздуха", mode: "lines", line: { color: "purple" } },
|
494 |
+
{ x: dataHistory.labels, y: dataHistory.sVen, name: "Об. вентилятора", mode: "lines", line: { color: "brown" } }
|
495 |
+
];
|
496 |
+
|
497 |
+
Plotly.newPlot("parametersChart", traces, layout);
|
498 |
+
|
499 |
+
function updateValues(data) {
|
500 |
+
// Обновляем текстовые элементы
|
501 |
+
document.getElementById("dey").textContent = data.dey;
|
502 |
+
document.getElementById("wek").textContent = data.wek;
|
503 |
+
document.getElementById("v_hid").textContent = data.v_hid;
|
504 |
+
document.getElementById("v_min").textContent = data.v_min;
|
505 |
+
document.getElementById("ph").textContent = data.ph;
|
506 |
+
document.getElementById("ec").textContent = data.ec;
|
507 |
+
document.getElementById("tS").textContent = data.tS;
|
508 |
+
document.getElementById("tA").textContent = data.tA;
|
509 |
+
document.getElementById("hDm").textContent = data.hDm;
|
510 |
+
document.getElementById("sVen").textContent = data.sVen;
|
511 |
+
document.getElementById("rFul").textContent = data.rFul;
|
512 |
+
document.getElementById("rLi").textContent = data.rLi;
|
513 |
+
document.getElementById("rWat").textContent = data.rWat;
|
514 |
+
document.getElementById("rRas").textContent = data.rRas;
|
515 |
+
document.getElementById("rPH").textContent = data.rPH;
|
516 |
+
document.getElementById("rEC").textContent = data.rEC;
|
517 |
+
document.getElementById("rSl").textContent = data.rSl;
|
518 |
+
document.getElementById("rLe").textContent = data.rLe;
|
519 |
+
document.getElementById("alW").textContent = data.alW;
|
520 |
+
|
521 |
+
// Обновляем историю данных
|
522 |
+
updateDataHistory(data);
|
523 |
+
updateChart();
|
524 |
+
}
|
525 |
+
|
526 |
+
function updateDataHistory(data) {
|
527 |
+
// Добавляем новые значения
|
528 |
+
dataHistory.labels.push(new Date().toLocaleTimeString());
|
529 |
+
dataHistory.ph.push(parseFloat(data.ph) || 0);
|
530 |
+
dataHistory.ec.push(parseFloat(data.ec) || 0);
|
531 |
+
dataHistory.tS.push(parseFloat(data.tS) || 0);
|
532 |
+
dataHistory.tA.push(parseFloat(data.tA) || 0);
|
533 |
+
dataHistory.hDm.push(parseFloat(data.hDm) || 0);
|
534 |
+
dataHistory.sVen.push(parseFloat(data.sVen) || 0);
|
535 |
+
|
536 |
+
// Если больше 60 значений, удаляем первое
|
537 |
+
if (dataHistory.labels.length > 60) {
|
538 |
+
dataHistory.labels.shift();
|
539 |
+
dataHistory.ph.shift();
|
540 |
+
dataHistory.ec.shift();
|
541 |
+
dataHistory.tS.shift();
|
542 |
+
dataHistory.tA.shift();
|
543 |
+
dataHistory.hDm.shift();
|
544 |
+
dataHistory.sVen.shift();
|
545 |
}
|
546 |
+
}
|
547 |
+
|
548 |
+
function updateChart() {
|
549 |
+
// Обновляем данные графика
|
550 |
+
Plotly.update("parametersChart", {
|
551 |
+
x: [
|
552 |
+
dataHistory.labels,
|
553 |
+
dataHistory.labels,
|
554 |
+
dataHistory.labels,
|
555 |
+
dataHistory.labels,
|
556 |
+
dataHistory.labels,
|
557 |
+
dataHistory.labels
|
558 |
+
],
|
559 |
+
y: [
|
560 |
+
dataHistory.ph,
|
561 |
+
dataHistory.ec,
|
562 |
+
dataHistory.tS,
|
563 |
+
dataHistory.tA,
|
564 |
+
dataHistory.hDm,
|
565 |
+
dataHistory.sVen
|
566 |
+
]
|
567 |
+
});
|
568 |
+
}
|
569 |
+
|
570 |
+
function fetchValues() {
|
571 |
+
var xhr = new XMLHttpRequest();
|
572 |
+
xhr.open("GET", "/online_api", true);
|
573 |
+
xhr.setRequestHeader("Content-Type", "application/json");
|
574 |
+
xhr.onreadystatechange = function () {
|
575 |
+
if (xhr.readyState === 4 && xhr.status === 200) {
|
576 |
+
var response = JSON.parse(xhr.responseText);
|
577 |
+
updateValues(response);
|
578 |
+
}
|
579 |
+
};
|
580 |
+
xhr.send();
|
581 |
+
}
|
582 |
+
|
583 |
+
// Первый вызов и обновление каждые 10 секунд
|
584 |
+
fetchValues();
|
585 |
+
setInterval(fetchValues, 10000);
|
586 |
+
</script>
|
587 |
|
588 |
|
589 |
|