File size: 5,178 Bytes
dfaa01c c825e81 76dd01a c825e81 76dd01a d1e8bd8 76dd01a d1e8bd8 76dd01a c825e81 76dd01a c825e81 2a80e81 c825e81 dfaa01c 2e718cc d1e8bd8 dfaa01c 2e718cc 287a81b aa4fd06 2e718cc 287a81b 2e718cc 287a81b 2e718cc 287a81b aa4fd06 287a81b aa4fd06 287a81b aa4fd06 2e718cc aa4fd06 c825e81 287a81b aa4fd06 287a81b 2e718cc 2a80e81 0edc2e9 2a80e81 2e718cc aa4fd06 dfaa01c d67e64c 287a81b 796bd1e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
color: red;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<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>
<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>
<script>
const data = {{ data | tojson }};
function renderPlot(id, yData, title, yTitle, color) {
Plotly.newPlot(id, [{
x: data.dates,
y: yData,
type: "scatter",
mode: "lines+markers",
name: title,
line: { color: color },
hovertemplate: data.days_of_week.map((day, index) =>
`День недели: ${day}<br>${title}: %{y}<br>Дата: ${data.dates[index]}`
)
}], {
title: `График ${title} за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: yTitle, titlefont: { size: 14 } },
hovermode: "closest",
showlegend: false
});
}
renderPlot("ph_chart", data.ph, "pH", "Уровень pH", "blue");
renderPlot("ec_chart", data.ec, "EC", "Уровень EC", "red");
renderPlot("ts_chart", data.tS, "Температура раствора", "Температура (°C)", "purple");
renderPlot("ta_chart", data.tA, "Температура воздуха", "Температура (°C)", "orange");
renderPlot("hdm_chart", data.hDm, "Влажность воздуха", "Влажность (%)", "green");
renderPlot("sven_chart", data.sVen, "Обороты вентилятора", "Обороты", "brown");
Plotly.newPlot("pump_chart", [
{ x: data.dates, y: data.onA, type: "scatter", mode: "lines+markers", name: "Насос A", line: { color: "green" } },
{ x: data.dates, y: data.onB, type: "scatter", mode: "lines+markers", name: "Насос B", line: { color: "brown" } },
{ x: data.dates, y: data.onC, type: "scatter", mode: "lines+markers", name: "Насос C", line: { color: "orange" } }
], {
title: `График работы насосов за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: "Состояние насосов" },
hovermode: "closest",
showlegend: true
});
</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_ph_week?week=${newWeek}`;
}
}
</script>
</body>
</html> |