perbaikan detail building

This commit is contained in:
Fuzi_fauzia 2024-07-17 17:44:41 +07:00
parent c337a8941c
commit 153b47eaaa
1 changed files with 12 additions and 130 deletions

View File

@ -34,21 +34,8 @@ export class DetailComponent {
valueAirQuality: number = 0; valueAirQuality: number = 0;
currentDate: string; currentDate: string;
currentTime: string; currentTime: string;
// temperature
chartOption: any; chartOption: any;
dataChart = {
donut: {
series: [20, 20, 20, 20, 20],
},
};
dataChart2 = {
donut: {
series: [50, 50],
},
};
// chart bar // chart bar
public barChartOptions: ChartOptions = { public barChartOptions: ChartOptions = {
responsive: true, responsive: true,
@ -82,18 +69,6 @@ export class DetailComponent {
barPercentage: 0.5, barPercentage: 0.5,
categoryPercentage: 0.5, categoryPercentage: 0.5,
}, },
// {
// data: [],
// label: "Water Consumption",
// backgroundColor: "#64CFF1",
// borderColor: "#64CFF1",
// pointBackgroundColor: "#64CFF1",
// pointBorderColor: "#64CFF1",
// pointHoverBackgroundColor: "#ffffff",
// pointHoverBorderColor: "#64CFF1",
// barPercentage: 0.5,
// categoryPercentage: 0.5,
// },
{ {
type: "line", type: "line",
data: [], data: [],
@ -109,21 +84,6 @@ export class DetailComponent {
tension: 0.3, tension: 0.3,
spanGaps: true, spanGaps: true,
}, },
// {
// type: "line",
// data: [],
// label: "Weekly Water Average",
// backgroundColor: "rgba(0,255,255,0)",
// borderColor: "#ffffff",
// fill: false,
// pointBorderColor: "#ffffff",
// pointBackgroundColor: "#FFF",
// pointBorderWidth: 2,
// pointHoverBorderWidth: 2,
// pointRadius: 4,
// tension: 0.3,
// spanGaps: true
// },
]; ];
//.......................... //..........................
@ -173,7 +133,6 @@ export class DetailComponent {
this.dataEnergyMonitoringTopCard(buildingId); this.dataEnergyMonitoringTopCard(buildingId);
this.dataEnergyMonitoringSummary(buildingId); this.dataEnergyMonitoringSummary(buildingId);
this.dataEnergyMonitoringSAir(buildingId); this.dataEnergyMonitoringSAir(buildingId);
this.dataEnergyMonitoringSTemperature(buildingId);
this.dataEnergyDeviceCategory(buildingId); this.dataEnergyDeviceCategory(buildingId);
this.dataEnergyChartKwhWater(buildingId); this.dataEnergyChartKwhWater(buildingId);
this.dataDeviceIr(); this.dataDeviceIr();
@ -181,26 +140,7 @@ export class DetailComponent {
} }
}); });
this.donutChart1 = {
type: "Pie",
data: this.dataChart.donut,
options: {
fullwidth: true,
height: "300px",
donut: true,
donutWidth: 70,
startAngle: 270,
total: 200,
showLabel: true,
},
};
const today = new Date().getDay();
this.days[today].isToday = true;
const now = new Date();
this.currentDate = now.toLocaleDateString();
this.currentTime = now.toLocaleTimeString();
} }
getAirQualityData(){ getAirQualityData(){
@ -331,12 +271,18 @@ export class DetailComponent {
} }
dataDeviceIr() { dataDeviceIr() {
const today = new Date().getDay();
this.days[today].isToday = true;
const now = new Date();
this.currentDate = now.toLocaleDateString();
this.currentTime = now.toLocaleTimeString();
this.deviceService.getDeviceStatus(452).subscribe((res) => { this.deviceService.getDeviceStatus(452).subscribe((res) => {
console.log(res); console.log(res);
this.roomTemperature = res.result[0].value; this.roomTemperature = res.result[0].value;
this.roomHumidity = res.result[1].value; this.roomHumidity = res.result[1].value;
}); });
} }
dataEnergyMonitoringSummary(buildingId) { dataEnergyMonitoringSummary(buildingId) {
this.energyMonitoringService this.energyMonitoringService
.getDashboardSummary(buildingId) .getDashboardSummary(buildingId)
@ -344,6 +290,7 @@ export class DetailComponent {
this.summaryCost = res.data; this.summaryCost = res.data;
}); });
} }
dataEnergyMonitoringSAir(buildingId) { dataEnergyMonitoringSAir(buildingId) {
this.energyMonitoringService this.energyMonitoringService
.getDashboardAirQuality(buildingId) .getDashboardAirQuality(buildingId)
@ -351,43 +298,7 @@ export class DetailComponent {
this.airQuality = res.data; this.airQuality = res.data;
}); });
} }
dataEnergyMonitoringSTemperature(buildingId) {
this.energyMonitoringService
.getDashboardTemperature(buildingId)
.subscribe((res) => {
this.temperature = res.data;
this.donutChart2 = {
type: "Pie",
data: this.dataChart2.donut,
options: {
chartPadding: 0,
fullwidth: true,
height: "150px",
donut: true,
showLabel: true,
startAngle: 0,
labelInterpolationFnc: (value) => {
const total = this.temperature;
return total + "°C";
},
},
events: {
draw: (data: any) => {
if (data.type === "label") {
if (data.index === 0) {
data.element.attr({
dx: data.element.root().width() / 2,
dy: data.element.root().height() / 2,
});
} else {
data.element.remove();
}
}
},
},
};
});
}
dataEnergyDeviceCategory(buildingId) { dataEnergyDeviceCategory(buildingId) {
this.energyMonitoringService this.energyMonitoringService
.getDashboardDeviceCategory(buildingId) .getDashboardDeviceCategory(buildingId)
@ -402,38 +313,25 @@ export class DetailComponent {
.subscribe((res) => { .subscribe((res) => {
this.chartKwhWater = res.data; this.chartKwhWater = res.data;
this.barChartData[0].data = []; this.barChartData[0].data = [];
// this.barChartData[1].data = [];
this.chartKwhWater.forEach((entry) => { this.chartKwhWater.forEach((entry) => {
this.barChartData[0].data.push(entry.kwh); this.barChartData[0].data.push(entry.kwh);
// this.barChartData[1].data.push(entry.water);
this.barChartLabels.push(entry.day); this.barChartLabels.push(entry.day);
}); });
const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater); const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
// const weeklyWater = this.aggregateWaterWeekly(this.chartKwhWater);
// Populate Appointment data at every multiple of 7
let weekIndex = 0; let weekIndex = 0;
console.log(this.barChartData[0].data); console.log(this.barChartData[0].data);
for (let i = 0; i < this.barChartData[0].data.length; i++) { for (let i = 0; i < this.barChartData[0].data.length; i++) {
if (i % 7 === 6 && weekIndex < weeklyKwh.length) { if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
this.barChartData[2].data[i] = weeklyKwh[weekIndex++]; this.barChartData[1].data[i] = weeklyKwh[weekIndex++];
} else { } else {
this.barChartData[2].data[i] = null; this.barChartData[1].data[i] = null;
} }
} }
// let weekIndexWater = 0;
// for (let i = 0; i < this.barChartData[0].data.length; i++) {
// if (i % 7 === 6 && weekIndexWater < weeklyWater.length) {
// this.barChartData[3].data[i] = weeklyWater[weekIndexWater++];
// } else {
// this.barChartData[3].data[i] = null;
// }
// }
}); });
} }
aggregateKwhWeekly(data: any[]): number[] { aggregateKwhWeekly(data: any[]): number[] {
const weeks = []; const weeks = [];
let weekSum = 0; let weekSum = 0;
@ -451,23 +349,7 @@ export class DetailComponent {
return weeks; return weeks;
} }
aggregateWaterWeekly(data: any[]): number[] {
const weeks = [];
let weekSum = 0;
let dayCount = 0;
data.forEach((entry, index) => {
weekSum += entry.water;
dayCount++;
if (dayCount === 7 || index === data.length - 1) {
weeks.push(weekSum);
weekSum = 0;
dayCount = 0;
}
});
return weeks;
}
seeMore(paramsId) { seeMore(paramsId) {
this.router.navigate(["/monitoring/control-device-see-more/", paramsId]); this.router.navigate(["/monitoring/control-device-see-more/", paramsId]);
} }