Update plot_week.html

plot_week.html

@@ -24,7 +24,7 @@ body {
 /* Шапка */
 .header {
     width: 100%;
-    padding: 5px 0;
+    padding: 5px 0; /* Убраны отступы справа и слева */
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -34,7 +34,7 @@ body {
 /* Кнопки и лейбл в шапке */
 .header .buttons, 
 .header .label {
-    margin: 0;
+    margin: 0; /* Полностью убраны отступы */
 }
 /* Контейнер графика */
 .graph-container {
@@ -63,23 +63,23 @@ body {
 /* Адаптивность для телефонов (до 768px) */
 @media (max-width: 768px) {
     .header {
-        flex-direction: column;
+        flex-direction: column; /* Кнопки и лейбл станут в колонку */
         align-items: center;
     }
     .graph-container {
-        margin-bottom: 45px;
+        margin-bottom: 45px; /* Увеличен отступ между графиками */
     }
     .graph {
-        height: 330px;
+        height: 330px; /* Увеличена высота графика */
     }
 }
 /* Адаптивность для маленьких телефонов (до 480px) */
 @media (max-width: 480px) {
     .graph-container {
-        margin-bottom: 50px;
+        margin-bottom: 50px; /* Ещё больше отступ между графиками */
     }
     .graph {
-        height: 280px;
+        height: 280px; /* Ещё немного увеличил высоту */
     }
 }
 </style>
@@ -106,115 +106,96 @@ body {
 </div>
 
 <!-- Кнопки переключения недель -->
-<div class="week-buttons mb-3">
+<div class="week-buttons">
     <button id="prev_week" class="btn btn-success mr-2" onclick="navigateWeek(-1)">Предыдущая неделя</button>
     <button id="next_week" class="btn btn-success" onclick="navigateWeek(1)">Следующая неделя</button>
 </div>
 
 {% if data %}
-<!-- Графики -->
-<div id="graph_container" style="height: 600px;"></div>
-
-<script>
-    const data = {{ data | tojson }};
+    <div class="container">
+        <div class="graph-container"><div class="graph" id="ph_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ec_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="pump_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ts_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="ta_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="hdm_chart"></div></div>
+        <div class="graph-container"><div class="graph" id="sven_chart"></div></div>
+    </div>
 
-    // Создаём несколько графиков в одном окне (с использованием subplot)
-    function createSubplotData() {
-        return [
-            // График PH
-            {
+    <script>
+        const data = {{ data | tojson }};
+        
+        function createChart(id, yData, title, yLabel, color) {
+            Plotly.newPlot(id, [{
                 x: data.dates,
-                y: data.ph,
+                y: yData,
                 type: "scatter",
                 mode: "lines+markers",
-                name: "pH",
-                line: { color: "blue" },
+                line: { color: color },
                 hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
+                    `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
                 )
-            },
-            // График EC
+            }], {
+                title: title,
+                xaxis: { title: "", showticklabels: false },
+                yaxis: { title: yLabel, titlefont: { size: 14 } },
+                hovermode: "closest",
+                showlegend: false
+            });
+        }
+        createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
+        createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
+        createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
+        createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
+        createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
+        createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
+        Plotly.newPlot("pump_chart", [
             {
                 x: data.dates,
-                y: data.ec,
+                y: data.onA,
                 type: "scatter",
                 mode: "lines+markers",
-                name: "EC",
                 line: { color: "green" },
                 hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
+                    `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
                 )
             },
-            // График TS
             {
                 x: data.dates,
-                y: data.tS,
+                y: data.onB,
                 type: "scatter",
                 mode: "lines+markers",
-                name: "TS",
-                line: { color: "purple" },
+                line: { color: "brown" },
                 hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>TS: %{y}<br>Дата: ${data.dates[index]}`
+                    `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
                 )
             },
-            // График TA
             {
                 x: data.dates,
-                y: data.ta,
+                y: data.onC,
                 type: "scatter",
                 mode: "lines+markers",
-                name: "TA",
-                line: { color: "red" },
+                line: { color: "orange" },
                 hovertemplate: data.days_of_week.map((day, index) =>
-                    `Неделя: ${data.week}<br>День: ${day}<br>TA: %{y}<br>Дата: ${data.dates[index]}`
+                    `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
                 )
-            },
-        ];
-    }
-
-    // Создание графиков
-    function createPlot() {
-        const traces = createSubplotData();
-
-        const layout = {
-            title: `Графики за ${data.week}-ю неделю`,
-            xaxis: {
-                title: "Дата",
-                showticklabels: true
-            },
-            yaxis: {
-                title: "Значения",
-                titlefont: { size: 14 }
-            },
+            }
+        ], {
+            title: `Интервал дозирования насосов для ${data.week}-ой недели`,
+            xaxis: { title: "", showticklabels: false },
+            yaxis: { title: "Время ВКЛ(сек.)" },
             hovermode: "closest",
-            showlegend: true
-        };
-
-        Plotly.newPlot('graph_container', traces, layout);
-    }
-
-    // Обновляем графики
-    function updateCharts() {
-        $.get("/plot_week?week=" + {{ week_number }}, function(data) {
-            createPlot();
+            showlegend: false
         });
-    }
-
-    setInterval(updateCharts, 10000); // Обновление графиков каждые 10 секунд
-
-</script>
-
+    </script>
 {% else %}
     <div class="no-data-message">
         {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
     </div>
 {% endif %}
 
-<!-- Скрипты навигации -->
 <script>
     let weekNumber = {{ week_number }};
-
-    // Функция переключения недели
     function navigateWeek(change) {
         const newWeek = weekNumber + change;
         if (newWeek >= 1 && newWeek <= 30) {
@@ -222,29 +203,38 @@ body {
         }
     }
 </script>
+  
+
 
-<!-- Скрипты перехода на страницы -->
 <script>
     document.getElementById("st_onl").addEventListener("click", function() {
+        // Получаем основной URL без пути и параметров
         var baseUrl = window.location.origin;
+        // Добавляем необходимый путь к основному URL
         var targetUrl = baseUrl + "/online";
+        // Переходим по сформированному URL
         window.location.href = targetUrl;
     });
-
+</script>
+<script>
     document.getElementById("st_set").addEventListener("click", function() {
+        // Получаем основной URL без пути и параметров
         var baseUrl = window.location.origin;
+        // Добавляем необходимый путь к основному URL
         var targetUrl = baseUrl + "/settings";
+        // Переходим по сформированному URL
         window.location.href = targetUrl;
     });
-
+</script>
+<script>
     document.getElementById("st_plot").addEventListener("click", function() {
+        // Получаем основной URL без пути и параметров
         var baseUrl = window.location.origin;
+        // Добавляем необходимый путь к основному URL
         var targetUrl = baseUrl + "/plot_week";
+        // Переходим по сформированному URL
         window.location.href = targetUrl;
     });
 </script>
-
 </body>
-
-
-</html>
+</html>