DmitrMakeev commited on
Commit
2e718cc
·
verified ·
1 Parent(s): 21be93f

Update plot_ph_week.html

Browse files
Files changed (1) hide show
  1. plot_ph_week.html +46 -51
plot_ph_week.html CHANGED
@@ -8,54 +8,39 @@
8
  </head>
9
  <body>
10
 
11
- <h1>Графики за <span id="week_number">{{ data.week }}</span>-ю неделю</h1>
12
-
13
  <button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
14
  <button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
15
 
16
- <div id="ph_chart"></div>
17
- <div id="ec_chart"></div>
18
- <div id="pump_chart"></div>
19
-
20
- <div id="no_data_message" style="display:none; color:red;">Нет данных за выбранную неделю.</div>
21
-
22
- <script>
23
- const weekNumber = {{ data.week }};
24
- const data = {{ data | tojson }}; // Данные из Flask
25
 
26
- function navigateWeek(change) {
27
- const newWeek = weekNumber + change;
28
- if (newWeek >= 1 && newWeek <= 30) {
29
- window.location.href = `/plot_ph_week?week=${newWeek}`;
30
- }
31
- }
32
-
33
- // Если нет данных, показываем сообщение
34
- if (!data.dates || data.dates.length === 0) {
35
- document.getElementById('no_data_message').style.display = 'block';
36
- } else {
37
  // Рендерим графики с использованием Plotly.js
38
  Plotly.newPlot("ph_chart", [{
39
- x: data.dates, // Используем даты для оси X
40
  y: data.ph,
41
  type: "scatter",
42
- mode: "lines+markers", // Добавляем точки на линии
43
  name: "pH",
44
  hovertemplate: data.days_of_week.map((day, index) =>
45
  `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
46
  )
47
  }], {
48
  title: `График pH за ${data.week}-ю неделю`,
49
- xaxis: { title: "Дата" }, // Ось X теперь - это даты
50
  yaxis: { title: "pH" },
51
  hovermode: "closest"
52
  });
53
-
54
  Plotly.newPlot("ec_chart", [{
55
- x: data.dates, // Используем даты для оси X
56
  y: data.ec,
57
  type: "scatter",
58
- mode: "lines+markers", // Добавляем точки на линии
59
  name: "EC",
60
  line: { color: "green" },
61
  hovertemplate: data.days_of_week.map((day, index) =>
@@ -63,41 +48,39 @@
63
  )
64
  }], {
65
  title: `График EC за ${data.week}-ю неделю`,
66
- xaxis: { title: "Дата" }, // Ось X теперь - это даты
67
  yaxis: { title: "EC" },
68
  hovermode: "closest"
69
  });
70
-
71
- // Добавляем дни недели на график насосов
72
  Plotly.newPlot("pump_chart", [
73
- {
74
- x: data.dates,
75
- y: data.onA,
76
- type: "scatter",
77
- mode: "lines+markers", // Добавляем точки на линии
78
- name: "Насос A",
79
  line: { color: "blue" },
80
  hovertemplate: data.days_of_week.map((day, index) =>
81
  `День недели: ${day}<br>Насос A: %{y}<br>Дата: ${data.dates[index]}`
82
  )
83
  },
84
- {
85
- x: data.dates,
86
- y: data.onB,
87
- type: "scatter",
88
- mode: "lines+markers", // Добавляем точки на линии
89
- name: "Насос B",
90
  line: { color: "brown" },
91
  hovertemplate: data.days_of_week.map((day, index) =>
92
  `День недели: ${day}<br>Насос B: %{y}<br>Дата: ${data.dates[index]}`
93
  )
94
  },
95
- {
96
- x: data.dates,
97
- y: data.onC,
98
- type: "scatter",
99
- mode: "lines+markers", // Добавляем точки на линии
100
- name: "Насос C",
101
  line: { color: "orange" },
102
  hovertemplate: data.days_of_week.map((day, index) =>
103
  `День недели: ${day}<br>Насос C: %{y}<br>Дата: ${data.dates[index]}`
@@ -105,13 +88,25 @@
105
  }
106
  ], {
107
  title: `График работы насосов за ${data.week}-ю неделю`,
108
- xaxis: { title: "Дата" }, // Ось X теперь - это даты
109
  yaxis: { title: "Состояние насосов" },
110
  hovermode: "closest"
111
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  }
113
  </script>
114
 
115
  </body>
116
  </html>
117
-
 
8
  </head>
9
  <body>
10
 
11
+ <h1>Графики за <span id="week_number">{{ week_number }}</span>-ю неделю</h1>
12
+
13
  <button id="prev_week" onclick="navigateWeek(-1)">Предыдущая неделя</button>
14
  <button id="next_week" onclick="navigateWeek(1)">Следующая неделя</button>
15
 
16
+ {% if data %}
17
+ <div id="ph_chart"></div>
18
+ <div id="ec_chart"></div>
19
+ <div id="pump_chart"></div>
 
 
 
 
 
20
 
21
+ <script>
22
+ const data = {{ data | tojson }}; // Данные из Flask
 
 
 
 
 
 
 
 
 
23
  // Рендерим графики с использованием Plotly.js
24
  Plotly.newPlot("ph_chart", [{
25
+ x: data.dates,
26
  y: data.ph,
27
  type: "scatter",
28
+ mode: "lines+markers",
29
  name: "pH",
30
  hovertemplate: data.days_of_week.map((day, index) =>
31
  `День недели: ${day}<br>pH: %{y}<br>Дата: ${data.dates[index]}`
32
  )
33
  }], {
34
  title: `График pH за ${data.week}-ю неделю`,
35
+ xaxis: { title: "Дата" },
36
  yaxis: { title: "pH" },
37
  hovermode: "closest"
38
  });
 
39
  Plotly.newPlot("ec_chart", [{
40
+ x: data.dates,
41
  y: data.ec,
42
  type: "scatter",
43
+ mode: "lines+markers",
44
  name: "EC",
45
  line: { color: "green" },
46
  hovertemplate: data.days_of_week.map((day, index) =>
 
48
  )
49
  }], {
50
  title: `График EC за ${data.week}-ю неделю`,
51
+ xaxis: { title: "Дата" },
52
  yaxis: { title: "EC" },
53
  hovermode: "closest"
54
  });
 
 
55
  Plotly.newPlot("pump_chart", [
56
+ {
57
+ x: data.dates,
58
+ y: data.onA,
59
+ type: "scatter",
60
+ mode: "lines+markers",
61
+ name: "Насос A",
62
  line: { color: "blue" },
63
  hovertemplate: data.days_of_week.map((day, index) =>
64
  `День недели: ${day}<br>Насос A: %{y}<br>Дата: ${data.dates[index]}`
65
  )
66
  },
67
+ {
68
+ x: data.dates,
69
+ y: data.onB,
70
+ type: "scatter",
71
+ mode: "lines+markers",
72
+ name: "Насос B",
73
  line: { color: "brown" },
74
  hovertemplate: data.days_of_week.map((day, index) =>
75
  `День недели: ${day}<br>Насос B: %{y}<br>Дата: ${data.dates[index]}`
76
  )
77
  },
78
+ {
79
+ x: data.dates,
80
+ y: data.onC,
81
+ type: "scatter",
82
+ mode: "lines+markers",
83
+ name: "Насос C",
84
  line: { color: "orange" },
85
  hovertemplate: data.days_of_week.map((day, index) =>
86
  `День недели: ${day}<br>Насос C: %{y}<br>Дата: ${data.dates[index]}`
 
88
  }
89
  ], {
90
  title: `График работы насосов за ${data.week}-ю неделю`,
91
+ xaxis: { title: "Дата" },
92
  yaxis: { title: "Состояние насосов" },
93
  hovermode: "closest"
94
  });
95
+ </script>
96
+
97
+ {% else %}
98
+ <p>Данных за {{ week_number }}-ю неделю нет в базе данных.</p>
99
+ {% endif %}
100
+
101
+ <script>
102
+ const weekNumber = {{ week_number }};
103
+ function navigateWeek(change) {
104
+ const newWeek = weekNumber + change;
105
+ if (newWeek >= 1 && newWeek <= 30) {
106
+ window.location.href = `/plot_ph_week?week=${newWeek}`;
107
+ }
108
  }
109
  </script>
110
 
111
  </body>
112
  </html>