Update online.html

online.html

@@ -261,7 +261,18 @@ document.addEventListener("DOMContentLoaded", function () {
 
 
 <div class="container text-center">
- 
+  <div class="d-flex justify-content-between align-items-center mb-3">
+    <h3>График параметров</h3>
+    <div>
+      <label for="periodSelect">Период: </label>
+      <select id="periodSelect" class="form-select" style="width: auto; display: inline-block;">
+        <option value="6">10 минут (60 точек)</option>
+        <option value="120">20 минут (120 точек)</option>
+        <option value="180">30 минут (180 точек)</option>
+        <option value="360">1 час (360 точек)</option>
+      </select>
+    </div>
+  </div>
   <div id="parametersChart" style="width: 100%; height: 400px;"></div>
 </div>
 
@@ -466,11 +477,11 @@ document.getElementById("but_sliv").addEventListener("click", function() {
 
   
 <script>
-  // Объект для хранения истории данных (до 60 значений)
+  // Объект для хранения истории данных
   let dataHistory = {
-    labels: [], // Индексы для оси X
-    dates: [],  // Даты с сервера
-    times: [],  // Время с сервера
+    labels: [],
+    dates: [],
+    times: [],
     ph: [],
     ec: [],
     tS: [],
@@ -479,16 +490,19 @@ document.getElementById("but_sliv").addEventListener("click", function() {
     sVen: []
   };
 
+  // Максимальное количество точек (по умолчанию 60)
+  let maxPoints = 60;
+
   // Инициализация графика Plotly
   const layout = {
-    title: "",
+    title: "График последних значений параметров",
     xaxis: {
-      showticklabels: false // Убираем метки на оси X
+      showticklabels: false
     },
     yaxis: { title: "Значения" },
     showlegend: true,
     height: 400,
-    hovermode: "closest" // Показываем карточку для ближайшей точки
+    hovermode: "closest"
   };
 
   const traces = [
@@ -496,81 +510,80 @@ document.getElementById("but_sliv").addEventListener("click", function() {
       x: dataHistory.labels,
       y: dataHistory.ph,
       name: "pH",
-      mode: "lines+markers", // Линия с точками
+      mode: "lines+markers",
       line: { color: "blue" },
-      marker: { size: 6 }, // Размер точек
+      marker: { size: 6 },
       customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
       hovertemplate: "<b>pH: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "blue", font: { color: "white" } },
-      visible: true // pH активен по умолчанию
+      visible: true
     },
     {
       x: dataHistory.labels,
       y: dataHistory.ec,
       name: "EC",
-      mode: "lines+markers", // Линия с точками
+      mode: "lines+markers",
       line: { color: "green" },
       marker: { size: 6 },
       customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
       hovertemplate: "<b>EC: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "green", font: { color: "white" } },
-      visible: "legendonly" // EC выключен
+      visible: "legendonly"
     },
     {
       x: dataHistory.labels,
       y: dataHistory.tS,
       name: "Т. раствора",
-      mode: "lines+markers", // Линия с точками
+      mode: "lines+markers",
       line: { color: "red" },
       marker: { size: 6 },
       customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
       hovertemplate: "<b>Т. раствора: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "red", font: { color: "white" } },
-      visible: "legendonly" // Т. раствора выключен
+      visible: "legendonly"
     },
     {
       x: dataHistory.labels,
       y: dataHistory.tA,
       name: "Т. воздуха",
-      mode: "lines+markers", // Линия с точками
+      mode: "lines+markers",
       line: { color: "orange" },
       marker: { size: 6 },
       customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
       hovertemplate: "<b>Т. воздуха: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "orange", font: { color: "white" } },
-      visible: "legendonly" // Т. воздуха выключен
+      visible: "legendonly"
     },
     {
       x: dataHistory.labels,
       y: dataHistory.hDm,
       name: "Вл. воздуха",
-      mode: "lines+markers", // Линия с точками
+      mode: "lines+markers",
       line: { color: "purple" },
       marker: { size: 6 },
       customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
       hovertemplate: "<b>Вл. воз��уха: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "purple", font: { color: "white" } },
-      visible: "legendonly" // Вл. воздуха выключен
+      visible: "legendonly"
     },
     {
       x: dataHistory.labels,
       y: dataHistory.sVen,
       name: "Об. вентилятора",
-      mode: "lines+markers", // Линия с точками
+      mode: "lines+markers",
       line: { color: "brown" },
       marker: { size: 6 },
       customdata: dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]),
       hovertemplate: "<b>Об. вентилятора: %{y}</b><br>Дата: %{customdata[0]}<br>Время: %{customdata[1]}<extra></extra>",
       hoverlabel: { bgcolor: "brown", font: { color: "white" } },
-      visible: "legendonly" // Об. вентилятора выключен
+      visible: "legendonly"
     }
   ];
 
-  // Создаём график сразу, но с пустыми данными
+  // Создаём график
   Plotly.newPlot("parametersChart", traces, layout);
 
   function updateValues(data) {
-    // Обновляем текстовые элементы
     document.getElementById("dey").textContent = data.dey;
     document.getElementById("wek").textContent = data.wek;
     document.getElementById("v_hid").textContent = data.v_hid;
@@ -591,16 +604,15 @@ document.getElementById("but_sliv").addEventListener("click", function() {
     document.getElementById("rLe").textContent = data.rLe;
     document.getElementById("alW").textContent = data.alW;
 
-    // Обновляем историю данных и график
     updateDataHistory(data);
     updateChart();
   }
 
   function updateDataHistory(data) {
     // Добавляем новые значения
-    dataHistory.labels.push(dataHistory.labels.length); // Просто индексы для оси X
-    dataHistory.dates.push(data.date); // Дата с сервера
-    dataHistory.times.push(data.time); // Время с сервера
+    dataHistory.labels.push(dataHistory.labels.length);
+    dataHistory.dates.push(data.date);
+    dataHistory.times.push(data.time);
     dataHistory.ph.push(parseFloat(data.ph) || 0);
     dataHistory.ec.push(parseFloat(data.ec) || 0);
     dataHistory.tS.push(parseFloat(data.tS) || 0);
@@ -608,8 +620,8 @@ document.getElementById("but_sliv").addEventListener("click", function() {
     dataHistory.hDm.push(parseFloat(data.hDm) || 0);
     dataHistory.sVen.push(parseFloat(data.sVen) || 0);
 
-    // Если больше 60 значений, удаляем первое
-    if (dataHistory.labels.length > 360) {
+    // Обрезаем массив, если он превышает maxPoints
+    if (dataHistory.labels.length > maxPoints) {
       dataHistory.labels.shift();
       dataHistory.dates.shift();
       dataHistory.times.shift();
@@ -623,7 +635,6 @@ document.getElementById("but_sliv").addEventListener("click", function() {
   }
 
   function updateChart() {
-    // Обновляем данные графика
     const customdata = dataHistory.dates.map((date, i) => [date, dataHistory.times[i]]);
     Plotly.update("parametersChart", {
       x: [
@@ -666,17 +677,34 @@ document.getElementById("but_sliv").addEventListener("click", function() {
     xhr.send();
   }
 
-  // Выполняем первый запрос сразу при загрузке страницы
+  // Обработчик изменения периода в выпадающем списке
+  document.getElementById("periodSelect").addEventListener("change", function() {
+    maxPoints = parseInt(this.value); // Обновляем максимальное количество точек
+    // Обрезаем существующие данные до нового лимита
+    while (dataHistory.labels.length > maxPoints) {
+      dataHistory.labels.shift();
+      dataHistory.dates.shift();
+      dataHistory.times.shift();
+      dataHistory.ph.shift();
+      dataHistory.ec.shift();
+      dataHistory.tS.shift();
+      dataHistory.tA.shift();
+      dataHistory.hDm.shift();
+      dataHistory.sVen.shift();
+    }
+    updateChart(); // Перерисовываем график с новым количеством точек
+  });
+
+  // Первый запрос и периодическое обновление
   window.onload = function() {
-    fetchValues(); // Первый вызов синхронизирует данные и график
-    setInterval(fetchValues, 10000); // Последующие обновления каждые 10 секунд
+    fetchValues();
+    setInterval(fetchValues, 10000);
   };
 </script>
 
 
 
 
-
   
 </body>
 </html>