Merge branch 'dev-bagus' of https://github.com/defuj/eis into dev-defuj

This commit is contained in:
Dede Fuji Abdul 2024-03-31 21:17:07 +07:00
commit aa45bea79f
16 changed files with 4390 additions and 1400 deletions

View File

@ -310,13 +310,12 @@ import {
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import autoTable from 'jspdf-autotable' import {
exportToPDF,
exportToXLSX,
exportToDOCX
} from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -347,191 +346,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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' })
}
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF({ exportToPDF(reportMeta, data)
orientation: 'landscape' } else if (e.format === 'xlsx') {
}) exportToXLSX(reportMeta, e)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
['Daftar Keluhan Berdasarkan Media'.toUpperCase()],
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Status',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Response Time',
'Recovery Time',
'Sumber Lapor',
'Tgl Media',
'Keterangan Media'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.status_akhir,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.media,
item.waktu_media,
item.keterangan_media
]),
styles: {
fontSize: 3,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center'
},
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: 23
})
autoTable(doc, {
head: [
[`${dayTo}, ${dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc.save('Laporan Daftar Keluhan Berdasarkan Media.pdf', { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
} else { } else {
const workbook = new Workbook() exportToDOCX(reportMeta, data)
const worksheet = workbook.addWorksheet('Daftar Keluhan Berdasarkan Media')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'Daftar Keluhan Berdasarkan Media.xlsx'
)
})
})
e.cancel = true
} }
} }

View File

@ -345,14 +345,9 @@ import {
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { jsPDF } from 'jspdf' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
import autoTable from 'jspdf-autotable'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -362,201 +357,25 @@ const data = ref<any[]>([])
const dataSelected = ref<any>({}) const dataSelected = ref<any>({})
const dialogDetail = ref(false) const dialogDetail = ref(false)
const loading = ref(false) const loading = ref(false)
const filters = ref()
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 showDetail = () => (dialogDetail.value = true) const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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' })
}
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF({ exportToPDF(reportMeta, data)
orientation: 'landscape' } else if (e.format === 'xlsx') {
}) exportToXLSX(reportMeta, e)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
['Daftar Keluhan Dialihkan Ke Unit Lain'.toUpperCase()],
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Pembuat Laporan',
'Tgl Lapor',
'Tgl Dialihkan',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Unit Asal',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.pembuat_laporan,
item.waktu_lapor,
item.waktu_dialihkan,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.nama_unit_lama,
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor
]),
styles: {
fontSize: 3,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center'
},
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: 23
})
autoTable(doc, {
head: [
[`${dayTo}, ${dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc
.save('Laporan Daftar Keluhan Dialihkan Ke Unit Lain.pdf', { returnPromise: true })
.then(() => {
console.log('pdf berhasil disimpan')
})
} else { } else {
const workbook = new Workbook() exportToDOCX(reportMeta, data)
const worksheet = workbook.addWorksheet('Daftar Keluhan Dialihkan Ke Unit Lain')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'Daftar Keluhan Dialihkan Ke Unit Lain.xlsx'
)
})
})
e.cancel = true
} }
} }
const dataGridRef = ref<DxDataGrid | null>(null) const dataGridRef = ref<DxDataGrid | null>(null)
@ -612,14 +431,6 @@ const filterData = async (params: any) => {
}) })
} }
const filters = ref()
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: ''
})
onMounted(() => { onMounted(() => {
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
data.value = [ data.value = [

View File

@ -450,14 +450,9 @@ import {
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, isNumber } from '@/utils/numbers'
import autoTable from 'jspdf-autotable' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -472,7 +467,6 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false) const loadingData = ref(false)
const loadingSubData = ref(false) const loadingSubData = ref(false)
const detailType = ref('form') // form, table const detailType = ref('form') // form, table
const filters = ref() const filters = ref()
const reportMeta = ref({ const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -546,196 +540,12 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const closeDialog = () => (dialogDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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' })
}
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF({ exportToPDF(reportMeta, data)
orientation: 'landscape' } else if (e.format === 'xlsx') {
}) exportToXLSX(reportMeta, e)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
],
['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
['Daftar Keluhan Pelanggan Lebih Dari 1 Kali'.toUpperCase()],
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Jml Lapor',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Sumber Lapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_selesai,
item.jumlah_lapor,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.media,
item.nama_ulp
]),
styles: {
fontSize: 3,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center'
},
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: 23
})
autoTable(doc, {
head: [
[`${dayTo}, ${dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc
.save('Laporan Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf', { returnPromise: true })
.then(() => {
console.log('pdf berhasil disimpan')
})
} else { } else {
const workbook = new Workbook() exportToDOCX(reportMeta, data)
const worksheet = workbook.addWorksheet('Daftar Keluhan Pelanggan Lebih Dari 1 Kali')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'Daftar Keluhan Pelanggan Lebih Dari 1 Kali.xlsx'
)
})
})
e.cancel = true
} }
} }

View File

@ -312,13 +312,12 @@ import {
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import autoTable from 'jspdf-autotable' import {
exportToPDF,
exportToDOCX,
exportToXLSX
} from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -349,201 +348,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
let dateFromFormat = ''
let dateToFormat = ''
let dayTo = ''
let durasi = ''
if (minTime == '4382' && maxTime != '143998560') {
durasi = 'Melebihi SLA (>3 hari)'
} else if (minTime == '1' && maxTime == '4381') {
durasi = 'Dibawah / Sesuai SLA (<=3 hari)'
} else {
durasi = 'Durasi Menit'
}
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' })
}
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF({ exportToPDF(reportMeta, data)
orientation: 'landscape' } else if (e.format === 'xlsx') {
}) exportToXLSX(reportMeta, e)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
],
['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
['Daftar Keluhan Recovery Time'.toUpperCase()],
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(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
]),
styles: {
fontSize: 3,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center'
},
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: 23
})
autoTable(doc, {
head: [
[`${dayTo}, ${dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc.save('Laporan Daftar Keluhan Recovery Time.pdf', { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
} else { } else {
const workbook = new Workbook() exportToDOCX(reportMeta, data)
const worksheet = workbook.addWorksheet('Daftar Keluhan Recovery Time')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'Daftar Keluhan Recovery Time.xlsx'
)
})
})
e.cancel = true
} }
} }

View File

@ -330,14 +330,13 @@ import {
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import autoTable from 'jspdf-autotable' import {
exportToPDF,
exportToXLSX,
exportToDOCX
} from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -368,201 +367,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
let dateFromFormat = ''
let dateToFormat = ''
let dayTo = ''
let durasi = ''
if (minTime == '1502' && maxTime != '143998560') {
durasi = 'Melebihi SLA (>1 hari)'
} else if (minTime == '1' && maxTime == '1501') {
durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
} else {
durasi = 'Durasi Menit'
}
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' })
}
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF({ exportToPDF(reportMeta, data)
orientation: 'landscape' } else if (e.format === 'xlsx') {
}) exportToXLSX(reportMeta, e)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
],
['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
['Daftar Keluhan Response Time'.toUpperCase()],
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(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
]),
styles: {
fontSize: 3,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center'
},
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: 23
})
autoTable(doc, {
head: [
[`${dayTo}, ${dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc.save('Laporan Daftar Keluhan Response Time.pdf', { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
} else { } else {
const workbook = new Workbook() exportToDOCX(reportMeta, data)
const worksheet = workbook.addWorksheet('Daftar Keluhan Response Time')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'Daftar Keluhan Response Time.xlsx'
)
})
})
e.cancel = true
} }
} }

View File

@ -303,13 +303,8 @@ import {
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import autoTable from 'jspdf-autotable' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -340,193 +335,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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' })
}
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF({ exportToPDF(reportMeta, data)
orientation: 'landscape' } else if (e.format === 'xlsx') {
}) exportToXLSX(reportMeta, e)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
['Daftar Keluhan Selesai Tanpa ID Pelanggan'.toUpperCase()],
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Sumber Lapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.media,
item.nama_ulp
]),
styles: {
fontSize: 3,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center'
},
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: 23
})
autoTable(doc, {
head: [
[`${dayTo}, ${dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc
.save('Laporan Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf', { returnPromise: true })
.then(() => {
console.log('pdf berhasil disimpan')
})
} else { } else {
const workbook = new Workbook() exportToDOCX(reportMeta, data)
const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai Tanpa ID Pelanggan')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'Daftar Keluhan Selesai Tanpa ID Pelanggan.xlsx'
)
})
})
e.cancel = true
} }
} }

View File

@ -322,15 +322,9 @@ import {
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
import autoTable from 'jspdf-autotable'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
@ -361,197 +355,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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' })
}
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF({ exportToPDF(reportMeta, data)
orientation: 'landscape' } else if (e.format === 'xlsx') {
}) exportToXLSX(reportMeta, e)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
['Daftar Keluhan Selesai di Contact Center'.toUpperCase()],
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Contact Center',
'UI Dist.',
'ULP',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Tlp Pelapor',
'Keterangan Pelapor',
'APKT Status',
'Created By',
'Tgl Penyelesaian',
'Lapor Ulang',
'Sumber Lapor',
'Issue Type',
'Sub Issue Type'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.nama_ulp,
item.nama_uid,
item.nama_ulp,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.status_akhir,
item.nama_pelapor,
item.waktu_recovery,
item.jumlah_lapor,
item.media,
item.nama_issuetype,
item.nama_subissuetype
]),
styles: {
fontSize: 3,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center'
},
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: 23
})
autoTable(doc, {
head: [
[`${dayTo}, ${dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize: 3,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
doc
.save('Laporan Daftar Keluhan Selesai di Contact Center.pdf', { returnPromise: true })
.then(() => {
console.log('pdf berhasil disimpan')
})
} else { } else {
const workbook = new Workbook() exportToDOCX(reportMeta, data)
const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai di Contact Center')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'Daftar Keluhan Selesai di Contact Center.xlsx'
)
})
})
e.cancel = true
} }
} }

View File

@ -1,5 +1,6 @@
<template> <template>
<Filters <Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
@reset-form="data = []" @reset-form="data = []"
@run-search="() => filterData(filters)" @run-search="() => filterData(filters)"
:report-button="true" :report-button="true"
@ -418,7 +419,7 @@
:hover-state-enabled="true" :hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged" @selection-changed="onDataSubSelectionChanged"
:column-width="100" :column-width="100"
@exporting="onExporting" @exporting="onExportingDetail"
:allow-column-resizing="true" :allow-column-resizing="true"
column-resizing-mode="widget" column-resizing-mode="widget"
> >
@ -761,17 +762,12 @@ import {
DxGroupItem, DxGroupItem,
DxGrouping DxGrouping
} from 'devextreme-vue/data-grid' } 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -792,6 +788,12 @@ const progressSelected = ref(0)
const groupIndex = ref(0) const groupIndex = ref(0)
const groupDialog = ref(false) const groupDialog = ref(false)
const groupData = ref<any>(null) const groupData = ref<any>(null)
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 onCellClicked = (e: any) => { const onCellClicked = (e: any) => {
console.log('cell clicked', e) console.log('cell clicked', e)
@ -881,6 +883,8 @@ const filterData = async (params: any) => {
} else { } else {
data.value = [] data.value = []
} }
reportMeta.value = filters.value
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err)
@ -994,30 +998,17 @@ const showDetail = () => {
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else { } else {
const workbook = new Workbook() }
const worksheet = workbook.addWorksheet('Employees') }
exportToExcel({ const onExportingDetail = (e: any) => {
component: e.component, if (e.format === 'pdf') {
worksheet, exportDetailToPDF(reportMeta.value, dataSub.value)
autoFilterEnabled: true } else if (e.format === 'xlsx') {
}).then(() => { } else {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
} }
} }

View File

@ -0,0 +1,512 @@
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'
const reportName = 'Daftar Keluhan Berdasarkan Media'
const fontSize = 4
const docxFontSize = 6
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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, data: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 35 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.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: 25
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Status',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Response Time',
'Recovery Time',
'Sumber Lapor',
'Tgl Media',
'Keterangan Media'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.status_akhir,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.media,
item.waktu_media,
item.keterangan_media
]),
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'
},
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: 35
})
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 }
})
doc.save(`Laporan ${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.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.value.posko
? reportMeta.value.posko.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:O1')
worksheet.mergeCells('A2:O2')
worksheet.mergeCells('A3:O3')
worksheet.mergeCells('A4:O4')
worksheet.mergeCells('A6:O6')
worksheet.mergeCells('A7:O7')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 9, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
{ text: item.no_laporan, field: 'no_laporan' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: item.alamat_pelapor, field: 'alamat_pelapor' },
{ text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
{ text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
{ text: item.status_akhir, field: 'status_akhir' },
{ text: item.waktu_lapor, field: 'waktu_lapor' },
{ text: item.waktu_response, field: 'waktu_response' },
{ text: item.waktu_recovery, field: 'waktu_recovery' },
{
text: parseInt(item.durasi_response_time)
? formatWaktu(item.durasi_response_time)
: '-',
field: 'durasi_response_time'
},
{
text: parseInt(item.durasi_recovery_time)
? formatWaktu(item.durasi_recovery_time)
: '-',
field: 'durasi_recovery_time'
},
{ text: item.media, field: 'media' },
{ text: item.waktu_media, field: 'waktu_media' },
{ text: item.keterangan_media, field: 'keterangan_media' }
].map(
(cell) =>
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({
text: cell.text,
size: docxFontSize
})
]
})
],
verticalAlign: VerticalAlign.CENTER,
margins: { top: 0, bottom: 0, right: 0, left: 30 }
})
)
})
})
}
const doc = new Document({
sections: [
{
properties: {
page: {
size: {
orientation: PageOrientation.LANDSCAPE
}
}
},
children: [
new Paragraph({
children: [
new TextRun({
text: 'PT. PLN(Persero)',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT INDUK : ${
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT LAYANAN PELANGGAN : ${
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `${reportName}`.toUpperCase(),
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Table({
width: {
size: 13950,
type: WidthType.DXA
},
rows: [
new TableRow({
children: [
{ text: 'No', field: 'no' },
{ text: 'No Laporan', field: 'no_laporan' },
{ text: 'Nama Pelapor', field: 'nama_pelapor' },
{ text: 'Alamat Pelapor', field: 'alamat_pelapor' },
{ text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
{ text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
{ text: 'Status', field: 'status_akhir' },
{ text: 'Tgl Lapor', field: 'waktu_lapor' },
{ text: 'Tgl Response', field: 'waktu_response' },
{ text: 'Tgl Recovery', field: 'waktu_recovery' },
{ text: 'Response Time', field: 'durasi_response_time' },
{ text: 'Recovery Time', field: 'durasi_recovery_time' },
{ text: 'Sumber Lapor', field: 'media' },
{ text: 'Tgl Media', field: 'waktu_media' },
{ text: 'Keterangan Media', field: 'keterangan_media' }
].map(
(header) =>
new TableCell({
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: header.text,
bold: true,
size: docxFontSize,
allCaps: true
})
]
})
],
verticalAlign: VerticalAlign.CENTER
})
)
}),
...generateRows()
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: `${meta.dayTo}, ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: '(.........................................)',
bold: true,
size: docxFontSize
})
]
})
]
}
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
}
export { exportToPDF, exportToXLSX, exportToDOCX }

View File

@ -0,0 +1,528 @@
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'
const reportName = 'Daftar Keluhan Dialihkan Ke Unit Lain'
const fontSize = 4
const docxFontSize = 8
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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, data: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 35 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.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: [
['Daftar Keluhan Dialihkan Ke Unit Lain'.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: 25
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Pembuat Laporan',
'Tgl Lapor',
'Tgl Dialihkan',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Unit Asal',
'Unit Tujuan',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Sumber Lapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.pembuat_laporan,
item.waktu_lapor,
item.waktu_dialihkan,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.nama_unit_lama,
item.nama_unit_baru,
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.media,
item.nama_ulp
]),
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'
},
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: 35
})
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 }
})
doc.save(`Laporan ${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.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.value.posko
? reportMeta.value.posko.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 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
{ text: item.no_laporan, field: 'no_laporan' },
{ text: item.pembuat_laporan, field: 'pembuat_laporan' },
{ text: item.waktu_lapor, field: 'waktu_lapor' },
{ text: item.waktu_dialihkan, field: 'waktu_dialihkan' },
{ text: item.waktu_response, field: 'waktu_response' },
{ text: item.waktu_recovery, field: 'waktu_recovery' },
{
text: parseInt(item.durasi_response_time)
? formatWaktu(item.durasi_response_time)
: '-',
field: 'durasi_response_time'
},
{
text: parseInt(item.durasi_recovery_time)
? formatWaktu(item.durasi_recovery_time)
: '-',
field: 'durasi_recovery_time'
},
{ text: item.nama_unit_lama, field: 'nama_unit_lama' },
{ text: item.nama_unit_baru, field: 'nama_unit_baru' },
{ text: item.status_akhir, field: 'status_akhir' },
{ text: item.idpel_nometer, field: 'idpel_nometer' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: item.alamat_pelapor, field: 'alamat_pelapor' },
{ text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
{ text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
{ text: item.media, field: 'media' },
{ text: item.nama_ulp, field: 'nama_ulp' }
].map(
(cell) =>
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({
text: cell.text,
size: docxFontSize
})
]
})
],
verticalAlign: VerticalAlign.CENTER,
margins: { top: 0, bottom: 0, right: 0, left: 30 }
})
)
})
})
}
const doc = new Document({
sections: [
{
properties: {
page: {
size: {
orientation: PageOrientation.LANDSCAPE
}
}
},
children: [
new Paragraph({
children: [
new TextRun({
text: 'PT. PLN(Persero)',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT INDUK : ${
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT LAYANAN PELANGGAN : ${
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `${reportName}`.toUpperCase(),
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Table({
width: {
size: 13950,
type: WidthType.DXA
},
rows: [
new TableRow({
children: [
{ text: 'No', field: 'no' },
{ text: 'No Laporan', field: 'no_laporan' },
{ text: 'Pembuat Laporan', field: 'pembuat_laporan' },
{ text: 'Tgl Lapor', field: 'waktu_lapor' },
{ text: 'Tgl Dialihkan', field: 'waktu_dialihkan' },
{ text: 'Tgl Response', field: 'waktu_response' },
{ text: 'Tgl Recovery', field: 'waktu_recovery' },
{ text: 'Durasi Response Time', field: 'durasi_response_time' },
{ text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
{ text: 'Unit Asal', field: 'nama_unit_lama' },
{ text: 'Unit Tujuan', field: 'nama_unit_baru' },
{ text: 'Status', field: 'status_akhir' },
{ text: 'IDPEL/NO METER', field: 'idpel_nometer' },
{ text: 'Nama Pelapor', field: 'nama_pelapor' },
{ text: 'Alamat Pelapor', field: 'alamat_pelapor' },
{ text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
{ text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
{ text: 'Sumber Lapor', field: 'media' },
{ text: 'Nama ULP', field: 'nama_ulp' }
].map(
(header) =>
new TableCell({
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: header.text,
bold: true,
size: docxFontSize,
allCaps: true
})
]
})
],
verticalAlign: VerticalAlign.CENTER
})
)
}),
...generateRows()
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: `${meta.dayTo}, ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: '(.........................................)',
bold: true,
size: docxFontSize
})
]
})
]
}
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
}
export { exportToPDF, exportToXLSX, exportToDOCX }

View File

@ -0,0 +1,533 @@
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'
const reportName = 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali'
const fontSize = 4
const docxFontSize = 8
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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, data: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 35 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
],
['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`]
],
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: 25
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Jml Lapor',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Sumber Lapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_selesai,
item.jumlah_lapor,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.media,
item.nama_ulp
]),
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'
},
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: 35
})
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 }
})
doc.save(`Laporan ${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.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.value.posko
? reportMeta.value.posko.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
5,
1,
`LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`
)
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
8,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:P1')
worksheet.mergeCells('A2:P2')
worksheet.mergeCells('A3:P3')
worksheet.mergeCells('A4:P4')
worksheet.mergeCells('A5:P5')
worksheet.mergeCells('A7:P7')
worksheet.mergeCells('A8:P8')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
{ text: item.no_laporan, field: 'no_laporan' },
{ text: item.waktu_lapor, field: 'waktu_lapor' },
{ text: item.waktu_response, field: 'waktu_response' },
{ text: item.waktu_selesai, field: 'waktu_selesai' },
{ text: item.jumlah_lapor, field: 'jumlah_lapor' },
{
text: parseInt(item.durasi_response_time)
? formatWaktu(item.durasi_response_time)
: '-',
field: 'durasi_response_time'
},
{
text: parseInt(item.durasi_recovery_time)
? formatWaktu(item.durasi_recovery_time)
: '-',
field: 'durasi_recovery_time'
},
{ text: item.status_akhir, field: 'status_akhir' },
{ text: item.idpel_nometer, field: 'idpel_nometer' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: item.alamat_pelapor, field: 'alamat_pelapor' },
{ text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
{ text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
{ text: item.media, field: 'media' },
{ text: item.nama_ulp, field: 'nama_ulp' }
].map(
(cell) =>
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({
text: cell.text,
size: docxFontSize
})
]
})
],
verticalAlign: VerticalAlign.CENTER,
margins: { top: 0, bottom: 0, right: 0, left: 30 }
})
)
})
})
}
const doc = new Document({
sections: [
{
properties: {
page: {
size: {
orientation: PageOrientation.LANDSCAPE
}
}
},
children: [
new Paragraph({
children: [
new TextRun({
text: 'PT. PLN(Persero)',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT INDUK : ${
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT LAYANAN PELANGGAN : ${
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `${reportName}`.toUpperCase(),
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Table({
width: {
size: 13950,
type: WidthType.DXA
},
rows: [
new TableRow({
children: [
{ text: 'No', field: 'no' },
{ text: 'No Laporan', field: 'no_laporan' },
{ text: 'Tgl Lapor', field: 'waktu_lapor' },
{ text: 'Tgl Response', field: 'waktu_response' },
{ text: 'Tgl Recovery', field: 'waktu_selesai' },
{ text: 'Jml Lapor', field: 'jumlah_lapor' },
{ text: 'Durasi Response Time', field: 'durasi_response_time' },
{ text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
{ text: 'Status', field: 'status_akhir' },
{ text: 'IDPEL/NO METER', field: 'idpel_nometer' },
{ text: 'Nama Pelapor', field: 'nama_pelapor' },
{ text: 'Alamat Pelapor', field: 'alamat_pelapor' },
{ text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
{ text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
{ text: 'Sumber Lapor', field: 'media' },
{ text: 'Nama ULP', field: 'nama_ulp' }
].map(
(header) =>
new TableCell({
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: header.text,
bold: true,
size: docxFontSize,
allCaps: true
})
]
})
],
verticalAlign: VerticalAlign.CENTER
})
)
}),
...generateRows()
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: `${meta.dayTo}, ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: '(.........................................)',
bold: true,
size: docxFontSize
})
]
})
]
}
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
}
export { exportToPDF, exportToXLSX, exportToDOCX }

View File

@ -0,0 +1,540 @@
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'
const reportName = 'Daftar Keluhan Recovery Time'
const fontSize = 4
const docxFontSize = 8
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
let dateFromFormat = ''
let dateToFormat = ''
let dayTo = ''
let durasi = ''
if (minTime == '1502' && maxTime != '143998560') {
durasi = 'Melebihi SLA (>1 hari)'
} else if (minTime == '1' && maxTime == '1501') {
durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
} else {
durasi = 'Durasi Menit'
}
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, durasi, minTime, maxTime }
}
const exportToPDF = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 35 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
],
[
'Durasi',
':',
`${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
]
],
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: 25
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(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
]),
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'
},
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: 35
})
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 }
})
doc.save(`Laporan ${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.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.value.posko
? reportMeta.value.posko.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
5,
1,
`DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
)
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
8,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:N1')
worksheet.mergeCells('A2:N2')
worksheet.mergeCells('A3:N3')
worksheet.mergeCells('A4:N4')
worksheet.mergeCells('A5:N5')
worksheet.mergeCells('A7:N7')
worksheet.mergeCells('A8:N8')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
{ text: item.no_laporan, field: 'no_laporan' },
{ text: item.waktu_lapor, field: 'waktu_lapor' },
{ text: item.waktu_response, field: 'waktu_response' },
{ text: item.waktu_recovery, field: 'waktu_recovery' },
{
text: parseInt(item.durasi_response_time)
? formatWaktu(item.durasi_response_time)
: '-',
field: 'durasi_response_time'
},
{
text: parseInt(item.durasi_recovery_time)
? formatWaktu(item.durasi_recovery_time)
: '-',
field: 'durasi_recovery_time'
},
{ text: item.status_akhir, field: 'status_akhir' },
{ text: item.idpel_nometer, field: 'idpel_nometer' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: item.alamat_pelapor, field: 'alamat_pelapor' },
{ text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
{ text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
{ text: item.nama_ulp, field: 'nama_ulp' }
].map(
(cell) =>
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({
text: cell.text,
size: docxFontSize
})
]
})
],
verticalAlign: VerticalAlign.CENTER,
margins: { top: 0, bottom: 0, right: 0, left: 30 }
})
)
})
})
}
const doc = new Document({
sections: [
{
properties: {
page: {
size: {
orientation: PageOrientation.LANDSCAPE
}
}
},
children: [
new Paragraph({
children: [
new TextRun({
text: 'PT. PLN(Persero)',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT INDUK : ${
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT LAYANAN PELANGGAN : ${
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `${reportName}`.toUpperCase(),
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Table({
width: {
size: 13950,
type: WidthType.DXA
},
rows: [
new TableRow({
children: [
{ text: 'No', field: 'no' },
{ text: 'No Laporan', field: 'no_laporan' },
{ text: 'Tgl Lapor', field: 'waktu_lapor' },
{ text: 'Tgl Response', field: 'waktu_response' },
{ text: 'Tgl Recovery', field: 'waktu_recovery' },
{ text: 'Durasi Response Time', field: 'durasi_response_time' },
{ text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
{ text: 'Status', field: 'status_akhir' },
{ text: 'IDPEL/NO METER', field: 'idpel_nometer' },
{ text: 'Nama Pelapor', field: 'nama_pelapor' },
{ text: 'Alamat Pelapor', field: 'alamat_pelapor' },
{ text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
{ text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
{ text: 'Nama ULP', field: 'nama_ulp' }
].map(
(header) =>
new TableCell({
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: header.text,
bold: true,
size: docxFontSize,
allCaps: true
})
]
})
],
verticalAlign: VerticalAlign.CENTER
})
)
}),
...generateRows()
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: `${meta.dayTo}, ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: '(.........................................)',
bold: true,
size: docxFontSize
})
]
})
]
}
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
}
export { exportToPDF, exportToXLSX, exportToDOCX }

View File

@ -0,0 +1,540 @@
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'
const reportName = 'Daftar Keluhan Response Time'
const fontSize = 4
const docxFontSize = 8
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
let dateFromFormat = ''
let dateToFormat = ''
let dayTo = ''
let durasi = ''
if (minTime == '1502' && maxTime != '143998560') {
durasi = 'Melebihi SLA (>1 hari)'
} else if (minTime == '1' && maxTime == '1501') {
durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
} else {
durasi = 'Durasi Menit'
}
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, durasi, minTime, maxTime }
}
const exportToPDF = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 35 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
],
[
'Durasi',
':',
`${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
]
],
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: 25
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(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
]),
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'
},
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: 35
})
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 }
})
doc.save(`Laporan ${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.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.value.posko
? reportMeta.value.posko.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
5,
1,
`DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
)
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
8,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:N1')
worksheet.mergeCells('A2:N2')
worksheet.mergeCells('A3:N3')
worksheet.mergeCells('A4:N4')
worksheet.mergeCells('A5:N5')
worksheet.mergeCells('A7:N7')
worksheet.mergeCells('A8:N8')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
{ text: item.no_laporan, field: 'no_laporan' },
{ text: item.waktu_lapor, field: 'waktu_lapor' },
{ text: item.waktu_response, field: 'waktu_response' },
{ text: item.waktu_recovery, field: 'waktu_recovery' },
{
text: parseInt(item.durasi_response_time)
? formatWaktu(item.durasi_response_time)
: '-',
field: 'durasi_response_time'
},
{
text: parseInt(item.durasi_recovery_time)
? formatWaktu(item.durasi_recovery_time)
: '-',
field: 'durasi_recovery_time'
},
{ text: item.status_akhir, field: 'status_akhir' },
{ text: item.idpel_nometer, field: 'idpel_nometer' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: item.alamat_pelapor, field: 'alamat_pelapor' },
{ text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
{ text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
{ text: item.nama_ulp, field: 'nama_ulp' }
].map(
(cell) =>
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({
text: cell.text,
size: docxFontSize
})
]
})
],
verticalAlign: VerticalAlign.CENTER,
margins: { top: 0, bottom: 0, right: 0, left: 30 }
})
)
})
})
}
const doc = new Document({
sections: [
{
properties: {
page: {
size: {
orientation: PageOrientation.LANDSCAPE
}
}
},
children: [
new Paragraph({
children: [
new TextRun({
text: 'PT. PLN(Persero)',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT INDUK : ${
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT LAYANAN PELANGGAN : ${
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `${reportName}`.toUpperCase(),
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Table({
width: {
size: 13950,
type: WidthType.DXA
},
rows: [
new TableRow({
children: [
{ text: 'No', field: 'no' },
{ text: 'No Laporan', field: 'no_laporan' },
{ text: 'Tgl Lapor', field: 'waktu_lapor' },
{ text: 'Tgl Response', field: 'waktu_response' },
{ text: 'Tgl Recovery', field: 'waktu_recovery' },
{ text: 'Durasi Response Time', field: 'durasi_response_time' },
{ text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
{ text: 'Status', field: 'status_akhir' },
{ text: 'IDPEL/NO METER', field: 'idpel_nometer' },
{ text: 'Nama Pelapor', field: 'nama_pelapor' },
{ text: 'Alamat Pelapor', field: 'alamat_pelapor' },
{ text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
{ text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
{ text: 'Nama ULP', field: 'nama_ulp' }
].map(
(header) =>
new TableCell({
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: header.text,
bold: true,
size: docxFontSize,
allCaps: true
})
]
})
],
verticalAlign: VerticalAlign.CENTER
})
)
}),
...generateRows()
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: `${meta.dayTo}, ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: '(.........................................)',
bold: true,
size: docxFontSize
})
]
})
]
}
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
}
export { exportToPDF, exportToXLSX, exportToDOCX }

View File

@ -0,0 +1,512 @@
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'
const reportName = 'Daftar Keluhan Selesai Tanpa ID Pelanggan'
const fontSize = 4
const docxFontSize = 6
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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, data: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 35 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.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: 25
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Tgl Lapor',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Sumber Lapor',
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.media,
item.nama_ulp
]),
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'
},
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: 35
})
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 }
})
doc.save(`Laporan ${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.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.value.posko
? reportMeta.value.posko.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:O1')
worksheet.mergeCells('A2:O2')
worksheet.mergeCells('A3:O3')
worksheet.mergeCells('A4:O4')
worksheet.mergeCells('A6:O6')
worksheet.mergeCells('A7:O7')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 9, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
{ text: item.no_laporan, field: 'no_laporan' },
{ text: item.waktu_lapor, field: 'waktu_lapor' },
{ text: item.waktu_response, field: 'waktu_response' },
{ text: item.waktu_recovery, field: 'waktu_recovery' },
{
text: parseInt(item.durasi_response_time)
? formatWaktu(item.durasi_response_time)
: '-',
field: 'durasi_response_time'
},
{
text: parseInt(item.durasi_recovery_time)
? formatWaktu(item.durasi_recovery_time)
: '-',
field: 'durasi_recovery_time'
},
{ text: item.status_akhir, field: 'status_akhir' },
{ text: item.idpel_nometer, field: 'idpel_nometer' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: item.alamat_pelapor, field: 'alamat_pelapor' },
{ text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
{ text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
{ text: item.media, field: 'media' },
{ text: item.nama_ulp, field: 'nama_ulp' }
].map(
(cell) =>
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({
text: cell.text,
size: docxFontSize
})
]
})
],
verticalAlign: VerticalAlign.CENTER,
margins: { top: 0, bottom: 0, right: 0, left: 30 }
})
)
})
})
}
const doc = new Document({
sections: [
{
properties: {
page: {
size: {
orientation: PageOrientation.LANDSCAPE
}
}
},
children: [
new Paragraph({
children: [
new TextRun({
text: 'PT. PLN(Persero)',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT INDUK : ${
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT LAYANAN PELANGGAN : ${
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `${reportName}`.toUpperCase(),
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Table({
width: {
size: 13950,
type: WidthType.DXA
},
rows: [
new TableRow({
children: [
{ text: 'No', field: 'no' },
{ text: 'No Laporan', field: 'no_laporan' },
{ text: 'Tgl Lapor', field: 'waktu_lapor' },
{ text: 'Tgl Response', field: 'waktu_response' },
{ text: 'Tgl Recovery', field: 'waktu_recovery' },
{ text: 'Durasi Response Time', field: 'durasi_response_time' },
{ text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
{ text: 'Status', field: 'status_akhir' },
{ text: 'IDPEL/NO METER', field: 'idpel_nometer' },
{ text: 'Nama Pelapor', field: 'nama_pelapor' },
{ text: 'Alamat Pelapor', field: 'alamat_pelapor' },
{ text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
{ text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
{ text: 'Sumber Lapor', field: 'media' },
{ text: 'Nama ULP', field: 'nama_ulp' }
].map(
(header) =>
new TableCell({
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: header.text,
bold: true,
size: docxFontSize,
allCaps: true
})
]
})
],
verticalAlign: VerticalAlign.CENTER
})
)
}),
...generateRows()
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: `${meta.dayTo}, ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: '(.........................................)',
bold: true,
size: docxFontSize
})
]
})
]
}
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
}
export { exportToPDF, exportToXLSX, exportToDOCX }

View File

@ -0,0 +1,510 @@
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'
const reportName = 'Daftar Keluhan Selesai di Contact Center'
const fontSize = 4
const docxFontSize = 6
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.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, data: any) => {
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 35 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'UNIT LAYANAN PELANGGAN',
':',
reportMeta.value.ulp
? reportMeta.value.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: 25
})
autoTable(doc, {
head: [
[
'No',
'No Laporan',
'Contact Center',
'UI Dist.',
'ULP',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Tlp Pelapor',
'Keterangan Pelapor',
'APKT Status',
'Created By',
'Tgl Penyelesaian',
'Lapor Ulang',
'Sumber Lapor',
'Issue Type',
'Sub Issue Type'
]
],
body: data.value.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.nama_ulp,
item.nama_uid,
item.nama_ulp,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.status_akhir,
item.nama_pelapor,
item.waktu_recovery,
item.jumlah_lapor,
item.media,
item.nama_issuetype,
item.nama_subissuetype
]),
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'
},
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: 35
})
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 }
})
doc.save(`Laporan ${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.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.value.posko
? reportMeta.value.posko.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: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: 9, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
{ text: item.no_laporan, field: 'no_laporan' },
{ text: item.nama_ulp, field: 'nama_ulp' },
{ text: item.nama_uid, field: 'nama_uid' },
{ text: item.nama_ulp, field: 'nama_ulp' },
{ text: item.idpel_nometer, field: 'idpel_nometer' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: item.alamat_pelapor, field: 'alamat_pelapor' },
{ text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
{ text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
{ text: item.status_akhir, field: 'status_akhir' },
{ text: item.nama_pelapor, field: 'nama_pelapor' },
{ text: formatWaktu(item.waktu_recovery), field: 'waktu_recovery' },
{ text: item.jumlah_lapor, field: 'jumlah_lapor' },
{ text: item.media, field: 'media' },
{ text: item.nama_issuetype, field: 'nama_issuetype' },
{ text: item.nama_subissuetype, field: 'nama_subissuetype' }
].map(
(cell) =>
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({
text: cell.text,
size: docxFontSize
})
]
})
],
verticalAlign: VerticalAlign.CENTER,
margins: { top: 0, bottom: 0, right: 0, left: 30 }
})
)
})
})
}
const doc = new Document({
sections: [
{
properties: {
page: {
size: {
orientation: PageOrientation.LANDSCAPE
}
}
},
children: [
new Paragraph({
children: [
new TextRun({
text: 'PT. PLN(Persero)',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT INDUK : ${
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: `UNIT LAYANAN PELANGGAN : ${
reportMeta.value.ulp
? reportMeta.value.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `${reportName}`.toUpperCase(),
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Table({
width: {
size: 13950,
type: WidthType.DXA
},
rows: [
new TableRow({
children: [
{ text: 'No', field: 'no' },
{ text: 'No Laporan', field: 'no_laporan' },
{ text: 'Contact Center', field: 'nama_ulp' },
{ text: 'UI Dist.', field: 'nama_uid' },
{ text: 'ULP', field: 'nama_ulp' },
{ text: 'IDPEL/NO METER', field: 'idpel_nometer' },
{ text: 'Nama Pelapor', field: 'nama_pelapor' },
{ text: 'Alamat Pelapor', field: 'alamat_pelapor' },
{ text: 'No Tlp Pelapor', field: 'no_telp_pelapor' },
{ text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
{ text: 'APKT Status', field: 'status_akhir' },
{ text: 'Created By', field: 'nama_pelapor' },
{ text: 'Tgl Penyelesaian', field: 'waktu_recovery' },
{ text: 'Lapor Ulang', field: 'jumlah_lapor' },
{ text: 'Sumber Lapor', field: 'media' },
{ text: 'Issue Type', field: 'nama_issuetype' },
{ text: 'Sub Issue Type', field: 'nama_subissuetype' }
].map(
(header) =>
new TableCell({
children: [
new Paragraph({
alignment: AlignmentType.CENTER,
children: [
new TextRun({
text: header.text,
bold: true,
size: docxFontSize,
allCaps: true
})
]
})
],
verticalAlign: VerticalAlign.CENTER
})
)
}),
...generateRows()
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: `${meta.dayTo}, ${meta.dateToFormat}`,
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
children: [
new TextRun({
text: '',
bold: true,
size: docxFontSize
})
]
}),
new Paragraph({
alignment: AlignmentType.RIGHT,
children: [
new TextRun({
text: '(.........................................)',
bold: true,
size: docxFontSize
})
]
})
]
}
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
}
export { exportToPDF, exportToXLSX, exportToDOCX }

View File

@ -0,0 +1,640 @@
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 All'
const fontSize = 5
const detailFontSize = 5
const groupingData = (data: any) => {
const groupedData: any = {}
data.forEach((item: any) => {
const { nama_regional, nama_uid } = item
if (!groupedData[nama_regional]) {
groupedData[nama_regional] = {}
}
if (!groupedData[nama_regional][nama_uid]) {
groupedData[nama_regional][nama_uid] = { data: [] }
}
groupedData[nama_regional][nama_uid].data.push(item)
})
for (const regional in groupedData) {
for (const uid in groupedData[regional]) {
const data = groupedData[regional][uid].data
data.forEach((item: any) => {
if (!groupedData[regional][uid].summary) {
groupedData[regional][uid].summary = {
total: 0,
total_selesai: 0,
total_inproses: 0,
avg_durasi_response: [],
max_durasi_response: 0,
min_durasi_response: 0,
total_diatas_sla_response: 0,
total_dibawah_sla_response: 0,
avg_durasi_recovery: [],
max_durasi_recovery: 0,
min_durasi_recovery: 0,
total_diatas_sla_recovery: 0,
total_dibawah_sla_recovery: 0
}
}
groupedData[regional][uid].summary.total += item.total
groupedData[regional][uid].summary.total_selesai += item.total_selesai
groupedData[regional][uid].summary.total_inproses += item.total_inproses
groupedData[regional][uid].summary.avg_durasi_response.push(item.avg_durasi_response)
groupedData[regional][uid].summary.max_durasi_response =
groupedData[regional][uid].summary.max_durasi_response < item.max_durasi_response
? item.max_durasi_response
: groupedData[regional][uid].summary.max_durasi_response
groupedData[regional][uid].summary.min_durasi_response =
groupedData[regional][uid].summary.min_durasi_response > item.min_durasi_response
? item.min_durasi_response
: groupedData[regional][uid].summary.min_durasi_response
groupedData[regional][uid].summary.total_diatas_sla_response +=
item.total_diatas_sla_response
groupedData[regional][uid].summary.total_dibawah_sla_response +=
item.total_dibawah_sla_response
groupedData[regional][uid].summary.avg_durasi_recovery.push(item.avg_durasi_recovery)
groupedData[regional][uid].summary.max_durasi_recovery =
groupedData[regional][uid].summary.max_durasi_recovery < item.max_durasi_recovery
? item.max_durasi_recovery
: groupedData[regional][uid].summary.max_durasi_recovery
groupedData[regional][uid].summary.min_durasi_recovery =
groupedData[regional][uid].summary.min_durasi_recovery > item.min_durasi_recovery
? item.min_durasi_recovery
: groupedData[regional][uid].summary.min_durasi_recovery
groupedData[regional][uid].summary.total_diatas_sla_recovery +=
item.total_diatas_sla_recovery
groupedData[regional][uid].summary.total_dibawah_sla_recovery +=
item.total_dibawah_sla_recovery
})
}
}
return groupedData
}
const formatData = (rawData: any) => {
const data = groupingData(rawData)
const formattedData: any = []
for (const regional in data) {
let no = 1
const total: any = {
total: 0,
total_selesai: 0,
total_inproses: 0,
avg_durasi_response: [],
max_durasi_response: [],
min_durasi_response: [],
total_diatas_sla_response: 0,
total_dibawah_sla_response: 0,
avg_durasi_recovery: [],
max_durasi_recovery: [],
min_durasi_recovery: [],
total_diatas_sla_recovery: 0,
total_dibawah_sla_recovery: 0
}
formattedData.push([{ content: regional, colSpan: 17, styles: { fontStyle: 'bold' } }])
for (const uid in data[regional]) {
const summary = data[regional][uid].summary
const avgDurasiResponse = summary.avg_durasi_response.length
? summary.avg_durasi_response.reduce((a: any, b: any) => a + b) /
summary.avg_durasi_response.length
: 0
const avgDurasiRecovery = summary.avg_durasi_recovery.length
? summary.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
summary.avg_durasi_recovery.length
: 0
formattedData.push([
{ content: no++, styles: { halign: 'right' } },
uid,
formatNumber(summary.total),
formatNumber(summary.total_selesai),
summary.total_selesai != summary.total
? formatPercentage((summary.total_selesai / summary.total) * 100)
: '100%',
formatNumber(summary.total_inproses),
formatPercentage(
!summary.total_inproses || !summary.total
? '0%'
: (summary.total_inproses / summary.total) * 100
),
formatNumber(avgDurasiResponse),
formatWaktu(summary.max_durasi_response),
formatWaktu(summary.min_durasi_response),
formatNumber(summary.total_diatas_sla_response),
formatNumber(summary.total_dibawah_sla_response),
formatNumber(avgDurasiRecovery),
formatWaktu(summary.max_durasi_recovery),
formatWaktu(summary.min_durasi_recovery),
formatNumber(summary.total_diatas_sla_recovery),
formatNumber(summary.total_dibawah_sla_recovery)
])
total.total += summary.total
total.total_selesai += summary.total_selesai
total.total_inproses += summary.total_inproses
total.avg_durasi_response.push(avgDurasiResponse)
total.max_durasi_response.push(summary.max_durasi_response)
total.min_durasi_response.push(summary.min_durasi_response)
total.total_diatas_sla_response += summary.total_diatas_sla_response
total.total_dibawah_sla_response += summary.total_dibawah_sla_response
total.avg_durasi_recovery.push(avgDurasiRecovery)
total.max_durasi_recovery.push(summary.max_durasi_recovery)
total.min_durasi_recovery.push(summary.min_durasi_recovery)
total.total_diatas_sla_recovery += summary.total_diatas_sla_recovery
total.total_dibawah_sla_recovery += summary.total_dibawah_sla_recovery
}
formattedData.push([
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
formatNumber(total.total),
formatNumber(total.total_selesai),
formatPercentage(
!total.total_selesai || !total.total ? '0%' : (total.total_selesai / total.total) * 100
),
formatNumber(total.total_inproses),
formatPercentage(
!total.total_inproses || !total.total ? '0%' : (total.total_inproses / total.total) * 100
),
formatNumber(
total.avg_durasi_response.length
? total.avg_durasi_response.reduce((a: any, b: any) => a + b) /
total.avg_durasi_response.length
: 0
),
formatWaktu(Math.max(...total.max_durasi_response)),
formatWaktu(Math.min(...total.min_durasi_response)),
formatNumber(total.total_diatas_sla_response),
formatNumber(total.total_dibawah_sla_response),
formatNumber(
total.avg_durasi_recovery.length
? total.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
total.avg_durasi_recovery.length
: 0
),
formatWaktu(Math.max(...total.max_durasi_recovery)),
formatWaktu(Math.min(...total.min_durasi_recovery)),
formatNumber(total.total_diatas_sla_recovery),
formatNumber(total.total_dibawah_sla_recovery)
])
}
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: 2
},
{
content: 'Nama Unit',
rowSpan: 2
},
{
content: 'Response Time',
colSpan: 10
},
{
content: 'Penyelesaian',
colSpan: 5
}
],
[
'Total',
'Selesai',
'%',
'Inproses',
'%',
'Rata-Rata',
'Max',
'Min',
'>SLA',
'<SLA',
'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'
}
}
},
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.waktu_response,
item.waktu_recovery,
item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
item.durasi_recovery_time ? formatWaktu(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,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
8,
8,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:F1')
worksheet.mergeCells('A2:F2')
worksheet.mergeCells('A3:F3')
worksheet.mergeCells('A4:F4')
worksheet.mergeCells('H7:J7')
worksheet.mergeCells('H8:J8')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 10, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
})
})
e.cancel = true
}
const exportDetailToXLSX = (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
4,
8,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('H3:J3')
worksheet.mergeCells('H4:J4')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
`Laporan Detail ${reportName}.xlsx`
)
})
})
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }