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

Update plot_week.html

Browse files
Files changed (1) hide show
  1. plot_week.html +92 -101
plot_week.html CHANGED
@@ -106,124 +106,115 @@ body {
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="row">
117
- <div class="col-md-4 graph-container">
118
- <div class="graph" id="ph_chart"></div>
119
- </div>
120
- <div class="col-md-4 graph-container">
121
- <div class="graph" id="ec_chart"></div>
122
- </div>
123
- <div class="col-md-4 graph-container">
124
- <div class="graph" id="pump_chart"></div>
125
- </div>
126
- </div>
127
- <div class="row">
128
- <div class="col-md-4 graph-container">
129
- <div class="graph" id="ts_chart"></div>
130
- </div>
131
- <div class="col-md-4 graph-container">
132
- <div class="graph" id="ta_chart"></div>
133
- </div>
134
- <div class="col-md-4 graph-container">
135
- <div class="graph" id="hdm_chart"></div>
136
- </div>
137
- </div>
138
- <div class="row">
139
- <div class="col-md-4 graph-container">
140
- <div class="graph" id="sven_chart"></div>
141
- </div>
142
- </div>
143
- </div>
144
 
145
- <script>
146
- const data = {{ data | tojson }};
147
-
148
- function createChart(id, yData, title, yLabel, color) {
149
- Plotly.newPlot(id, [{
 
 
 
150
  x: data.dates,
151
- y: yData,
152
  type: "scatter",
153
  mode: "lines+markers",
154
- line: { color: color },
 
155
  hovertemplate: data.days_of_week.map((day, index) =>
156
- `Неделя: ${data.week}<br>День: ${day}<br>${yLabel}: %{y}<br>Дата: ${data.dates[index]}`
157
  )
158
- }], {
159
- title: title,
160
- xaxis: { title: "", showticklabels: false },
161
- yaxis: { title: yLabel, titlefont: { size: 14 } },
162
- hovermode: "closest",
163
- showlegend: false
164
- });
165
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
 
167
- function updateCharts() {
168
- $.get("/plot_week?week=" + {{ week_number }}, function(data) {
169
- // Обновление графиков с новыми данными
170
- createChart("ph_chart", data.ph, `График pH за ${data.week}-ю неделю`, "Уровень pH", "blue");
171
- createChart("ec_chart", data.ec, `График EC за ${data.week}-ю неделю`, "Уровень EC", "blue");
172
- createChart("ts_chart", data.tS, `Температура раствора за ${data.week}-ю неделю`, "Температура (°C)", "purple");
173
- createChart("ta_chart", data.tA, `Температура воздуха за ${data.week}-ю неделю`, "Температура (°C)", "purple");
174
- createChart("hdm_chart", data.hDm, `Влажность воздуха за ${data.week}-ю неделю`, "Влажность (%)", "purple");
175
- createChart("sven_chart", data.sVen, `Обороты вентилятора за ${data.week}-ю неделю`, "Обороты (%)", "purple");
176
- Plotly.newPlot("pump_chart", [
177
- {
178
- x: data.dates,
179
- y: data.onA,
180
- type: "scatter",
181
- mode: "lines+markers",
182
- line: { color: "green" },
183
- hovertemplate: data.days_of_week.map((day, index) =>
184
- `Неделя: ${data.week}<br>День: ${day}<br>Насос A: %{y} сек.<br>Дата: ${data.dates[index]}`
185
- )
186
- },
187
- {
188
- x: data.dates,
189
- y: data.onB,
190
- type: "scatter",
191
- mode: "lines+markers",
192
- line: { color: "brown" },
193
- hovertemplate: data.days_of_week.map((day, index) =>
194
- `День: ${day}<br>Насос B: %{y} сек.<br>Дата: ${data.dates[index]}`
195
- )
196
- },
197
- {
198
- x: data.dates,
199
- y: data.onC,
200
- type: "scatter",
201
- mode: "lines+markers",
202
- line: { color: "orange" },
203
- hovertemplate: data.days_of_week.map((day, index) =>
204
- `День: ${day}<br>Насос C: %{y} сек.<br>Дата: ${data.dates[index]}`
205
- )
206
- }
207
- ], {
208
- title: `Интервал дозирования насосов для ${data.week}-ой недели`,
209
- xaxis: { title: "", showticklabels: false },
210
- yaxis: { title: "Время ВКЛ(сек.)" },
211
- hovermode: "closest",
212
- showlegend: false
213
- });
214
- });
215
- }
216
 
217
- setInterval(updateCharts, 10000); // Обновление графиков каждые 10 секунд
218
- </script>
219
  {% else %}
220
  <div class="no-data-message">
221
  {{ message if message else 'Данных за эту неделю нет в базе данных.' }}
222
  </div>
223
  {% endif %}
224
 
 
225
  <script>
226
  let weekNumber = {{ week_number }};
 
 
227
  function navigateWeek(change) {
228
  const newWeek = weekNumber + change;
229
  if (newWeek >= 1 && newWeek <= 30) {
@@ -232,21 +223,20 @@ body {
232
  }
233
  </script>
234
 
 
235
  <script>
236
  document.getElementById("st_onl").addEventListener("click", function() {
237
  var baseUrl = window.location.origin;
238
  var targetUrl = baseUrl + "/online";
239
  window.location.href = targetUrl;
240
  });
241
- </script>
242
- <script>
243
  document.getElementById("st_set").addEventListener("click", function() {
244
  var baseUrl = window.location.origin;
245
  var targetUrl = baseUrl + "/settings";
246
  window.location.href = targetUrl;
247
  });
248
- </script>
249
- <script>
250
  document.getElementById("st_plot").addEventListener("click", function() {
251
  var baseUrl = window.location.origin;
252
  var targetUrl = baseUrl + "/plot_week";
@@ -256,4 +246,5 @@ body {
256
 
257
  </body>
258
 
 
259
  </html>
 
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) {
 
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";
 
246
 
247
  </body>
248
 
249
+
250
  </html>