File size: 6,175 Bytes
dfaa01c c825e81 76dd01a c825e81 76dd01a d1e8bd8 76dd01a d1e8bd8 76dd01a c825e81 76dd01a c825e81 dfaa01c 2e718cc d1e8bd8 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 9cd200b aa4fd06 2e718cc aa4fd06 9cd200b aa4fd06 2e718cc aa4fd06 9cd200b aa4fd06 2e718cc aa4fd06 c825e81 aa4fd06 2e718cc aa4fd06 dfaa01c 9cd200b |
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 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<!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; /* Можешь подкорректировать высоту, если нужно */
}
</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">
<!-- График 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>
|