From 57beb6eb2d3f1320b55311ebd27ef3550d993595 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Tue, 2 Apr 2024 10:55:40 +0700 Subject: [PATCH 01/29] feat: create export xlsx in rekapitulasi keluhan all --- src/assets/css/style.css | 4 -- .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue | 13 +++++- src/report/Keluhan/Rekap/RKeluhan_ALL.ts | 43 +++++++++++-------- 3 files changed, 37 insertions(+), 23 deletions(-) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 7e3d44c..bd90444 100755 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -5545,10 +5545,6 @@ body { grid-column-start: 2; } - .sm\:m-8 { - margin: 2rem; - } - .sm\:mx-0 { margin-left: 0px; margin-right: 0px; diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue index d0dbca1..3f32559 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue @@ -8,6 +8,7 @@ > +
+ @@ -731,7 +733,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import InputText from '@/components/InputText.vue' import Filters from '@/components/Form/Filters.vue' import Type3 from '@/components/Form/FiltersType/Type3.vue' -import { ref, onMounted, watch } from 'vue' +import { ref, onMounted } from 'vue' import { DxDataGrid } from 'devextreme-vue' import { DxColumn, @@ -752,7 +754,12 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' -import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL' +import { + exportToPDF, + exportDetailToPDF, + exportToXLSX, + exportDetailToXLSX +} from '@/report/Keluhan/Rekap/RKeluhan_ALL' import BufferDialog from '@/components/Dialogs/BufferDialog.vue' const client = apolloClient() @@ -986,6 +993,7 @@ const onExporting = (e: any) => { if (e.format === 'pdf') { exportToPDF(reportMeta.value, data.value) } else if (e.format === 'xlsx') { + exportToXLSX(reportMeta.value, e) } else { } } @@ -994,6 +1002,7 @@ 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/Keluhan/Rekap/RKeluhan_ALL.ts b/src/report/Keluhan/Rekap/RKeluhan_ALL.ts index 100cda0..f322b2f 100644 --- a/src/report/Keluhan/Rekap/RKeluhan_ALL.ts +++ b/src/report/Keluhan/Rekap/RKeluhan_ALL.ts @@ -567,32 +567,37 @@ const exportToXLSX = (reportMeta: any, e: any) => { worksheet, 4, 1, - `POSKO : ${ - reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase() + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.ulp + ? reportMeta.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() }` ) - setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true) + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) setHeaderStyle( worksheet, - 8, - 8, + 7, + 1, `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') + worksheet.mergeCells('A1:Q1') + worksheet.mergeCells('A2:Q2') + worksheet.mergeCells('A3:Q3') + worksheet.mergeCells('A4:Q4') + worksheet.mergeCells('A6:Q6') + worksheet.mergeCells('A7:Q7') exportToExcel({ component: e.component, worksheet, autoFilterEnabled: true, - topLeftCell: { row: 10, column: 1 } + topLeftCell: { row: 9, column: 1 }, + loadPanel: { + enabled: false + } }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) @@ -608,23 +613,27 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => { const worksheet = workbook.addWorksheet(`Detail ${reportName}`) setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') - setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true) + setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true) setHeaderStyle( worksheet, 4, - 8, + 1, `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, true ) - worksheet.mergeCells('H3:J3') - worksheet.mergeCells('H4:J4') + worksheet.mergeCells('A1:P1') + worksheet.mergeCells('A3:P3') + worksheet.mergeCells('A4:P4') exportToExcel({ component: e.component, worksheet, autoFilterEnabled: true, - topLeftCell: { row: 6, column: 1 } + topLeftCell: { row: 6, column: 1 }, + loadPanel: { + enabled: false + } }).then(() => { workbook.xlsx.writeBuffer().then((buffer: any) => { saveAs( From 740d1188cc7e377f40c6f1132b5324c300a122d3 Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Tue, 2 Apr 2024 12:27:00 +0700 Subject: [PATCH 02/29] feat: create export pdf and xlsx in rekapitulasi keluhan per fungsi bidang --- .../Gangguan/Rekap/RGangguan_PerRegu.vue | 7 +- .../Gangguan/Rekap/RGangguan_PerTanggal.vue | 7 +- .../Rekap/RKeluhan_PerFungsiBidang.vue | 66 +- .../Gangguan/Rekap/RGangguan_PerRegu.ts | 29 +- .../Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts | 757 ++++++++++++++++++ 5 files changed, 810 insertions(+), 56 deletions(-) create mode 100644 src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue index b15482e..d87b76f 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue @@ -6,7 +6,7 @@ :report-button="true" class="mb-4" > - +
@@ -998,11 +998,6 @@ const closeDialog = () => { dialogDetail.value = false } -const updateFilters = (value: any) => { - filters.value = value - reportMeta.value.groupBy = value.groupBy -} - const onExporting = (e: any) => { if (e.format === 'pdf') { exportToPDF(reportMeta.value, data.value) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue index cff22f2..ed20356 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue @@ -6,7 +6,7 @@ :report-button="true" class="mb-4" > - +
@@ -767,11 +767,6 @@ const onExportingDetail = (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] diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue index c2eeab3..42a16a9 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue @@ -1,5 +1,6 @@ @@ -771,7 +773,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import InputText from '@/components/InputText.vue' import Filters from '@/components/Form/Filters.vue' import Type13 from '@/components/Form/FiltersType/Type13.vue' -import { ref, onMounted, watch } from 'vue' +import { ref, onMounted } from 'vue' import { DxDataGrid } from 'devextreme-vue' import { DxColumn, @@ -787,18 +789,18 @@ import { DxSelection, DxGrouping } 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 { formatWaktu } from '@/components/Form/FiltersType/reference' import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' import BufferDialog from '@/components/Dialogs/BufferDialog.vue' +import { + exportToPDF, + exportToXLSX, + exportDetailToPDF, + exportDetailToXLSX +} from '@/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang' const client = apolloClient() provideApolloClient(client) @@ -817,6 +819,13 @@ const loadingSubData = ref(false) const agreeToShowDialog = ref(false) const progressSelected = ref(0) const isGroupBy = ref(false) +const reportMeta = ref({ + uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' }, + periode: '', + groupBy: false +}) const setAgreementDialog = (status: boolean, progress: number) => { agreeToShowDialog.value = status @@ -863,6 +872,14 @@ const filterData = async (params: any) => { } ) } + + reportMeta.value = { + uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' }, + periode: params.periode, + groupBy: params.groupBy + } } else { data.value = [] } @@ -930,30 +947,19 @@ const showDetail = () => { 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 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_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts index e9b8ca1..d378cdc 100644 --- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts +++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts @@ -686,27 +686,27 @@ const exportToXLSX = (reportMeta: any, e: any) => { }` ) - setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true) + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) setHeaderStyle( worksheet, - 8, - 8, + 7, + 1, `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') + worksheet.mergeCells('A1:T1') + worksheet.mergeCells('A2:T2') + worksheet.mergeCells('A3:T3') + worksheet.mergeCells('A4:T4') + worksheet.mergeCells('A6:T6') + worksheet.mergeCells('A7:T7') exportToExcel({ component: e.component, worksheet, autoFilterEnabled: true, - topLeftCell: { row: 10, column: 1 }, + topLeftCell: { row: 9, column: 1 }, loadPanel: { enabled: false } @@ -725,17 +725,18 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => { const worksheet = workbook.addWorksheet(`Detail ${reportName}`) setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') - setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true) + setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true) setHeaderStyle( worksheet, 4, - 8, + 1, `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, true ) - worksheet.mergeCells('H3:J3') - worksheet.mergeCells('H4:J4') + worksheet.mergeCells('A1:Q1') + worksheet.mergeCells('A3:Q3') + worksheet.mergeCells('A4:Q4') exportToExcel({ component: e.component, diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts b/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts new file mode 100644 index 0000000..5b1b4f8 --- /dev/null +++ b/src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts @@ -0,0 +1,757 @@ +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 Keluhan Per Fungsi Bidang' +const fontSize = 5 +const detailFontSize = 3 + +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].fungsi_bidang, + formatNumber(data[nama_uid][i].total), + formatNumber(data[nama_uid][i].total_selesai), + formatPercentage( + !data[nama_uid][i].total || !data[nama_uid][i].total_selesai + ? '0%' + : (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 || !data[nama_uid][i].total + ? '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 || !total.total_laporan_sudah_selesai + ? '0%' + : (total.total_laporan_sudah_selesai / total.total_laporan) * 100 + ), + formatNumber(total.total_laporan_belum_selesai), + formatPercentage( + !total.total_laporan || !total.total_laporan_belum_selesai + ? '0%' + : (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].fungsi_bidang, + formatNumber(rawData[i].total), + formatNumber(rawData[i].total_selesai), + formatPercentage( + !rawData[i].total || !rawData[i].total_selesai + ? '0%' + : (rawData[i].total_selesai / rawData[i].total) * 100 + ), + formatNumber(rawData[i].total_inproses), + formatPercentage( + !rawData[i].total_inproses || !rawData[i].total + ? '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 || !grandTotal.total_laporan_sudah_selesai + ? '0%' + : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100 + ), + formatNumber(grandTotal.total_laporan_belum_selesai), + formatPercentage( + !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai + ? '0%' + : (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' + }) + + 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() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.ulp + ? reportMeta.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.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: 'Fungsi Bidang', + rowSpan: 3 + }, + { + content: 'Laporan', + colSpan: 5 + }, + { + content: 'Response Time', + colSpan: 6 + }, + { + content: 'Penyelesaian', + colSpan: 6 + } + ], + [ + { + content: 'Total', + rowSpan: 2 + }, + { + content: 'Sudah Selesai', + colSpan: 2 + }, + { + content: 'Belum Selesai', + colSpan: 2 + }, + { + content: 'Hari', + colSpan: 4 + }, + { + content: 'Laporan', + colSpan: 2 + }, + { + content: 'Hari', + colSpan: 4 + }, + { + content: 'Laporan', + colSpan: 2 + } + ], + [ + 'Jml', + '%', + 'Jml', + '%', + 'Total', + 'Rata-Rata', + 'Max', + 'Min', + '>Sla', + 'Sla', + ' { + console.log('pdf berhasil disimpan') + }) + } +} + +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', + 'Dalam Proses Bidang', + 'Selesai Bidang Unit', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Rayon', + 'Uraian', + 'Response Pelanggan' + ] + ], + body: rawData.map((item: any, i: any) => [ + { content: i + 1, styles: { halign: 'right' } }, + item.no_laporan, + item.waktu_lapor, + '', + '', + item.durasi_response_time, + item.durasi_recovery_time, + '', + item.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + '', + '', + '' + ]), + 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, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.ulp + ? reportMeta.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:S1') + worksheet.mergeCells('A2:S2') + worksheet.mergeCells('A3:S3') + worksheet.mergeCells('A4:S4') + worksheet.mergeCells('A6:S6') + worksheet.mergeCells('A7:S7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 9, column: 1 }, + loadPanel: { + enabled: false + } + }).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(`Detail ${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 4, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:P1') + worksheet.mergeCells('A3:P3') + worksheet.mergeCells('A4:P4') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 6, column: 1 }, + loadPanel: { + enabled: false + } + }).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 } From 232ac14df1c55278666bb6000f93928da574bbc6 Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Tue, 2 Apr 2024 13:39:21 +0700 Subject: [PATCH 03/29] Fix showDetail function in RGangguan_ALL, RGangguan_CTTM, and RGangguan_BerdasarMedia --- src/components/DatePicker.vue | 2 +- .../Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue | 601 +++++++++++++++++- .../Pages/Gangguan/Rekap/RGangguan_ALL.vue | 2 +- .../Rekap/RGangguan_BerdasarMedia.vue | 2 +- .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue | 2 +- .../Pages/Gangguan/Rekap/RGangguan_KTI.vue | 38 +- .../Rekap/MonalisaKR_JumlahKaliKeluhan.vue | 3 +- src/utils/api/api.graphql.ts | 8 + 8 files changed, 647 insertions(+), 11 deletions(-) diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue index 1821a2f..31bb88e 100755 --- a/src/components/DatePicker.vue +++ b/src/components/DatePicker.vue @@ -4,7 +4,7 @@ import { ref, watch } from 'vue' import VueTailwindDatepicker from 'vue-tailwind-datepicker' const dateValue = ref( - `${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}` + `${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()}` ) const formatter = ref({ date: 'DD-MM-YYYY', diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue index 8e93a94..700f12b 100755 --- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue +++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue @@ -19,7 +19,7 @@ column-resizing-mode="widget" :word-wrap-enabled="true" > - + @@ -31,7 +31,32 @@ :allow-export-selected-data="false" /> - + + + @@ -153,8 +178,528 @@ }}

+ + + + + + + + + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

UIW/D:

+ +
+ +
+

UP3:

+ +
+ +
+

Rayon:

+ +
+ +
+

IDPEL:

+ +
+ +
+

NOMETER:

+ +
+ +
+

No. Telpon:

+ +
+ +
+

Nama:

+ +
+ +
+

Alamat:

+ +
+ +
+

Sumber Lapor:

+ +
+ +
+

No Laporan:

+ +
+ +
+

08:

+ +
+ +
+

70:

+ +
+ +
+

71:

+ +
+ +
+

41:

+ +
+ +
+

44:

+ +
+ +
+

45:

+ +
+ +
+

46:

+ +
+ +
+

37:

+ +
+ +
+

47:

+ +
+ +
+

Jenis DLPD:

+ +
+ +
+

Keterangan DLPD:

+ +
+ +
+

Bulan Tahun DLPD:

+ +
+ +
+

No. Agenda P2TL:

+ +
+ +
+

Tgl Mohon P2T:

+ +
+ +
+

Tgl Sah P2TL:

+ +
+ +
+

Tgl/Jam Lapor:

+ +
+ +
+

Petugas Regu:

+ +
+ +
+

User VCC:

+ +
+
+
+ + @@ -165,12 +710,15 @@ import { DxColumn, DxColumnFixing, DxExport, + DxGroupItem, DxGrouping, DxLoadPanel, + DxPager, DxPaging, DxScrolling, DxSearchPanel, - DxSelection + DxSelection, + DxSummary } from 'devextreme-vue/data-grid' import { jsPDF } from 'jspdf' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' @@ -185,6 +733,9 @@ import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import BufferDialog from '@/components/Dialogs/BufferDialog.vue' +import DetailDialog from '@/components/Dialogs/DetailDialog.vue' +import { formatWaktu } from '@/components/Form/FiltersType/reference' +import InputText from '@/components/InputText.vue' const client = apolloClient() provideApolloClient(client) @@ -201,6 +752,46 @@ const closedialogDetail = () => (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) +let cc123 = 0 +let plnMobile = 0 +let comcen = 0 +const calculateCustomSummary = (options: any) => { + if (options.name === 'wo_cc123') { + if (options.summaryProcess === 'calculate') { + cc123 += options.value + } else if (options.summaryProcess === 'finalize') { + options.totalValue = cc123 + } + } + + if (options.name === 'wo_pln_mobile') { + if (options.summaryProcess === 'calculate') { + plnMobile += options.value + } else if (options.summaryProcess === 'finalize') { + options.totalValue = plnMobile + } + } + + if (options.name === 'wo_comcen') { + if (options.summaryProcess === 'calculate') { + comcen += options.value + } else if (options.summaryProcess === 'finalize') { + options.totalValue = comcen + } + } + + if (options.name === 'wo_total') { + if (options.summaryProcess === 'start') { + plnMobile = 0 + cc123 = 0 + comcen = 0 + } else if (options.summaryProcess === 'calculate') { + } else if (options.summaryProcess === 'finalize') { + options.totalValue = plnMobile + cc123 + comcen + } + } +} + const onExporting = (e: any) => { if (e.format === 'pdf') { const doc = new jsPDF() @@ -230,6 +821,8 @@ const onExporting = (e: any) => { } } +const onExportingDetail = (e: any) => {} + const resetData = () => { data.value = [] dataSub.value = [] diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue index 1df7965..b0066ab 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue @@ -1325,7 +1325,7 @@ const showDetail = () => { if (agreeToShowDialog.value) { dataSub.value = [] dataSubSelected.value = null - // getDetail() + getDetail() } } diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue index 5f911f9..8b75939 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue @@ -562,7 +562,7 @@ const showDetail = () => { dataSub.value = [] dataSubSelected.value = null if (date.value != '') { - // getDetail() + getDetail() } } diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue index a42800c..a533ade 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue @@ -544,7 +544,7 @@ const showDetail = () => { clearSelection() dataSubSelected.value = null if (monthSelected.value != null) { - // getDetail() + getDetail() } } diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue index 010b76a..f5b1872 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue @@ -75,6 +75,15 @@ name="UIDGroup" :group-index="2" /> + { const getDetail = async () => { loadingSubData.value = true + const { jenisTransaksi } = filters.value const dateValue = filters.value.periode.split(' s/d ') const ref = dataSelected.value const compDate = dateValue[0].split('-').reverse().join('-').split('-') @@ -1185,11 +1195,35 @@ const getDetail = async () => { dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), - posko: ref?.id_posko ? ref?.id_posko : 0, + posko: ref?.id_ulp ? ref?.id_ulp : 0, idUid: ref?.id_uid ? ref?.id_uid : 0, idUp3: ref?.id_up3 ? ref?.id_up3 : 0, bulan: monthSelected.value, - tahun: parseInt(compDate[0]) + tahun: parseInt(compDate[0]), + is_transaksi_individual: + jenisTransaksi.length == 4 || jenisTransaksi.length == 0 + ? 0 + : jenisTransaksi.includes('Koreksi Transaksi Individual') + ? 1 + : 2, + is_cleansing_transaksi_tm: + jenisTransaksi.length == 4 || jenisTransaksi.length == 0 + ? 0 + : jenisTransaksi.includes('Cleansing Traksaksi TM') + ? 1 + : 2, + is_koreksi_transaksi_tm: + jenisTransaksi.length == 4 || jenisTransaksi.length == 0 + ? 0 + : jenisTransaksi.includes('Koreksi Transaksi TM') + ? 1 + : 2, + is_koreksi_gangguan_dan_anev: + jenisTransaksi.length == 4 || jenisTransaksi.length == 0 + ? 0 + : jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev') + ? 1 + : 2 } loadingSubData.value = true diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue index d6b1cd2..5f1284d 100755 --- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue +++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue @@ -399,7 +399,8 @@ const getDetail = async () => { : new Date().toISOString().slice(0, 10), idUlp: selected?.id_ulp ? selected?.id_ulp : 0, idUid: selected?.id_uid ? selected?.id_uid : 0, - idUp3: selected?.id_up3 ? selected?.id_up3 : 0 + idUp3: selected?.id_up3 ? selected?.id_up3 : 0, + isSelesai: 0 } loadingSubData.value = true diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts index 666698b..b3ba376 100755 --- a/src/utils/api/api.graphql.ts +++ b/src/utils/api/api.graphql.ts @@ -1090,6 +1090,10 @@ export const queries = { $posko: Int! $idUid: Int! $idUp3: Int! + $is_transaksi_individual: Int! + $is_cleansing_transaksi_tm: Int! + $is_koreksi_transaksi_tm: Int! + $is_koreksi_gangguan_dan_anev: Int! ) { detailGangguanKoreksiTransaksiIndividu( dateFrom: $dateFrom @@ -1097,6 +1101,10 @@ export const queries = { posko: $posko idUid: $idUid idUp3: $idUp3 + is_transaksi_individual: $is_transaksi_individual + is_cleansing_transaksi_tm: $is_cleansing_transaksi_tm + is_koreksi_transaksi_tm: $is_koreksi_transaksi_tm + is_koreksi_gangguan_dan_anev: $is_koreksi_gangguan_dan_anev ) { id no_laporan From 024844d9b76c320fe07d937b7b7f5235d1a46977 Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Tue, 2 Apr 2024 14:56:47 +0700 Subject: [PATCH 04/29] Add custom summary calculations to RGangguan_PerTanggal.vue --- .../Gangguan/Rekap/RGangguan_PerTanggal.vue | 204 +++++++++++++++++- 1 file changed, 202 insertions(+), 2 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue index cff22f2..51af73a 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue @@ -53,7 +53,7 @@ :width="120" alignment="center" data-field="nama_uid" - caption="Nama UID" + caption="UID" css-class="custom-table-column" group-index="0" v-if="isGroupBy" @@ -296,6 +296,155 @@ {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}

+ + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -645,7 +794,9 @@ import { DxPaging, DxScrolling, DxSearchPanel, - DxSelection + DxSelection, + DxSummary, + DxTotalItem } from 'devextreme-vue/data-grid' import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' @@ -835,6 +986,55 @@ const filterData = async (params: any) => { }) } +let total = 0 +let total_selesai = 0 +let persen_selesai = 0 +let total_inproses = 0 +let persen_inproses = 0 +const calculateCustomSummary = (options: any) => { + if (options.name === 'total') { + if (options.summaryProcess === 'calculate') { + total += options.value + } else if (options.summaryProcess === 'finalize') { + options.totalValue = total + } + } + + if (options.name === 'total_selesai') { + if (options.summaryProcess === 'calculate') { + total_selesai += options.value + } else if (options.summaryProcess === 'finalize') { + options.totalValue = total_selesai + } + } + + if (options.name === 'total_inproses') { + if (options.summaryProcess === 'calculate') { + total_inproses += options.value + } else if (options.summaryProcess === 'finalize') { + options.totalValue = total_inproses + } + } + + if (options.name === 'persen_selesai') { + if (options.summaryProcess === 'start') { + total = 0 + total_selesai = 0 + } else if (options.summaryProcess === 'finalize') { + options.totalValue = (total_selesai / total) * 100 + } + } + + if (options.name === 'persen_inproses') { + if (options.summaryProcess === 'start') { + total = 0 + total_inproses = 0 + } else if (options.summaryProcess === 'finalize') { + options.totalValue = (total_inproses / total) * 100 + } + } +} + onMounted(() => { if (import.meta.env.DEV) { data.value = [ From 02cbd62c42e6d48df39adc8f64c5ca0ae6c96969 Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Tue, 2 Apr 2024 15:02:33 +0700 Subject: [PATCH 05/29] Add margin utility class for small screens --- src/assets/css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/css/style.css b/src/assets/css/style.css index bd90444..7e3d44c 100755 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -5545,6 +5545,10 @@ body { grid-column-start: 2; } + .sm\:m-8 { + margin: 2rem; + } + .sm\:mx-0 { margin-left: 0px; margin-right: 0px; From 14a7a9bcace087ed7a026c45c8fb4d802afde5be Mon Sep 17 00:00:00 2001 From: kur0nek-o Date: Tue, 2 Apr 2024 16:04:45 +0700 Subject: [PATCH 06/29] feat: create export pdf in rekapitulasi keluhan per jenis keluhan --- .../Rekap/RKeluhan_PerJenisKeluhan.vue | 59 +- .../Gangguan/Rekap/RGangguan_JenisGangguan.ts | 1 - .../Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts | 730 ++++++++++++++++++ 3 files changed, 759 insertions(+), 31 deletions(-) create mode 100644 src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue index 16492a2..4cdd0b6 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue @@ -1,5 +1,6 @@ @@ -914,7 +916,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import InputText from '@/components/InputText.vue' import Filters from '@/components/Form/Filters.vue' import Type3 from '@/components/Form/FiltersType/Type3.vue' -import { ref, onMounted, watch } from 'vue' +import { ref, onMounted } from 'vue' import { DxDataGrid } from 'devextreme-vue' import { DxColumn, @@ -931,18 +933,18 @@ import { DxGroupItem, DxGrouping } 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 { formatWaktu } from '@/components/Form/FiltersType/reference' import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers' import { apolloClient } from '@/utils/api/api.graphql' import { provideApolloClient } from '@vue/apollo-composable' import BufferDialog from '@/components/Dialogs/BufferDialog.vue' +import { + exportToPDF, + exportToXLSX, + exportDetailToPDF, + exportDetailToXLSX +} from '@/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan' const client = apolloClient() provideApolloClient(client) @@ -960,6 +962,12 @@ const loadingData = ref(false) const loadingSubData = ref(false) const agreeToShowDialog = ref(false) const progressSelected = ref(0) +const reportMeta = ref({ + uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, + up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, + ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' }, + periode: '' +}) const setAgreementDialog = (status: boolean, progress: number) => { agreeToShowDialog.value = status @@ -1003,6 +1011,8 @@ const filterData = async (params: any) => { } else { data.value = [] } + + reportMeta.value = filters.value }) .catch((err) => { console.error(err) @@ -1067,30 +1077,19 @@ const showDetail = () => { 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 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_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts index 3b62883..85e814e 100644 --- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts +++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts @@ -272,7 +272,6 @@ const formatMetaData = (reportMeta: any) => { const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => { const data = formatData(rawData) - console.log(data) const meta = formatMetaData(reportMeta) const doc = new jsPDF({ orientation: 'landscape' diff --git a/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts b/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts new file mode 100644 index 0000000..51d701d --- /dev/null +++ b/src/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.ts @@ -0,0 +1,730 @@ +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 Keluhan Per Jenis Keluhan' +const fontSize = 5 +const detailFontSize = 3 + +const groupingData = (data: any) => { + const groupedData: any = {} + + data.forEach((item: any) => { + const { grouping_tipe_keluhan } = item + + if (!groupedData[grouping_tipe_keluhan]) { + groupedData[grouping_tipe_keluhan] = [] + } + + groupedData[grouping_tipe_keluhan].push(item) + }) + + return groupedData +} + +const formatData = (rawData: any) => { + const data = groupingData(rawData) + 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 + } + + for (const key of Object.keys(data)) { + const grouping_tipe_keluhan = key + + 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: grouping_tipe_keluhan, + colSpan: 19, + styles: { fontStyle: 'bold' } + } + ]) + + for (let i = 0; i < data[grouping_tipe_keluhan].length; i++) { + formattedData.push([ + { content: i + 1, styles: { halign: 'right' } }, + data[grouping_tipe_keluhan][i].tipe_keluhan, + formatNumber(data[grouping_tipe_keluhan][i].total), + formatNumber(data[grouping_tipe_keluhan][i].total_selesai), + formatPercentage( + !data[grouping_tipe_keluhan][i].total || !data[grouping_tipe_keluhan][i].total_selesai + ? '0%' + : (data[grouping_tipe_keluhan][i].total_selesai / + data[grouping_tipe_keluhan][i].total) * + 100 + ), + formatNumber(data[grouping_tipe_keluhan][i].total_inproses), + formatPercentage( + !data[grouping_tipe_keluhan][i].total_inproses || !data[grouping_tipe_keluhan][i].total + ? '0%' + : (data[grouping_tipe_keluhan][i].total_inproses / + data[grouping_tipe_keluhan][i].total) * + 100 + ), + formatNumber(data[grouping_tipe_keluhan][i].total_durasi_response), + formatNumber(data[grouping_tipe_keluhan][i].avg_durasi_response), + formatWaktu(data[grouping_tipe_keluhan][i].max_durasi_response), + formatWaktu(data[grouping_tipe_keluhan][i].min_durasi_response), + formatNumber(data[grouping_tipe_keluhan][i].total_diatas_sla_response), + formatNumber(data[grouping_tipe_keluhan][i].total_dibawah_sla_response), + formatNumber(data[grouping_tipe_keluhan][i].total_durasi_recovery), + formatNumber(data[grouping_tipe_keluhan][i].avg_durasi_recovery), + formatWaktu(data[grouping_tipe_keluhan][i].max_durasi_recovery), + formatWaktu(data[grouping_tipe_keluhan][i].min_durasi_recovery), + formatNumber(data[grouping_tipe_keluhan][i].total_diatas_sla_recovery), + formatNumber(data[grouping_tipe_keluhan][i].total_dibawah_sla_recovery) + ]) + + total.total_laporan += data[grouping_tipe_keluhan][i].total + total.total_laporan_sudah_selesai += data[grouping_tipe_keluhan][i].total_selesai + total.total_laporan_belum_selesai += data[grouping_tipe_keluhan][i].total_inproses + total.total_response_time_total += data[grouping_tipe_keluhan][i].total_durasi_response + total.total_response_time_rata_rata.push(data[grouping_tipe_keluhan][i].avg_durasi_response) + total.total_response_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_response) + total.total_response_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_response) + total.total_response_time_lebih_sla += + data[grouping_tipe_keluhan][i].total_diatas_sla_response + total.total_response_time_kurang_sla += + data[grouping_tipe_keluhan][i].total_dibawah_sla_response + total.total_recovery_time_total += data[grouping_tipe_keluhan][i].total_durasi_recovery + total.total_recovery_time_rata_rata.push(data[grouping_tipe_keluhan][i].avg_durasi_recovery) + total.total_recovery_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_recovery) + total.total_recovery_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_recovery) + total.total_recovery_time_lebih_sla += + data[grouping_tipe_keluhan][i].total_diatas_sla_recovery + total.total_recovery_time_kurang_sla += + data[grouping_tipe_keluhan][i].total_dibawah_sla_recovery + + grandTotal.total_laporan += data[grouping_tipe_keluhan][i].total + grandTotal.total_laporan_sudah_selesai += data[grouping_tipe_keluhan][i].total_selesai + grandTotal.total_laporan_belum_selesai += data[grouping_tipe_keluhan][i].total_inproses + grandTotal.total_response_time_total += data[grouping_tipe_keluhan][i].total_durasi_response + grandTotal.total_response_time_rata_rata.push( + data[grouping_tipe_keluhan][i].avg_durasi_response + ) + grandTotal.total_response_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_response) + grandTotal.total_response_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_response) + grandTotal.total_response_time_lebih_sla += + data[grouping_tipe_keluhan][i].total_diatas_sla_response + grandTotal.total_response_time_kurang_sla += + data[grouping_tipe_keluhan][i].total_dibawah_sla_response + grandTotal.total_recovery_time_total += data[grouping_tipe_keluhan][i].total_durasi_recovery + grandTotal.total_recovery_time_rata_rata.push( + data[grouping_tipe_keluhan][i].avg_durasi_recovery + ) + grandTotal.total_recovery_time_max.push(data[grouping_tipe_keluhan][i].max_durasi_recovery) + grandTotal.total_recovery_time_min.push(data[grouping_tipe_keluhan][i].min_durasi_recovery) + grandTotal.total_recovery_time_lebih_sla += + data[grouping_tipe_keluhan][i].total_diatas_sla_recovery + grandTotal.total_recovery_time_kurang_sla += + data[grouping_tipe_keluhan][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 + ? '0%' + : (total.total_laporan_sudah_selesai / total.total_laporan) * 100 + ), + formatNumber(total.total_laporan_belum_selesai), + formatPercentage( + !total.total_laporan_belum_selesai || !total.total_laporan + ? '0%' + : (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) + ]) + } + + formattedData.push([ + { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } }, + formatNumber(grandTotal.total_laporan), + formatNumber(grandTotal.total_laporan_sudah_selesai), + formatPercentage( + !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai + ? '0%' + : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100 + ), + formatNumber(grandTotal.total_laporan_belum_selesai), + formatPercentage( + !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai + ? '0%' + : (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) + const meta = formatMetaData(reportMeta) + const doc = new jsPDF({ + orientation: 'landscape' + }) + + 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() + ], + [ + 'UNIT LAYANAN PELANGGAN', + ':', + reportMeta.ulp + ? reportMeta.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.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: 'Jenis Keluhan', + rowSpan: 3 + }, + { + content: 'Laporan', + colSpan: 5 + }, + { + content: 'Response Time', + colSpan: 6 + }, + { + content: 'Penyelesaian', + colSpan: 6 + } + ], + [ + { + content: 'Total', + rowSpan: 2 + }, + { + content: 'Sudah Selesai', + colSpan: 2 + }, + { + content: 'Belum Selesai', + colSpan: 2 + }, + { + content: 'Hari', + colSpan: 4 + }, + { + content: 'Laporan', + colSpan: 2 + }, + { + content: 'Hari', + colSpan: 4 + }, + { + content: 'Laporan', + colSpan: 2 + } + ], + [ + 'Jml', + '%', + 'Jml', + '%', + 'Total', + 'Rata-Rata', + 'Max', + 'Min', + '>Sla', + 'Sla', + ' { + console.log('pdf berhasil disimpan') + }) + } +} + +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', + 'Dalam Proses Bidang', + 'Selesai Bidang Unit', + 'Durasi Response Time', + 'Durasi Recovery Time', + 'Status', + 'IDPEL/NO METER', + 'Nama Pelapor', + 'Alamat Pelapor', + 'No Telp Pelapor', + 'Keterangan Pelapor', + 'Rayon', + 'Uraian', + 'Response Pelanggan' + ] + ], + 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.idpel_nometer, + item.nama_pelapor, + item.alamat_pelapor, + item.no_telp_pelapor, + item.keterangan_pelapor, + item.nama_ulp, + item.uraian, + item.respon_pelanggan + ]), + 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, + `UNIT LAYANAN PELANGGAN : ${ + reportMeta.ulp + ? reportMeta.ulp.name.toUpperCase() + : 'Semua Unit Layanan Pelanggan'.toUpperCase() + }` + ) + + setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 7, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:S1') + worksheet.mergeCells('A2:S2') + worksheet.mergeCells('A3:S3') + worksheet.mergeCells('A4:S4') + worksheet.mergeCells('A6:S6') + worksheet.mergeCells('A7:S7') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 10, column: 1 }, + loadPanel: { + enabled: false + } + }).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(`Detail ${reportName}`) + + setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)') + setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true) + setHeaderStyle( + worksheet, + 4, + 1, + `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`, + true + ) + + worksheet.mergeCells('A1:P1') + worksheet.mergeCells('A3:P3') + worksheet.mergeCells('A4:P4') + + exportToExcel({ + component: e.component, + worksheet, + autoFilterEnabled: true, + topLeftCell: { row: 6, column: 1 }, + loadPanel: { + enabled: false + } + }).then(() => { + workbook.xlsx.writeBuffer().then((buffer: any) => { + saveAs( + new Blob([buffer], { type: 'application/octet-stream' }), + `Laporan Detail ${reportName}.xlsx` + ) + }) + }) + + e.cancel = true +} + +export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX } From ef01593dea562c5c219f486459e4762d73274cff Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Tue, 2 Apr 2024 16:22:01 +0700 Subject: [PATCH 07/29] Refactor table cell templates in RGangguan_AlihPosko.vue --- .../Gangguan/Rekap/RGangguan_AlihPosko.vue | 50 +++++++++++++++---- src/utils/api/api.graphql.ts | 4 +- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue index 3fa738e..ecde4da 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue @@ -79,7 +79,7 @@ data-field="posko_in" caption="Posko IN" css-class="custom-table-column" - cell-template="formatNumber" + cell-template="formatNumberPoskoIn" /> @@ -96,6 +96,7 @@ column="number" display-format="Total" css-class="!text-left" + :customize-text="(e: any) => formatNumber(e.value)" /> + + + +