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

penambahan pop up table dan export chart

Browse Source
This commit is contained in:
Fuzi_fauzia 2024-08-21 15:29:28 +07:00
parent 7a28e52e89
commit 633effdb9b
5 changed files with 239 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/app/_services/tableexcel.service.ts
View File

@ -208,4 +208,73 @@ export class TableexcelService {
}); });
this.saveAsExcelFile(excelBuffer, excelFileName); this.saveAsExcelFile(excelBuffer, excelFileName);
} }
public exportAsExcelFileMonitoringDetail(
json: any[],
excelFileName: string,
columns: string[],
mode: any
): void {
const filteredJson = json.map((item) => {
const filteredItem = {};
columns.forEach((column) => {
filteredItem[column] = item[column];
});
return filteredItem;
});
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(filteredJson);
let columnWidths = [];
if (mode === "building") {
columnWidths = [
{ wch: 30 },
{ wch: 40 },
{ wch: 30 },
{ wch: 30 },
{ wch: 30 },
{ wch: 30 },
];
} else if (mode === "floor") {
columnWidths = [
{ wch: 40 },
{ wch: 30 },
{ wch: 30 },
{ wch: 30 },
{ wch: 30 },
];
} else if (mode === "room") {
columnWidths = [{ wch: 30 }, { wch: 30 }, { wch: 30 }, { wch: 30 }];
}
worksheet["!cols"] = columnWidths;
let header = [];
if (mode === "building") {
header = [
"Floor",
"Room",
"Device",
"Duration",
"Price Kwh",
"Estimation Cost",
];
} else if (mode === "floor") {
header = ["Room", "Device", "Duration", "Price Kwh", "Estimation Cost"];
} else if (mode === "room") {
header = ["Device", "Duration", "Price Kwh", "Estimation Cost"];
}
XLSX.utils.sheet_add_aoa(worksheet, [header]);
const workbook: XLSX.WorkBook = {
Sheets: { data: worksheet },
SheetNames: ["data"],
};
const excelBuffer: any = XLSX.write(workbook, {
bookType: "xlsx",
type: "array",
});
this.saveAsExcelFile(excelBuffer, excelFileName);
}
} }

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

@ -6,6 +6,8 @@ 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"; import { color } from "echarts";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { ModalExportComponent } from "../modal-export/modal-export.component";
@Component({ @Component({
selector: "app-detail", selector: "app-detail",
@ -66,6 +68,7 @@ export class DetailComponent {
private currencyPipe: CurrencyPipe, private currencyPipe: CurrencyPipe,
private router: Router, private router: Router,
private authService: LoginService, private authService: LoginService,
private modalService: NgbModal,
) {} ) {}
get formattedSummaryCost(): string { get formattedSummaryCost(): string {
@ -345,6 +348,27 @@ export class DetailComponent {
onChartClick(params) { onChartClick(params) {
console.log(params); console.log(params);
const modalRef = this.modalService.open(ModalExportComponent, {
size: "xl",
centered: true,
});
modalRef.componentInstance.dataIndex = params.dataIndex;
modalRef.componentInstance.buildingId = this.buildingId;
modalRef.componentInstance.floorId = this.floorId;
modalRef.componentInstance.roomId = this.roomId;
modalRef.componentInstance.mode = this.mode;
modalRef.result.then(
(result) => {
if (result) {
console.log(result);
}
},
(reason) => {
console.log(`Dismissed: ${reason}`);
}
);
// Show popup with details // Show popup with details
// alert(`Day: ${params.name}\nKWH Consumption: ${params.value}`); // alert(`Day: ${params.name}\nKWH Consumption: ${params.value}`);

110
src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html
View File

@ -1,9 +1,17 @@
<div class="modal-body" style="background-color: #FBFBFB !important"> <div class="modal-body" style="background-color: #fbfbfb !important">
<h4 style="color: #242222; margin-bottom: 20px !important"> <h4 style="color: #242222; margin-bottom: 20px !important">
Comparison of Water and Electricity Costs > {{ dataRow.building }} <div *ngIf="buildingOnly">
<strong>{{ data_cost[0].BuildingName }}</strong>
</div>
<div *ngIf="floorOnly">
{{data_cost[0].BuildingName}} > <strong>{{ data_cost[0].floorName }}</strong>
</div>
<div *ngIf="roomOnly">
{{data_cost[0].BuildingName}} > {{data_cost[0].floorName}} > <strong>{{ data_cost[0].roomName }}</strong>
</div>
</h4> </h4>
<p style="color: #242222">Room : {{ dataRow?.roomName }}</p> <!-- <p style="color: #242222">Room : dfd</p>
<p style="color: #242222">Category : {{ dataRow?.categoryName }}</p> <p style="color: #242222">Category : gdfg</p> -->
<div class="card-dashboard"> <div class="card-dashboard">
<ngx-datatable <ngx-datatable
@ -24,7 +32,7 @@
</p> </p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90"> <!-- <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Tanggal</span> <span style="color: #242222 !important">Tanggal</span>
</ng-template> </ng-template>
@ -33,7 +41,25 @@
{{ value | date : "dd/MM/yyyy" }} {{ value | date : "dd/MM/yyyy" }}
</p> </p>
</ng-template> </ng-template>
</ngx-datatable-column> -->
<ngx-datatable-column name="floorName" [flexGrow]="1" [minWidth]="90" *ngIf="buildingOnly">
<ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Floor</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90" *ngIf="buildingOnly || floorOnly">
<ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Room</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Device</span> <span style="color: #242222 !important">Device</span>
@ -42,22 +68,41 @@
<p style="color: #242222 !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
<ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Room</span> <span style="color: #242222 !important">Duration</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
<!-- <ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Category</span> <span style="color: #242222 !important">Price Kwh</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> -->
<ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Price Kwh</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">
{{
value.toLocaleString("id-ID", {
style: "currency",
currency: "IDR"
})
}}
</p>
</ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
name="estimationCost" name="estimationCost"
[flexGrow]="1" [flexGrow]="1"
@ -77,51 +122,12 @@
</p> </p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Total Kwh</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="watt" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Watt</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Duration</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template>
<span style="color: #242222 !important">Price Kwh</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #242222 !important">
{{
value.toLocaleString("id-ID", {
style: "currency",
currency: "IDR"
})
}}
</p>
</ng-template>
</ngx-datatable-column>
</ngx-datatable> </ngx-datatable>
</div> </div>
</div> </div>
<div <div
class="modal-footer justify-content-between" class="modal-footer justify-content-between"
style="background-color: #FBFBFB !important; border-style: none !important" style="background-color: #fbfbfb !important; border-style: none !important"
> >
<button <button
type="button" type="button"
@ -129,7 +135,7 @@
style=" style="
color: #242222; color: #242222;
width: 25%; width: 25%;
background-color: #FBFBFB !important; background-color: #fbfbfb !important;
border-color: #242222 !important; border-color: #242222 !important;
border-radius: 10px; border-radius: 10px;
" "
@ -143,8 +149,8 @@
style=" style="
color: #242222 !important; color: #242222 !important;
width: 25%; width: 25%;
background-color: #DDE1E6 !important; background-color: #dde1e6 !important;
border-color: #DDE1E6 !important; border-color: #dde1e6 !important;
border-radius: 10px; border-radius: 10px;
" "
[disabled]="spinnerExportActive" [disabled]="spinnerExportActive"

123
src/app/content/hemat-app/monitoring/modal-export/modal-export.component.ts
View File

@ -1,9 +1,8 @@
import { Component, Input } from "@angular/core"; import { Component, Input } from "@angular/core";
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
import { DeviceService } from "../../service/device.service";
import { CostManagementService } from "../../service/cost-management.service";
import { TableexcelService } from "src/app/_services/tableexcel.service"; import { TableexcelService } from "src/app/_services/tableexcel.service";
import { LoginService } from "../../service/login.service"; import { LoginService } from "../../service/login.service";
import { BuildingService } from "../../service/monitoring-api.service";
@Component({ @Component({
selector: "app-modal-export", selector: "app-modal-export",
@ -11,8 +10,16 @@ import { LoginService } from "../../service/login.service";
styleUrls: ["./modal-export.component.css"], styleUrls: ["./modal-export.component.css"],
}) })
export class ModalExportComponent { export class ModalExportComponent {
@Input() buildingId: number; @Input() buildingId: any = 0;
@Input() dataRow: any; @Input() dataIndex: any = 0;
@Input() floorId: any = 0;
@Input() roomId: any = 0;
@Input() mode: any = "";
buildingOnly = false;
floorOnly = false;
roomOnly = false;
data: any; data: any;
filteredRows: any[]; filteredRows: any[];
data_device: any[]; data_device: any[];
@ -24,47 +31,62 @@ export class ModalExportComponent {
spinnerExportActive = false; spinnerExportActive = false;
constructor( constructor(
public activeModal: NgbActiveModal, public activeModal: NgbActiveModal,
private costService: CostManagementService,
private tableexcelService: TableexcelService, private tableexcelService: TableexcelService,
private authService: LoginService private authService: LoginService,
private monitoringService: BuildingService
) {} ) {}
ngOnInit() { ngOnInit() {
this.authService.startTokenCheck(); this.authService.startTokenCheck();
this.authService.startTrackingActivity(); this.authService.startTrackingActivity();
const dateRow = this.convertToUTC7(this.dataRow.endDate) this.fetchData();
this.formattedEndDate = dateRow.slice(0, 7);
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
console.log(this.dataRow); if (this.buildingId !== 0 && this.floorId === 0 && this.roomId === 0) {
this.fetchData( this.buildingOnly = true;
this.dataRow.categoryId, this.floorOnly = false;
this.dataRow.roomId, this.roomOnly = false;
this.formattedEndDate } else if (
); this.buildingId !== 0 &&
this.floorId !== 0 &&
this.roomId === 0
) {
this.buildingOnly = false;
this.floorOnly = true;
this.roomOnly = false;
} else if (
this.buildingId !== 0 &&
this.floorId !== 0 &&
this.roomId !== 0
) {
this.buildingOnly = false;
this.floorOnly = false;
this.roomOnly = true;
}
} }
fetchData(category, room, period) { fetchData() {
this.costService this.monitoringService
.getCostDetail(category, room, period) .getDetailChart(
this.dataIndex + 1,
this.buildingId,
this.floorId,
this.roomId
)
.subscribe((response) => { .subscribe((response) => {
this.dataExport = response.data; this.dataExport = response.data;
console.log(this.dataExport);
this.data_cost = response.data.map((item) => ({ this.data_cost = response.data.map((item) => ({
deviceName: item.device_name, BuildingName: item.building_name,
floorName: item.floor_name,
roomName: item.room_name, roomName: item.room_name,
categoryName: item.category_name, deviceName: item.device_name,
estimationCost: item.estimation_cost,
totalKwh: item.total_kwh,
watt: item.watt,
duration: item.duration, duration: item.duration,
priceKwh: item.price_kwh, priceKwh: item.price_kwh,
// periode: item.periode, estimationCost: item.estimation_cost,
periode: this.convertToUTC7(item.periode) // periode: this.convertToUTC7(item.periode)
})); }));
console.log(this.data_cost); console.log(this.data_cost);
}); });
} }
@ -80,21 +102,42 @@ export class ModalExportComponent {
export() { export() {
this.spinnerExportActive = true; this.spinnerExportActive = true;
setTimeout(() => { setTimeout(() => {
const columnsToExport = [ let columnsToExport = [];
"periode", let exportText = "";
"deviceName", if (this.mode === "building") {
"roomName", columnsToExport = [
"categoryName", "floorName",
"estimationCost", "roomName",
"totalKwh", "deviceName",
"watt", "duration",
"duration", "priceKwh",
"priceKwh", "estimationCost",
]; ];
this.tableexcelService.exportAsExcelFileManageDetail( exportText = "export_detail_monitoring_building";
} else if (this.mode === "floor") {
columnsToExport = [
"roomName",
"deviceName",
"duration",
"priceKwh",
"estimationCost",
];
exportText = "export_detail_monitoring_floor";
} else if (this.mode === "room") {
columnsToExport = [
"deviceName",
"duration",
"priceKwh",
"estimationCost",
];
exportText = "export_detail_monitoring_room";
}
this.tableexcelService.exportAsExcelFileMonitoringDetail(
this.data_cost, this.data_cost,
"export_detail_cost_management", exportText,
columnsToExport columnsToExport,
this.mode
); );
this.spinnerExportActive = false; this.spinnerExportActive = false;
this.activeModal.close("Export completed"); this.activeModal.close("Export completed");

5
src/app/content/hemat-app/service/monitoring-api.service.ts
View File

@ -160,4 +160,9 @@ export class BuildingService {
getIconData(): Observable<any> { getIconData(): Observable<any> {
return this.http.get(this.loadDataIcon, httpOptions); return this.http.get(this.loadDataIcon, httpOptions);
} }
getDetailChart(date_index: any, building_id: any, floor_id: any, room_id: any): Observable<any> {
return this.get<any>(`/dashboard/chartKwhWater/detail?date_index=${date_index}&building_id=${building_id}&floor_id=${floor_id}&room_id=${room_id}`);
}
} }