perbaikan master room dan detail monitoring
This commit is contained in:
parent
2a6cf6410d
commit
df1cd2339e
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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-body">
|
||||
<canvas
|
||||
style="
|
||||
background-color: #DDE1E6 !important;
|
||||
border-color: #DDE1E6;
|
||||
color: #242222;
|
||||
"
|
||||
class="barchart"
|
||||
height="400"
|
||||
width="1900"
|
||||
baseChart
|
||||
[datasets]="barChartData"
|
||||
[labels]="barChartLabels"
|
||||
[options]="barChartOptions"
|
||||
[legend]="barChartLegend"
|
||||
chartType="bar"
|
||||
>
|
||||
</canvas>
|
||||
</div>
|
||||
<div class="card" style="background-color: #dde1e6 !important">
|
||||
<div class="card-body">
|
||||
<div
|
||||
echarts
|
||||
[options]="chartOptionBar"
|
||||
class="echart-container"
|
||||
style="
|
||||
height: 400px !important;
|
||||
display: block;
|
||||
"
|
||||
></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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
getAirQualityData() {
|
||||
this.valueAirQuality = Math.floor(Math.random() * 501);
|
||||
this.chartOption = {
|
||||
series: [
|
||||
{
|
||||
|
|
@ -171,12 +133,12 @@ export class DetailComponent {
|
|||
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
|
||||
[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
|
||||
],
|
||||
},
|
||||
},
|
||||
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue