defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create export pdf and xlsx in rekapitulasi keluhan per fungsi bidang

Browse Source
This commit is contained in:
kur0nek-o 2024-04-02 12:27:00 +07:00
parent 57beb6eb2d
commit 740d1188cc
5 changed files with 810 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
View File

@ -6,7 +6,7 @@
:report-button="true"
class="mb-4"
>
<Type9 @update:filters="(value) => updateFilters(value)" />
<Type9 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
@ -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)

7
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
View File

@ -6,7 +6,7 @@
:report-button="true"
class="mb-4"
>
<Type9 @update:filters="(value) => updateFilters(value)" />
<Type9 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
@ -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]

66
src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
View File

@ -1,5 +1,6 @@
<template>
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
@ -445,7 +446,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -763,6 +764,7 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
</template>
@ -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 {
}
}

29
src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
View File

@ -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,

757
src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts Normal file
View File

@ -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',
'Total',
'Rata-Rata',
'Max',
'Min',
'>Sla',
'<Sla'
]
],
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) {
doc.setProperties({
title: `${reportName}`
})
window.open(doc.output('bloburl'))
} else {
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
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 }