File size: 4,195 Bytes
dfaa01c 9e19043 dfaa01c 9255fab dfaa01c d24d9fc 968cf95 d24d9fc dfaa01c 9255fab d24d9fc dfaa01c 9255fab dfaa01c d24d9fc dfaa01c 968cf95 d24d9fc dfaa01c 9255fab d24d9fc dfaa01c 16f60c1 dfaa01c 16f60c1 dfaa01c 9255fab d24d9fc dfaa01c |
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 |
<!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">{{ data.week }}</span>-ю неделю</h1>
<button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
<button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
<div id="ph_chart"></div>
<div id="ec_chart"></div>
<div id="pump_chart"></div>
<script>
const weekNumber = {{ data.week }};
const data = {{ data | tojson }}; // Данные из Flask
function navigateWeek(change) {
const newWeek = weekNumber + change;
if (newWeek >= 1 && newWeek <= 30) {
window.location.href = `/plot_ph_week?week=${newWeek}`;
}
}
// Рендерим графики с использованием Plotly.js
Plotly.newPlot("ph_chart", [{
x: data.dates, // Используем даты для оси X
y: data.ph,
type: "scatter",
mode: "lines",
name: "pH",
hovertemplate: data.days_of_week.map((day, index) =>
`День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
)
}], {
title: `График pH за ${data.week}-ю неделю`,
xaxis: { title: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "pH" },
hovermode: "closest"
});
Plotly.newPlot("ec_chart", [{
x: data.dates, // Используем даты для оси X
y: data.ec,
type: "scatter",
mode: "lines",
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: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "EC" },
hovermode: "closest"
});
// Добавляем дни недели на график насосов
Plotly.newPlot("pump_chart", [
{
x: data.dates,
y: data.onA,
type: "scatter",
mode: "lines",
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",
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",
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: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "Состояние насосов" },
hovermode: "closest"
});
</script>
</body>
</html>
|