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

perbaikan master room dan detail monitoring

This commit is contained in:
Fuzi_fauzia 2024-07-23 13:25:47 +07:00
parent 2a6cf6410d
commit df1cd2339e
5 changed files with 135 additions and 108 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/" href="https://allbestsistem.com/"
target="_blank" target="_blank"
style="background-color: #ffffff !important;" style="background-color: #ffffff !important;"
>Smart Building Management Systems (V@2024-07-22.03) >Smart Building Management Systems (V@2024-07-23.01)
</a></span </a></span
> >
</p> </p>

16
src/app/content/hemat-app/master/master-room/master-room.component.html
View File

@ -79,6 +79,22 @@
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column
name="code"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span class="style-custom-label">Code Room</span>
</ng-template>
<ng-template
let-value="value"
ngx-datatable-cell-template
>
<p class="style-custom-label">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
name="description" name="description"
[flexGrow]="1" [flexGrow]="1"

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

@ -1,4 +1,4 @@
<div class="app-content content" style="background-color: #FBFBFB;"> <div class="app-content content" style="background-color: #fbfbfb">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -6,20 +6,25 @@
<div class="content-body"> <div class="content-body">
<div class="row"> <div class="row">
<div class="col-xl-3 col-md-6 col-12"> <div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #DDE1E6 !important"> <div class="card" style="background-color: #dde1e6 !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
<div class="media-body text-left"> <div class="media-body text-left">
<h5 class="custom-label">Kwh Consumption</h5> <h5 class="custom-label">Kwh Consumption</h5>
<h3 class="custom-value"> <h3 class="custom-value">
{{ topCard?.kwh_consumption ? topCard?.kwh_consumption.toFixed(1) : 0 }} Kwh {{
topCard?.kwh_consumption
? topCard?.kwh_consumption.toFixed(1)
: 0
}}
Kwh
</h3> </h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #37A647; background-color: #37a647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -40,7 +45,7 @@
</div> </div>
</div> </div>
<div class="col-xl-3 col-md-6 col-12"> <div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #DDE1E6 !important"> <div class="card" style="background-color: #dde1e6 !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
@ -51,7 +56,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #37A647; background-color: #37a647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -72,7 +77,7 @@
</div> </div>
</div> </div>
<div class="col-xl-3 col-md-6 col-12"> <div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #DDE1E6 !important"> <div class="card" style="background-color: #dde1e6 !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
@ -83,7 +88,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #37A647; background-color: #37a647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -104,7 +109,7 @@
</div> </div>
</div> </div>
<div class="col-xl-3 col-md-6 col-12"> <div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #DDE1E6 !important"> <div class="card" style="background-color: #dde1e6 !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
@ -112,14 +117,17 @@
<h5 class="custom-label">Summary Cost</h5> <h5 class="custom-label">Summary Cost</h5>
<h3 class="custom-value"> <h3 class="custom-value">
{{ {{
summaryCost?.summary_cost ? (summaryCost?.summary_cost | currency : "Rp " : "symbol" : "1.0-0") : 0 summaryCost?.summary_cost
? (summaryCost?.summary_cost
| currency : "Rp " : "symbol" : "1.0-0")
: 0
}} }}
</h3> </h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #37A647; background-color: #37a647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -142,34 +150,27 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card" style="background-color: #DDE1E6 !important"> <div class="card" style="background-color: #dde1e6 !important">
<div class="card-content">
<div class="card-body"> <div class="card-body">
<canvas <div
echarts
[options]="chartOptionBar"
class="echart-container"
style=" style="
background-color: #DDE1E6 !important; height: 400px !important;
border-color: #DDE1E6; display: block;
color: #242222;
" "
class="barchart" ></div>
height="400"
width="1900"
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
chartType="bar"
>
</canvas>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xl-4 col-md-6 col-12"> <div class="col-xl-4 col-md-6 col-12">
<div class="card custom-card-temp" style="background-color: #DDE1E6 !important"> <div
class="card custom-card-temp"
style="background-color: #dde1e6 !important"
>
<div class="card-header custom-style-header"> <div class="card-header custom-style-header">
<h4 class="card-title text-center text-custom-label"> <h4 class="card-title text-center text-custom-label">
Temperature Temperature
@ -203,17 +204,22 @@
</h4> </h4>
</div> </div>
<div class="card-body"> <div class="card-body">
<div echarts [options]="chartOption" class="echart-container"></div> <div
echarts
[options]="chartOption"
class="echart-container"
></div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xl-4 col-md-6 col-12"> <div class="col-xl-4 col-md-6 col-12">
<div class="card custom-card-temp" style="background-color: #DDE1E6 !important"> <div
class="card custom-card-temp"
style="background-color: #dde1e6 !important"
>
<div class="card-header custom-style-header"> <div class="card-header custom-style-header">
<h4 class="card-title text-center text-custom-label"> <h4 class="card-title text-center text-custom-label">Humidity</h4>
Humidity
</h4>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="days-container"> <div class="days-container">
@ -240,14 +246,20 @@
<div class="col-6" *ngFor="let item of deviceCategory?.usesd"> <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
<div <div
class="card" class="card"
style="background-color: transparent !important; border: none; box-shadow: none;" style="
background-color: transparent !important;
border: none;
box-shadow: none;
"
> >
<div class="card-content"> <div class="card-content">
<div class="card-body clearfix"> <div class="card-body clearfix">
<div class="media align-items-stretch mb-2"> <div class="media align-items-stretch mb-2">
<div class="align-self-center"> <div class="align-self-center">
<i <i
class="{{item.icon}} background-round info font-large-1 mr-2" class="{{
item.icon
}} background-round info font-large-1 mr-2"
style="color: #ffffff !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
@ -282,7 +294,7 @@
<button <button
class="btn btn-primary" class="btn btn-primary"
style=" style="
background-color: #37A647 !important; background-color: #37a647 !important;
color: #ffffff !important; color: #ffffff !important;
border-radius: 10px; border-radius: 10px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;

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

@ -5,6 +5,7 @@ import { EnergyMonitoringService } from "../../service/energy-monitoring.service
import { CurrencyPipe } from "@angular/common"; import { CurrencyPipe } from "@angular/common";
import { LoginService } from "../../service/login.service"; import { LoginService } from "../../service/login.service";
import { DeviceService } from "../../service/device.service"; import { DeviceService } from "../../service/device.service";
import { color } from "echarts";
@Component({ @Component({
selector: "app-detail", selector: "app-detail",
@ -35,6 +36,7 @@ export class DetailComponent {
currentDate: string; currentDate: string;
currentTime: string; currentTime: string;
chartOption: any; chartOption: any;
chartOptionBar: any;
// chart bar // chart bar
public barChartOptions: ChartOptions = { public barChartOptions: ChartOptions = {
@ -56,46 +58,8 @@ export class DetailComponent {
public barChartLabels: string[] = []; public barChartLabels: string[] = [];
public barChartType: ChartType = "bar"; public barChartType: ChartType = "bar";
public barChartLegend = true; public barChartLegend = true;
public barChartData: ChartDataset[] = [ public barChartData: number[] = [];
{ public barChartData2: number[] = [];
data: [],
label: "KWH Consumption",
backgroundColor: "#37A647",
borderColor: "#37A647",
pointBackgroundColor: "#37A647",
pointBorderColor: "#37A647",
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#37A647",
barPercentage: 0.5,
categoryPercentage: 0.5,
},
{
type: "line",
data: [],
label: "Kwh Average",
backgroundColor: "#ffffff",
borderColor: "#ffffff",
pointBackgroundColor: "#ffffff",
pointBorderColor: "#ffffff",
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#ffffff",
},
// {
// type: "line",
// data: [],
// label: "Weekly Kwh Average",
// backgroundColor: "rgba(0,255,255,0)",
// borderColor: "#ffffff",
// fill: true,
// pointBorderColor: "#ffffff",
// pointBackgroundColor: "#FFF",
// pointBorderWidth: 2,
// pointHoverBorderWidth: 2,
// pointRadius: 4,
// tension: 0.3,
// spanGaps: true,
// },
];
//.......................... //..........................
// integrasi // integrasi
@ -150,12 +114,10 @@ export class DetailComponent {
this.getAirQualityData(); this.getAirQualityData();
} }
}); });
} }
getAirQualityData(){ getAirQualityData() {
this.valueAirQuality = Math.floor(Math.random() * 501) this.valueAirQuality = Math.floor(Math.random() * 501);
this.chartOption = { this.chartOption = {
series: [ series: [
{ {
@ -171,12 +133,12 @@ export class DetailComponent {
lineStyle: { lineStyle: {
width: 20, width: 20,
color: [ color: [
[1/6, "#6BD67C"], // 0 - 50: Green [1 / 6, "#6BD67C"], // 0 - 50: Green
[2/6, "#A2D856"], // 51 - 100: Light Green [2 / 6, "#A2D856"], // 51 - 100: Light Green
[3/6, "#FFE45E"], // 101 - 150: Yellow [3 / 6, "#FFE45E"], // 101 - 150: Yellow
[4/6, "#FFA644"], // 151 - 200: Orange [4 / 6, "#FFA644"], // 151 - 200: Orange
[5/6, "#FF6E76"], // 201 - 300: Light Red [5 / 6, "#FF6E76"], // 201 - 300: Light Red
[6/6, "#E768A7"] // 301 - 500: Purple [6 / 6, "#E768A7"], // 301 - 500: Purple
], ],
}, },
}, },
@ -323,24 +285,61 @@ export class DetailComponent {
.getDashboardChartKwhWater(buildingId) .getDashboardChartKwhWater(buildingId)
.subscribe((res) => { .subscribe((res) => {
this.chartKwhWater = res.data; this.chartKwhWater = res.data;
this.barChartData[0].data = []; console.log(this.chartKwhWater);
this.chartKwhWater.forEach((entry) => { this.chartKwhWater.forEach((entry) => {
this.barChartData[1].data.push(entry.kwh); this.barChartData.push(entry.kwh.toFixed(1));
this.barChartData[0].data.push(entry.cost); this.barChartData2.push(entry.cost);
this.barChartLabels.push(entry.day); this.barChartLabels.push(entry.day);
}); });
// const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater); this.chartOptionBar = {
// let weekIndex = 0; tooltip: {
// console.log(this.barChartData[0].data); trigger: "axis",
axisPointer: {
// for (let i = 0; i < this.barChartData[0].data.length; i++) { type: "shadow",
// if (i % 7 === 6 && weekIndex < weeklyKwh.length) { },
// this.barChartData[1].data[i] = weeklyKwh[weekIndex++]; },
// } else { legend: {},
// this.barChartData[1].data[i] = null; grid: {
// } left: "3%",
// } right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: this.barChartLabels,
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "KWH Consumption",
type: "bar",
color: "#ffffff",
stack: "Ad",
emphasis: {
focus: "series",
},
data: this.barChartData,
},
{
name: "Cost Consumption",
type: "bar",
stack: "Ad",
color: "#37a647",
emphasis: {
focus: "series",
},
data: this.barChartData2,
},
],
};
}); });
} }

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

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