File size: 4,667 Bytes
dfaa01c 2e718cc dfaa01c 2e718cc aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 16f60c1 aa4fd06 16f60c1 aa4fd06 2e718cc 36789be aa4fd06 36789be aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 16f60c1 aa4fd06 16f60c1 aa4fd06 2e718cc 36789be aa4fd06 36789be aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 dfaa01c 36789be |
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 |
<!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>
</head>
<body>
<h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
<button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
<button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
{% if data %}
<div id="ph_chart"></div>
<div id="ec_chart"></div>
<div id="pump_chart"></div>
<script>
const data = {{ data | tojson }}; // Данные из Flask
// Рендерим графики с использованием Plotly.js
Plotly.newPlot("ph_chart", [{
x: data.dates,
y: data.ph,
type: "scatter",
mode: "lines+markers",
name: "pH",
hovertemplate: data.days_of_week.map((day, index) =>
`День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
)
}], {
title: `График pH за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: {
title: "Уровень pH", // Подпись для оси y
titlefont: { size: 14 }
},
hovermode: "closest"
});
Plotly.newPlot("ec_chart", [{
x: data.dates,
y: data.ec,
type: "scatter",
mode: "lines+markers",
name: "EC",
line: { color: "green" },
hovertemplate: data.days_of_week.map((day, index) =>
`День недели: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
)
}], {
title: `График EC за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: {
title: "Уровень EC", // Подпись для оси y
titlefont: { size: 14 }
},
hovermode: "closest"
});
Plotly.newPlot("pump_chart", [
{
x: data.dates,
y: data.onA,
type: "scatter",
mode: "lines+markers",
name: "Насос A",
line: { color: "blue" },
hovertemplate: data.days_of_week.map((day, index) =>
`День недели: ${day}<br>Насос A: %{y}<br>Дата: ${data.dates[index]}`
)
},
{
x: data.dates,
y: data.onB,
type: "scatter",
mode: "lines+markers",
name: "Насос B",
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",
name: "Насос C",
line: { color: "orange" },
hovertemplate: data.days_of_week.map((day, index) =>
`День недели: ${day}<br>Насос C: %{y}<br>Дата: ${data.dates[index]}`
)
}
], {
title: `График работы насосов за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: "Состояние насосов" },
hovermode: "closest"
});
</script>
{% else %}
<p>Данных за {{ week_number }}-ю неделю нет в базе данных.</p>
{% 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>
|