penambahan temperature, air quality dan humidity
This commit is contained in:
parent
bd1cd42ed6
commit
c337a8941c
@ -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>
|
||||
|
||||
@ -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 */
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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]);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 });
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user