Skip to content

Commit a6fbc05

Browse files
P4C-M4NP4C-M4N
committed
add scale #65 
1 parent baebbb6 commit a6fbc05

10 files changed

+2233
-1767
lines changed

‎frontend/front-vue/src/components/BatABibAmphis.vue

+269-197
Large diffs are not rendered by default.

‎frontend/front-vue/src/components/BatBRdc.vue

+115-53
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
32
<div class="grid">
43
<h2>RDC</h2>
54
<select :value="selectedOption" @change="updateSelectedOption">
6-
<option value="temperature">Température</option>
7-
<option value="humidity">Humidité</option>
8-
<option value="co2">CO2</option>
9-
<option value="activity">Présence</option>
10-
</select>
5+
<option value="temperature">Température</option>
6+
<option value="humidity">Humidité</option>
7+
<option value="co2">CO2</option>
8+
<option value="activity">Présence</option>
9+
</select>
10+
<dataScale :min="valMin" :max="valMax" :real-min="realMin" :real-max="realMax" :unit="unit"></dataScale>
1111
<svg width="100%" height="100%" viewBox="50 250 990 320">
12-
<g v-for="(room, roomId) in roomData" :key="roomId" :id="roomId" :class="{ changeColor: true } "
12+
<g v-for="(room, roomId) in roomData" :key="roomId" :id="roomId" :class="{ changeColor: true }"
1313
:style="{ fill: room.color }" @click="showRoomDetail(roomId)">
1414
<title>{{ roomId }}</title>
1515
<path v-for="(path, index) in room.path" :key="index" :id="'path' + roomId + '_' + index" :d="path" />
@@ -23,14 +23,23 @@
2323
<script>
2424
import { ref, reactive, onMounted, watch } from 'vue';
2525
import RoomDetail from './roomDetail.vue';
26+
import dataScale from './dataScale.vue';
2627
2728
2829
export default {
2930
components: {
3031
RoomDetail,
32+
dataScale
3133
},
3234
3335
setup() {
36+
37+
const valMin = ref(0);
38+
const valMax = ref(500);
39+
const realMax = ref(500);
40+
const realMin = ref(0);
41+
const unit = ref("");
42+
3443
const roomData = reactive({
3544
rgt: { color: "grey", state: true, path: ["m 608.19842,259.42256 21.57668,0.55555 -6.3626,88.06307 -19.02962,-0.27646 z"], data: {} },
3645
magasin: { color: "grey", state: true, path: ["m 907.97947,435.3071 9.75036,2.17174 c 4.81623,21.39286 18.55939,22.092 31.43436,24.80373 l 8.17867,20.57223 -28.03037,56.07916 -54.14,-14.42874 z"], data: {} },
@@ -61,54 +70,55 @@ export default {
6170
roomName.value = roomId;
6271
};
6372
64-
const fetchDataForRoom = async (roomId) => {
73+
const fetchAllRoomData = async () => {
6574
try {
66-
const response = await fetch(`http://localhost:8000/ByRoom/${roomId}/?last_data=1&depth=1`);
67-
const data = await response.json();
68-
69-
roomData[roomId]['data'] = {
70-
id: data.all_data[0].id,
71-
time: data.all_data[0].time,
72-
temperature: data.all_data[0].temperature,
73-
humidity: data.all_data[0].humidity,
74-
activity: data.all_data[0].activity,
75-
co2: data.all_data[0].co2,
76-
tvoc: data.all_data[0].tvoc,
77-
illuminance: data.all_data[0].illuminance,
78-
infrared: data.all_data[0].infrared,
79-
infrared_and_visible: data.all_data[0].infrared_and_visible,
80-
pressure: data.all_data[0].pressure,
81-
state: true
82-
};
83-
84-
// Vous pouvez également traiter les autres données de l'API si nécessaire
85-
// data.sensor, data.building, data.floor, etc.
86-
} catch (error) {
87-
roomData[roomId]['state'] = false;
88-
}
89-
};
75+
const response = await fetch('http://localhost:8000/ByRoom/?last_data=1&depth=1');
76+
const roomsData = await response.json();
9077
91-
const fetchAllRoomData = async () => {
92-
// Pour chaque salle, appelez fetchDataForRoom
93-
for (const roomId in roomData) {
94-
if (roomData.hasOwnProperty(roomId)) {
95-
await fetchDataForRoom(roomId);
78+
for (const roomKey in roomData) {
79+
if (roomData.hasOwnProperty(roomKey)) {
80+
const roomId = roomKey;
81+
const roomInfo = roomsData.find(room => room.room === roomId);
82+
83+
if (roomInfo) {
84+
roomData[roomId].data = {
85+
id: roomInfo.all_data[0].id,
86+
time: roomInfo.all_data[0].time,
87+
temperature: roomInfo.all_data[0].temperature,
88+
humidity: roomInfo.all_data[0].humidity,
89+
activity: roomInfo.all_data[0].activity,
90+
co2: roomInfo.all_data[0].co2,
91+
tvoc: roomInfo.all_data[0].tvoc,
92+
illuminance: roomInfo.all_data[0].illuminance,
93+
infrared: roomInfo.all_data[0].infrared,
94+
infrared_and_visible: roomInfo.all_data[0].infrared_and_visible,
95+
pressure: roomInfo.all_data[0].pressure,
96+
state: true
97+
};
98+
} else {
99+
// Gérer le cas où les données de la salle ne sont pas disponibles
100+
roomData[roomId].state = false;
101+
}
102+
}
96103
}
104+
105+
updateColors();
106+
updateScale();
107+
} catch (error) {
108+
console.error('Erreur lors de la récupération des données des salles.', error);
97109
}
98-
console.log(roomData);
99-
updateColors();
100110
};
101111
112+
113+
102114
const updateColors = () => {
103115
for (const roomId in roomData) {
104116
if (roomData.hasOwnProperty(roomId) && roomData[roomId].state) {
105117
const metricValue = parseFloat(roomData[roomId]['data'][selectedOption.value]);
106-
console.log('Updating colors...');
118+
107119
if (!isNaN(metricValue)) {
108120
roomData[roomId].color = getColorForMetric(metricValue, selectedOption.value);
109-
console.log("VOUI");
110121
}
111-
console.log("toto");
112122
}
113123
}
114124
};
@@ -128,15 +138,69 @@ export default {
128138
};
129139
130140
if (option === "temperature") {
141+
valMin.value = 14;
142+
valMax.value = 30;
143+
if (value > valMax.value) {
144+
realMax.value = value + 5;
145+
} else {
146+
realMax.value = 30;
147+
}
148+
if (value < valMin.value) {
149+
realMin.value = value - 5;
150+
} else {
151+
realMin.value = 14;
152+
}
153+
unit.value = "°C";
131154
return getColor(14, 30, value);
132155
}
133156
if (option == "humidity") {
157+
valMin.value = 40;
158+
valMax.value = 60;
159+
if (value > valMax.value) {
160+
realMax.value = value + 5;
161+
} else {
162+
realMax.value = 60;
163+
}
164+
165+
if (value < valMin.value) {
166+
realMin.value = value - 5;
167+
} else {
168+
realMin.value = 40;
169+
}
170+
171+
unit.value = "%";
134172
return getColor(40, 60, value);
135173
};
136174
if (option == "co2") {
175+
valMin.value = 0;
176+
valMax.value = 1500;
177+
if (value > valMax.value) {
178+
realMax.value = value + 5;
179+
} else {
180+
realMax.value = 1500;
181+
}
182+
if (value < valMin.value) {
183+
realMin.value = value - 5;
184+
} else {
185+
realMin.value = 0;
186+
}
187+
unit.value = "ppm";
137188
return getColor(0, 1500, value);
138189
};
139190
if (option == "activity") {
191+
valMin.value = 0;
192+
valMax.value = 500;
193+
if (value > valMax.value) {
194+
realMax.value = value + 5;
195+
} else {
196+
realMax.value = 500;
197+
}
198+
if (value < valMin.value) {
199+
realMin.value = value - 5;
200+
} else {
201+
realMin.value = 0;
202+
}
203+
unit.value = "";
140204
return getColor(0, 500, value);
141205
};
142206
};
@@ -152,7 +216,7 @@ export default {
152216
fetchAllRoomData();
153217
});
154218
155-
return { roomData, selectedOption, updateColors, updateSelectedOption , roomName, showRoomDetail};
219+
return { roomData, selectedOption, updateColors, updateSelectedOption, roomName, showRoomDetail, valMin, valMax, realMin, realMax, unit };
156220
}
157221
};
158222
</script>
@@ -174,13 +238,15 @@ g {
174238
transition: fill 1.2s, stroke 1s;
175239
}
176240
177-
.grid{
178-
display: flex;
179-
flex-direction: column; /* Aligner les éléments en colonne */
180-
align-items: center;
181-
gap: 50px;
182-
width: 80vw;
241+
.grid {
242+
display: flex;
243+
flex-direction: column;
244+
/* Aligner les éléments en colonne */
245+
align-items: center;
246+
gap: 50px;
247+
width: 80vw;
183248
}
249+
184250
/* Style de base pour le sélecteur */
185251
select {
186252
padding: 10px;
@@ -206,21 +272,17 @@ select::after {
206272
pointer-events: none;
207273
}
208274
209-
/* Style de la liste déroulante */
210275
select option {
211276
padding: 10px;
212277
}
213278
214-
/* Style pour les options survolées */
215279
select option:hover {
216280
background-color: #66afe9;
217281
color: #fff;
218282
}
219283
220284
g.changeColor:hover {
221285
stroke-width: 4px;
222-
/* Augmenter la largeur du contour à 2 pixels */
223286
}
224-
225287
</style>
226288

0 commit comments

Comments
 (0)