feat: create export doc monalisa keluhan
This commit is contained in:
kur0nek-o
parent
37fb255e03
commit
8ec4e70ee8
@ -147,7 +147,8 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
exportToXLSX,
|
||||
exportToDOCX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
@ -184,6 +185,7 @@ const onExporting = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportToDOCX(reportMeta.value, data.value)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -398,7 +398,8 @@ import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
exportToXLSX,
|
||||
exportToDOCX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
@ -436,6 +437,7 @@ const onExporting = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportToDOCX(reportMeta.value, data.value)
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -292,7 +292,8 @@ import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
exportToXLSX,
|
||||
exportToDOCX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
@ -337,6 +338,7 @@ const onExporting = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportToDOCX(reportMeta.value, data.value)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -546,7 +546,9 @@ import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
exportDetailToXLSX,
|
||||
exportToDOCX,
|
||||
exportDetailToDOCX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai'
|
||||
|
||||
const client = apolloClient()
|
||||
@ -583,6 +585,7 @@ const onExporting = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportToDOCX(reportMeta.value, data.value)
|
||||
}
|
||||
}
|
||||
|
||||
@ -592,6 +595,7 @@ const onExportingDetail = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -295,7 +295,8 @@ import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
exportToXLSX,
|
||||
exportToDOCX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
@ -341,6 +342,7 @@ const onExporting = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportToDOCX(reportMeta.value, data.value)
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -301,7 +301,8 @@ import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
exportToXLSX,
|
||||
exportToDOCX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
@ -346,6 +347,7 @@ const onExporting = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportToDOCX(reportMeta.value, data.value)
|
||||
}
|
||||
}
|
||||
const resetData = () => {
|
||||
|
||||
@ -299,7 +299,8 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
exportToXLSX,
|
||||
exportToDOCX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan'
|
||||
|
||||
const position = { of: '#data' }
|
||||
@ -343,6 +344,7 @@ const onExporting = (e: any) => {
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
exportToDOCX(reportMeta.value, data.value)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,23 +1,11 @@
|
||||
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 { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { exportToWord } from './doc/MonalisaKR_GangguanPerJenisKeluhan'
|
||||
|
||||
const reportName = '(Monalisa) Rekapitulasi Keluhan Per Jenis Keluhan'
|
||||
const fontSize = 5
|
||||
@ -272,4 +260,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportToWord(reportMeta, formatData(rawData), reportName)
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
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'
|
||||
@ -19,6 +6,7 @@ import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { exportToWord } from './doc/MonalisaKR_JumlahDDRPTRCTKeluhan'
|
||||
|
||||
const reportName = 'Jumlah dan Durasi RPT RCT Keluhan'
|
||||
const fontSize = 5
|
||||
@ -322,4 +310,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportToWord(reportMeta, formatData(rawData), reportName)
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
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'
|
||||
@ -19,10 +6,10 @@ import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { exportToWord } from './doc/MonalisaKR_JumlahKaliKeluhan'
|
||||
|
||||
const reportName = 'Jumlah Kali Keluhan'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const groupingData = (data: any) => {
|
||||
const groupedData: any = {}
|
||||
@ -370,4 +357,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportToWord(reportMeta, formatData(rawData), reportName)
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
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'
|
||||
@ -19,6 +6,7 @@ import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber } from '@/utils/numbers'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { exportToWord, exportDetailToWord } from './doc/MonalisaKR_KeluhanBelumSelesai'
|
||||
|
||||
const reportName = 'Rekapitulasi Keluhan Belum Selesai'
|
||||
const fontSize = 5
|
||||
@ -486,4 +474,19 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
||||
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportToWord(reportMeta, formatData(rawData), reportName)
|
||||
}
|
||||
|
||||
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportDetailToWord(reportMeta, rawData, reportName)
|
||||
}
|
||||
|
||||
export {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX,
|
||||
exportToDOCX,
|
||||
exportDetailToDOCX
|
||||
}
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
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'
|
||||
@ -19,6 +6,7 @@ import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { exportToWord } from './doc/MonalisaKR_LaporUlangKeluhan'
|
||||
|
||||
const reportName = 'Rekapitulasi Lapor Ulang Keluhan'
|
||||
const fontSize = 5
|
||||
@ -369,4 +357,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportToWord(reportMeta, formatData(rawData), reportName)
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
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'
|
||||
@ -19,6 +6,7 @@ import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { exportToWord } from './doc/MonalisaKR_RecoveryTimeKeluhan'
|
||||
|
||||
const reportName = 'Recovery Time (RCT) Keluhan'
|
||||
const fontSize = 5
|
||||
@ -380,4 +368,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportToWord(reportMeta, formatData(rawData), reportName)
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
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'
|
||||
@ -19,6 +6,7 @@ import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { exportToWord } from './doc/MonalisaKR_ResponseTimeKeluhan'
|
||||
|
||||
const reportName = 'Response Time (RPT) Keluhan'
|
||||
const fontSize = 5
|
||||
@ -380,4 +368,8 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||
exportToWord(reportMeta, formatData(rawData), reportName)
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||
|
||||
@ -0,0 +1,157 @@
|
||||
export const exportToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let tbody = ''
|
||||
|
||||
for (let index = 0; index < rawData.length; index++) {
|
||||
const element = rawData[index]
|
||||
|
||||
let column = `<tr>`
|
||||
let styleTotal = ''
|
||||
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const content = element[i]
|
||||
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
|
||||
|
||||
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
|
||||
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
|
||||
}
|
||||
|
||||
i === 0
|
||||
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
|
||||
: (column += `<td ${styleTotal}>${content}</td>`)
|
||||
}
|
||||
|
||||
column += `</tr>`
|
||||
tbody += column
|
||||
}
|
||||
|
||||
let 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>${reportName}</title>
|
||||
<style type="text/css" media="print">
|
||||
@page Section1 {
|
||||
size:841.95pt 21.0cm;
|
||||
mso-page-orientation:landscape;
|
||||
margin:72.0pt 72.0pt 72.0pt 72.0pt;
|
||||
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: 8px;
|
||||
}
|
||||
|
||||
table.main thead tr {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
`
|
||||
|
||||
const body = `
|
||||
<div class=Section1>
|
||||
<header>
|
||||
<h6>PT. PLN(Persero)</h6>
|
||||
|
||||
<table class="meta">
|
||||
<tr>
|
||||
<td><h6>UNIT INDUK</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.uid
|
||||
? rawMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.up3
|
||||
? rawMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT LAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.ulp
|
||||
? rawMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>REGIONAL</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${rawMeta.regional.name.toUpperCase()}</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th><h6>${reportName.toUpperCase()}</h6></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h6>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>ID Gangguan</th>
|
||||
<th>Jenis Gangguan</th>
|
||||
<th>Jumlah</th>
|
||||
<th>%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</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)
|
||||
}
|
||||
@ -0,0 +1,188 @@
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
export const exportToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let tbody = ''
|
||||
|
||||
for (let index = 0; index < rawData.length; index++) {
|
||||
const element = rawData[index]
|
||||
|
||||
let column = `<tr>`
|
||||
let styleTotal = ''
|
||||
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const content = element[i]
|
||||
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
|
||||
|
||||
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
|
||||
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
|
||||
}
|
||||
|
||||
i === 0
|
||||
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
|
||||
: (column += `<td ${styleTotal}>${content}</td>`)
|
||||
}
|
||||
|
||||
column += `</tr>`
|
||||
tbody += column
|
||||
}
|
||||
|
||||
let 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>${reportName}</title>
|
||||
<style type="text/css" media="print">
|
||||
@page Section1 {
|
||||
size:841.95pt 21.0cm;
|
||||
mso-page-orientation:landscape;
|
||||
margin:72.0pt 72.0pt 72.0pt 72.0pt;
|
||||
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: 8px;
|
||||
}
|
||||
|
||||
table.main thead tr {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
`
|
||||
|
||||
const body = `
|
||||
<div class=Section1>
|
||||
<header>
|
||||
<h6>PT. PLN(Persero)</h6>
|
||||
|
||||
<table class="meta">
|
||||
<tr>
|
||||
<td><h6>UNIT INDUK</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.uid
|
||||
? rawMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.up3
|
||||
? rawMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT LAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.ulp
|
||||
? rawMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>REGIONAL</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${rawMeta.regional.name.toUpperCase()}</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th><h6>${reportName.toUpperCase()}</h6></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h6>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="4">Nama Unit</th>
|
||||
<th colspan="12">Jumlah dan Durasi RPT & RCT Keluhan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="6">${getMonthName(rawMeta.currentMonth) + ' ' + rawMeta.currentYear}</th>
|
||||
<th colspan="6">s.d ${getMonthName(rawMeta.currentMonth) + ' ' + rawMeta.currentYear}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total RPT</th>
|
||||
<th>Jumlah Keluhan</th>
|
||||
<th>RPT Keluhan</th>
|
||||
<th>Total RCT</th>
|
||||
<th>Jumlah Keluhan</th>
|
||||
<th>RCT Keluhan</th>
|
||||
<th>Total RPT</th>
|
||||
<th>Jumlah Keluhan</th>
|
||||
<th>RPT Keluhan</th>
|
||||
<th>Total RCT</th>
|
||||
<th>Jumlah Keluhan</th>
|
||||
<th>RCT Keluhan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>a</td>
|
||||
<td>b</td>
|
||||
<td>c=a/b</td>
|
||||
<td>d</td>
|
||||
<td>e</td>
|
||||
<td>f=d/e</td>
|
||||
<td>a</td>
|
||||
<td>b</td>
|
||||
<td>c=a/b</td>
|
||||
<td>d</td>
|
||||
<td>e</td>
|
||||
<td>f=d/e</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</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)
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
export const exportToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let tbody = ''
|
||||
|
||||
for (let index = 0; index < rawData.length; index++) {
|
||||
const element = rawData[index]
|
||||
|
||||
let column = `<tr>`
|
||||
let styleTotal = ''
|
||||
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const content = element[i]
|
||||
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
|
||||
|
||||
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
|
||||
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
|
||||
}
|
||||
|
||||
i === 0
|
||||
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
|
||||
: (column += `<td ${styleTotal}>${content}</td>`)
|
||||
}
|
||||
|
||||
column += `</tr>`
|
||||
tbody += column
|
||||
}
|
||||
|
||||
let 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>${reportName}</title>
|
||||
<style type="text/css" media="print">
|
||||
@page Section1 {
|
||||
size:841.95pt 21.0cm;
|
||||
mso-page-orientation:landscape;
|
||||
margin:72.0pt 72.0pt 72.0pt 72.0pt;
|
||||
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: 8px;
|
||||
}
|
||||
|
||||
table.main thead tr {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
`
|
||||
|
||||
const body = `
|
||||
<div class=Section1>
|
||||
<header>
|
||||
<h6>PT. PLN(Persero)</h6>
|
||||
|
||||
<table class="meta">
|
||||
<tr>
|
||||
<td><h6>UNIT INDUK</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.uid
|
||||
? rawMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.up3
|
||||
? rawMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT LAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.ulp
|
||||
? rawMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>REGIONAL</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${rawMeta.regional.name.toUpperCase()}</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th><h6>${reportName.toUpperCase()}</h6></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h6>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="3">No</th>
|
||||
<th rowspan="3">Nama Unit</th>
|
||||
<th colspan="6">Jumlah Kali Gangguan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3">MOM</th>
|
||||
<th colspan="3">YOY</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>${getMonthName(rawMeta.lastMonth)} ${rawMeta.lastYearMoM}</th>
|
||||
<th>${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.lastYear}</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</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)
|
||||
}
|
||||
@ -0,0 +1,292 @@
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
|
||||
export const exportToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let tbody = ''
|
||||
|
||||
for (let index = 0; index < rawData.length; index++) {
|
||||
const element = rawData[index]
|
||||
|
||||
let column = `<tr>`
|
||||
let styleTotal = ''
|
||||
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const content = element[i]
|
||||
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
|
||||
|
||||
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
|
||||
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
|
||||
}
|
||||
|
||||
i === 0
|
||||
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
|
||||
: (column += `<td ${styleTotal}>${content}</td>`)
|
||||
}
|
||||
|
||||
column += `</tr>`
|
||||
tbody += column
|
||||
}
|
||||
|
||||
let 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>${reportName}</title>
|
||||
<style type="text/css" media="print">
|
||||
@page Section1 {
|
||||
size:841.95pt 21.0cm;
|
||||
mso-page-orientation:landscape;
|
||||
margin:72.0pt 72.0pt 72.0pt 72.0pt;
|
||||
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: 8px;
|
||||
}
|
||||
|
||||
table.main thead tr {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
`
|
||||
|
||||
const body = `
|
||||
<div class=Section1>
|
||||
<header>
|
||||
<h6>PT. PLN(Persero)</h6>
|
||||
|
||||
<table class="meta">
|
||||
<tr>
|
||||
<td><h6>UNIT INDUK</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.uid
|
||||
? rawMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.up3
|
||||
? rawMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT LAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.ulp
|
||||
? rawMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>REGIONAL</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${rawMeta.regional.name.toUpperCase()}</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th><h6>${reportName.toUpperCase()}</h6></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h6>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">No</th>
|
||||
<th rowspan="2">Nama Unit</th>
|
||||
<th colspan="3">Tahun</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Keluhan</th>
|
||||
<th>Informasi</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</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)
|
||||
}
|
||||
|
||||
export const exportDetailToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan Detail ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let 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: 8px;
|
||||
}
|
||||
|
||||
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>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>No Laporan</th>
|
||||
<th>UID/UIW</th>
|
||||
<th>UP3</th>
|
||||
<th>ULP</th>
|
||||
<th>ID Pelanggan</th>
|
||||
<th>Nama Pelapor</th>
|
||||
<th>Alamat Pelapor</th>
|
||||
<th>No Telp Pelapor</th>
|
||||
<th>Keterangan Pelapor</th>
|
||||
<th>Penyebab</th>
|
||||
<th>Kode Gangguan</th>
|
||||
<th>Jenis Gangguan</th>
|
||||
<th>Durasi Response Time</th>
|
||||
<th>Durasi Recovery Time</th>
|
||||
<th>Tgl Lapor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${rawData
|
||||
.map(
|
||||
(item: any, i: any) => `
|
||||
<tr>
|
||||
<td>${i + 1}</td>
|
||||
<td>${item.no_laporan}</td>
|
||||
<td>${item.nama_uid}</td>
|
||||
<td>${item.nama_ulp}</td>
|
||||
<td>${item.id_pelanggan}</td>
|
||||
<td>${item.nama_pelapor}</td>
|
||||
<td>${item.alamat_pelapor}</td>
|
||||
<td>${item.no_telp_pelapor}</td>
|
||||
<td>${item.keterangan_pelapor}</td>
|
||||
<td>${item.penyebab}</td>
|
||||
<td>${item.kode_gangguan}</td>
|
||||
<td>${item.jenis_gangguan}</td>
|
||||
<td>${item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-'}</td>
|
||||
<td>${item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-'}</td>
|
||||
<td>${item.waktu_lapor}</td>
|
||||
</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)
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
export const exportToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let tbody = ''
|
||||
|
||||
for (let index = 0; index < rawData.length; index++) {
|
||||
const element = rawData[index]
|
||||
|
||||
let column = `<tr>`
|
||||
let styleTotal = ''
|
||||
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const content = element[i]
|
||||
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
|
||||
|
||||
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
|
||||
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
|
||||
}
|
||||
|
||||
i === 0
|
||||
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
|
||||
: (column += `<td ${styleTotal}>${content}</td>`)
|
||||
}
|
||||
|
||||
column += `</tr>`
|
||||
tbody += column
|
||||
}
|
||||
|
||||
let 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>${reportName}</title>
|
||||
<style type="text/css" media="print">
|
||||
@page Section1 {
|
||||
size:841.95pt 21.0cm;
|
||||
mso-page-orientation:landscape;
|
||||
margin:72.0pt 72.0pt 72.0pt 72.0pt;
|
||||
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: 8px;
|
||||
}
|
||||
|
||||
table.main thead tr {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
`
|
||||
|
||||
const body = `
|
||||
<div class=Section1>
|
||||
<header>
|
||||
<h6>PT. PLN(Persero)</h6>
|
||||
|
||||
<table class="meta">
|
||||
<tr>
|
||||
<td><h6>UNIT INDUK</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.uid
|
||||
? rawMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.up3
|
||||
? rawMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT LAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.ulp
|
||||
? rawMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>REGIONAL</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${rawMeta.regional.name.toUpperCase()}</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th><h6>${reportName.toUpperCase()}</h6></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h6>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="3">No</th>
|
||||
<th rowspan="3">Nama Unit</th>
|
||||
<th colspan="6">Lapor Ulang Keluhan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3">MOM</th>
|
||||
<th colspan="3">YOY</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>${getMonthName(rawMeta.lastMonth)} ${rawMeta.lastYearMoM}</th>
|
||||
<th>${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.lastYear}</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</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)
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
export const exportToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let tbody = ''
|
||||
|
||||
for (let index = 0; index < rawData.length; index++) {
|
||||
const element = rawData[index]
|
||||
|
||||
let column = `<tr>`
|
||||
let styleTotal = ''
|
||||
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const content = element[i]
|
||||
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
|
||||
|
||||
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
|
||||
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
|
||||
}
|
||||
|
||||
i === 0
|
||||
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
|
||||
: (column += `<td ${styleTotal}>${content}</td>`)
|
||||
}
|
||||
|
||||
column += `</tr>`
|
||||
tbody += column
|
||||
}
|
||||
|
||||
let 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>${reportName}</title>
|
||||
<style type="text/css" media="print">
|
||||
@page Section1 {
|
||||
size:841.95pt 21.0cm;
|
||||
mso-page-orientation:landscape;
|
||||
margin:72.0pt 72.0pt 72.0pt 72.0pt;
|
||||
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: 8px;
|
||||
}
|
||||
|
||||
table.main thead tr {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
`
|
||||
|
||||
const body = `
|
||||
<div class=Section1>
|
||||
<header>
|
||||
<h6>PT. PLN(Persero)</h6>
|
||||
|
||||
<table class="meta">
|
||||
<tr>
|
||||
<td><h6>UNIT INDUK</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.uid
|
||||
? rawMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.up3
|
||||
? rawMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT LAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.ulp
|
||||
? rawMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>REGIONAL</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${rawMeta.regional.name.toUpperCase()}</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th><h6>${reportName.toUpperCase()}</h6></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h6>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="3">No</th>
|
||||
<th rowspan="3">Nama Unit</th>
|
||||
<th colspan="6">Jumlah RCT Kali Keluhan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3">MOM</th>
|
||||
<th colspan="3">YOY</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>${getMonthName(rawMeta.lastMonth)} ${rawMeta.lastYearMoM}</th>
|
||||
<th>${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.lastYear}</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</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)
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
export const exportToWord = (rawMeta: any, rawData: any, reportName: String) => {
|
||||
const filename = 'Laporan ' + reportName + '.doc'
|
||||
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()
|
||||
|
||||
let tbody = ''
|
||||
|
||||
for (let index = 0; index < rawData.length; index++) {
|
||||
const element = rawData[index]
|
||||
|
||||
let column = `<tr>`
|
||||
let styleTotal = ''
|
||||
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const content = element[i]
|
||||
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
|
||||
|
||||
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
|
||||
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
|
||||
}
|
||||
|
||||
i === 0
|
||||
? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
|
||||
: (column += `<td ${styleTotal}>${content}</td>`)
|
||||
}
|
||||
|
||||
column += `</tr>`
|
||||
tbody += column
|
||||
}
|
||||
|
||||
let 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>${reportName}</title>
|
||||
<style type="text/css" media="print">
|
||||
@page Section1 {
|
||||
size:841.95pt 21.0cm;
|
||||
mso-page-orientation:landscape;
|
||||
margin:72.0pt 72.0pt 72.0pt 72.0pt;
|
||||
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: 8px;
|
||||
}
|
||||
|
||||
table.main thead tr {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
`
|
||||
|
||||
const body = `
|
||||
<div class=Section1>
|
||||
<header>
|
||||
<h6>PT. PLN(Persero)</h6>
|
||||
|
||||
<table class="meta">
|
||||
<tr>
|
||||
<td><h6>UNIT INDUK</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.uid
|
||||
? rawMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT PELAKSANA PELAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.up3
|
||||
? rawMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>UNIT LAYANAN PELANGGAN</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${
|
||||
rawMeta.ulp
|
||||
? rawMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}</h6></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>REGIONAL</h6></td>
|
||||
<td><h6>:</h6></td>
|
||||
<td><h6>${rawMeta.regional.name.toUpperCase()}</h6></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th><h6>${reportName.toUpperCase()}</h6></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><h6>${rawMeta.periode}</h6></th>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<br>
|
||||
|
||||
<table border="1" class="main">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="3">No</th>
|
||||
<th rowspan="3">Nama Unit</th>
|
||||
<th colspan="6">Jumlah RPT Kali Keluhan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3">MOM</th>
|
||||
<th colspan="3">YOY</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>${getMonthName(rawMeta.lastMonth)} ${rawMeta.lastYearMoM}</th>
|
||||
<th>${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.lastYear}</th>
|
||||
<th>s.d ${getMonthName(rawMeta.currentMonth)} ${rawMeta.currentYear}</th>
|
||||
<th>%</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${tbody}</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)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user