From 838c33a0ebce423b7adbea576b911104c9d3c2d5 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Fri, 29 Mar 2024 15:14:30 +0700 Subject: [PATCH] feat: create pdf and xlsx in detail rekapitulasi gangguan berdasarkan media --- .../Rekap/RGangguan_BerdasarMedia.vue | 38 ++- .../Gangguan/Rekap/RGangguan_BerdasarMedia.ts | 252 +++++++++++++++++- 2 files changed, 261 insertions(+), 29 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue index ad85f14..f86c6ee 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue @@ -155,7 +155,7 @@ :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100" - @exporting="onExporting" + @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget" > @@ -487,12 +487,6 @@ import { DxSummary, DxTotalItem } from 'devextreme-vue/data-grid' -import { jsPDF } from 'jspdf' -import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' -import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' -import { saveAs } from 'file-saver' -import { Workbook } from 'exceljs' -import { useQuery } from '@vue/apollo-composable' import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import DetailDialog from '@/components/Dialogs/DetailDialog.vue' @@ -500,7 +494,12 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference' import InputText from '@/components/InputText.vue' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' -import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia' +import { + exportToPDF, + exportDetailToPDF, + exportToXLSX, + exportDetailToXLSX +} from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia' const client = apolloClient() provideApolloClient(client) @@ -584,21 +583,18 @@ const closeDialog = () => { const onExporting = (e: any) => { if (e.format === 'pdf') { exportToPDF(reportMeta.value, data.value) + } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta.value, e) } else { - const workbook = new Workbook() - const worksheet = workbook.addWorksheet('Employees') + } +} - exportToExcel({ - component: e.component, - worksheet, - autoFilterEnabled: true - }).then(() => { - workbook.xlsx.writeBuffer().then((buffer: any) => { - saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') - }) - }) - - e.cancel = true +const onExportingDetail = (e: any) => { + if (e.format === 'pdf') { + exportDetailToPDF(reportMeta.value, dataSub.value) + } else if (e.format === 'xlsx') { + exportDetailToXLSX(reportMeta.value, e) + } else { } } diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts index 82110fd..10d8f97 100644 --- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts +++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts @@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx' import { formatNumber, formatPercentage } from '@/utils/numbers' const reportName = 'Rekapitulasi Gangguan Berdasarkan Media' +const fontSize = 5 +const detailFontSize = 3 const formatData = (rawData: any) => { const formattedData: any = [] @@ -102,7 +104,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => head: [ ['PT. PLN(Persero)', '', ''], [ - { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, + { content: 'UNIT INDUK', styles: { cellWidth: 40 } }, { content: ':', styles: { cellWidth: 1 } }, reportMeta.uid ? reportMeta.uid.name.toUpperCase() @@ -122,7 +124,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => ] ], styles: { - fontSize: 3, + fontSize, cellPadding: 0.1, textColor: [0, 0, 0], fontStyle: 'bold' @@ -137,14 +139,14 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] ], styles: { - fontSize: 3, + fontSize, cellPadding: 0.1, textColor: [0, 0, 0], fontStyle: 'bold', halign: 'center' }, theme: 'plain', - startY: 18 + startY: 25 }) autoTable(doc, { @@ -178,7 +180,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => ], body: data, styles: { - fontSize: 3, + fontSize, cellPadding: 1, lineColor: [0, 0, 0], lineWidth: 0.1, @@ -217,7 +219,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => } } }, - startY: 23 + startY: 33 }) autoTable(doc, { @@ -231,7 +233,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => ] ], styles: { - fontSize: 3, + fontSize, cellPadding: 0.1, textColor: [0, 0, 0], fontStyle: 'bold', @@ -251,4 +253,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => } } -export { exportToPDF } +const exportDetailToPDF = (reportMeta: any, rawData: any) => { + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [['PT. PLN(Persero)']], + styles: { + fontSize: detailFontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10, + margin: 5 + }) + + autoTable(doc, { + head: [ + [`Daftar Detail ${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize: detailFontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 18, + margin: 5 + }) + + autoTable(doc, { + head: [ + [ + 'No', + 'No Laporan', + 'Tgl Lapor', + 'Tgl Datang', + 'Tgl Nyala', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'Referensi Marking', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Posko', + 'Tindakan', + 'Penyebab' + ] + ], + body: rawData.map((item: any, i: any) => [ + { content: i + 1, styles: { halign: 'right' } }, + item.no_laporan, + item.waktu_lapor, + item.waktu_response, + item.waktu_recovery, + item.durasi_response_time, + item.durasi_recovery_time, + item.status_akhir, + item.referensi_marking, + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.nama_posko, + item.tindakan, + item.penyebab + ]), + styles: { + fontSize: detailFontSize, + cellPadding: 1, + lineColor: [0, 0, 0], + lineWidth: 0.1, + cellWidth: 'auto' + }, + rowPageBreak: 'auto', + headStyles: { + fillColor: [192, 192, 192], + textColor: [0, 0, 0], + fontStyle: 'bold', + cellWidth: 'wrap', + halign: 'center', + valign: 'middle' + }, + bodyStyles: { + textColor: [0, 0, 0] + }, + didParseCell: function (data) { + if (data.row.section === 'head') { + data.cell.text = data.cell.text.map(function (word: any) { + return word.toUpperCase() + }) + } + }, + startY: 24, + margin: 5 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize: detailFontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => { + console.log('pdf berhasil disimpan') + }) +} + +const exportToXLSX = (reportMeta: any, e: any) => { + const meta = formatMetaData(reportMeta) + const workbook = new Workbook() + const worksheet = workbook.addWorksheet(`${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle( + worksheet, + 2, + 1, + `UNIT INDUK : ${ + reportMeta.uid + ? reportMeta.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 3, + 1, + `UNIT PELAKSANA PELAYANAN PELANGGAN : ${ + reportMeta.up3 + ? reportMeta.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + }` + ) + setHeaderStyle( + worksheet, + 4, + 1, + `POSKO : ${ + reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 8, + 8, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:F1') + worksheet.mergeCells('A2:F2') + worksheet.mergeCells('A3:F3') + worksheet.mergeCells('A4:F4') + worksheet.mergeCells('H7:J7') + worksheet.mergeCells('H8:J8') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 10, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) + }) + }) + + e.cancel = true +} + +const exportDetailToXLSX = (reportMeta: any, e: any) => { + const meta = formatMetaData(reportMeta) + const workbook = new Workbook() + const worksheet = workbook.addWorksheet(`${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 4, + 8, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('H3:J3') + worksheet.mergeCells('H4:J4') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 6, column: 1 } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + `Laporan Detail ${reportName}.xlsx` + ) + }) + }) + + e.cancel = true +} + +export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }