diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue index bbd8201..70cf528 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue @@ -4,6 +4,7 @@ @@ -794,6 +795,7 @@ import InputText from '@/components/InputText.vue' 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_JenisGangguanSE' const client = apolloClient() provideApolloClient(client) @@ -808,6 +810,12 @@ const dataSubSelected = ref(null) 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 closeDialog = () => { dialogDetail.value = false @@ -815,15 +823,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') @@ -865,6 +865,8 @@ const filterData = (params: any) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiJenisGangguanSE004 } + + reportMeta.value = filters.value }) onError((queryError) => { diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue index ddbdb43..3306129 100755 --- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue +++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue @@ -56,6 +56,7 @@ :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" + cell-template="formatNumber" /> - + @@ -56,7 +56,7 @@ /> (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanAll, { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - idUlp: 0, - idUid: 0, - idUp3: 0 -}) - const filterData = (params: any) => { const { ulp, uid, up3 } = params const dateValue = params.periode.split(' s/d ') - refetch({ + const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanAll, { dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), @@ -836,7 +831,6 @@ const filterData = (params: any) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiKeluhanAll } - console.log(queryResult.data) }) onError((error) => { @@ -848,17 +842,52 @@ const filterData = (params: any) => { }) } -const getDetail = () => { - dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll +const getDetail = async () => { + loadingSubData.value = true + const dateValue = filters.value.periode.split(' s/d ') + const selected = dataSelected.value + + const query = { + dateFrom: dateValue[0] + ? dateValue[0].split('-').reverse().join('-') + : new Date().toISOString().slice(0, 10), + dateTo: dateValue[1] + ? dateValue[1].split('-').reverse().join('-') + : 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 + } + + const result = useQuery(queries.keluhan.rekap.rekapKeluhanAllDetail, query) + + result.onResult((queryResult) => { + if (queryResult.data != undefined) { + dataSub.value = queryResult.data.detailRekapitulasiKeluhanAll + } + }) + + result.onError((error) => { + console.log(error) + }) + + watch(result.loading, (value) => { + loadingSubData.value = value + }) } const dataGridRef = ref(null) const clearSelection = () => { - const dataGrid = dataGridRef.value!.instance! - dataGrid.clearSelection() + try { + dataGridRef.value?.instance?.clearSelection() + } catch (error) { + console.log(error) + } } const showDetail = () => { clearSelection() + dataSub.value = [] + dataSubSelected.value = null dialogDetail.value = true getDetail() } @@ -895,14 +924,13 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } - showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] dataSubSelected.value = data - console.log(data) } const filters = ref() diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts new file mode 100644 index 0000000..3fc8529 --- /dev/null +++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts @@ -0,0 +1,445 @@ +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/Jenis Gangguan SE 004' + +const groupingData = (data: any) => { + const groupedData: any = {} + + data.forEach((item: any) => { + const { id_fasilitas } = item + + if (!groupedData[id_fasilitas]) { + groupedData[id_fasilitas] = [] + } + + groupedData[id_fasilitas].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 id_fasilitas 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: id_fasilitas, colSpan: 20, styles: { fontStyle: 'bold' } }]) + + for (let i = 0; i < data[id_fasilitas].length; i++) { + formattedData.push([ + { content: i + 1, styles: { halign: 'right' } }, + data[id_fasilitas][i].kode, + data[id_fasilitas][i].sub_kelompok, + formatNumber(data[id_fasilitas][i].total), + formatNumber(data[id_fasilitas][i].total_selesai), + formatPercentage((data[id_fasilitas][i].total_selesai / data[id_fasilitas][i].total) * 100), + formatNumber(data[id_fasilitas][i].total_inproses), + formatPercentage( + data[id_fasilitas][i].total_inproses == null || data[id_fasilitas][i].total == null + ? '0%' + : (data[id_fasilitas][i].total_inproses / data[id_fasilitas][i].total) * 100 + ), + formatNumber(data[id_fasilitas][i].total_durasi_response), + formatNumber(data[id_fasilitas][i].avg_durasi_response), + formatWaktu(data[id_fasilitas][i].max_durasi_response), + formatWaktu(data[id_fasilitas][i].min_durasi_response), + formatNumber(data[id_fasilitas][i].total_diatas_sla_response), + formatNumber(data[id_fasilitas][i].total_dibawah_sla_response), + formatNumber(data[id_fasilitas][i].total_durasi_recovery), + formatNumber(data[id_fasilitas][i].avg_durasi_recovery), + formatWaktu(data[id_fasilitas][i].max_durasi_recovery), + formatWaktu(data[id_fasilitas][i].min_durasi_recovery), + formatNumber(data[id_fasilitas][i].total_diatas_sla_recovery), + formatNumber(data[id_fasilitas][i].total_dibawah_sla_recovery) + ]) + + total.total_laporan += data[id_fasilitas][i].total + total.total_laporan_sudah_selesai += data[id_fasilitas][i].total_selesai + total.total_laporan_belum_selesai += data[id_fasilitas][i].total_inproses + total.total_response_time_total += data[id_fasilitas][i].total_durasi_response + total.total_response_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_response) + total.total_response_time_max.push(data[id_fasilitas][i].max_durasi_response) + total.total_response_time_min.push(data[id_fasilitas][i].min_durasi_response) + total.total_response_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_response + total.total_response_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_response + total.total_recovery_time_total += data[id_fasilitas][i].total_durasi_recovery + total.total_recovery_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_recovery) + total.total_recovery_time_max.push(data[id_fasilitas][i].max_durasi_recovery) + total.total_recovery_time_min.push(data[id_fasilitas][i].min_durasi_recovery) + total.total_recovery_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_recovery + total.total_recovery_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_recovery + + grandTotal.total_laporan += data[id_fasilitas][i].total + grandTotal.total_laporan_sudah_selesai += data[id_fasilitas][i].total_selesai + grandTotal.total_laporan_belum_selesai += data[id_fasilitas][i].total_inproses + grandTotal.total_response_time_total += data[id_fasilitas][i].total_durasi_response + grandTotal.total_response_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_response) + grandTotal.total_response_time_max.push(data[id_fasilitas][i].max_durasi_response) + grandTotal.total_response_time_min.push(data[id_fasilitas][i].min_durasi_response) + grandTotal.total_response_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_response + grandTotal.total_response_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_response + grandTotal.total_recovery_time_total += data[id_fasilitas][i].total_durasi_recovery + grandTotal.total_recovery_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_recovery) + grandTotal.total_recovery_time_max.push(data[id_fasilitas][i].max_durasi_recovery) + grandTotal.total_recovery_time_min.push(data[id_fasilitas][i].min_durasi_recovery) + grandTotal.total_recovery_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_recovery + grandTotal.total_recovery_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_recovery + } + + formattedData.push([ + { content: 'TOTAL', colSpan: 3, 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) + ]) + } + + formattedData.push([ + { content: 'GRAND TOTAL', colSpan: 3, 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) + 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: 'Kode', + rowSpan: 3 + }, + { + content: 'Sub Kelompok (Equipment)', + styles: { cellWidth: 25 }, + 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 } diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts index 214e4f8..804bcee 100755 --- a/src/utils/api/api.graphql.ts +++ b/src/utils/api/api.graphql.ts @@ -680,6 +680,47 @@ export const queries = { total_diatas_sla_recovery } } + `, + rekapKeluhanAllDetail: gql` + query detailRekapitulasiKeluhanAll( + $dateFrom: Date! + $dateTo: Date! + $idUlp: Int! + $idUid: Int! + $idUp3: Int! + ) { + detailRekapitulasiKeluhanAll( + dateFrom: $dateFrom + dateTo: $dateTo + idUlp: $idUlp + idUid: $idUid + idUp3: $idUp3 + ) { + id + no_laporan + pembuat_laporan + waktu_lapor + waktu_response + waktu_recovery + durasi_dispatch_time + durasi_response_time + durasi_recovery_time + status_akhir + idpel_nometer + nama_pelapor + alamat_pelapor + no_telp_pelapor + keterangan_pelapor + media + jarak_closing + dispatch_oleh + diselesaikan_oleh + penyebab + tindakan + kode_gangguan + jenis_gangguan + } + } ` } },