File size: 5,449 Bytes
dfaa01c c825e81 dfaa01c 2e718cc dfaa01c 2e718cc c825e81 aa4fd06 2e718cc 538262c aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 c825e81 16f60c1 aa4fd06 16f60c1 aa4fd06 2e718cc 36789be c825e81 36789be c825e81 aa4fd06 c825e81 aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 c825e81 16f60c1 aa4fd06 16f60c1 aa4fd06 2e718cc 36789be c825e81 36789be c825e81 aa4fd06 36789be aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 2e718cc aa4fd06 c825e81 aa4fd06 2e718cc aa4fd06 dfaa01c 538262c |
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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!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>
.graph-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.graph {
width: 70%;
}
</style>
</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 class="graph-container">
<!-- График pH -->
<div class="graph" id="ph_chart"></div>
</div>
<div class="graph-container">
<!-- График EC -->
<div class="graph" id="ec_chart"></div>
</div>
<div class="graph-container">
<!-- График насосов -->
<div class="graph" id="pump_chart"></div>
</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",
line: { color: "blue" }, // Цвет линии
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",
titlefont: { size: 14 }
},
hovermode: "closest",
showlegend: false // Отключаем легенду
});
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",
titlefont: { size: 14 }
},
hovermode: "closest",
showlegend: false // Отключаем легенду
});
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",
showlegend: false // Отключаем легенду
});
</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>
|