Merge branch 'dev-bagus' of https://github.com/defuj/eis into dev-defuj
This commit is contained in:
commit
788bde1967
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -132,7 +133,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -467,18 +468,18 @@ import {
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_BerdasarMedia'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -495,6 +496,12 @@ const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const date = ref('2023-02-04')
|
||||
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 setDate = (value: any) => {
|
||||
if (isNumber(value)) {
|
||||
@ -539,6 +546,8 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -602,30 +611,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -457,7 +458,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -778,7 +779,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type13 from '@/components/Form/FiltersType/Type13.vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -794,18 +795,18 @@ import {
|
||||
DxSelection,
|
||||
DxGrouping
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -824,6 +825,13 @@ const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: '',
|
||||
groupBy: false
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -868,6 +876,14 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: params.periode,
|
||||
groupBy: params.groupBy
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -932,30 +948,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -459,7 +460,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -780,7 +781,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type13 from '@/components/Form/FiltersType/Type13.vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -796,12 +797,6 @@ import {
|
||||
DxSelection,
|
||||
DxGrouping
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
@ -809,6 +804,12 @@ import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { reformatDate } from '@/utils/texts'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerTanggal'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -827,6 +828,13 @@ const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: '',
|
||||
groupBy: false
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -864,6 +872,14 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: params.periode,
|
||||
groupBy: params.groupBy
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -930,30 +946,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -590,7 +591,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -927,18 +928,18 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerUnit'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -956,6 +957,11 @@ const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -998,6 +1004,12 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
periode: params.periode
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -1062,30 +1074,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -710,12 +711,6 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
@ -725,6 +720,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -747,33 +748,36 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
@ -801,6 +805,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -877,8 +896,6 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
dataSubSelected.value = data
|
||||
}
|
||||
|
||||
const onExportingDetail = (e: any) => {}
|
||||
|
||||
const filters = ref()
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
|
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="filterData(filters)"
|
||||
@ -287,17 +288,15 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -313,33 +312,27 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
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' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
|
||||
@ -381,6 +374,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -43,15 +43,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return {
|
||||
|
@ -43,15 +43,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return {
|
||||
|
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -279,15 +279,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -101,15 +101,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -78,15 +78,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -107,15 +107,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -109,15 +109,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -256,15 +256,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -240,15 +240,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -107,15 +107,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -239,15 +239,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -292,15 +292,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -290,15 +290,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -84,15 +84,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -59,15 +59,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -45,15 +45,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
||||
|
@ -45,15 +45,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
||||
|
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -224,15 +224,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
529
src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
Normal file
529
src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
Normal file
@ -0,0 +1,529 @@
|
||||
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 } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Keluhan Berdasarkan Media'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
tgl1: 0,
|
||||
tgl2: 0,
|
||||
tgl3: 0,
|
||||
tgl4: 0,
|
||||
tgl5: 0,
|
||||
tgl6: 0,
|
||||
tgl7: 0,
|
||||
tgl8: 0,
|
||||
tgl9: 1,
|
||||
tgl10: 0,
|
||||
tgl11: 0,
|
||||
tgl12: 0,
|
||||
tgl13: 0,
|
||||
tgl14: 0,
|
||||
tgl15: 2,
|
||||
tgl16: 0,
|
||||
tgl17: 0,
|
||||
tgl18: 0,
|
||||
tgl19: 0,
|
||||
tgl20: 0,
|
||||
tgl21: 0,
|
||||
tgl22: 0,
|
||||
tgl23: 0,
|
||||
tgl24: 0,
|
||||
tgl25: 0,
|
||||
tgl26: 0,
|
||||
tgl27: 0,
|
||||
tgl28: 0,
|
||||
tgl29: 0,
|
||||
tgl30: 0,
|
||||
tgl31: 0
|
||||
}
|
||||
|
||||
formattedData.push(
|
||||
...rawData.map((item: any, i: any) => {
|
||||
for (const key in total) {
|
||||
if (key !== 'total') {
|
||||
total[key] += item[key]
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.media,
|
||||
formatNumber(item.tgl1),
|
||||
formatNumber(item.tgl2),
|
||||
formatNumber(item.tgl3),
|
||||
formatNumber(item.tgl4),
|
||||
formatNumber(item.tgl5),
|
||||
formatNumber(item.tgl6),
|
||||
formatNumber(item.tgl7),
|
||||
formatNumber(item.tgl8),
|
||||
formatNumber(item.tgl9),
|
||||
formatNumber(item.tgl10),
|
||||
formatNumber(item.tgl11),
|
||||
formatNumber(item.tgl12),
|
||||
formatNumber(item.tgl13),
|
||||
formatNumber(item.tgl14),
|
||||
formatNumber(item.tgl15),
|
||||
formatNumber(item.tgl16),
|
||||
formatNumber(item.tgl17),
|
||||
formatNumber(item.tgl18),
|
||||
formatNumber(item.tgl19),
|
||||
formatNumber(item.tgl20),
|
||||
formatNumber(item.tgl21),
|
||||
formatNumber(item.tgl22),
|
||||
formatNumber(item.tgl23),
|
||||
formatNumber(item.tgl24),
|
||||
formatNumber(item.tgl25),
|
||||
formatNumber(item.tgl26),
|
||||
formatNumber(item.tgl27),
|
||||
formatNumber(item.tgl28),
|
||||
formatNumber(item.tgl29),
|
||||
formatNumber(item.tgl30),
|
||||
formatNumber(item.tgl31)
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
...Array.from({ length: 31 }, (_, i) => formatNumber(total[`tgl${i + 1}`]))
|
||||
])
|
||||
|
||||
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('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { 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 Media',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Tanggal',
|
||||
colSpan: 31
|
||||
}
|
||||
],
|
||||
[...Array.from({ length: 31 }, (_, i) => (i + 1).toString())]
|
||||
],
|
||||
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,
|
||||
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,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:AG1')
|
||||
worksheet.mergeCells('A2:AG2')
|
||||
worksheet.mergeCells('A3:AG3')
|
||||
worksheet.mergeCells('A4:AG4')
|
||||
worksheet.mergeCells('A6:AG6')
|
||||
worksheet.mergeCells('A7:AG7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
@ -290,15 +290,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
@ -263,15 +263,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
757
src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts
Normal file
757
src/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.ts
Normal file
@ -0,0 +1,757 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Keluhan Per Kelompok Keluhan'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const groupingData = (data: any) => {
|
||||
const groupedData: any = {}
|
||||
|
||||
data.forEach((item: any) => {
|
||||
const { nama_uid } = item
|
||||
|
||||
if (!groupedData[nama_uid]) {
|
||||
groupedData[nama_uid] = []
|
||||
}
|
||||
|
||||
groupedData[nama_uid].push(item)
|
||||
})
|
||||
|
||||
return groupedData
|
||||
}
|
||||
|
||||
const formatData = (rawData: any, groupBy: boolean) => {
|
||||
const formattedData: any = []
|
||||
const grandTotal: any = {
|
||||
total_laporan: 0,
|
||||
total_laporan_sudah_selesai: 0,
|
||||
total_laporan_belum_selesai: 0,
|
||||
total_response_time_total: 0,
|
||||
total_response_time_rata_rata: [],
|
||||
total_response_time_max: [],
|
||||
total_response_time_min: [],
|
||||
total_response_time_lebih_sla: 0,
|
||||
total_response_time_kurang_sla: 0,
|
||||
total_recovery_time_total: 0,
|
||||
total_recovery_time_rata_rata: [],
|
||||
total_recovery_time_max: [],
|
||||
total_recovery_time_min: [],
|
||||
total_recovery_time_lebih_sla: 0,
|
||||
total_recovery_time_kurang_sla: 0
|
||||
}
|
||||
|
||||
if (groupBy) {
|
||||
const data = groupingData(rawData)
|
||||
|
||||
for (const nama_uid in data) {
|
||||
const total: any = {
|
||||
total_laporan: 0,
|
||||
total_laporan_sudah_selesai: 0,
|
||||
total_laporan_belum_selesai: 0,
|
||||
total_response_time_total: 0,
|
||||
total_response_time_rata_rata: [],
|
||||
total_response_time_max: [],
|
||||
total_response_time_min: [],
|
||||
total_response_time_lebih_sla: 0,
|
||||
total_response_time_kurang_sla: 0,
|
||||
total_recovery_time_total: 0,
|
||||
total_recovery_time_rata_rata: [],
|
||||
total_recovery_time_max: [],
|
||||
total_recovery_time_min: [],
|
||||
total_recovery_time_lebih_sla: 0,
|
||||
total_recovery_time_kurang_sla: 0
|
||||
}
|
||||
|
||||
formattedData.push([{ content: nama_uid, colSpan: 19, styles: { fontStyle: 'bold' } }])
|
||||
|
||||
for (let i = 0; i < data[nama_uid].length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
data[nama_uid][i].kelompok,
|
||||
formatNumber(data[nama_uid][i].total),
|
||||
formatNumber(data[nama_uid][i].total_selesai),
|
||||
formatPercentage(
|
||||
!data[nama_uid][i].total || !data[nama_uid][i].total_selesai
|
||||
? '0%'
|
||||
: (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_uid][i].total_inproses),
|
||||
formatPercentage(
|
||||
!data[nama_uid][i].total_inproses || !data[nama_uid][i].total
|
||||
? '0%'
|
||||
: (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_uid][i].total_durasi_response),
|
||||
formatNumber(data[nama_uid][i].avg_durasi_response),
|
||||
formatWaktu(data[nama_uid][i].max_durasi_response),
|
||||
formatWaktu(data[nama_uid][i].min_durasi_response),
|
||||
formatNumber(data[nama_uid][i].total_diatas_sla_response),
|
||||
formatNumber(data[nama_uid][i].total_dibawah_sla_response),
|
||||
formatNumber(data[nama_uid][i].total_durasi_recovery),
|
||||
formatNumber(data[nama_uid][i].avg_durasi_recovery),
|
||||
formatWaktu(data[nama_uid][i].max_durasi_recovery),
|
||||
formatWaktu(data[nama_uid][i].min_durasi_recovery),
|
||||
formatNumber(data[nama_uid][i].total_diatas_sla_recovery),
|
||||
formatNumber(data[nama_uid][i].total_dibawah_sla_recovery)
|
||||
])
|
||||
|
||||
total.total_laporan += data[nama_uid][i].total
|
||||
total.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
|
||||
total.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
|
||||
total.total_response_time_total += data[nama_uid][i].total_durasi_response
|
||||
total.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
|
||||
total.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
|
||||
total.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
|
||||
total.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
|
||||
total.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
|
||||
total.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
|
||||
total.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
|
||||
total.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
|
||||
total.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
|
||||
total.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
|
||||
total.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
|
||||
|
||||
grandTotal.total_laporan += data[nama_uid][i].total
|
||||
grandTotal.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
|
||||
grandTotal.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
|
||||
grandTotal.total_response_time_total += data[nama_uid][i].total_durasi_response
|
||||
grandTotal.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
|
||||
grandTotal.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
|
||||
grandTotal.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
|
||||
grandTotal.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
|
||||
grandTotal.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
|
||||
grandTotal.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
|
||||
grandTotal.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
|
||||
grandTotal.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
|
||||
grandTotal.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
|
||||
grandTotal.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
|
||||
grandTotal.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(total.total_laporan),
|
||||
formatNumber(total.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan || !total.total_laporan_sudah_selesai
|
||||
? '0%'
|
||||
: (total.total_laporan_sudah_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan || !total.total_laporan_belum_selesai
|
||||
? '0%'
|
||||
: (total.total_laporan_belum_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_response_time_total),
|
||||
formatNumber(
|
||||
total.total_response_time_rata_rata.length
|
||||
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_response_time_max)),
|
||||
formatWaktu(Math.min(...total.total_response_time_min)),
|
||||
formatNumber(total.total_response_time_lebih_sla),
|
||||
formatNumber(total.total_response_time_kurang_sla),
|
||||
formatNumber(total.total_recovery_time_total),
|
||||
formatNumber(
|
||||
total.total_recovery_time_rata_rata.length
|
||||
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...total.total_recovery_time_min)),
|
||||
formatNumber(total.total_recovery_time_lebih_sla),
|
||||
formatNumber(total.total_recovery_time_kurang_sla)
|
||||
])
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < rawData.length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
rawData[i].kelompok,
|
||||
formatNumber(rawData[i].total),
|
||||
formatNumber(rawData[i].total_selesai),
|
||||
formatPercentage(
|
||||
!rawData[i].total || !rawData[i].total_selesai
|
||||
? '0%'
|
||||
: (rawData[i].total_selesai / rawData[i].total) * 100
|
||||
),
|
||||
formatNumber(rawData[i].total_inproses),
|
||||
formatPercentage(
|
||||
!rawData[i].total_inproses || !rawData[i].total
|
||||
? '0%'
|
||||
: (rawData[i].total_inproses / rawData[i].total) * 100
|
||||
),
|
||||
formatNumber(rawData[i].total_durasi_response),
|
||||
formatNumber(rawData[i].avg_durasi_response),
|
||||
formatWaktu(rawData[i].max_durasi_response),
|
||||
formatWaktu(rawData[i].min_durasi_response),
|
||||
formatNumber(rawData[i].total_diatas_sla_response),
|
||||
formatNumber(rawData[i].total_dibawah_sla_response),
|
||||
formatNumber(rawData[i].total_durasi_recovery),
|
||||
formatNumber(rawData[i].avg_durasi_recovery),
|
||||
formatWaktu(rawData[i].max_durasi_recovery),
|
||||
formatWaktu(rawData[i].min_durasi_recovery),
|
||||
formatNumber(rawData[i].total_diatas_sla_recovery),
|
||||
formatNumber(rawData[i].total_dibawah_sla_recovery)
|
||||
])
|
||||
|
||||
grandTotal.total_laporan += rawData[i].total
|
||||
grandTotal.total_laporan_sudah_selesai += rawData[i].total_selesai
|
||||
grandTotal.total_laporan_belum_selesai += rawData[i].total_inproses
|
||||
grandTotal.total_response_time_total += rawData[i].total_durasi_response
|
||||
grandTotal.total_response_time_rata_rata.push(rawData[i].avg_durasi_response)
|
||||
grandTotal.total_response_time_max.push(rawData[i].max_durasi_response)
|
||||
grandTotal.total_response_time_min.push(rawData[i].min_durasi_response)
|
||||
grandTotal.total_response_time_lebih_sla += rawData[i].total_diatas_sla_response
|
||||
grandTotal.total_response_time_kurang_sla += rawData[i].total_dibawah_sla_response
|
||||
grandTotal.total_recovery_time_total += rawData[i].total
|
||||
grandTotal.total_recovery_time_rata_rata.push(rawData[i].avg_durasi_recovery)
|
||||
grandTotal.total_recovery_time_max.push(rawData[i].max_durasi_recovery)
|
||||
grandTotal.total_recovery_time_min.push(rawData[i].min_durasi_recovery)
|
||||
grandTotal.total_recovery_time_lebih_sla += rawData[i].total_diatas_sla_recovery
|
||||
grandTotal.total_recovery_time_kurang_sla += rawData[i].total_dibawah_sla_recovery
|
||||
}
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(grandTotal.total_laporan),
|
||||
formatNumber(grandTotal.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_response_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_response_time_min)),
|
||||
formatNumber(grandTotal.total_response_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_response_time_kurang_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
|
||||
formatNumber(grandTotal.total_recovery_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_kurang_sla)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData, reportMeta.groupBy)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 23
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'No',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Kelompok Keluhan',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 5
|
||||
},
|
||||
{
|
||||
content: 'Response Time',
|
||||
colSpan: 6
|
||||
},
|
||||
{
|
||||
content: 'Penyelesaian',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'Total',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Sudah Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Belum Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
'Jml',
|
||||
'%',
|
||||
'Jml',
|
||||
'%',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla'
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'GRAND TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 30
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Dalam Proses Bidang',
|
||||
'Selesai Bidang Unit',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Rayon',
|
||||
'Uraian',
|
||||
'Response Pelanggan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
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,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:S1')
|
||||
worksheet.mergeCells('A2:S2')
|
||||
worksheet.mergeCells('A3:S3')
|
||||
worksheet.mergeCells('A4:S4')
|
||||
worksheet.mergeCells('A6:S6')
|
||||
worksheet.mergeCells('A7:S7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
|
757
src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
Normal file
757
src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
Normal file
@ -0,0 +1,757 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Keluhan Per Tanggal'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const groupingData = (data: any) => {
|
||||
const groupedData: any = {}
|
||||
|
||||
data.forEach((item: any) => {
|
||||
const { nama_uid } = item
|
||||
|
||||
if (!groupedData[nama_uid]) {
|
||||
groupedData[nama_uid] = []
|
||||
}
|
||||
|
||||
groupedData[nama_uid].push(item)
|
||||
})
|
||||
|
||||
return groupedData
|
||||
}
|
||||
|
||||
const formatData = (rawData: any, groupBy: boolean) => {
|
||||
const formattedData: any = []
|
||||
const grandTotal: any = {
|
||||
total_laporan: 0,
|
||||
total_laporan_sudah_selesai: 0,
|
||||
total_laporan_belum_selesai: 0,
|
||||
total_response_time_total: 0,
|
||||
total_response_time_rata_rata: [],
|
||||
total_response_time_max: [],
|
||||
total_response_time_min: [],
|
||||
total_response_time_lebih_sla: 0,
|
||||
total_response_time_kurang_sla: 0,
|
||||
total_recovery_time_total: 0,
|
||||
total_recovery_time_rata_rata: [],
|
||||
total_recovery_time_max: [],
|
||||
total_recovery_time_min: [],
|
||||
total_recovery_time_lebih_sla: 0,
|
||||
total_recovery_time_kurang_sla: 0
|
||||
}
|
||||
|
||||
if (groupBy) {
|
||||
const data = groupingData(rawData)
|
||||
|
||||
for (const nama_uid in data) {
|
||||
const total: any = {
|
||||
total_laporan: 0,
|
||||
total_laporan_sudah_selesai: 0,
|
||||
total_laporan_belum_selesai: 0,
|
||||
total_response_time_total: 0,
|
||||
total_response_time_rata_rata: [],
|
||||
total_response_time_max: [],
|
||||
total_response_time_min: [],
|
||||
total_response_time_lebih_sla: 0,
|
||||
total_response_time_kurang_sla: 0,
|
||||
total_recovery_time_total: 0,
|
||||
total_recovery_time_rata_rata: [],
|
||||
total_recovery_time_max: [],
|
||||
total_recovery_time_min: [],
|
||||
total_recovery_time_lebih_sla: 0,
|
||||
total_recovery_time_kurang_sla: 0
|
||||
}
|
||||
|
||||
formattedData.push([{ content: nama_uid, colSpan: 19, styles: { fontStyle: 'bold' } }])
|
||||
|
||||
for (let i = 0; i < data[nama_uid].length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
data[nama_uid][i].tanggal_lapor,
|
||||
formatNumber(data[nama_uid][i].total),
|
||||
formatNumber(data[nama_uid][i].total_selesai),
|
||||
formatPercentage(
|
||||
!data[nama_uid][i].total || !data[nama_uid][i].total_selesai
|
||||
? '0%'
|
||||
: (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_uid][i].total_inproses),
|
||||
formatPercentage(
|
||||
!data[nama_uid][i].total_inproses || !data[nama_uid][i].total
|
||||
? '0%'
|
||||
: (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_uid][i].total_durasi_response),
|
||||
formatNumber(data[nama_uid][i].avg_durasi_response),
|
||||
formatWaktu(data[nama_uid][i].max_durasi_response),
|
||||
formatWaktu(data[nama_uid][i].min_durasi_response),
|
||||
formatNumber(data[nama_uid][i].total_diatas_sla_response),
|
||||
formatNumber(data[nama_uid][i].total_dibawah_sla_response),
|
||||
formatNumber(data[nama_uid][i].total_durasi_recovery),
|
||||
formatNumber(data[nama_uid][i].avg_durasi_recovery),
|
||||
formatWaktu(data[nama_uid][i].max_durasi_recovery),
|
||||
formatWaktu(data[nama_uid][i].min_durasi_recovery),
|
||||
formatNumber(data[nama_uid][i].total_diatas_sla_recovery),
|
||||
formatNumber(data[nama_uid][i].total_dibawah_sla_recovery)
|
||||
])
|
||||
|
||||
total.total_laporan += data[nama_uid][i].total
|
||||
total.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
|
||||
total.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
|
||||
total.total_response_time_total += data[nama_uid][i].total_durasi_response
|
||||
total.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
|
||||
total.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
|
||||
total.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
|
||||
total.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
|
||||
total.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
|
||||
total.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
|
||||
total.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
|
||||
total.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
|
||||
total.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
|
||||
total.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
|
||||
total.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
|
||||
|
||||
grandTotal.total_laporan += data[nama_uid][i].total
|
||||
grandTotal.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
|
||||
grandTotal.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
|
||||
grandTotal.total_response_time_total += data[nama_uid][i].total_durasi_response
|
||||
grandTotal.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
|
||||
grandTotal.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
|
||||
grandTotal.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
|
||||
grandTotal.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
|
||||
grandTotal.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
|
||||
grandTotal.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
|
||||
grandTotal.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
|
||||
grandTotal.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
|
||||
grandTotal.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
|
||||
grandTotal.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
|
||||
grandTotal.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(total.total_laporan),
|
||||
formatNumber(total.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan || !total.total_laporan_sudah_selesai
|
||||
? '0%'
|
||||
: (total.total_laporan_sudah_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan || !total.total_laporan_belum_selesai
|
||||
? '0%'
|
||||
: (total.total_laporan_belum_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_response_time_total),
|
||||
formatNumber(
|
||||
total.total_response_time_rata_rata.length
|
||||
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_response_time_max)),
|
||||
formatWaktu(Math.min(...total.total_response_time_min)),
|
||||
formatNumber(total.total_response_time_lebih_sla),
|
||||
formatNumber(total.total_response_time_kurang_sla),
|
||||
formatNumber(total.total_recovery_time_total),
|
||||
formatNumber(
|
||||
total.total_recovery_time_rata_rata.length
|
||||
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...total.total_recovery_time_min)),
|
||||
formatNumber(total.total_recovery_time_lebih_sla),
|
||||
formatNumber(total.total_recovery_time_kurang_sla)
|
||||
])
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < rawData.length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
rawData[i].tanggal_lapor,
|
||||
formatNumber(rawData[i].total),
|
||||
formatNumber(rawData[i].total_selesai),
|
||||
formatPercentage(
|
||||
!rawData[i].total || !rawData[i].total_selesai
|
||||
? '0%'
|
||||
: (rawData[i].total_selesai / rawData[i].total) * 100
|
||||
),
|
||||
formatNumber(rawData[i].total_inproses),
|
||||
formatPercentage(
|
||||
!rawData[i].total_inproses || !rawData[i].total
|
||||
? '0%'
|
||||
: (rawData[i].total_inproses / rawData[i].total) * 100
|
||||
),
|
||||
formatNumber(rawData[i].total_durasi_response),
|
||||
formatNumber(rawData[i].avg_durasi_response),
|
||||
formatWaktu(rawData[i].max_durasi_response),
|
||||
formatWaktu(rawData[i].min_durasi_response),
|
||||
formatNumber(rawData[i].total_diatas_sla_response),
|
||||
formatNumber(rawData[i].total_dibawah_sla_response),
|
||||
formatNumber(rawData[i].total_durasi_recovery),
|
||||
formatNumber(rawData[i].avg_durasi_recovery),
|
||||
formatWaktu(rawData[i].max_durasi_recovery),
|
||||
formatWaktu(rawData[i].min_durasi_recovery),
|
||||
formatNumber(rawData[i].total_diatas_sla_recovery),
|
||||
formatNumber(rawData[i].total_dibawah_sla_recovery)
|
||||
])
|
||||
|
||||
grandTotal.total_laporan += rawData[i].total
|
||||
grandTotal.total_laporan_sudah_selesai += rawData[i].total_selesai
|
||||
grandTotal.total_laporan_belum_selesai += rawData[i].total_inproses
|
||||
grandTotal.total_response_time_total += rawData[i].total_durasi_response
|
||||
grandTotal.total_response_time_rata_rata.push(rawData[i].avg_durasi_response)
|
||||
grandTotal.total_response_time_max.push(rawData[i].max_durasi_response)
|
||||
grandTotal.total_response_time_min.push(rawData[i].min_durasi_response)
|
||||
grandTotal.total_response_time_lebih_sla += rawData[i].total_diatas_sla_response
|
||||
grandTotal.total_response_time_kurang_sla += rawData[i].total_dibawah_sla_response
|
||||
grandTotal.total_recovery_time_total += rawData[i].total
|
||||
grandTotal.total_recovery_time_rata_rata.push(rawData[i].avg_durasi_recovery)
|
||||
grandTotal.total_recovery_time_max.push(rawData[i].max_durasi_recovery)
|
||||
grandTotal.total_recovery_time_min.push(rawData[i].min_durasi_recovery)
|
||||
grandTotal.total_recovery_time_lebih_sla += rawData[i].total_diatas_sla_recovery
|
||||
grandTotal.total_recovery_time_kurang_sla += rawData[i].total_dibawah_sla_recovery
|
||||
}
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(grandTotal.total_laporan),
|
||||
formatNumber(grandTotal.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_response_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_response_time_min)),
|
||||
formatNumber(grandTotal.total_response_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_response_time_kurang_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
|
||||
formatNumber(grandTotal.total_recovery_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_kurang_sla)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData, reportMeta.groupBy)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 23
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'No',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Tanggal Lapor',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 5
|
||||
},
|
||||
{
|
||||
content: 'Response Time',
|
||||
colSpan: 6
|
||||
},
|
||||
{
|
||||
content: 'Penyelesaian',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'Total',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Sudah Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Belum Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
'Jml',
|
||||
'%',
|
||||
'Jml',
|
||||
'%',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla'
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'GRAND TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 30
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Dalam Proses Bidang',
|
||||
'Selesai Bidang Unit',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Rayon',
|
||||
'Uraian',
|
||||
'Response Pelanggan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
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,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:S1')
|
||||
worksheet.mergeCells('A2:S2')
|
||||
worksheet.mergeCells('A3:S3')
|
||||
worksheet.mergeCells('A4:S4')
|
||||
worksheet.mergeCells('A6:S6')
|
||||
worksheet.mergeCells('A7:S7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
|
696
src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts
Normal file
696
src/report/Keluhan/Rekap/RKeluhan_PerUnit.ts
Normal file
@ -0,0 +1,696 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Keluhan Per Unit'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const groupingData = (data: any) => {
|
||||
const groupedData: any = {}
|
||||
|
||||
data.forEach((item: any) => {
|
||||
const { nama_up3 } = item
|
||||
|
||||
if (!groupedData[nama_up3]) {
|
||||
groupedData[nama_up3] = []
|
||||
}
|
||||
|
||||
groupedData[nama_up3].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 key of Object.keys(data)) {
|
||||
const nama_up3 = key
|
||||
|
||||
const total: any = {
|
||||
total_laporan: 0,
|
||||
total_laporan_sudah_selesai: 0,
|
||||
total_laporan_belum_selesai: 0,
|
||||
total_response_time_total: 0,
|
||||
total_response_time_rata_rata: [],
|
||||
total_response_time_max: [],
|
||||
total_response_time_min: [],
|
||||
total_response_time_lebih_sla: 0,
|
||||
total_response_time_kurang_sla: 0,
|
||||
total_recovery_time_total: 0,
|
||||
total_recovery_time_rata_rata: [],
|
||||
total_recovery_time_max: [],
|
||||
total_recovery_time_min: [],
|
||||
total_recovery_time_lebih_sla: 0,
|
||||
total_recovery_time_kurang_sla: 0
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{
|
||||
content: nama_up3,
|
||||
colSpan: 19,
|
||||
styles: { fontStyle: 'bold' }
|
||||
}
|
||||
])
|
||||
|
||||
for (let i = 0; i < data[nama_up3].length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
data[nama_up3][i].nama_ulp,
|
||||
formatNumber(data[nama_up3][i].total),
|
||||
formatNumber(data[nama_up3][i].total_selesai),
|
||||
formatPercentage(
|
||||
!data[nama_up3][i].total || !data[nama_up3][i].total_selesai
|
||||
? '0%'
|
||||
: (data[nama_up3][i].total_selesai / data[nama_up3][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_up3][i].total_inproses),
|
||||
formatPercentage(
|
||||
!data[nama_up3][i].total_inproses || !data[nama_up3][i].total
|
||||
? '0%'
|
||||
: (data[nama_up3][i].total_inproses / data[nama_up3][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_up3][i].total_durasi_response),
|
||||
formatNumber(data[nama_up3][i].avg_durasi_response),
|
||||
formatWaktu(data[nama_up3][i].max_durasi_response),
|
||||
formatWaktu(data[nama_up3][i].min_durasi_response),
|
||||
formatNumber(data[nama_up3][i].total_diatas_sla_response),
|
||||
formatNumber(data[nama_up3][i].total_dibawah_sla_response),
|
||||
formatNumber(data[nama_up3][i].total_durasi_recovery),
|
||||
formatNumber(data[nama_up3][i].avg_durasi_recovery),
|
||||
formatWaktu(data[nama_up3][i].max_durasi_recovery),
|
||||
formatWaktu(data[nama_up3][i].min_durasi_recovery),
|
||||
formatNumber(data[nama_up3][i].total_diatas_sla_recovery),
|
||||
formatNumber(data[nama_up3][i].total_dibawah_sla_recovery)
|
||||
])
|
||||
|
||||
total.total_laporan += data[nama_up3][i].total
|
||||
total.total_laporan_sudah_selesai += data[nama_up3][i].total_selesai
|
||||
total.total_laporan_belum_selesai += data[nama_up3][i].total_inproses
|
||||
total.total_response_time_total += data[nama_up3][i].total_durasi_response
|
||||
total.total_response_time_rata_rata.push(data[nama_up3][i].avg_durasi_response)
|
||||
total.total_response_time_max.push(data[nama_up3][i].max_durasi_response)
|
||||
total.total_response_time_min.push(data[nama_up3][i].min_durasi_response)
|
||||
total.total_response_time_lebih_sla += data[nama_up3][i].total_diatas_sla_response
|
||||
total.total_response_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_response
|
||||
total.total_recovery_time_total += data[nama_up3][i].total_durasi_recovery
|
||||
total.total_recovery_time_rata_rata.push(data[nama_up3][i].avg_durasi_recovery)
|
||||
total.total_recovery_time_max.push(data[nama_up3][i].max_durasi_recovery)
|
||||
total.total_recovery_time_min.push(data[nama_up3][i].min_durasi_recovery)
|
||||
total.total_recovery_time_lebih_sla += data[nama_up3][i].total_diatas_sla_recovery
|
||||
total.total_recovery_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_recovery
|
||||
|
||||
grandTotal.total_laporan += data[nama_up3][i].total
|
||||
grandTotal.total_laporan_sudah_selesai += data[nama_up3][i].total_selesai
|
||||
grandTotal.total_laporan_belum_selesai += data[nama_up3][i].total_inproses
|
||||
grandTotal.total_response_time_total += data[nama_up3][i].total_durasi_response
|
||||
grandTotal.total_response_time_rata_rata.push(data[nama_up3][i].avg_durasi_response)
|
||||
grandTotal.total_response_time_max.push(data[nama_up3][i].max_durasi_response)
|
||||
grandTotal.total_response_time_min.push(data[nama_up3][i].min_durasi_response)
|
||||
grandTotal.total_response_time_lebih_sla += data[nama_up3][i].total_diatas_sla_response
|
||||
grandTotal.total_response_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_response
|
||||
grandTotal.total_recovery_time_total += data[nama_up3][i].total_durasi_recovery
|
||||
grandTotal.total_recovery_time_rata_rata.push(data[nama_up3][i].avg_durasi_recovery)
|
||||
grandTotal.total_recovery_time_max.push(data[nama_up3][i].max_durasi_recovery)
|
||||
grandTotal.total_recovery_time_min.push(data[nama_up3][i].min_durasi_recovery)
|
||||
grandTotal.total_recovery_time_lebih_sla += data[nama_up3][i].total_diatas_sla_recovery
|
||||
grandTotal.total_recovery_time_kurang_sla += data[nama_up3][i].total_dibawah_sla_recovery
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(total.total_laporan),
|
||||
formatNumber(total.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan_sudah_selesai || !total.total_laporan
|
||||
? '0%'
|
||||
: (total.total_laporan_sudah_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan_belum_selesai || !total.total_laporan
|
||||
? '0%'
|
||||
: (total.total_laporan_belum_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_response_time_total),
|
||||
formatNumber(
|
||||
total.total_response_time_rata_rata.length
|
||||
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_response_time_max)),
|
||||
formatWaktu(Math.min(...total.total_response_time_min)),
|
||||
formatNumber(total.total_response_time_lebih_sla),
|
||||
formatNumber(total.total_response_time_kurang_sla),
|
||||
formatNumber(total.total_recovery_time_total),
|
||||
formatNumber(
|
||||
total.total_recovery_time_rata_rata.length
|
||||
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...total.total_recovery_time_min)),
|
||||
formatNumber(total.total_recovery_time_lebih_sla),
|
||||
formatNumber(total.total_recovery_time_kurang_sla)
|
||||
])
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(grandTotal.total_laporan),
|
||||
formatNumber(grandTotal.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_response_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_response_time_min)),
|
||||
formatNumber(grandTotal.total_response_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_response_time_kurang_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
|
||||
formatNumber(grandTotal.total_recovery_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_kurang_sla)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { 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()
|
||||
]
|
||||
],
|
||||
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: 'Unit',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 5
|
||||
},
|
||||
{
|
||||
content: 'Response Time',
|
||||
colSpan: 6
|
||||
},
|
||||
{
|
||||
content: 'Penyelesaian',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'Total',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Sudah Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Belum Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
'Jml',
|
||||
'%',
|
||||
'Jml',
|
||||
'%',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla'
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'GRAND TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 30
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Dalam Proses Bidang',
|
||||
'Selesai Bidang Unit',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Rayon',
|
||||
'Uraian',
|
||||
'Response Pelanggan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
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, 5, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
6,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:S1')
|
||||
worksheet.mergeCells('A2:S2')
|
||||
worksheet.mergeCells('A3:S3')
|
||||
worksheet.mergeCells('A5:S5')
|
||||
worksheet.mergeCells('A6:S6')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 8, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
@ -0,0 +1,563 @@
|
||||
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'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
const reportName = 'Dispacthing Time (DT) Gangguan'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const groupingData = (data: any) => {
|
||||
const groupedData: any = {}
|
||||
|
||||
data.forEach((item: any) => {
|
||||
const { nama_regional } = item
|
||||
|
||||
if (!groupedData[nama_regional]) {
|
||||
groupedData[nama_regional] = { data: [] }
|
||||
}
|
||||
|
||||
groupedData[nama_regional].data.push(item)
|
||||
})
|
||||
|
||||
for (const regional in groupedData) {
|
||||
const data = groupedData[regional].data
|
||||
|
||||
data.forEach((item: any) => {
|
||||
if (!groupedData[regional].summary) {
|
||||
groupedData[regional].summary = {
|
||||
mom_bulan_kemarin: 0,
|
||||
mom_bulan_ini: 0,
|
||||
persen_mom: [],
|
||||
yoy_tahun_kemarin: 0,
|
||||
yoy_tahun_ini: 0,
|
||||
persen_yoy: []
|
||||
}
|
||||
}
|
||||
|
||||
groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
|
||||
groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
|
||||
groupedData[regional].summary.persen_mom.push(item.persen_mom)
|
||||
groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
|
||||
groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
|
||||
groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
|
||||
})
|
||||
}
|
||||
|
||||
return groupedData
|
||||
}
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const data = groupingData(rawData)
|
||||
const formattedData: any = []
|
||||
|
||||
const total: any = {
|
||||
mom_bulan_kemarin: [],
|
||||
mom_bulan_ini: [],
|
||||
yoy_tahun_kemarin: [],
|
||||
yoy_tahun_ini: []
|
||||
}
|
||||
|
||||
formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
|
||||
|
||||
let no = 1
|
||||
for (const regional in data) {
|
||||
const summary = data[regional].summary
|
||||
|
||||
formattedData.push([
|
||||
{ content: no++, styles: { halign: 'right' } },
|
||||
regional,
|
||||
formatNumber(summary.mom_bulan_kemarin),
|
||||
formatNumber(summary.mom_bulan_ini),
|
||||
formatPercentage(
|
||||
!summary.mom_bulan_ini || !summary.mom_bulan_kemarin
|
||||
? '0%'
|
||||
: ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
|
||||
),
|
||||
formatNumber(summary.yoy_tahun_kemarin),
|
||||
formatNumber(summary.yoy_tahun_ini),
|
||||
formatPercentage(
|
||||
!summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
|
||||
? '0%'
|
||||
: ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
|
||||
)
|
||||
])
|
||||
|
||||
total.mom_bulan_kemarin.push(summary.mom_bulan_kemarin)
|
||||
total.mom_bulan_ini.push(summary.mom_bulan_ini)
|
||||
total.yoy_tahun_kemarin.push(summary.yoy_tahun_kemarin)
|
||||
total.yoy_tahun_ini.push(summary.yoy_tahun_ini)
|
||||
}
|
||||
|
||||
const totalMoMBulanKemarin =
|
||||
total.mom_bulan_kemarin.reduce((a: number, b: number) => a + b, 0) /
|
||||
total.mom_bulan_kemarin.length
|
||||
const totalMoMBulanIni =
|
||||
total.mom_bulan_ini.reduce((a: number, b: number) => a + b, 0) / total.mom_bulan_ini.length
|
||||
const totalYoYTahunKemarin =
|
||||
total.yoy_tahun_kemarin.reduce((a: number, b: number) => a + b, 0) /
|
||||
total.yoy_tahun_kemarin.length
|
||||
const totalYoYTahunIni =
|
||||
total.yoy_tahun_ini.reduce((a: number, b: number) => a + b, 0) / total.yoy_tahun_ini.length
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL RATA-RATA', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(totalMoMBulanKemarin),
|
||||
formatNumber(totalMoMBulanIni),
|
||||
formatPercentage(
|
||||
!totalMoMBulanIni || !totalMoMBulanKemarin
|
||||
? '0%'
|
||||
: ((totalMoMBulanKemarin - totalMoMBulanIni) / totalMoMBulanKemarin) * 100
|
||||
),
|
||||
formatNumber(totalYoYTahunKemarin),
|
||||
formatNumber(totalYoYTahunIni),
|
||||
formatPercentage(
|
||||
!totalYoYTahunIni || !totalYoYTahunKemarin
|
||||
? '0%'
|
||||
: ((totalYoYTahunKemarin - totalYoYTahunIni) / totalYoYTahunKemarin) * 100
|
||||
)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
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 data = formatData(rawData)
|
||||
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()
|
||||
],
|
||||
[
|
||||
'REGIONAL',
|
||||
':',
|
||||
reportMeta.regional
|
||||
? reportMeta.regional.name.toUpperCase()
|
||||
: 'Semua Regional'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [[`${reportName}`.toUpperCase()], [reportMeta.periode]],
|
||||
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: 'Nama Unit',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Jumlah Dispacthing Time Gangguan',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'MOM',
|
||||
colSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'YOY',
|
||||
colSpan: 3
|
||||
}
|
||||
],
|
||||
[
|
||||
`${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
|
||||
`${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
|
||||
'%',
|
||||
`s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
|
||||
`s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
|
||||
'%'
|
||||
]
|
||||
],
|
||||
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 RATA-RATA') {
|
||||
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: [
|
||||
[`${day}, ${date}-${month}-${year}`],
|
||||
[
|
||||
{
|
||||
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 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 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()], [reportMeta.periode]],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'ULP',
|
||||
'No Laporan',
|
||||
'Tgl/ Jam Lapor',
|
||||
'Tgl/ Jam Datang',
|
||||
'Tgl/ Jam Nyala',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Durasi Penugasan Regu',
|
||||
'Durasi Perjalanan Regu',
|
||||
'Dispatch Oleh',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Sumber Lapor',
|
||||
'Diselesaikan Oleh',
|
||||
'Status',
|
||||
'Referensi Marking',
|
||||
'Kode Gangguan',
|
||||
'Jenis Gangguan',
|
||||
'Tindakan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.nama_ulp,
|
||||
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.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.no_telp_pelapor,
|
||||
item.keterangan_pelapor,
|
||||
'',
|
||||
'',
|
||||
item.status_akhir,
|
||||
'',
|
||||
'',
|
||||
'',
|
||||
''
|
||||
]),
|
||||
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: [
|
||||
[`${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 workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
5,
|
||||
1,
|
||||
`REGIONAL : ${
|
||||
reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
|
||||
|
||||
worksheet.mergeCells('A1:G1')
|
||||
worksheet.mergeCells('A2:G2')
|
||||
worksheet.mergeCells('A3:G3')
|
||||
worksheet.mergeCells('A4:G4')
|
||||
worksheet.mergeCells('A5:G5')
|
||||
worksheet.mergeCells('A7:G7')
|
||||
worksheet.mergeCells('A8:G8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const 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, reportMeta.periode, true)
|
||||
|
||||
worksheet.mergeCells('A1:W1')
|
||||
worksheet.mergeCells('A3:W3')
|
||||
worksheet.mergeCells('A4:W4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
@ -0,0 +1,374 @@
|
||||
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'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
|
||||
const reportName = 'Rekapitulasi Gangguan All'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const groupingData = (data: any) => {
|
||||
const groupedData: any = {}
|
||||
|
||||
data.forEach((item: any) => {
|
||||
const { nama_regional } = item
|
||||
|
||||
if (!groupedData[nama_regional]) {
|
||||
groupedData[nama_regional] = { data: [] }
|
||||
}
|
||||
|
||||
groupedData[nama_regional].data.push(item)
|
||||
})
|
||||
|
||||
for (const regional in groupedData) {
|
||||
const data = groupedData[regional].data
|
||||
|
||||
data.forEach((item: any) => {
|
||||
if (!groupedData[regional].summary) {
|
||||
groupedData[regional].summary = {
|
||||
mom_bulan_kemarin: 0,
|
||||
mom_bulan_ini: 0,
|
||||
persen_mom: [],
|
||||
yoy_tahun_kemarin: 0,
|
||||
yoy_tahun_ini: 0,
|
||||
persen_yoy: []
|
||||
}
|
||||
}
|
||||
|
||||
groupedData[regional].summary.mom_bulan_kemarin += item.mom_bulan_kemarin
|
||||
groupedData[regional].summary.mom_bulan_ini += item.mom_bulan_ini
|
||||
groupedData[regional].summary.persen_mom.push(item.persen_mom)
|
||||
groupedData[regional].summary.yoy_tahun_kemarin += item.yoy_tahun_kemarin
|
||||
groupedData[regional].summary.yoy_tahun_ini += item.yoy_tahun_ini
|
||||
groupedData[regional].summary.persen_yoy.push(item.persen_yoy)
|
||||
})
|
||||
}
|
||||
|
||||
return groupedData
|
||||
}
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const data = groupingData(rawData)
|
||||
const formattedData: any = []
|
||||
|
||||
const total: any = {
|
||||
mom_bulan_kemarin: 0,
|
||||
mom_bulan_ini: 0,
|
||||
yoy_tahun_kemarin: 0,
|
||||
yoy_tahun_ini: 0
|
||||
}
|
||||
|
||||
formattedData.push([{ content: 'NASIONAL', colSpan: 7, styles: { fontStyle: 'bold' } }])
|
||||
|
||||
let no = 1
|
||||
for (const regional in data) {
|
||||
const summary = data[regional].summary
|
||||
|
||||
formattedData.push([
|
||||
{ content: no++, styles: { halign: 'right' } },
|
||||
regional,
|
||||
formatNumber(summary.mom_bulan_kemarin),
|
||||
formatNumber(summary.mom_bulan_ini),
|
||||
formatPercentage(
|
||||
!summary.mom_bulan_ini || !summary.mom_bulan_kemarin
|
||||
? '0%'
|
||||
: ((summary.mom_bulan_kemarin - summary.mom_bulan_ini) / summary.mom_bulan_kemarin) * 100
|
||||
),
|
||||
formatNumber(summary.yoy_tahun_kemarin),
|
||||
formatNumber(summary.yoy_tahun_ini),
|
||||
formatPercentage(
|
||||
!summary.yoy_tahun_ini || !summary.yoy_tahun_kemarin
|
||||
? '0%'
|
||||
: ((summary.yoy_tahun_kemarin - summary.yoy_tahun_ini) / summary.yoy_tahun_kemarin) * 100
|
||||
)
|
||||
])
|
||||
|
||||
total.mom_bulan_kemarin += summary.mom_bulan_kemarin
|
||||
total.mom_bulan_ini += summary.mom_bulan_ini
|
||||
total.yoy_tahun_kemarin += summary.yoy_tahun_kemarin
|
||||
total.yoy_tahun_ini += summary.yoy_tahun_ini
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(total.mom_bulan_kemarin),
|
||||
formatNumber(total.mom_bulan_ini),
|
||||
formatPercentage(
|
||||
!total.mom_bulan_ini || !total.mom_bulan_kemarin
|
||||
? '0%'
|
||||
: ((total.mom_bulan_kemarin - total.mom_bulan_ini) / total.mom_bulan_kemarin) * 100
|
||||
),
|
||||
formatNumber(total.yoy_tahun_kemarin),
|
||||
formatNumber(total.yoy_tahun_ini),
|
||||
formatPercentage(
|
||||
!total.yoy_tahun_ini || !total.yoy_tahun_kemarin
|
||||
? '0%'
|
||||
: ((total.yoy_tahun_kemarin - total.yoy_tahun_ini) / total.yoy_tahun_kemarin) * 100
|
||||
)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
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 data = formatData(rawData)
|
||||
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()
|
||||
],
|
||||
[
|
||||
'REGIONAL',
|
||||
':',
|
||||
reportMeta.regional
|
||||
? reportMeta.regional.name.toUpperCase()
|
||||
: 'Semua Regional'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [[`${reportName}`.toUpperCase()], [reportMeta.periode]],
|
||||
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: 'Nama Unit',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Jumlah Kali Gangguan',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'MOM',
|
||||
colSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'YOY',
|
||||
colSpan: 3
|
||||
}
|
||||
],
|
||||
[
|
||||
`${getMonthName(reportMeta.lastMonth)} ${reportMeta.lastYearMoM}`,
|
||||
`${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
|
||||
'%',
|
||||
`s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.lastYear}`,
|
||||
`s.d ${getMonthName(reportMeta.currentMonth)} ${reportMeta.currentYear}`,
|
||||
'%'
|
||||
]
|
||||
],
|
||||
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: [
|
||||
[`${day}, ${date}-${month}-${year}`],
|
||||
[
|
||||
{
|
||||
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 exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
5,
|
||||
1,
|
||||
`REGIONAL : ${
|
||||
reportMeta.regional ? reportMeta.regional.name.toUpperCase() : 'Semua Regional'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(worksheet, 8, 1, reportMeta.periode, true)
|
||||
|
||||
worksheet.mergeCells('A1:G1')
|
||||
worksheet.mergeCells('A2:G2')
|
||||
worksheet.mergeCells('A3:G3')
|
||||
worksheet.mergeCells('A4:G4')
|
||||
worksheet.mergeCells('A5:G5')
|
||||
worksheet.mergeCells('A7:G7')
|
||||
worksheet.mergeCells('A8:G8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
Loading…
x
Reference in New Issue
Block a user