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

penyesuaian UI sesuai Figma

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-06-12 15:17:08 +07:00
parent ef118ad33e
commit 468045384e
25 changed files with 1419 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/content/hemat-app/monitoring/building/building.component.css
View File

@@ -7,33 +7,13 @@
}
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
stroke: #01a32f;
stroke-width: 20px !important;
stroke: #BEF264;
stroke-width: 30px !important;
}
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
stroke: #757575;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
stroke: #dcdf03;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
stroke: #757575;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
stroke: #d50c08;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart3 .ct-series-b .ct-slice-donut {
stroke: #757575;
stroke-width: 20px !important;
stroke: #ffffff;
stroke-width: 30px !important;
}
.btn-no-hover {

29
src/app/content/hemat-app/monitoring/building/building.component.html
View File

@@ -1,4 +1,4 @@
<div class="app-content content">
<div class="app-content content" style="background-color: #000000 !important;">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -21,35 +21,28 @@
class="col-xl-4 col-md-6 col-12"
*ngFor="let data of filteredRows"
>
<div class="card">
<div class="card-header mb-2">
<div class="card" style="background-color: #252525 !important;">
<div class="card-header mb-2" style="background-color: #252525 !important;">
<div class="row">
<div class="col-12 text-center">
<h4
class="text-muted mb-1 font-weight-bold"
style="font-family: Montserrat, sans-serif"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
>
Building Name
</h4>
<h3
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
>
{{ data.build_name ? data.build_name : data.name }}
</h3>
</div>
</div>
<hr style="border-top: 3px solid #100a0a" />
<hr style="border-top: 4px solid #ffffff; border-color: #ffffff !important;" />
</div>
<div class="card-content">
<div
[ngClass]="{
'donut-chart1': data.donut.series[0] <= 50,
'donut-chart2':
data.donut.series[0] > 50 && data.donut.series[0] < 75,
'donut-chart3': data.donut.series[0] >= 75
}"
>
<div class="donut-chart1">
<x-chartist
*ngIf="data"
[data]="data.donut"
@@ -71,11 +64,11 @@
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em"
style="font-size: 2em; color: #ffffff !important;"
>
{{ data.total }} kWh
</h3>
<h6>Consumtion</h6>
<h6 style="color: #ffffff !important;">Consumtion</h6>
</div>
<div class="form-group text-center">
@@ -83,8 +76,8 @@
type="button"
class="btn btn-primary round btn-min-width mr-1 mb-1"
(click)="viewRoom(data)"
triggers="hover:click:hover"
ngbTooltip="Room"
style="background-color: #ffffff !important; color: #000000;"
>
Room
</button>
@@ -92,8 +85,8 @@
type="button"
class="btn btn-success round btn-min-width mr-1 mb-1"
(click)="viewRow(data)"
triggers="hover:click:hover"
ngbTooltip="Detail"
style="background-color: #BEF264 !important; color: #000000;"
>
Detail
</button>