File size: 4,479 Bytes
dfaa01c 9255fab dfaa01c 098f92c 968cf95 d24d9fc dfaa01c 9255fab d24d9fc dfaa01c 9255fab dfaa01c 098f92c dfaa01c 968cf95 d24d9fc dfaa01c 9255fab d24d9fc dfaa01c 16f60c1 dfaa01c 16f60c1 098f92c 16f60c1 098f92c 16f60c1 098f92c 16f60c1 dfaa01c 9255fab d24d9fc dfaa01c 098f92c |
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 |
<!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+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: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "pH" },
hovermode: "closest"
});
Plotly.newPlot("ec_chart", [{
x: data.dates, // Используем даты для оси X
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: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "EC" },
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: "Дата" }, // Ось X теперь - это даты
yaxis: { title: "Состояние насосов" },
hovermode: "closest"
});
</script>
</body>
</html>
|