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

feat: create export detail in anomali gangguan petugas

Browse Source
This commit is contained in:
kur0nek-o 2024-05-05 16:49:46 +07:00
parent 1e611b18d7
commit 73f855587f
5 changed files with 374 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
View File

@ -950,7 +950,10 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
import {
exportToPDF,
exportToXLSX,
exportToDOCX
exportToDOCX,
exportDetailToPDF,
exportDetailToXLSX,
exportDetailToDOCX
} from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@ -1115,7 +1118,15 @@ const onDataSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const onExportingDetail = (e: any) => {}
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]

261
src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
View File

@ -3,12 +3,14 @@ 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'
import { exportToWord } from './doc/Anomali_LAPPGP_LPP'
import { exportToWord, exportDetailToWord } from './doc/Anomali_LAPPGP_LPP'
const reportName = 'Anomali Penanganan Pengaduan Gangguan Petugas'
const fontSize = 5
const detailFontSize = 3
const formatData = (rawData: any) => {
const formattedData: any = []
@ -242,6 +244,210 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
}
}
const createDetailTableField = (reportMeta: any, rawData: any) => {
const field = ['No', 'UIW/D', 'UP3', 'Rayon', 'Nama Petugas']
if (reportMeta.jenisLaporan.name === 'Laporan Berulang Unit') {
field.push(
...[
'No Laporan',
'No Laporan Lapor Ulang',
'No Laporan Referensi',
'Status Induk',
'Referensi Marking Induk'
]
)
}
if (reportMeta.jenisLaporan.name === 'Laporan Rating Negatif') {
field.push(...['Rating', 'Feedback', 'Ulasan'])
}
field.push(
...[
'Tgl/Jam Lapor',
'Tgl/Jam Datang',
'Tgl/Jam Nyala',
'Durasi Response Time',
'Durasi Recovery Time',
'Durasi Penugasan Regu',
'Durasi Perjalanan Regu',
'Jarak Closing',
'Dispacth Oleh',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Sumber Lapor',
'Diselesaikan Oleh',
'Status',
'Referensi Marking',
'Kode Gangguan',
'Jenis Gangguan',
'Penyebab',
'Tindakan'
]
)
const rows = rawData.map((item: any, i: any) => {
const data = [
{ content: i + 1, styles: { halign: 'right' } },
item.nama_uid,
item.nama_up3,
item.nama_ulp,
item.nama_petugas
]
if (reportMeta.jenisLaporan.name === 'Laporan Berulang Unit') {
data.push(
...[
item.no_laporan,
item.no_laporan_laporulang,
item.no_laporan,
item.status_induk,
item.referensi_marking_induk
]
)
}
if (reportMeta.jenisLaporan.name === 'Laporan Rating Negatif') {
data.push(...[item.rating, item.feedback, item.ulasan])
}
data.push(
...[
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.durasi_dispatch_time ? formatWaktu(item.durasi_dispatch_time) : '-',
item.durasi_perjalanan ? formatWaktu(item.durasi_perjalanan) : '-',
item.distance,
item.dispatch_by,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.media,
item.diselesaikan_oleh,
item.status_akhir,
item.marking,
item.kode_gangguan,
item.jenis_gangguan,
item.penyebab,
item.tindakan
]
)
return data
})
return { field, rows }
}
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear()
const meta = formatMetaData(reportMeta)
const { field, rows } = createDetailTableField(reportMeta, rawData)
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: [field],
body: rows,
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',
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: [
[`${day}, ${date}-${month}-${year}`],
[
{
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()
@ -314,9 +520,60 @@ const exportToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
const exportDetailToXLSX = (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
setHeaderStyle(
worksheet,
4,
1,
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
true
)
worksheet.mergeCells('A1:AC1')
worksheet.mergeCells('A3:AC3')
worksheet.mergeCells('A4:AC4')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 6, column: 1 },
loadPanel: {
enabled: false
}
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
`Laporan Detail ${reportName}.xlsx`
)
})
})
e.cancel = true
}
const exportToDOCX = (reportMeta: any, rawData: any) => {
const meta = formatMetaData(reportMeta)
exportToWord(reportMeta, meta, formatData(rawData), reportName)
}
export { exportToPDF, exportToXLSX, exportToDOCX }
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
const meta = formatMetaData(reportMeta)
exportDetailToWord(meta, createDetailTableField(reportMeta, rawData), reportName)
}
export {
exportToPDF,
exportToXLSX,
exportToDOCX,
exportDetailToPDF,
exportDetailToXLSX,
exportDetailToDOCX
}

99
src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPP.ts
View File

@ -35,7 +35,7 @@ export const exportToWord = (
tbody += column
}
let preHtml = `
const preHtml = `
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta charset='utf-8'>
@ -178,3 +178,100 @@ export const exportToWord = (
downloadLink.click()
document.body.removeChild(downloadLink)
}
export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear()
const filename = 'Laporan Detail ' + reportName + '.doc'
const preHtml = `
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta charset='utf-8'>
<title>Daftar Detail ${reportName}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:1.0cm 1.0cm 1.0cm 1.0cm;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
div.Section1 {
page:Section1;
}
table.meta tr td {
text-align: left;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 5px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head>
<body>
`
const body = `
<div class=Section1>
<header>
<h6>PT. PLN(Persero)</h6>
<br>
<table width="100%">
<tr>
<th><h6>${'DAFTAR DETAIL ' + reportName.toUpperCase()}</h6></th>
</tr>
<tr>
<th><h6>${`PERIODE TANGGAL : ${formattedMeta.dateFromFormat} SD TGL ${formattedMeta.dateToFormat}`}</h6></th>
</tr>
</table>
</header>
<br>
<table border="1" class="main">
<thead>
<tr>
${rawData.field.map((item: any) => `<th>${item}</th>`).join('')}
</tr>
</thead>
<tbody>
${rawData.rows
.map((row: any) => {
return `<tr>${row.map((item: any) => `<td>${item.content || item}</td>`).join('')}</tr>`
})
.join('')}
</tbody>
</table>
<br>
<footer>
<p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
<br>
<p style="text-align: right; font-size: 10px;">(.........................................)</p>
</footer>
</div>
`
const postHtml = '</body></html>'
const html = preHtml + body + postHtml
const url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html)
const downloadLink = document.createElement('a')
document.body.appendChild(downloadLink)
downloadLink.href = url
downloadLink.download = filename
downloadLink.click()
document.body.removeChild(downloadLink)
}

4
src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPT.ts
View File

@ -27,7 +27,7 @@ export const exportToWord = (
}
i === 0
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
? (column += `<td ${styleTotal} ${colSpan ? `${colSpan} style="font-weight: bold;` : ''} align="left">${content.content || content}</td>`)
: (column += `<td ${styleTotal}>${content}</td>`)
}
@ -35,7 +35,7 @@ export const exportToWord = (
tbody += column
}
let preHtml = `
const preHtml = `
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta charset='utf-8'>

4
src/report/Anomali/Gangguan/doc/Anomali_LAPPGU_LPT.ts
View File

@ -37,7 +37,7 @@ export const exportToWord = (
tbody += column
}
let preHtml = `
const preHtml = `
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta charset='utf-8'>
@ -209,7 +209,7 @@ export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName:
const year = new Date().getFullYear()
const filename = 'Laporan Detail ' + reportName + '.doc'
let preHtml = `
const preHtml = `
<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
<head>
<meta charset='utf-8'>