From fc31b9006119a9116d6be511d0a953cca6568a7a Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Mon, 25 Mar 2024 11:52:38 +0700 Subject: [PATCH 1/3] feat: create pdf export in rekapitulasi gangguan per tanggal --- .../Gangguan/Rekap/RGangguan_PerTanggal.vue | 39 +- .../Gangguan/Rekap/RGangguan_PerTanggal.ts | 486 ++++++++++++++++++ 2 files changed, 513 insertions(+), 12 deletions(-) create mode 100644 src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue index 9abaa52..be646a0 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue @@ -2,10 +2,11 @@ - +
@@ -624,8 +625,6 @@ import { DxSearchPanel, DxSelection } 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' @@ -637,6 +636,7 @@ import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import InputText from '@/components/InputText.vue' +import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal' const client = apolloClient() provideApolloClient(client) @@ -652,6 +652,13 @@ const dialogDetail = ref(false) const loadingData = ref(false) const loadingSubData = ref(false) const filters = ref({ groupBy: false }) +const reportMeta = ref({ + uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + posko: { id: 0, name: 'Semua Posko' }, + periode: '', + groupBy: false +}) const getDetail = () => { loadingSubData.value = true @@ -713,15 +720,7 @@ const closeDialog = () => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) - }) + exportToPDF(reportMeta.value, data.value) } else { const workbook = new Workbook() const worksheet = workbook.addWorksheet('Employees') @@ -740,6 +739,11 @@ const onExporting = (e: any) => { } } +const updateFilters = (value: any) => { + filters.value = value + reportMeta.value.groupBy = value.groupBy +} + const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] @@ -784,6 +788,17 @@ const filterData = (params: any) => { console.log('loading', queryResult.loading) console.log('networkStatus', queryResult.networkStatus) console.log('stale', queryResult.stale) + + reportMeta.value = { + uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { + id: up3 ? up3.id : 0, + name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan' + }, + posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' }, + periode: params.periode, + groupBy: params.groupBy + } }) onError((error) => { diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts new file mode 100644 index 0000000..82c23c8 --- /dev/null +++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts @@ -0,0 +1,486 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' +import { formatNumber, formatPercentage } from '@/utils/numbers' + +const reportName = 'Rekapitulasi Gangguan Per Tanggal' + +const groupingData = (data: any) => { + const groupedData: any = {} + + data.forEach((item: any) => { + const { nama_uid } = item + + if (!groupedData[nama_uid]) { + groupedData[nama_uid] = [] + } + + groupedData[nama_uid].push(item) + }) + + return groupedData +} + +const formatData = (rawData: any, groupBy: boolean) => { + const formattedData: any = [] + const grandTotal: any = { + total_laporan: 0, + total_laporan_sudah_selesai: 0, + total_laporan_belum_selesai: 0, + total_response_time_total: 0, + total_response_time_rata_rata: [], + total_response_time_max: [], + total_response_time_min: [], + total_response_time_lebih_sla: 0, + total_response_time_kurang_sla: 0, + total_recovery_time_total: 0, + total_recovery_time_rata_rata: [], + total_recovery_time_max: [], + total_recovery_time_min: [], + total_recovery_time_lebih_sla: 0, + total_recovery_time_kurang_sla: 0 + } + + if (groupBy) { + const data = groupingData(rawData) + + for (const nama_uid in data) { + const total: any = { + total_laporan: 0, + total_laporan_sudah_selesai: 0, + total_laporan_belum_selesai: 0, + total_response_time_total: 0, + total_response_time_rata_rata: [], + total_response_time_max: [], + total_response_time_min: [], + total_response_time_lebih_sla: 0, + total_response_time_kurang_sla: 0, + total_recovery_time_total: 0, + total_recovery_time_rata_rata: [], + total_recovery_time_max: [], + total_recovery_time_min: [], + total_recovery_time_lebih_sla: 0, + total_recovery_time_kurang_sla: 0 + } + + formattedData.push([{ content: nama_uid, colSpan: 19, styles: { fontStyle: 'bold' } }]) + + for (let i = 0; i < data[nama_uid].length; i++) { + formattedData.push([ + { content: i + 1, styles: { halign: 'right' } }, + data[nama_uid][i].tanggal, + formatNumber(data[nama_uid][i].total), + formatNumber(data[nama_uid][i].total_selesai), + formatPercentage((data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100), + formatNumber(data[nama_uid][i].total_inproses), + formatPercentage( + data[nama_uid][i].total_inproses == null || data[nama_uid][i].total == null + ? '0%' + : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100 + ), + formatNumber(data[nama_uid][i].total_durasi_response), + formatNumber(data[nama_uid][i].avg_durasi_response), + formatWaktu(data[nama_uid][i].max_durasi_response), + formatWaktu(data[nama_uid][i].min_durasi_response), + formatNumber(data[nama_uid][i].total_diatas_sla_response), + formatNumber(data[nama_uid][i].total_dibawah_sla_response), + formatNumber(data[nama_uid][i].total_durasi_recovery), + formatNumber(data[nama_uid][i].avg_durasi_recovery), + formatWaktu(data[nama_uid][i].max_durasi_recovery), + formatWaktu(data[nama_uid][i].min_durasi_recovery), + formatNumber(data[nama_uid][i].total_diatas_sla_recovery), + formatNumber(data[nama_uid][i].total_dibawah_sla_recovery) + ]) + + total.total_laporan += data[nama_uid][i].total + total.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai + total.total_laporan_belum_selesai += data[nama_uid][i].total_inproses + total.total_response_time_total += data[nama_uid][i].total_durasi_response + total.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response) + total.total_response_time_max.push(data[nama_uid][i].max_durasi_response) + total.total_response_time_min.push(data[nama_uid][i].min_durasi_response) + total.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response + total.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response + total.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery + total.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery) + total.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery) + total.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery) + total.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery + total.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery + + grandTotal.total_laporan += data[nama_uid][i].total + grandTotal.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai + grandTotal.total_laporan_belum_selesai += data[nama_uid][i].total_inproses + grandTotal.total_response_time_total += data[nama_uid][i].total_durasi_response + grandTotal.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response) + grandTotal.total_response_time_max.push(data[nama_uid][i].max_durasi_response) + grandTotal.total_response_time_min.push(data[nama_uid][i].min_durasi_response) + grandTotal.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response + grandTotal.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response + grandTotal.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery + grandTotal.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery) + grandTotal.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery) + grandTotal.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery) + grandTotal.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery + grandTotal.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery + } + + formattedData.push([ + { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, + formatNumber(total.total_laporan), + formatNumber(total.total_laporan_sudah_selesai), + formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100), + formatNumber(total.total_laporan_belum_selesai), + formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100), + formatNumber(total.total_response_time_total), + formatNumber( + total.total_response_time_rata_rata.length + ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) / + total.total_response_time_rata_rata.length + : 0 + ), + formatWaktu(Math.max(...total.total_response_time_max)), + formatWaktu(Math.min(...total.total_response_time_min)), + formatNumber(total.total_response_time_lebih_sla), + formatNumber(total.total_response_time_kurang_sla), + formatNumber(total.total_recovery_time_total), + formatNumber( + total.total_recovery_time_rata_rata.length + ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) / + total.total_recovery_time_rata_rata.length + : 0 + ), + formatWaktu(Math.max(...total.total_recovery_time_max)), + formatWaktu(Math.min(...total.total_recovery_time_min)), + formatNumber(total.total_recovery_time_lebih_sla), + formatNumber(total.total_recovery_time_kurang_sla) + ]) + } + } else { + for (let i = 0; i < rawData.length; i++) { + formattedData.push([ + { content: i + 1, styles: { halign: 'right' } }, + rawData[i].tanggal, + formatNumber(rawData[i].total), + formatNumber(rawData[i].total_selesai), + formatPercentage((rawData[i].total_selesai / rawData[i].total) * 100), + formatNumber(rawData[i].total_inproses), + formatPercentage( + rawData[i].total_inproses == null || rawData[i].total == null + ? '0%' + : (rawData[i].total_inproses / rawData[i].total) * 100 + ), + formatNumber(rawData[i].total_durasi_response), + formatNumber(rawData[i].avg_durasi_response), + formatWaktu(rawData[i].max_durasi_response), + formatWaktu(rawData[i].min_durasi_response), + formatNumber(rawData[i].total_diatas_sla_response), + formatNumber(rawData[i].total_dibawah_sla_response), + formatNumber(rawData[i].total_durasi_recovery), + formatNumber(rawData[i].avg_durasi_recovery), + formatWaktu(rawData[i].max_durasi_recovery), + formatWaktu(rawData[i].min_durasi_recovery), + formatNumber(rawData[i].total_diatas_sla_recovery), + formatNumber(rawData[i].total_dibawah_sla_recovery) + ]) + + grandTotal.total_laporan += rawData[i].total + grandTotal.total_laporan_sudah_selesai += rawData[i].total_selesai + grandTotal.total_laporan_belum_selesai += rawData[i].total_inproses + grandTotal.total_response_time_total += rawData[i].total_durasi_response + grandTotal.total_response_time_rata_rata.push(rawData[i].avg_durasi_response) + grandTotal.total_response_time_max.push(rawData[i].max_durasi_response) + grandTotal.total_response_time_min.push(rawData[i].min_durasi_response) + grandTotal.total_response_time_lebih_sla += rawData[i].total_diatas_sla_response + grandTotal.total_response_time_kurang_sla += rawData[i].total_dibawah_sla_response + grandTotal.total_recovery_time_total += rawData[i].total + grandTotal.total_recovery_time_rata_rata.push(rawData[i].avg_durasi_recovery) + grandTotal.total_recovery_time_max.push(rawData[i].max_durasi_recovery) + grandTotal.total_recovery_time_min.push(rawData[i].min_durasi_recovery) + grandTotal.total_recovery_time_lebih_sla += rawData[i].total_diatas_sla_recovery + grandTotal.total_recovery_time_kurang_sla += rawData[i].total_dibawah_sla_recovery + } + } + + formattedData.push([ + { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, + formatNumber(grandTotal.total_laporan), + formatNumber(grandTotal.total_laporan_sudah_selesai), + formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100), + formatNumber(grandTotal.total_laporan_belum_selesai), + formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100), + formatNumber(grandTotal.total_response_time_total), + formatNumber( + grandTotal.total_response_time_rata_rata.length + ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) / + grandTotal.total_response_time_rata_rata.length + : 0 + ), + formatWaktu(Math.max(...grandTotal.total_response_time_max)), + formatWaktu(Math.min(...grandTotal.total_response_time_min)), + formatNumber(grandTotal.total_response_time_lebih_sla), + formatNumber(grandTotal.total_response_time_kurang_sla), + formatNumber(grandTotal.total_recovery_time_total), + formatNumber( + grandTotal.total_recovery_time_rata_rata.length + ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) / + grandTotal.total_recovery_time_rata_rata.length + : 0 + ), + formatWaktu(Math.max(...grandTotal.total_recovery_time_max)), + formatWaktu(Math.min(...grandTotal.total_recovery_time_min)), + formatNumber(grandTotal.total_recovery_time_lebih_sla), + formatNumber(grandTotal.total_recovery_time_kurang_sla) + ]) + + return formattedData +} + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => { + const data = formatData(rawData, reportMeta.groupBy) + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + const fontSize = 5 + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 40 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.uid + ? reportMeta.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.up3 + ? reportMeta.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'POSKO', + ':', + reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 23 + }) + + autoTable(doc, { + head: [ + [ + { + content: 'No', + rowSpan: 3 + }, + { + content: 'Tanggal Lapor', + rowSpan: 3 + }, + { + content: 'Laporan', + colSpan: 5 + }, + { + content: 'Response Time', + colSpan: 6 + }, + { + content: 'Recovery Time', + colSpan: 6 + } + ], + [ + { + content: 'Total', + rowSpan: 2 + }, + { + content: 'Sudah Selesai', + colSpan: 2 + }, + { + content: 'Belum Selesai', + colSpan: 2 + }, + { + content: 'Menit', + colSpan: 4 + }, + { + content: 'Laporan', + colSpan: 2 + }, + { + content: 'Menit', + colSpan: 4 + }, + { + content: 'Laporan', + colSpan: 2 + } + ], + [ + 'Jml', + '%', + 'Jml', + '%', + 'Total', + 'Rata-Rata', + 'Max', + 'Min', + '>Sla', + 'Sla', + ' { + console.log('pdf berhasil disimpan') + }) + } +} + +export { exportToPDF } From fe0343f0ed97f2ce673e409b1ef63b56c298070f Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Mon, 25 Mar 2024 14:44:08 +0700 Subject: [PATCH 2/3] feat: create pdf export in rekapitulasi gangguan berdasarkan media --- .../Rekap/RGangguan_BerdasarMedia.vue | 20 +- .../Gangguan/Rekap/RGangguan_BerdasarMedia.ts | 254 ++++++++++++++++++ 2 files changed, 265 insertions(+), 9 deletions(-) create mode 100644 src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue index a9626eb..9d330a1 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue @@ -3,6 +3,7 @@ @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" + @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4" > @@ -500,6 +501,7 @@ 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' const client = apolloClient() provideApolloClient(client) @@ -514,6 +516,12 @@ const dataSubSelected = ref() const dialogDetail = ref(false) const loadingData = ref(false) const loadingSubData = ref(false) +const reportMeta = ref({ + uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + posko: { id: 0, name: 'Semua Posko' }, + periode: '' +}) const getDetail = () => { loadingSubData.value = true @@ -575,15 +583,7 @@ const closeDialog = () => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) - }) + exportToPDF(reportMeta.value, data.value) } else { const workbook = new Workbook() const worksheet = workbook.addWorksheet('Employees') @@ -638,6 +638,8 @@ const filterData = (params: any) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia } + + reportMeta.value = filters.value }) onError((error) => { diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts new file mode 100644 index 0000000..82110fd --- /dev/null +++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts @@ -0,0 +1,254 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' +import { formatNumber, formatPercentage } from '@/utils/numbers' + +const reportName = 'Rekapitulasi Gangguan Berdasarkan Media' + +const formatData = (rawData: any) => { + const formattedData: any = [] + const grandTotal: any = { + ...Array(31) + .fill(0) + .reduce((acc, _, i) => { + acc[`tgl${i + 1}`] = 0 + return acc + }, {}), + total: 0 + } + + for (let i = 0; i < rawData.length; i++) { + formattedData.push([ + { content: i + 1, styles: { halign: 'right' } }, + rawData[i].media, + ...Array(31) + .fill(0) + .map((_, j) => { + const key = `tgl${j + 1}` + const value = rawData[i][key] || 0 + grandTotal[key] = (grandTotal[key] || 0) + value + return formatNumber(value) + }), + formatNumber(rawData[i].total) + ]) + + grandTotal.total += rawData[i].total + } + + formattedData.push([ + { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, + ...Array(31) + .fill(0) + .map((_, i) => { + const key = `tgl${i + 1}` + return formatNumber(grandTotal[key]) + }), + formatNumber(grandTotal.total) + ]) + + return formattedData +} + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => { + const data = formatData(rawData) + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 25 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.uid + ? reportMeta.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.up3 + ? reportMeta.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'POSKO', + ':', + reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase() + ] + ], + styles: { + fontSize: 3, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize: 3, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 18 + }) + + autoTable(doc, { + head: [ + [ + { + content: 'No', + rowSpan: 2 + }, + { + content: 'Nama Media', + rowSpan: 2 + }, + { + content: 'Tanggal', + colSpan: 31 + }, + { + content: 'Total', + rowSpan: 2 + } + ], + [ + ...Array(31) + .fill(0) + .map((_, i) => i + 1) + .map((item) => ({ + content: item + })) + ] + ], + body: data, + styles: { + fontSize: 3, + 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() + }) + } + + if (data.cell.text[0] === 'TOTAL') { + for (const key in data.row.cells) { + data.row.cells[key].styles.fillColor = [192, 192, 192] + data.row.cells[key].styles.fontStyle = 'bold' + } + } + + if (data.cell.text[0] === 'GRAND TOTAL') { + for (const key in data.row.cells) { + data.row.cells[key].styles.fillColor = [192, 192, 192] + data.row.cells[key].styles.fontStyle = 'bold' + } + } + }, + startY: 23 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize: 3, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + if (preview) { + window.open(doc.output('bloburl')) + } else { + doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { + console.log('pdf berhasil disimpan') + }) + } +} + +export { exportToPDF } From 72a2217c5aece139b74bc1d8af2cb48e4cedafa7 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Mon, 25 Mar 2024 15:08:26 +0700 Subject: [PATCH 3/3] feat: create export pdf in rekapitulasi gangguan alih posko --- .../Gangguan/Rekap/RGangguan_AlihPosko.vue | 20 +- .../Gangguan/Rekap/RGangguan_AlihPosko.ts | 250 ++++++++++++++++++ 2 files changed, 261 insertions(+), 9 deletions(-) create mode 100644 src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue index 50605bf..be50b13 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue @@ -3,6 +3,7 @@ @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" + @run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4" > @@ -515,6 +516,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference' import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' +import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko' const client = apolloClient() provideApolloClient(client) @@ -529,6 +531,12 @@ const dataSubSelected = ref() const dialogDetail = ref(false) const loadingData = ref(false) const loadingSubData = ref(false) +const reportMeta = ref({ + uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + posko: { id: 0, name: 'Semua Posko' }, + periode: '' +}) const getDetail = () => { loadingSubData.value = true @@ -586,15 +594,7 @@ const closeDialog = () => { const onExporting = (e: any) => { if (e.format === 'pdf') { - const doc = new jsPDF() - - exportToPdf({ - jsPDFDocument: doc, - component: e.component, - indent: 5 - }).then(() => { - doc.save(`.pdf`) - }) + exportToPDF(reportMeta.value, data.value) } else { const workbook = new Workbook() const worksheet = workbook.addWorksheet('Employees') @@ -658,6 +658,8 @@ const filterData = (params: any) => { } }) } + + reportMeta.value = filters.value }) onError((error) => { diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts new file mode 100644 index 0000000..199d904 --- /dev/null +++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts @@ -0,0 +1,250 @@ +import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' +import { + Document, + AlignmentType, + Packer, + Paragraph, + Table, + TableCell, + TableRow, + VerticalAlign, + TextRun, + WidthType, + PageOrientation +} from 'docx' +import { saveAs } from 'file-saver' +import { jsPDF } from 'jspdf' +import autoTable from 'jspdf-autotable' +import { Workbook } from 'exceljs' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import { setHeaderStyle } from '@/report/utils/xlsx' +import { formatNumber } from '@/utils/numbers' + +const reportName = 'Rekapitulasi Gangguan Alih Posko' + +const groupingData = (data: any) => { + const groupedData: any = {} + + data.forEach((item: any) => { + const { nama_uid } = item + + if (!groupedData[nama_uid]) { + groupedData[nama_uid] = [] + } + + groupedData[nama_uid].push(item) + }) + + return groupedData +} + +const formatData = (rawData: any) => { + const data = groupingData(rawData) + const formattedData: any = [] + const grandTotal: any = { + posko_in: 0, + posko_out: 0 + } + + for (const nama_uid in data) { + const total: any = { + posko_in: 0, + posko_out: 0 + } + + formattedData.push([{ content: nama_uid, colSpan: 5, styles: { fontStyle: 'bold' } }]) + + for (let i = 0; i < data[nama_uid].length; i++) { + formattedData.push([ + { content: i + 1, styles: { halign: 'right' } }, + data[nama_uid][i].nama_up3, + data[nama_uid][i].nama_posko, + formatNumber(data[nama_uid][i].posko_in), + formatNumber(data[nama_uid][i].posko_out) + ]) + + total.posko_in += data[nama_uid][i].posko_in + total.posko_out += data[nama_uid][i].posko_out + + grandTotal.posko_in += data[nama_uid][i].posko_in + grandTotal.posko_out += data[nama_uid][i].posko_out + } + + formattedData.push([ + { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, + '', + formatNumber(total.posko_in), + formatNumber(total.posko_out) + ]) + } + + formattedData.push([ + { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, + '', + formatNumber(grandTotal.posko_in), + formatNumber(grandTotal.posko_out) + ]) + + return formattedData +} + +const formatMetaData = (reportMeta: any) => { + const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : '' + + let dateFromFormat = '' + let dateToFormat = '' + let dayTo = '' + + if (periode != '') { + const dateFrom = new Date(periode[0].split('-').reverse().join('-')) + const dateTo = new Date(periode[1].split('-').reverse().join('-')) + + dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', { + month: 'long' + })}-${dateFrom.getFullYear()}` + + dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', { + month: 'long' + })}-${dateTo.getFullYear()}` + + dayTo = dateTo.toLocaleString('default', { weekday: 'long' }) + } + + return { dateFromFormat, dateToFormat, dayTo } +} + +const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => { + const data = formatData(rawData) + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + const fontSize = 5 + + autoTable(doc, { + head: [ + ['PT. PLN(Persero)', '', ''], + [ + { content: 'UNIT INDUK', styles: { cellWidth: 40 } }, + { content: ':', styles: { cellWidth: 1 } }, + reportMeta.uid + ? reportMeta.uid.name.toUpperCase() + : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase() + ], + [ + 'UNIT PELAKSANA PELAYANAN PELANGGAN', + ':', + reportMeta.up3 + ? reportMeta.up3.name.toUpperCase() + : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase() + ], + [ + 'POSKO', + ':', + reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase() + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold' + }, + theme: 'plain', + startY: 10 + }) + + autoTable(doc, { + head: [ + [`${reportName}`.toUpperCase()], + [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + startY: 23 + }) + + autoTable(doc, { + head: [['No', 'Nama UP3', 'Nama Posko', 'Posko In', 'Posko Out']], + body: data, + styles: { + fontSize, + 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() + }) + } + + if (data.cell.text[0] === 'TOTAL') { + for (const key in data.row.cells) { + data.row.cells[key].styles.fillColor = [192, 192, 192] + data.row.cells[key].styles.fontStyle = 'bold' + } + } + + if (data.cell.text[0] === 'GRAND TOTAL') { + for (const key in data.row.cells) { + data.row.cells[key].styles.fillColor = [192, 192, 192] + data.row.cells[key].styles.fontStyle = 'bold' + } + } + }, + startY: 30 + }) + + autoTable(doc, { + head: [ + [`${meta.dayTo}, ${meta.dateToFormat}`], + [ + { + content: '(.........................................)', + styles: { minCellHeight: 8, valign: 'bottom' } + } + ] + ], + styles: { + fontSize, + cellPadding: 0.1, + textColor: [0, 0, 0], + fontStyle: 'bold', + halign: 'center' + }, + theme: 'plain', + tableWidth: 50, + margin: { left: 230 } + }) + + if (preview) { + window.open(doc.output('bloburl')) + } else { + doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { + console.log('pdf berhasil disimpan') + }) + } +} + +export { exportToPDF }