flask_inference_api_g

Running

App Files Files Community

DmitrMakeev commited on Mar 21

Commit

f38fe6b

verified ·

1 Parent(s): 6283902

Update plot_week.html

Browse files

Files changed (1) hide show

plot_week.html +117 -129

plot_week.html CHANGED Viewed

@@ -1,52 +1,33 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="icon" type="image/ico" href="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.ico">
-		<title>My static Space</title>
-		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <title>Графики pH и EC</title>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <style>
-        /* Центрирование и растягивание графиков */
         body {
             display: flex;
             flex-direction: column;
             align-items: center;
             margin: 0;
             padding: 0;
-            height: 100vh;
-            justify-content: flex-start;
-        }
-        h1 {
-            margin-top: 20px;
-            font-size: 24px;
         }
-        .buttons {
-            margin: 20px 0;
-        }
-        button {
-            margin: 0 10px;
-            padding: 10px 20px;
-            font-size: 16px;
-        }
-        .graph-container {
             width: 90%;
             max-width: 1200px;
             margin-bottom: 30px;
         }
         .graph {
             width: 100%;
-            height: 500px; /* Можешь подкорректировать высоту, если нужно */
         }
         .no-data-message {
             font-size: 18px;
@@ -54,29 +35,41 @@
             text-align: center;
             margin-top: 20px;
         }
     </style>
 </head>
 <body>
-<nav class="navbar navbar-light bg-light">
-  <a class="navbar-brand" href="/online">
-    <img src="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.png" width="30" height="30" class="d-inline-block align-top" alt="">
-    MackorLab
-  </a>
-  <form class="form-inline">
-    <button  id="st_onl" class="btn btn-success" type="button" >Онлайн</button>
-    <button   id="st_set" class="btn btn-outline-success" type="button" >Настройки</button>
-  </form>
 </nav>
     <h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
-    <div class="buttons">
-        <button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
-        <button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
-    </div>
-    {% if data %}
         <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>
@@ -84,96 +77,91 @@
         <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>
-        <script>
-            const data = {{ data | tojson }};
-            function createChart(id, yData, title, yLabel, color) {
-                Plotly.newPlot(id, [{
-                    x: data.dates,
-                    y: yData,
-                    type: "scatter",
-                    mode: "lines+markers",
-                    line: { color: color },
-                    hovertemplate: data.days_of_week.map((day, index) =>
-                        `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
-                    )
-                }], {
-                    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.onA,
-                    type: "scatter",
-                    mode: "lines+markers",
-                    line: { color: "green" },
-                    hovertemplate: data.days_of_week.map((day, index) =>
-                        `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
-                    )
-                },
-                {
-                    x: data.dates,
-                    y: data.onB,
-                    type: "scatter",
-                    mode: "lines+markers",
-                    line: { color: "brown" },
-                    hovertemplate: data.days_of_week.map((day, index) =>
-                        `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
-                    )
-                },
-                {
-                    x: data.dates,
-                    y: data.onC,
-                    type: "scatter",
-                    mode: "lines+markers",
-                    line: { color: "orange" },
-                    hovertemplate: data.days_of_week.map((day, index) =>
-                        `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
-                    )
-                }
-            ], {
-                title: `Интервал дозирования насосов для ${data.week}-ой недели`,
                 xaxis: { title: "", showticklabels: false },
-                yaxis: { title: "Время ВКЛ(сек.)" },
                 hovermode: "closest",
-                showlegend: false  // ОТКЛЮЧИЛ ЛЕГЕНДУ
             });
-        </script>
-    {% else %}
-        <div class="no-data-message">
-            {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
-        </div>
-    {% endif %}
-    <script>
-        const weekNumber = {{ week_number }};
-        function navigateWeek(change) {
-            const newWeek = weekNumber + change;
-            if (newWeek >= 1 && newWeek <= 30) {
-                window.location.href = `/plot_week?week=${newWeek}`;
             }
-        }
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="ru">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/ico" href="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.ico">
     <title>Графики pH и EC</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <style>
         body {
             display: flex;
             flex-direction: column;
             align-items: center;
             margin: 0;
             padding: 0;
         }
+        .container {
             width: 90%;
             max-width: 1200px;
+        }
+        .graph-container {
+            width: 100%;
             margin-bottom: 30px;
         }
         .graph {
             width: 100%;
+            height: 500px;
         }
         .no-data-message {
             font-size: 18px;
             text-align: center;
             margin-top: 20px;
         }
+        .week-buttons {
+            display: flex;
+            justify-content: center;
+            margin: 20px 0;
+        }
     </style>
 </head>
 <body>
+<!-- Навигационная панель -->
+<nav class="navbar navbar-light bg-light w-100">
+    <div class="container">
+        <a class="navbar-brand" href="/online">
+            <img src="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.png" width="30" height="30" class="d-inline-block align-top" alt="">
+            MackorLab
+        </a>
+        <form class="form-inline">
+            <button id="st_onl" class="btn btn-success mr-2" type="button">Онлайн</button>
+            <button id="st_set" class="btn btn-outline-success" type="button">Настройки</button>
+        </form>
+    </div>
 </nav>
+<div class="container text-center mt-3">
     <h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
+</div>
+<!-- Кнопки переключения недель -->
+<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 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="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>
+    <script>
+        const data = {{ data | tojson }};
+        function createChart(id, yData, title, yLabel, color) {
+            Plotly.newPlot(id, [{
+                x: data.dates,
+                y: yData,
+                type: "scatter",
+                mode: "lines+markers",
+                line: { color: color },
+                hovertemplate: data.days_of_week.map((day, index) =>
+                    `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
+                )
+            }], {
+                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.onA,
+                type: "scatter",
+                mode: "lines+markers",
+                line: { color: "green" },
+                hovertemplate: data.days_of_week.map((day, index) =>
+                    `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
+                )
+            },
+            {
+                x: data.dates,
+                y: data.onB,
+                type: "scatter",
+                mode: "lines+markers",
+                line: { color: "brown" },
+                hovertemplate: data.days_of_week.map((day, index) =>
+                    `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
+                )
+            },
+            {
+                x: data.dates,
+                y: data.onC,
+                type: "scatter",
+                mode: "lines+markers",
+                line: { color: "orange" },
+                hovertemplate: data.days_of_week.map((day, index) =>
+                    `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
+                )
             }
+        ], {
+            title: `Интервал дозирования насосов для ${data.week}-ой недели`,
+            xaxis: { title: "", showticklabels: false },
+            yaxis: { title: "Время ВКЛ(сек.)" },
+            hovermode: "closest",
+            showlegend: false
+        });
     </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) {
+            window.location.href = `/plot_week?week=${newWeek}`;
+        }
+    }
+</script>
 </body>
+</html>