File size: 7,181 Bytes
dfaa01c c825e81 76dd01a c825e81 76dd01a d1e8bd8 76dd01a d1e8bd8 76dd01a c825e81 76dd01a c825e81 2a80e81 c825e81 dfaa01c 2e718cc d1e8bd8 dfaa01c 2e718cc 287a81b 0e07bbc aa4fd06 2e718cc 287a81b 0e07bbc 287a81b 0e07bbc 287a81b 0e07bbc aa4fd06 2e718cc aa4fd06 0e07bbc aa4fd06 287a81b 2e718cc 0e07bbc 2e718cc aa4fd06 dfaa01c d67e64c 287a81b 0e07bbc 796bd1e |
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 179 180 181 182 183 184 185 186 187 188 189 190 |
<!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; /* Можешь подкорректировать высоту, если нужно */
}
.no-data-message {
font-size: 18px;
color: red;
text-align: center;
margin-top: 20px;
}
</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"><div class="graph" id="ph_chart"></div></div>
<div class="graph-container"><div class="graph" id="ec_chart"></div></div>
<div class="graph-container"><div class="graph" id="pump_chart"></div></div>
<div class="graph-container"><div class="graph" id="tS_chart"></div></div>
<div class="graph-container"><div class="graph" id="tA_chart"></div></div>
<div class="graph-container"><div class="graph" id="hDm_chart"></div></div>
<div class="graph-container"><div class="graph" id="sVen_chart"></div></div>
<script>
const data = {{ data | tojson }};
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" },
hovermode: "closest"
});
Plotly.newPlot("ec_chart", [{
x: data.dates,
y: data.ec,
type: "scatter",
mode: "lines+markers",
name: "EC",
line: { color: "blue" },
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" },
hovermode: "closest"
});
Plotly.newPlot("pump_chart", [
{ x: data.dates, y: data.onA, type: "scatter", mode: "lines+markers", name: "Насос A", line: { color: "green" }},
{ x: data.dates, y: data.onB, type: "scatter", mode: "lines+markers", name: "Насос B", line: { color: "brown" }},
{ x: data.dates, y: data.onC, type: "scatter", mode: "lines+markers", name: "Насос C", line: { color: "orange" }}
], {
title: `График работы насосов за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: "Состояние насосов" },
hovermode: "closest"
});
Plotly.newPlot("tS_chart", [{
x: data.dates,
y: data.tS,
type: "scatter",
mode: "lines+markers",
name: "Температура раствора",
line: { color: "red" }
}], {
title: `График температуры раствора за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: "Температура (°C)" },
hovermode: "closest"
});
Plotly.newPlot("tA_chart", [{
x: data.dates,
y: data.tA,
type: "scatter",
mode: "lines+markers",
name: "Температура воздуха",
line: { color: "purple" }
}], {
title: `График температуры воздуха за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: "Температура (°C)" },
hovermode: "closest"
});
Plotly.newPlot("hDm_chart", [{
x: data.dates,
y: data.hDm,
type: "scatter",
mode: "lines+markers",
name: "Влажность воздуха",
line: { color: "blue" }
}], {
title: `График влажности воздуха за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: "Влажность (%)" },
hovermode: "closest"
});
Plotly.newPlot("sVen_chart", [{
x: data.dates,
y: data.sVen,
type: "scatter",
mode: "lines+markers",
name: "Обороты вентилятора",
line: { color: "gray" }
}], {
title: `График оборотов вентилятора за ${data.week}-ю неделю`,
xaxis: { title: "Дата" },
yaxis: { title: "Обороты" },
hovermode: "closest"
});
</script>
{% else %}
<div class="no-data-message">Данных за эту неделю нет в базе данных.</div>
{% 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> |