fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan temperature, air quality dan humidity

This commit is contained in:
Fuzi_fauzia 2024-07-17 15:40:55 +07:00
parent bd1cd42ed6
commit c337a8941c
6 changed files with 293 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_layout/footer/footer.component.html
View File

@ -13,7 +13,7 @@
href="https://allbestsistem.com/"
target="_blank"
style="background-color: #ffffff !important;"
>Smart Building Management Systems (V@2024-07-16.01)
>Smart Building Management Systems (V@2024-07-17.02)
</a></span
>
</p>

69
src/app/content/hemat-app/monitoring/detail/detail.component.css
View File

@ -105,3 +105,72 @@ canvas {
font-weight: 800;
font-size: 24px;
}
.text-custom-label{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 16px;
font-weight: 800;
}
.custom-style-header{
background-color: #DDE1E6 !important;
border-bottom: 3px solid #242222;
}
/* day */
.days-container {
display: flex;
justify-content: space-around;
}
.day {
font-family: "Nunito Sans", sans-serif;
color: #242222;
padding: 2px;
border-radius: 5px;
}
.current-day {
color: #37A647;
}
.temperature-container {
text-align: center;
margin-top: 50px;
height: 100px;
}
.temperature {
font-family: "Nunito Sans", sans-serif;
font-size: 36px;
font-weight: bold;
color: #242222;
}
.date-time-container {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.current-date,
.current-time {
font-family: "Nunito Sans", sans-serif;
font-size: 16px;
color: #242222;
}
.custom-card-temp{
height: 300px;
}
/* echart */
.custom-card-air {
background-color: #dde1e6 !important;
}
.echart-container {
height: 200px; /* Tinggi awal untuk menentukan tinggi chart */
width: 100%; /* Lebar maksimal */
}

69
src/app/content/hemat-app/monitoring/detail/detail.component.html
View File

@ -168,6 +168,75 @@
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-md-6 col-12">
<div class="card custom-card-temp" style="background-color: #DDE1E6 !important">
<div class="card-header custom-style-header">
<h4 class="card-title text-center text-custom-label">
Temperature
</h4>
</div>
<div class="card-body">
<div class="days-container">
<div
*ngFor="let day of days"
[ngClass]="{ 'current-day': day.isToday }"
class="day"
>
{{ day.name }}
</div>
</div>
<div class="temperature-container">
<span class="temperature">{{ roomTemperature }}°C</span>
</div>
<div class="date-time-container">
<span class="current-time">Time :{{ currentTime }}</span>
<span class="current-date">{{ currentDate }}</span>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card custom-card-air">
<div class="card-header custom-style-header">
<h4 class="card-title text-center text-custom-label">
Air Quality
</h4>
</div>
<div class="card-body">
<div echarts [options]="chartOption" class="echart-container"></div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="card custom-card-temp" style="background-color: #DDE1E6 !important">
<div class="card-header custom-style-header">
<h4 class="card-title text-center text-custom-label">
Humidity
</h4>
</div>
<div class="card-body">
<div class="days-container">
<div
*ngFor="let day of days"
[ngClass]="{ 'current-day': day.isToday }"
class="day"
>
{{ day.name }}
</div>
</div>
<div class="temperature-container">
<span class="temperature">{{ roomHumidity }}%</span>
</div>
<div class="date-time-container">
<span class="current-time">Time :{{ currentTime }}</span>
<span class="current-date">{{ currentDate }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6" *ngFor="let item of deviceCategory?.usesd">
<div

150
src/app/content/hemat-app/monitoring/detail/detail.component.ts
View File

@ -4,6 +4,7 @@ import { ChartOptions, ChartType, ChartDataset } from "chart.js";
import { EnergyMonitoringService } from "../../service/energy-monitoring.service";
import { CurrencyPipe } from "@angular/common";
import { LoginService } from "../../service/login.service";
import { DeviceService } from "../../service/device.service";
@Component({
selector: "app-detail",
@ -18,6 +19,24 @@ export class DetailComponent {
donutChart1: any;
donutChart2: any;
// temperature
days = [
{ name: "Sun", isToday: false },
{ name: "Mon", isToday: false },
{ name: "Tue", isToday: false },
{ name: "Wed", isToday: false },
{ name: "Thu", isToday: false },
{ name: "Fri", isToday: false },
{ name: "Sat", isToday: false },
];
roomTemperature: number = 0;
roomHumidity: number = 0;
valueAirQuality: number = 0;
currentDate: string;
currentTime: string;
// temperature
chartOption: any;
dataChart = {
donut: {
series: [20, 20, 20, 20, 20],
@ -34,7 +53,7 @@ export class DetailComponent {
public barChartOptions: ChartOptions = {
responsive: true,
animation: {
duration: 0
duration: 0,
},
scales: {
x: {
@ -42,11 +61,11 @@ export class DetailComponent {
},
y: {
stacked: true,
beginAtZero: true
beginAtZero: true,
},
},
};
public barChartLabels: string[] = [];
public barChartType: ChartType = "bar";
public barChartLegend = true;
@ -88,7 +107,7 @@ export class DetailComponent {
pointHoverBorderWidth: 2,
pointRadius: 4,
tension: 0.3,
spanGaps: true
spanGaps: true,
},
// {
// type: "line",
@ -127,7 +146,8 @@ export class DetailComponent {
private energyMonitoringService: EnergyMonitoringService,
private currencyPipe: CurrencyPipe,
private router: Router,
private authService: LoginService
private authService: LoginService,
private deviceService: DeviceService
) {}
get formattedSummaryCost(): string {
@ -156,6 +176,8 @@ export class DetailComponent {
this.dataEnergyMonitoringSTemperature(buildingId);
this.dataEnergyDeviceCategory(buildingId);
this.dataEnergyChartKwhWater(buildingId);
this.dataDeviceIr();
this.getAirQualityData();
}
});
@ -172,6 +194,112 @@ export class DetailComponent {
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(){
this.valueAirQuality = Math.floor(Math.random() * 501)
this.chartOption = {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
center: ["50%", "75%"],
radius: "130%", // Adjust the radius to make the chart smaller
min: 0,
max: 500,
splitNumber: 5,
axisLine: {
lineStyle: {
width: 20,
color: [
[1/6, "#6BD67C"], // 0 - 50: Green
[2/6, "#A2D856"], // 51 - 100: Light Green
[3/6, "#FFE45E"], // 101 - 150: Yellow
[4/6, "#FFA644"], // 151 - 200: Orange
[5/6, "#FF6E76"], // 201 - 300: Light Red
[6/6, "#E768A7"] // 301 - 500: Purple
],
},
},
pointer: {
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
length: "12%",
width: 15,
offsetCenter: [0, "-50%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 10,
lineStyle: {
color: "auto",
width: 2,
},
},
splitLine: {
length: 15,
lineStyle: {
color: "auto",
width: 5,
},
},
axisLabel: {
color: "#464646",
fontSize: 16, // Adjust font size
distance: -40, // Adjust distance
rotate: "tangential",
formatter: function (value: number) {
// return Math.round(value) === 100 ? "100" : Math.round(value) + "";
return value.toString();
},
},
title: {
offsetCenter: [0, " 15%"],
fontSize: 18, // Adjust font size
},
detail: {
fontSize: 24, // Adjust font size
offsetCenter: [0, "-25%"], // Adjust offset
valueAnimation: true,
formatter: function (value: number) {
return Math.round(value) + "";
},
color: "inherit",
},
data: [
{
value: this.valueAirQuality,
name: this.getGradeName(this.valueAirQuality),
},
],
},
],
};
}
getGradeName(value: number): string {
if (value <= 50) {
return "Good";
} else if (value <= 100) {
return "Moderate";
} else if (value <= 150) {
return "Unhealthy for Sensitive Groups";
} else if (value <= 200) {
return "Unhealthy";
} else if (value <= 300) {
return "Very Unhealthy";
} else {
return "Hazardous";
}
}
breadcrumbLink() {
@ -201,6 +329,14 @@ export class DetailComponent {
this.topCard = res.data;
});
}
dataDeviceIr() {
this.deviceService.getDeviceStatus(452).subscribe((res) => {
console.log(res);
this.roomTemperature = res.result[0].value;
this.roomHumidity = res.result[1].value;
});
}
dataEnergyMonitoringSummary(buildingId) {
this.energyMonitoringService
.getDashboardSummary(buildingId)
@ -279,7 +415,7 @@ export class DetailComponent {
// Populate Appointment data at every multiple of 7
let weekIndex = 0;
console.log(this.barChartData[0].data);
for (let i = 0; i < this.barChartData[0].data.length; i++) {
if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
this.barChartData[2].data[i] = weeklyKwh[weekIndex++];
@ -332,7 +468,7 @@ export class DetailComponent {
return weeks;
}
seeMore(paramsId){
seeMore(paramsId) {
this.router.navigate(["/monitoring/control-device-see-more/", paramsId]);
}
}

10
src/app/content/hemat-app/service/device.service.ts
View File

@ -88,4 +88,14 @@ export class DeviceService {
});
return this.http.get<any>(url, { headers });
}
getDeviceStatus(id): Observable<any> {
const endpoint = `/devices`;
const url = `${BASE_URL}${endpoint}/status?id=${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
}

2
src/app/login/login.component.html
View File

@ -138,7 +138,7 @@
<p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
>
<span>(v@2024.07.16.01)</span>
<span>(v@2024.07.17.02)</span>
</p>
<!-- <div class="card-body">
<a