diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 9abaa52..be646a0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -2,10 +2,11 @@
filterData(filters)"
+ @run-report="() => exportToPDF(reportMeta, data, true)"
:report-button="true"
class="mb-4"
>
- (filters = value)" />
+ updateFilters(value)" />
@@ -624,8 +625,6 @@ 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'
@@ -637,6 +636,7 @@ import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
+import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
const client = apolloClient()
provideApolloClient(client)
@@ -652,6 +652,13 @@ const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const filters = ref
({ groupBy: false })
+const reportMeta = ref({
+ uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+ up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+ posko: { id: 0, name: 'Semua Posko' },
+ periode: '',
+ groupBy: false
+})
const getDetail = () => {
loadingSubData.value = true
@@ -713,15 +720,7 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
- const doc = new jsPDF()
-
- exportToPdf({
- jsPDFDocument: doc,
- component: e.component,
- indent: 5
- }).then(() => {
- doc.save(`.pdf`)
- })
+ exportToPDF(reportMeta.value, data.value)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
@@ -740,6 +739,11 @@ const onExporting = (e: any) => {
}
}
+const updateFilters = (value: any) => {
+ filters.value = value
+ reportMeta.value.groupBy = value.groupBy
+}
+
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
@@ -784,6 +788,17 @@ const filterData = (params: any) => {
console.log('loading', queryResult.loading)
console.log('networkStatus', queryResult.networkStatus)
console.log('stale', queryResult.stale)
+
+ reportMeta.value = {
+ uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
+ up3: {
+ id: up3 ? up3.id : 0,
+ name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+ },
+ posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
+ periode: params.periode,
+ groupBy: params.groupBy
+ }
})
onError((error) => {
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
new file mode 100644
index 0000000..82c23c8
--- /dev/null
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -0,0 +1,486 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+ Document,
+ AlignmentType,
+ Packer,
+ Paragraph,
+ Table,
+ TableCell,
+ TableRow,
+ VerticalAlign,
+ TextRun,
+ WidthType,
+ PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+
+const reportName = 'Rekapitulasi Gangguan Per Tanggal'
+
+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,
+ formatNumber(data[nama_uid][i].total),
+ formatNumber(data[nama_uid][i].total_selesai),
+ formatPercentage((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 == null || data[nama_uid][i].total == null
+ ? '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_sudah_selesai / total.total_laporan) * 100),
+ formatNumber(total.total_laporan_belum_selesai),
+ formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+ formatNumber(total.total_response_time_total),
+ formatNumber(
+ total.total_response_time_rata_rata.length
+ ? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+ total.total_response_time_rata_rata.length
+ : 0
+ ),
+ formatWaktu(Math.max(...total.total_response_time_max)),
+ formatWaktu(Math.min(...total.total_response_time_min)),
+ formatNumber(total.total_response_time_lebih_sla),
+ formatNumber(total.total_response_time_kurang_sla),
+ formatNumber(total.total_recovery_time_total),
+ formatNumber(
+ total.total_recovery_time_rata_rata.length
+ ? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+ total.total_recovery_time_rata_rata.length
+ : 0
+ ),
+ formatWaktu(Math.max(...total.total_recovery_time_max)),
+ formatWaktu(Math.min(...total.total_recovery_time_min)),
+ formatNumber(total.total_recovery_time_lebih_sla),
+ formatNumber(total.total_recovery_time_kurang_sla)
+ ])
+ }
+ } else {
+ for (let i = 0; i < rawData.length; i++) {
+ formattedData.push([
+ { content: i + 1, styles: { halign: 'right' } },
+ rawData[i].tanggal,
+ formatNumber(rawData[i].total),
+ formatNumber(rawData[i].total_selesai),
+ formatPercentage((rawData[i].total_selesai / rawData[i].total) * 100),
+ formatNumber(rawData[i].total_inproses),
+ formatPercentage(
+ rawData[i].total_inproses == null || rawData[i].total == null
+ ? '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_sudah_selesai / grandTotal.total_laporan) * 100),
+ formatNumber(grandTotal.total_laporan_belum_selesai),
+ formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+ formatNumber(grandTotal.total_response_time_total),
+ formatNumber(
+ grandTotal.total_response_time_rata_rata.length
+ ? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
+ grandTotal.total_response_time_rata_rata.length
+ : 0
+ ),
+ formatWaktu(Math.max(...grandTotal.total_response_time_max)),
+ formatWaktu(Math.min(...grandTotal.total_response_time_min)),
+ formatNumber(grandTotal.total_response_time_lebih_sla),
+ formatNumber(grandTotal.total_response_time_kurang_sla),
+ formatNumber(grandTotal.total_recovery_time_total),
+ formatNumber(
+ grandTotal.total_recovery_time_rata_rata.length
+ ? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
+ grandTotal.total_recovery_time_rata_rata.length
+ : 0
+ ),
+ formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
+ formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
+ formatNumber(grandTotal.total_recovery_time_lebih_sla),
+ formatNumber(grandTotal.total_recovery_time_kurang_sla)
+ ])
+
+ return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+ const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+ let dateFromFormat = ''
+ let dateToFormat = ''
+ let dayTo = ''
+
+ if (periode != '') {
+ const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+ const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+ dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+ month: 'long'
+ })}-${dateFrom.getFullYear()}`
+
+ dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+ month: 'long'
+ })}-${dateTo.getFullYear()}`
+
+ dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+ }
+
+ return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+ const data = formatData(rawData, reportMeta.groupBy)
+ const meta = formatMetaData(reportMeta)
+ const doc = new jsPDF({
+ orientation: 'landscape'
+ })
+ const fontSize = 5
+
+ autoTable(doc, {
+ head: [
+ ['PT. PLN(Persero)', '', ''],
+ [
+ { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+ { content: ':', styles: { cellWidth: 1 } },
+ reportMeta.uid
+ ? reportMeta.uid.name.toUpperCase()
+ : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+ ],
+ [
+ 'UNIT PELAKSANA PELAYANAN PELANGGAN',
+ ':',
+ reportMeta.up3
+ ? reportMeta.up3.name.toUpperCase()
+ : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+ ],
+ [
+ 'POSKO',
+ ':',
+ reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+ ]
+ ],
+ styles: {
+ fontSize,
+ cellPadding: 0.1,
+ textColor: [0, 0, 0],
+ fontStyle: 'bold'
+ },
+ theme: 'plain',
+ startY: 10
+ })
+
+ autoTable(doc, {
+ head: [
+ [`${reportName}`.toUpperCase()],
+ [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+ ],
+ styles: {
+ fontSize,
+ cellPadding: 0.1,
+ textColor: [0, 0, 0],
+ fontStyle: 'bold',
+ halign: 'center'
+ },
+ theme: 'plain',
+ startY: 23
+ })
+
+ autoTable(doc, {
+ head: [
+ [
+ {
+ content: 'No',
+ rowSpan: 3
+ },
+ {
+ content: 'Tanggal Lapor',
+ rowSpan: 3
+ },
+ {
+ content: 'Laporan',
+ colSpan: 5
+ },
+ {
+ content: 'Response Time',
+ colSpan: 6
+ },
+ {
+ content: 'Recovery Time',
+ colSpan: 6
+ }
+ ],
+ [
+ {
+ content: 'Total',
+ rowSpan: 2
+ },
+ {
+ content: 'Sudah Selesai',
+ colSpan: 2
+ },
+ {
+ content: 'Belum Selesai',
+ colSpan: 2
+ },
+ {
+ content: 'Menit',
+ colSpan: 4
+ },
+ {
+ content: 'Laporan',
+ colSpan: 2
+ },
+ {
+ content: 'Menit',
+ colSpan: 4
+ },
+ {
+ content: 'Laporan',
+ colSpan: 2
+ }
+ ],
+ [
+ 'Jml',
+ '%',
+ 'Jml',
+ '%',
+ 'Total',
+ 'Rata-Rata',
+ 'Max',
+ 'Min',
+ '>Sla',
+ 'Sla',
+ ' {
+ console.log('pdf berhasil disimpan')
+ })
+ }
+}
+
+export { exportToPDF }