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/"
target="_blank"
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
>
</p>

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

@ -79,6 +79,22 @@
</ng-template>
</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
name="description"
[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-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -6,20 +6,25 @@
<div class="content-body">
<div class="row">
<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-body">
<div class="media d-flex">
<div class="media-body text-left">
<h5 class="custom-label">Kwh Consumption</h5>
<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>
</div>
<div class="align-self-center">
<div
style="
background-color: #37A647;
background-color: #37a647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -40,7 +45,7 @@
</div>
</div>
<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-body">
<div class="media d-flex">
@ -51,7 +56,7 @@
<div class="align-self-center">
<div
style="
background-color: #37A647;
background-color: #37a647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -72,7 +77,7 @@
</div>
</div>
<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-body">
<div class="media d-flex">
@ -83,7 +88,7 @@
<div class="align-self-center">
<div
style="
background-color: #37A647;
background-color: #37a647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -104,7 +109,7 @@
</div>
</div>
<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-body">
<div class="media d-flex">
@ -112,14 +117,17 @@
<h5 class="custom-label">Summary Cost</h5>
<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>
</div>
<div class="align-self-center">
<div
style="
background-color: #37A647;
background-color: #37a647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -142,34 +150,27 @@
</div>
<div class="row">
<div class="col-12">
<div class="card" style="background-color: #DDE1E6 !important">
<div class="card-content">
<div class="card" style="background-color: #dde1e6 !important">
<div class="card-body">
<canvas
<div
echarts
[options]="chartOptionBar"
class="echart-container"
style="
background-color: #DDE1E6 !important;
border-color: #DDE1E6;
color: #242222;
height: 400px !important;
display: block;
"
class="barchart"
height="400"
width="1900"
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
chartType="bar"
>
</canvas>
</div>
></div>
</div>
</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 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
@ -203,17 +204,22 @@
</h4>
</div>
<div class="card-body">
<div echarts [options]="chartOption" class="echart-container"></div>
<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 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>
<h4 class="card-title text-center text-custom-label">Humidity</h4>
</div>
<div class="card-body">
<div class="days-container">
@ -240,14 +246,20 @@
<div class="col-6" *ngFor="let item of deviceCategory?.usesd">
<div
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-body clearfix">
<div class="media align-items-stretch mb-2">
<div class="align-self-center">
<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"
></i>
</div>
@ -282,7 +294,7 @@
<button
class="btn btn-primary"
style="
background-color: #37A647 !important;
background-color: #37a647 !important;
color: #ffffff !important;
border-radius: 10px;
font-family: 'Open Sans', sans-serif;

115
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 { LoginService } from "../../service/login.service";
import { DeviceService } from "../../service/device.service";
import { color } from "echarts";
@Component({
selector: "app-detail",
@ -35,6 +36,7 @@ export class DetailComponent {
currentDate: string;
currentTime: string;
chartOption: any;
chartOptionBar: any;
// chart bar
public barChartOptions: ChartOptions = {
@ -56,46 +58,8 @@ export class DetailComponent {
public barChartLabels: string[] = [];
public barChartType: ChartType = "bar";
public barChartLegend = true;
public barChartData: ChartDataset[] = [
{
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,
// },
];
public barChartData: number[] = [];
public barChartData2: number[] = [];
//..........................
// integrasi
@ -150,12 +114,10 @@ export class DetailComponent {
this.getAirQualityData();
}
});
}
getAirQualityData() {
this.valueAirQuality = Math.floor(Math.random() * 501)
this.valueAirQuality = Math.floor(Math.random() * 501);
this.chartOption = {
series: [
{
@ -176,7 +138,7 @@ export class DetailComponent {
[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
[6 / 6, "#E768A7"], // 301 - 500: Purple
],
},
},
@ -323,24 +285,61 @@ export class DetailComponent {
.getDashboardChartKwhWater(buildingId)
.subscribe((res) => {
this.chartKwhWater = res.data;
this.barChartData[0].data = [];
console.log(this.chartKwhWater);
this.chartKwhWater.forEach((entry) => {
this.barChartData[1].data.push(entry.kwh);
this.barChartData[0].data.push(entry.cost);
this.barChartData.push(entry.kwh.toFixed(1));
this.barChartData2.push(entry.cost);
this.barChartLabels.push(entry.day);
});
// const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
// 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[1].data[i] = weeklyKwh[weekIndex++];
// } else {
// this.barChartData[1].data[i] = null;
// }
// }
this.chartOptionBar = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {},
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
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>
<!-- <div class="card-body">
<a