DmitrMakeev commited on
Commit
453d3d6
·
verified ·
1 Parent(s): adeeba4

Update plot_week.html

Browse files
Files changed (1) hide show
  1. plot_week.html +71 -81
plot_week.html CHANGED
@@ -24,7 +24,7 @@ body {
24
  /* Шапка */
25
  .header {
26
  width: 100%;
27
- padding: 5px 0;
28
  display: flex;
29
  justify-content: space-between;
30
  align-items: center;
@@ -34,7 +34,7 @@ body {
34
  /* Кнопки и лейбл в шапке */
35
  .header .buttons,
36
  .header .label {
37
- margin: 0;
38
  }
39
  /* Контейнер графика */
40
  .graph-container {
@@ -63,23 +63,23 @@ body {
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>
@@ -106,115 +106,96 @@ body {
106
  </div>
107
 
108
  <!-- Кнопки переключения недель -->
109
- <div class="week-buttons mb-3">
110
  <button id="prev_week" class="btn btn-success mr-2" onclick="navigateWeek(-1)">Предыдущая неделя</button>
111
  <button id="next_week" class="btn btn-success" onclick="navigateWeek(1)">Следующая неделя</button>
112
  </div>
113
 
114
  {% if data %}
115
- <!-- Графики -->
116
- <div id="graph_container" style="height: 600px;"></div>
117
-
118
- <script>
119
- const data = {{ data | tojson }};
 
 
 
 
120
 
121
- // Создаём несколько графиков в одном окне (с использованием subplot)
122
- function createSubplotData() {
123
- return [
124
- // График PH
125
- {
126
  x: data.dates,
127
- y: data.ph,
128
  type: "scatter",
129
  mode: "lines+markers",
130
- name: "pH",
131
- line: { color: "blue" },
132
  hovertemplate: data.days_of_week.map((day, index) =>
133
- `Неделя: ${data.week}<br>День: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
134
  )
135
- },
136
- // График EC
 
 
 
 
 
 
 
 
 
 
 
 
 
137
  {
138
  x: data.dates,
139
- y: data.ec,
140
  type: "scatter",
141
  mode: "lines+markers",
142
- name: "EC",
143
  line: { color: "green" },
144
  hovertemplate: data.days_of_week.map((day, index) =>
145
- `Неделя: ${data.week}<br>День: ${day}<br>EC: %{y}<br>Дата: ${data.dates[index]}`
146
  )
147
  },
148
- // График TS
149
  {
150
  x: data.dates,
151
- y: data.tS,
152
  type: "scatter",
153
  mode: "lines+markers",
154
- name: "TS",
155
- line: { color: "purple" },
156
  hovertemplate: data.days_of_week.map((day, index) =>
157
- `Неделя: ${data.week}<br>День: ${day}<br>TS: %{y}<br>Дата: ${data.dates[index]}`
158
  )
159
  },
160
- // График TA
161
  {
162
  x: data.dates,
163
- y: data.ta,
164
  type: "scatter",
165
  mode: "lines+markers",
166
- name: "TA",
167
- line: { color: "red" },
168
  hovertemplate: data.days_of_week.map((day, index) =>
169
- `Неделя: ${data.week}<br>День: ${day}<br>TA: %{y}<br>Дата: ${data.dates[index]}`
170
  )
171
- },
172
- ];
173
- }
174
-
175
- // Создание графиков
176
- function createPlot() {
177
- const traces = createSubplotData();
178
-
179
- const layout = {
180
- title: `Графики за ${data.week}-ю неделю`,
181
- xaxis: {
182
- title: "Дата",
183
- showticklabels: true
184
- },
185
- yaxis: {
186
- title: "Значения",
187
- titlefont: { size: 14 }
188
- },
189
  hovermode: "closest",
190
- showlegend: true
191
- };
192
-
193
- Plotly.newPlot('graph_container', traces, layout);
194
- }
195
-
196
- // Обновляем графики
197
- function updateCharts() {
198
- $.get("/plot_week?week=" + {{ week_number }}, function(data) {
199
- createPlot();
200
  });
201
- }
202
-
203
- setInterval(updateCharts, 10000); // Обновление графиков каждые 10 секунд
204
-
205
- </script>
206
-
207
  {% else %}
208
  <div class="no-data-message">
209
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
210
  </div>
211
  {% endif %}
212
 
213
- <!-- Скрипты навигации -->
214
  <script>
215
  let weekNumber = {{ week_number }};
216
-
217
- // Функция переключения недели
218
  function navigateWeek(change) {
219
  const newWeek = weekNumber + change;
220
  if (newWeek >= 1 && newWeek <= 30) {
@@ -222,29 +203,38 @@ body {
222
  }
223
  }
224
  </script>
 
 
225
 
226
- <!-- Скрипты перехода на страницы -->
227
  <script>
228
  document.getElementById("st_onl").addEventListener("click", function() {
 
229
  var baseUrl = window.location.origin;
 
230
  var targetUrl = baseUrl + "/online";
 
231
  window.location.href = targetUrl;
232
  });
233
-
 
234
  document.getElementById("st_set").addEventListener("click", function() {
 
235
  var baseUrl = window.location.origin;
 
236
  var targetUrl = baseUrl + "/settings";
 
237
  window.location.href = targetUrl;
238
  });
239
-
 
240
  document.getElementById("st_plot").addEventListener("click", function() {
 
241
  var baseUrl = window.location.origin;
 
242
  var targetUrl = baseUrl + "/plot_week";
 
243
  window.location.href = targetUrl;
244
  });
245
  </script>
246
-
247
  </body>
248
-
249
-
250
- </html>
 
24
  /* Шапка */
25
  .header {
26
  width: 100%;
27
+ padding: 5px 0; /* Убраны отступы справа и слева */
28
  display: flex;
29
  justify-content: space-between;
30
  align-items: center;
 
34
  /* Кнопки и лейбл в шапке */
35
  .header .buttons,
36
  .header .label {
37
+ margin: 0; /* Полностью убраны отступы */
38
  }
39
  /* Контейнер графика */
40
  .graph-container {
 
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>
 
106
  </div>
107
 
108
  <!-- Кнопки переключения недель -->
109
+ <div class="week-buttons">
110
  <button id="prev_week" class="btn btn-success mr-2" onclick="navigateWeek(-1)">Предыдущая неделя</button>
111
  <button id="next_week" class="btn btn-success" onclick="navigateWeek(1)">Следующая неделя</button>
112
  </div>
113
 
114
  {% if data %}
115
+ <div class="container">
116
+ <div class="graph-container"><div class="graph" id="ph_chart"></div></div>
117
+ <div class="graph-container"><div class="graph" id="ec_chart"></div></div>
118
+ <div class="graph-container"><div class="graph" id="pump_chart"></div></div>
119
+ <div class="graph-container"><div class="graph" id="ts_chart"></div></div>
120
+ <div class="graph-container"><div class="graph" id="ta_chart"></div></div>
121
+ <div class="graph-container"><div class="graph" id="hdm_chart"></div></div>
122
+ <div class="graph-container"><div class="graph" id="sven_chart"></div></div>
123
+ </div>
124
 
125
+ <script>
126
+ const data = {{ data | tojson }};
127
+
128
+ function createChart(id, yData, title, yLabel, color) {
129
+ Plotly.newPlot(id, [{
130
  x: data.dates,
131
+ y: yData,
132
  type: "scatter",
133
  mode: "lines+markers",
134
+ line: { color: color },
 
135
  hovertemplate: data.days_of_week.map((day, index) =>
136
+ `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
137
  )
138
+ }], {
139
+ title: title,
140
+ xaxis: { title: "", showticklabels: false },
141
+ yaxis: { title: yLabel, titlefont: { size: 14 } },
142
+ hovermode: "closest",
143
+ showlegend: false
144
+ });
145
+ }
146
+ createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
147
+ createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
148
+ createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
149
+ createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
150
+ createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
151
+ createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
152
+ Plotly.newPlot("pump_chart", [
153
  {
154
  x: data.dates,
155
+ y: data.onA,
156
  type: "scatter",
157
  mode: "lines+markers",
 
158
  line: { color: "green" },
159
  hovertemplate: data.days_of_week.map((day, index) =>
160
+ `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
161
  )
162
  },
 
163
  {
164
  x: data.dates,
165
+ y: data.onB,
166
  type: "scatter",
167
  mode: "lines+markers",
168
+ line: { color: "brown" },
 
169
  hovertemplate: data.days_of_week.map((day, index) =>
170
+ `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
171
  )
172
  },
 
173
  {
174
  x: data.dates,
175
+ y: data.onC,
176
  type: "scatter",
177
  mode: "lines+markers",
178
+ line: { color: "orange" },
 
179
  hovertemplate: data.days_of_week.map((day, index) =>
180
+ `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
181
  )
182
+ }
183
+ ], {
184
+ title: `Интервал дозирования насосов для ${data.week}-ой недели`,
185
+ xaxis: { title: "", showticklabels: false },
186
+ yaxis: { title: "Время ВКЛ(сек.)" },
 
 
 
 
 
 
 
 
 
 
 
 
 
187
  hovermode: "closest",
188
+ showlegend: false
 
 
 
 
 
 
 
 
 
189
  });
190
+ </script>
 
 
 
 
 
191
  {% else %}
192
  <div class="no-data-message">
193
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
194
  </div>
195
  {% endif %}
196
 
 
197
  <script>
198
  let weekNumber = {{ week_number }};
 
 
199
  function navigateWeek(change) {
200
  const newWeek = weekNumber + change;
201
  if (newWeek >= 1 && newWeek <= 30) {
 
203
  }
204
  }
205
  </script>
206
+
207
+
208
 
 
209
  <script>
210
  document.getElementById("st_onl").addEventListener("click", function() {
211
+ // Получаем основной URL без пути и параметров
212
  var baseUrl = window.location.origin;
213
+ // Добавляем необходимый путь к основному URL
214
  var targetUrl = baseUrl + "/online";
215
+ // Переходим по сформированному URL
216
  window.location.href = targetUrl;
217
  });
218
+ </script>
219
+ <script>
220
  document.getElementById("st_set").addEventListener("click", function() {
221
+ // Получаем основной URL без пути и параметров
222
  var baseUrl = window.location.origin;
223
+ // Добавляем необходимый путь к основному URL
224
  var targetUrl = baseUrl + "/settings";
225
+ // Переходим по сформированному URL
226
  window.location.href = targetUrl;
227
  });
228
+ </script>
229
+ <script>
230
  document.getElementById("st_plot").addEventListener("click", function() {
231
+ // Получаем основной URL без пути и параметров
232
  var baseUrl = window.location.origin;
233
+ // Добавляем необходимый путь к основному URL
234
  var targetUrl = baseUrl + "/plot_week";
235
+ // Переходим по сформированному URL
236
  window.location.href = targetUrl;
237
  });
238
  </script>
 
239
  </body>
240
+ </html>