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

feat: create export pdf in rekapitulasi gangguan per jenis gangguan

Browse Source
This commit is contained in:
kur0nek-o 2024-03-22 14:48:50 +07:00
parent fa6e11f25a
commit 0487301697
4 changed files with 498 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
View File

@ -3,6 +3,7 @@
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
@ -1243,7 +1244,7 @@ const showDetail = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta, data)
exportToPDF(reportMeta.value, data.value)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')

22
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
View File

@ -5,6 +5,7 @@
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
@ -446,8 +447,6 @@ import {
DxSelection,
DxSummary
} 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'
@ -455,12 +454,19 @@ import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
posko: { id: 0, name: 'Semua Posko' },
periode: ''
})
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguan, {
dateFrom: new Date().toISOString().slice(0, 10),
@ -472,15 +478,7 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
exportToPDF(reportMeta.value, data.value)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
@ -569,6 +567,8 @@ const filterData = (params: any) => {
}
})
}
reportMeta.value = filters.value
})
onError((queryError) => {
console.log(queryError)

52
src/report/Gangguan/Rekap/RGangguan_ALL.ts
View File

@ -25,7 +25,7 @@ const reportName = 'Rekapitulasi Gangguan All'
const groupingData = (data: any) => {
const groupedData: any = {}
data.value.forEach((item: any) => {
data.forEach((item: any) => {
const { nama_regional, nama_uid } = item
if (!groupedData[nama_regional]) {
@ -216,7 +216,7 @@ const formatData = (rawData: any) => {
}
formattedData.push([
{ content: 'Total', colSpan: 2, styles: { fontStyle: 'bold' } },
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
formatNumber(total.total),
formatNumber(total.total_selesai),
formatPercentage((total.total_selesai / total.total) * 100),
@ -259,7 +259,7 @@ const formatData = (rawData: any) => {
}
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
let dateFromFormat = ''
let dateToFormat = ''
@ -283,40 +283,39 @@ const formatMetaData = (reportMeta: any) => {
return { dateFromFormat, dateToFormat, dayTo }
}
const exportToPDF = (reportMeta: any, rawData: any) => {
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
const data = formatData(rawData)
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
const fontSize = 5
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.value.uid
? reportMeta.value.uid.name.toUpperCase()
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.value.up3
? reportMeta.value.up3.name.toUpperCase()
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'POSKO',
':',
reportMeta.value.posko
? reportMeta.value.posko.name.toUpperCase()
: 'Semua Posko'.toUpperCase()
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
]
],
styles: {
fontSize: 3,
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
@ -331,14 +330,14 @@ const exportToPDF = (reportMeta: any, rawData: any) => {
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
],
styles: {
fontSize: 3,
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 18
startY: 23
})
autoTable(doc, {
@ -405,7 +404,7 @@ const exportToPDF = (reportMeta: any, rawData: any) => {
],
body: data,
styles: {
fontSize: 3,
fontSize,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
@ -429,8 +428,15 @@ const exportToPDF = (reportMeta: any, rawData: 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: 23
startY: 30
})
autoTable(doc, {
@ -444,7 +450,7 @@ const exportToPDF = (reportMeta: any, rawData: any) => {
]
],
styles: {
fontSize: 3,
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
@ -455,9 +461,13 @@ const exportToPDF = (reportMeta: any, rawData: any) => {
margin: { left: 230 }
})
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
if (preview) {
window.open(doc.output('bloburl'))
} else {
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
}
}
export { exportToPDF }

454
src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts Normal file
View File

@ -0,0 +1,454 @@
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import {
Document,
AlignmentType,
Packer,
Paragraph,
Table,
TableCell,
TableRow,
VerticalAlign,
TextRun,
WidthType,
PageOrientation
} from 'docx'
import { saveAs } from 'file-saver'
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
const reportName = 'Rekapitulasi Gangguan/Jenis Gangguan'
const groupingData = (data: any) => {
const groupedData: any = {}
data.forEach((item: any) => {
const { sub_kelompok } = item
if (!groupedData[sub_kelompok]) {
groupedData[sub_kelompok] = []
}
groupedData[sub_kelompok].push(item)
})
return groupedData
}
const formatData = (rawData: any) => {
const data = groupingData(rawData)
const formattedData: any = []
const grandTotal: any = {
total_laporan: 0,
total_laporan_sudah_selesai: 0,
total_laporan_belum_selesai: 0,
total_response_time_total: 0,
total_response_time_rata_rata: [],
total_response_time_max: [],
total_response_time_min: [],
total_response_time_lebih_sla: 0,
total_response_time_kurang_sla: 0,
total_recovery_time_total: 0,
total_recovery_time_rata_rata: [],
total_recovery_time_max: [],
total_recovery_time_min: [],
total_recovery_time_lebih_sla: 0,
total_recovery_time_kurang_sla: 0
}
for (const sub_kelompok in data) {
const total: any = {
total_laporan: 0,
total_laporan_sudah_selesai: 0,
total_laporan_belum_selesai: 0,
total_response_time_total: 0,
total_response_time_rata_rata: [],
total_response_time_max: [],
total_response_time_min: [],
total_response_time_lebih_sla: 0,
total_response_time_kurang_sla: 0,
total_recovery_time_total: 0,
total_recovery_time_rata_rata: [],
total_recovery_time_max: [],
total_recovery_time_min: [],
total_recovery_time_lebih_sla: 0,
total_recovery_time_kurang_sla: 0
}
formattedData.push([{ content: sub_kelompok, colSpan: 20, styles: { fontStyle: 'bold' } }])
for (let i = 0; i < data[sub_kelompok].length; i++) {
formattedData.push([
{ content: i + 1, styles: { halign: 'right' } },
data[sub_kelompok][i].kode,
data[sub_kelompok][i].jenisGangguan,
formatNumber(data[sub_kelompok][i].laporan.total),
formatNumber(data[sub_kelompok][i].laporan.sudahSelesai.jml),
formatPercentage(
(data[sub_kelompok][i].laporan.sudahSelesai.jml / data[sub_kelompok][i].laporan.total) *
100
),
formatNumber(data[sub_kelompok][i].laporan.belumSelesai.jml),
formatPercentage(
(data[sub_kelompok][i].laporan.belumSelesai.jml / data[sub_kelompok][i].laporan.total) *
100
),
formatNumber(data[sub_kelompok][i].responseTime.menit.total),
formatNumber(data[sub_kelompok][i].responseTime.menit.rataRata),
formatWaktu(data[sub_kelompok][i].responseTime.menit.max),
formatWaktu(data[sub_kelompok][i].responseTime.menit.min),
formatNumber(data[sub_kelompok][i].responseTime.laporan.lebihSla),
formatNumber(data[sub_kelompok][i].responseTime.laporan.kurangSla),
formatNumber(data[sub_kelompok][i].recoveryTime.menit.total),
formatNumber(data[sub_kelompok][i].recoveryTime.menit.rataRata),
formatWaktu(data[sub_kelompok][i].recoveryTime.menit.max),
formatWaktu(data[sub_kelompok][i].recoveryTime.menit.min),
formatNumber(data[sub_kelompok][i].recoveryTime.laporan.lebihSla),
formatNumber(data[sub_kelompok][i].recoveryTime.laporan.kurangSla)
])
total.total_laporan += data[sub_kelompok][i].laporan.total
total.total_laporan_sudah_selesai += data[sub_kelompok][i].laporan.sudahSelesai.jml
total.total_laporan_belum_selesai += data[sub_kelompok][i].laporan.belumSelesai.jml
total.total_response_time_total += data[sub_kelompok][i].responseTime.menit.total
total.total_response_time_rata_rata.push(data[sub_kelompok][i].responseTime.menit.rataRata)
total.total_response_time_max.push(data[sub_kelompok][i].responseTime.menit.max)
total.total_response_time_min.push(data[sub_kelompok][i].responseTime.menit.min)
total.total_response_time_lebih_sla += data[sub_kelompok][i].responseTime.laporan.lebihSla
total.total_response_time_kurang_sla += data[sub_kelompok][i].responseTime.laporan.kurangSla
total.total_recovery_time_total += data[sub_kelompok][i].recoveryTime.menit.total
total.total_recovery_time_rata_rata.push(data[sub_kelompok][i].recoveryTime.menit.rataRata)
total.total_recovery_time_max.push(data[sub_kelompok][i].recoveryTime.menit.max)
total.total_recovery_time_min.push(data[sub_kelompok][i].recoveryTime.menit.min)
total.total_recovery_time_lebih_sla += data[sub_kelompok][i].recoveryTime.laporan.lebihSla
total.total_recovery_time_kurang_sla += data[sub_kelompok][i].recoveryTime.laporan.kurangSla
grandTotal.total_laporan_sudah_selesai += data[sub_kelompok][i].laporan.sudahSelesai.jml
grandTotal.total_laporan += data[sub_kelompok][i].laporan.total
grandTotal.total_laporan_belum_selesai += data[sub_kelompok][i].laporan.belumSelesai.jml
grandTotal.total_response_time_total += data[sub_kelompok][i].responseTime.menit.total
grandTotal.total_response_time_rata_rata.push(
data[sub_kelompok][i].responseTime.menit.rataRata
)
grandTotal.total_response_time_max.push(data[sub_kelompok][i].responseTime.menit.max)
grandTotal.total_response_time_min.push(data[sub_kelompok][i].responseTime.menit.min)
grandTotal.total_response_time_lebih_sla +=
data[sub_kelompok][i].responseTime.laporan.lebihSla
grandTotal.total_response_time_kurang_sla +=
data[sub_kelompok][i].responseTime.laporan.kurangSla
grandTotal.total_recovery_time_total += data[sub_kelompok][i].recoveryTime.menit.total
grandTotal.total_recovery_time_rata_rata.push(
data[sub_kelompok][i].recoveryTime.menit.rataRata
)
grandTotal.total_recovery_time_max.push(data[sub_kelompok][i].recoveryTime.menit.max)
grandTotal.total_recovery_time_min.push(data[sub_kelompok][i].recoveryTime.menit.min)
grandTotal.total_recovery_time_lebih_sla +=
data[sub_kelompok][i].recoveryTime.laporan.lebihSla
grandTotal.total_recovery_time_kurang_sla +=
data[sub_kelompok][i].recoveryTime.laporan.kurangSla
}
formattedData.push([
{ content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
formatNumber(total.total_laporan),
formatNumber(total.total_laporan_sudah_selesai),
formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
formatNumber(total.total_laporan_belum_selesai),
formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
formatNumber(total.total_response_time_total),
formatNumber(
total.total_response_time_rata_rata.length
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_response_time_max)),
formatWaktu(Math.min(...total.total_response_time_min)),
formatNumber(total.total_response_time_lebih_sla),
formatNumber(total.total_response_time_kurang_sla),
formatNumber(total.total_recovery_time_total),
formatNumber(
total.total_recovery_time_rata_rata.length
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_recovery_time_max)),
formatWaktu(Math.min(...total.total_recovery_time_min)),
formatNumber(total.total_recovery_time_lebih_sla),
formatNumber(total.total_recovery_time_kurang_sla)
])
}
formattedData.push([
{ content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
formatNumber(grandTotal.total_laporan),
formatNumber(grandTotal.total_laporan_sudah_selesai),
formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
formatNumber(grandTotal.total_laporan_belum_selesai),
formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
formatNumber(grandTotal.total_response_time_total),
formatNumber(
grandTotal.total_response_time_rata_rata.length
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
formatWaktu(Math.min(...grandTotal.total_response_time_min)),
formatNumber(grandTotal.total_response_time_lebih_sla),
formatNumber(grandTotal.total_response_time_kurang_sla),
formatNumber(grandTotal.total_recovery_time_total),
formatNumber(
grandTotal.total_recovery_time_rata_rata.length
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
formatNumber(grandTotal.total_recovery_time_lebih_sla),
formatNumber(grandTotal.total_recovery_time_kurang_sla)
])
return formattedData
}
const formatMetaData = (reportMeta: any) => {
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
let dateFromFormat = ''
let dateToFormat = ''
let dayTo = ''
if (periode != '') {
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
month: 'long'
})}-${dateFrom.getFullYear()}`
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
month: 'long'
})}-${dateTo.getFullYear()}`
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
}
return { dateFromFormat, dateToFormat, dayTo }
}
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
const data = formatData(rawData)
const meta = formatMetaData(reportMeta)
const doc = new jsPDF({
orientation: 'landscape'
})
const fontSize = 5
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
[
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
{ content: ':', styles: { cellWidth: 1 } },
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
],
[
'UNIT PELAKSANA PELAYANAN PELANGGAN',
':',
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
],
[
'POSKO',
':',
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
]
],
styles: {
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold'
},
theme: 'plain',
startY: 10
})
autoTable(doc, {
head: [
[`${reportName}`.toUpperCase()],
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
],
styles: {
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
startY: 23
})
autoTable(doc, {
head: [
[
{
content: 'No',
rowSpan: 3
},
{
content: 'Kode',
rowSpan: 3
},
{
content: 'Jenis Gangguan',
rowSpan: 3
},
{
content: 'Laporan',
colSpan: 5
},
{
content: 'Response Time',
colSpan: 6
},
{
content: 'Recovery Time',
colSpan: 6
}
],
[
{
content: 'Total',
rowSpan: 2
},
{
content: 'Sudah Selesai',
colSpan: 2
},
{
content: 'Belum Selesai',
colSpan: 2
},
{
content: 'Menit',
colSpan: 4
},
{
content: 'Laporan',
colSpan: 2
},
{
content: 'Menit',
colSpan: 4
},
{
content: 'Laporan',
colSpan: 2
}
],
[
'Jml',
'%',
'Jml',
'%',
'Total',
'Rata-Rata',
'Max',
'Min',
'>Sla',
'<Sla',
'Total',
'Rata-Rata',
'Max',
'Min',
'>Sla',
'<Sla'
]
],
body: data,
styles: {
fontSize,
cellPadding: 1,
lineColor: [0, 0, 0],
lineWidth: 0.1,
cellWidth: 'auto'
},
rowPageBreak: 'auto',
headStyles: {
fillColor: [192, 192, 192],
textColor: [0, 0, 0],
fontStyle: 'bold',
cellWidth: 'wrap',
halign: 'center',
valign: 'middle'
},
bodyStyles: {
textColor: [0, 0, 0]
},
didParseCell: function (data) {
if (data.row.section === 'head') {
data.cell.text = data.cell.text.map(function (word: any) {
return word.toUpperCase()
})
}
if (data.cell.text[0] === 'TOTAL') {
for (const key in data.row.cells) {
data.row.cells[key].styles.fillColor = [192, 192, 192]
data.row.cells[key].styles.fontStyle = 'bold'
}
}
if (data.cell.text[0] === 'GRAND TOTAL') {
for (const key in data.row.cells) {
data.row.cells[key].styles.fillColor = [192, 192, 192]
data.row.cells[key].styles.fontStyle = 'bold'
}
}
},
startY: 30
})
autoTable(doc, {
head: [
[`${meta.dayTo}, ${meta.dateToFormat}`],
[
{
content: '(.........................................)',
styles: { minCellHeight: 8, valign: 'bottom' }
}
]
],
styles: {
fontSize,
cellPadding: 0.1,
textColor: [0, 0, 0],
fontStyle: 'bold',
halign: 'center'
},
theme: 'plain',
tableWidth: 50,
margin: { left: 230 }
})
if (preview) {
window.open(doc.output('bloburl'))
} else {
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
}
}
export { exportToPDF }