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

integrasi dashboard energy monitoring

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-06-06 14:54:14 +07:00
parent 3f1c97ebe4
commit 38c936b389
7 changed files with 1223 additions and 906 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/app/content/hemat-app/cost-management/cost-management.component.html
View File

@@ -1,37 +1,112 @@
<div class="app-content content bg-maintenance-image">
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
<div class="card-body">
<span class="card-title text-center">
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
width="250" alt="logo">
</span>
<section>
<div class="row">
<div class="col-lg-4 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">Temperature and Humidity</h4>
</div>
<div class="card-body">
<div class="card-block">
<div class="donut-chart2" style="height: 150px !important">
<x-chartist
*ngIf="donutChart2"
[data]="donutChart2.data"
[type]="donutChart2.type"
[options]="donutChart2.options"
[responsiveOptions]="donutChart2.responsiveOptions"
[events]="donutChart2.events"
></x-chartist>
</div>
</div>
<div class="card-body text-center">
<h3>Coming Soon</h3>
<p>We're sorry for the inconvenience.
<br> Please check back later.</p>
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
</div>
<hr>
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</p> -->
</div>
</div>
</div>
</section>
<div class="col-lg-4 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">Air Quality</h4>
</div>
<div class="card-body">
<div class="card-block">
<div class="donut-chart1" style="height: 150px !important">
<x-chartist
*ngIf="donutChart1"
[data]="donutChart1.data"
[type]="donutChart1.type"
[options]="donutChart1.options"
[responsiveOptions]="donutChart1.responsiveOptions"
[events]="donutChart1.events"
></x-chartist>
</div>
<div
class="text-center"
style="
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
"
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em"
>
76 %
</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">Comparison of Actual Costs and Estimated Costs</h4>
</div>
<div class="card-body">
<div class="card-block">
<div class="d-flex align-items-center mb-2">
<div class="flex-grow-1">
<ngb-progressbar
height="45px"
type="danger"
[value]="89"
></ngb-progressbar>
</div>
<div
class="ml-2 d-flex align-items-center"
style="height: 20px"
>
<span class="text-bold-600">1.234.242</span>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<ngb-progressbar
height="45px"
type="success"
[value]="50"
></ngb-progressbar>
</div>
<div
class="ml-2 d-flex align-items-center"
style="height: 20px"
>
<span class="text-bold-600">1.545.232</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>