DmitrMakeev commited on
Commit
5380887
·
verified ·
1 Parent(s): d73ec54

Update plot_week.html

Browse files
Files changed (1) hide show
  1. plot_week.html +58 -76
plot_week.html CHANGED
@@ -17,42 +17,36 @@ body {
17
  margin: 0;
18
  padding: 0;
19
  }
20
-
21
  .container {
22
  width: 100%;
23
  max-width: 100%;
24
  }
25
-
26
  /* Шапка */
27
  .header {
28
  width: 100%;
29
- padding: 5px 0; /* Убраны отступы справа и слева */
30
  display: flex;
31
  justify-content: space-between;
32
  align-items: center;
33
  background-color: #f8f9fa;
34
  border-bottom: 1px solid #ddd;
35
  }
36
-
37
  /* Кнопки и лейбл в шапке */
38
  .header .buttons,
39
  .header .label {
40
- margin: 0; /* Полностью убраны отступы */
41
  }
42
-
43
  /* Контейнер графика */
44
  .graph-container {
45
  width: 100%;
46
  margin-bottom: 30px;
47
  }
48
-
49
  /* График */
50
  .graph {
51
  width: 100%;
52
  height: 500px;
53
  max-width: 100%;
54
  }
55
-
56
  /* Сообщение "нет данных" */
57
  .no-data-message {
58
  font-size: 18px;
@@ -60,38 +54,32 @@ body {
60
  text-align: center;
61
  margin-top: 20px;
62
  }
63
-
64
  /* Кнопки переключения недель */
65
  .week-buttons {
66
  display: flex;
67
  justify-content: center;
68
  margin: 20px 0;
69
  }
70
-
71
  /* Адаптивность для телефонов (до 768px) */
72
  @media (max-width: 768px) {
73
  .header {
74
- flex-direction: column; /* Кнопки и лейбл станут в колонку */
75
  align-items: center;
76
  }
77
-
78
  .graph-container {
79
- margin-bottom: 45px; /* Увеличен отступ между графиками */
80
  }
81
-
82
  .graph {
83
- height: 330px; /* Увеличена высота графика */
84
  }
85
  }
86
-
87
  /* Адаптивность для маленьких телефонов (до 480px) */
88
  @media (max-width: 480px) {
89
  .graph-container {
90
- margin-bottom: 50px; /* Ещё больше отступ между графиками */
91
  }
92
-
93
  .graph {
94
- height: 280px; /* Ещё немного увеличил высоту */
95
  }
96
  }
97
  </style>
@@ -155,52 +143,57 @@ body {
155
  showlegend: false
156
  });
157
  }
158
-
159
- createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
160
- createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
161
- createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
162
- createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
163
- createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
164
- createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
165
-
166
- Plotly.newPlot("pump_chart", [
167
- {
168
- x: data.dates,
169
- y: data.onA,
170
- type: "scatter",
171
- mode: "lines+markers",
172
- line: { color: "green" },
173
- hovertemplate: data.days_of_week.map((day, index) =>
174
- `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
175
- )
176
- },
177
- {
178
- x: data.dates,
179
- y: data.onB,
180
- type: "scatter",
181
- mode: "lines+markers",
182
- line: { color: "brown" },
183
- hovertemplate: data.days_of_week.map((day, index) =>
184
- `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
185
- )
186
- },
187
- {
188
- x: data.dates,
189
- y: data.onC,
190
- type: "scatter",
191
- mode: "lines+markers",
192
- line: { color: "orange" },
193
- hovertemplate: data.days_of_week.map((day, index) =>
194
- `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
195
- )
196
- }
197
- ], {
198
- title: `Интервал дозирования насосов для ${data.week}-ой недели`,
199
- xaxis: { title: "", showticklabels: false },
200
- yaxis: { title: "Время ВКЛ(сек.)" },
201
- hovermode: "closest",
202
- showlegend: false
203
- });
 
 
 
 
 
204
  </script>
205
  {% else %}
206
  <div class="no-data-message">
@@ -217,36 +210,25 @@ body {
217
  }
218
  }
219
  </script>
220
-
221
-
222
 
223
  <script>
224
  document.getElementById("st_onl").addEventListener("click", function() {
225
- // Получаем основной URL без пути и параметров
226
  var baseUrl = window.location.origin;
227
- // Добавляем необходимый путь к основному URL
228
  var targetUrl = baseUrl + "/online";
229
- // Переходим по сформированному URL
230
  window.location.href = targetUrl;
231
  });
232
  </script>
233
  <script>
234
  document.getElementById("st_set").addEventListener("click", function() {
235
- // Получаем основной URL без пути и параметров
236
  var baseUrl = window.location.origin;
237
- // Добавляем необходимый путь к основному URL
238
  var targetUrl = baseUrl + "/settings";
239
- // Переходим по сформированному URL
240
  window.location.href = targetUrl;
241
  });
242
  </script>
243
  <script>
244
  document.getElementById("st_plot").addEventListener("click", function() {
245
- // Получаем основной URL без пути и параметров
246
  var baseUrl = window.location.origin;
247
- // Добавляем необходимый путь к основному URL
248
  var targetUrl = baseUrl + "/plot_week";
249
- // Переходим по сформированному URL
250
  window.location.href = targetUrl;
251
  });
252
  </script>
 
17
  margin: 0;
18
  padding: 0;
19
  }
 
20
  .container {
21
  width: 100%;
22
  max-width: 100%;
23
  }
 
24
  /* Шапка */
25
  .header {
26
  width: 100%;
27
+ padding: 5px 0;
28
  display: flex;
29
  justify-content: space-between;
30
  align-items: center;
31
  background-color: #f8f9fa;
32
  border-bottom: 1px solid #ddd;
33
  }
 
34
  /* Кнопки и лейбл в шапке */
35
  .header .buttons,
36
  .header .label {
37
+ margin: 0;
38
  }
 
39
  /* Контейнер графика */
40
  .graph-container {
41
  width: 100%;
42
  margin-bottom: 30px;
43
  }
 
44
  /* График */
45
  .graph {
46
  width: 100%;
47
  height: 500px;
48
  max-width: 100%;
49
  }
 
50
  /* Сообщение "нет данных" */
51
  .no-data-message {
52
  font-size: 18px;
 
54
  text-align: center;
55
  margin-top: 20px;
56
  }
 
57
  /* Кнопки переключения недель */
58
  .week-buttons {
59
  display: flex;
60
  justify-content: center;
61
  margin: 20px 0;
62
  }
 
63
  /* Адаптивность для телефонов (до 768px) */
64
  @media (max-width: 768px) {
65
  .header {
66
+ flex-direction: column;
67
  align-items: center;
68
  }
 
69
  .graph-container {
70
+ margin-bottom: 45px;
71
  }
 
72
  .graph {
73
+ height: 330px;
74
  }
75
  }
 
76
  /* Адаптивность для маленьких телефонов (до 480px) */
77
  @media (max-width: 480px) {
78
  .graph-container {
79
+ margin-bottom: 50px;
80
  }
 
81
  .graph {
82
+ height: 280px;
83
  }
84
  }
85
  </style>
 
143
  showlegend: false
144
  });
145
  }
146
+ function updateCharts() {
147
+ $.get("/plot_week?week=" + {{ week_number }}, function(data) {
148
+ // Обновление графиков с новыми данными
149
+ createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
150
+ createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
151
+ createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
152
+ createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
153
+ createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
154
+ createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
155
+ Plotly.newPlot("pump_chart", [
156
+ {
157
+ x: data.dates,
158
+ y: data.onA,
159
+ type: "scatter",
160
+ mode: "lines+markers",
161
+ line: { color: "green" },
162
+ hovertemplate: data.days_of_week.map((day, index) =>
163
+ `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
164
+ )
165
+ },
166
+ {
167
+ x: data.dates,
168
+ y: data.onB,
169
+ type: "scatter",
170
+ mode: "lines+markers",
171
+ line: { color: "brown" },
172
+ hovertemplate: data.days_of_week.map((day, index) =>
173
+ `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
174
+ )
175
+ },
176
+ {
177
+ x: data.dates,
178
+ y: data.onC,
179
+ type: "scatter",
180
+ mode: "lines+markers",
181
+ line: { color: "orange" },
182
+ hovertemplate: data.days_of_week.map((day, index) =>
183
+ `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
184
+ )
185
+ }
186
+ ], {
187
+ title: `Интервал дозирования насосов для ${data.week}-ой недели`,
188
+ xaxis: { title: "", showticklabels: false },
189
+ yaxis: { title: "Время ВКЛ(сек.)" },
190
+ hovermode: "closest",
191
+ showlegend: false
192
+ });
193
+ });
194
+ }
195
+
196
+ setInterval(updateCharts, 10000); // Обновление графиков каждые 10 секунд
197
  </script>
198
  {% else %}
199
  <div class="no-data-message">
 
210
  }
211
  }
212
  </script>
 
 
213
 
214
  <script>
215
  document.getElementById("st_onl").addEventListener("click", function() {
 
216
  var baseUrl = window.location.origin;
 
217
  var targetUrl = baseUrl + "/online";
 
218
  window.location.href = targetUrl;
219
  });
220
  </script>
221
  <script>
222
  document.getElementById("st_set").addEventListener("click", function() {
 
223
  var baseUrl = window.location.origin;
 
224
  var targetUrl = baseUrl + "/settings";
 
225
  window.location.href = targetUrl;
226
  });
227
  </script>
228
  <script>
229
  document.getElementById("st_plot").addEventListener("click", function() {
 
230
  var baseUrl = window.location.origin;
 
231
  var targetUrl = baseUrl + "/plot_week";
 
232
  window.location.href = targetUrl;
233
  });
234
  </script>