DmitrMakeev commited on
Commit
d9986da
·
verified ·
1 Parent(s): 6046b2c

Update online.html

Browse files
Files changed (1) hide show
  1. 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
- <script>
464
- function updateValues(data) {
465
- document.getElementById("dey").textContent = data.dey;
466
- document.getElementById("wek").textContent = data.wek;
467
- document.getElementById("v_hid").textContent = data.v_hid;
468
- document.getElementById("v_min").textContent = data.v_min;
469
- document.getElementById("dey").textContent = data.dey;
470
- document.getElementById("wek").textContent = data.wek;
471
- document.getElementById("ph").textContent = data.ph;
472
- document.getElementById("ec").textContent = data.ec;
473
- document.getElementById("tS").textContent = data.tS;
474
- document.getElementById("tA").textContent = data.tA;
475
- document.getElementById("hDm").textContent = data.hDm;
476
- document.getElementById("sVen").textContent = data.sVen;
477
- document.getElementById("rFul").textContent = data.rFul;
478
- document.getElementById("rLi").textContent = data.rLi;
479
- document.getElementById("rWat").textContent = data.rWat;
480
- document.getElementById("rRas").textContent = data.rRas;
481
- document.getElementById("rPH").textContent = data.rPH;
482
- document.getElementById("rEC").textContent = data.rEC;
483
- document.getElementById("rSl").textContent = data.rSl;
484
- document.getElementById("rLe").textContent = data.rLe;
485
- document.getElementById("alW").textContent = data.alW;
486
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
487
  }
488
-
489
- function fetchValues() {
490
- var xhr = new XMLHttpRequest();
491
- xhr.open("GET", "/online_api", true);
492
- xhr.setRequestHeader("Content-Type", "application/json");
493
- xhr.onreadystatechange = function () {
494
- if (xhr.readyState === 4 && xhr.status === 200) {
495
- var response = JSON.parse(xhr.responseText);
496
- updateValues(response);
497
- }
498
- };
499
- xhr.send();
500
- }
501
-
502
- fetchValues();
503
- setInterval(fetchValues, 10000);
504
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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