feat: create pdf export in daftar recovery time
This commit is contained in:
kur0nek-o
parent
640907a445
commit
85cb74c3d1
@ -1,67 +1,193 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type7 @update:filters="(value) => filters = value" :sla-options="[
|
<Type7
|
||||||
{
|
@update:filters="(value) => (filters = value)"
|
||||||
id: 1,
|
:sla-options="[
|
||||||
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
|
{
|
||||||
min: '1',
|
id: 1,
|
||||||
max: '180'
|
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
|
||||||
},
|
min: '1',
|
||||||
{
|
max: '180'
|
||||||
id: 2,
|
},
|
||||||
name: 'Melebihi SLA (> 3 Jam)',
|
{
|
||||||
min: '181',
|
id: 2,
|
||||||
max: `${99999 * 60 * 24}`
|
name: 'Melebihi SLA (> 3 Jam)',
|
||||||
}
|
min: '181',
|
||||||
]" />
|
max: `${99999 * 60 * 24}`
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
/>
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:column-width="100" @exporting="" :allow-column-resizing="true" @selection-changed="onSelectionChanged"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
<DxColumn
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
:width="150"
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
data-field="no_laporan"
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
cell-template="cellCenter"
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
data-field="waktu_lapor"
|
||||||
caption="Status" cell-template="cellCenter" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
|
cell-template="cellCenter"
|
||||||
caption="Referensi Marking" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
<DxColumn
|
||||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
:width="150"
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
data-field="waktu_response"
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
caption="Tgl Response"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
cell-template="cellCenter"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
<DxColumn
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
:width="150"
|
||||||
caption="Sumber Lapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
data-field="waktu_recovery"
|
||||||
cell-template="cellLeft" />
|
caption="Tgl Recovery"
|
||||||
|
cell-template="cellCenter"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_response_time"
|
||||||
|
caption="Durasi Response Time"
|
||||||
|
cell-template="data-waktu"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
cell-template="data-waktu"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
cell-template="cellCenter"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="referensi_marking"
|
||||||
|
caption="Referensi Marking"
|
||||||
|
cell-template="cellCenter"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="idpel_nometer"
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
cell-template="cellCenter"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
cell-template="cellLeft"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
cell-template="cellLeft"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
cell-template="cellCenter"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
cell-template="cellLeft"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="media"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
cell-template="cellLeft"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Posko"
|
||||||
|
cell-template="cellLeft"
|
||||||
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@ -107,18 +233,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
<InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
class-name="flex-1"
|
||||||
" />
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -158,17 +294,32 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.nama_posko"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.penyebab"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.tindakan"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
@ -183,17 +334,22 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
|||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPager,
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries } from '@/utils/api/api.graphql'
|
import { queries } from '@/utils/api/api.graphql'
|
||||||
import { dummyData } from '@/utils/dummy'
|
import { dummyData } from '@/utils/dummy'
|
||||||
|
import { jsPDF } from 'jspdf'
|
||||||
|
import autoTable from 'jspdf-autotable'
|
||||||
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
|
import { saveAs } from 'file-saver'
|
||||||
|
import { Workbook } from 'exceljs'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
@ -208,13 +364,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
dataDetail.value = data
|
dataDetail.value = data
|
||||||
}
|
}
|
||||||
|
|
||||||
const showData = () => showDetail.value = true
|
const showData = () => (showDetail.value = true)
|
||||||
|
|
||||||
const closeDetail = () => showDetail.value = false
|
const closeDetail = () => (showDetail.value = false)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { minTime, maxTime, posko, uid, up3 } = params
|
const { minTime, maxTime, posko, uid, up3 } = params
|
||||||
console.table(params);
|
console.table(params)
|
||||||
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
@ -242,6 +398,73 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onExporting = (e: any) => {
|
||||||
|
if (e.format === 'pdf') {
|
||||||
|
const doc = new jsPDF({
|
||||||
|
orientation: 'landscape'
|
||||||
|
})
|
||||||
|
|
||||||
|
autoTable(doc, {
|
||||||
|
head: [
|
||||||
|
[
|
||||||
|
'No Laporan',
|
||||||
|
'Tgl Lapor',
|
||||||
|
'Tgl Response',
|
||||||
|
'Tgl Recovery',
|
||||||
|
'Durasi Response Time',
|
||||||
|
'Durasi Recovery Time',
|
||||||
|
'Status',
|
||||||
|
'Referensi Marking',
|
||||||
|
'IDPEL/NO METER',
|
||||||
|
'Nama Pelapor',
|
||||||
|
'Alamat Pelapor',
|
||||||
|
'No Telp Pelapor',
|
||||||
|
'Keterangan Pelapor',
|
||||||
|
'Posko'
|
||||||
|
]
|
||||||
|
],
|
||||||
|
body: data.value.map((item) => [
|
||||||
|
item.no_laporan,
|
||||||
|
item.waktu_lapor,
|
||||||
|
item.waktu_response,
|
||||||
|
item.waktu_recovery,
|
||||||
|
item.durasi_response_time,
|
||||||
|
item.durasi_recovery_time,
|
||||||
|
item.status_akhir,
|
||||||
|
item.referensi_marking,
|
||||||
|
item.idpel_nometer,
|
||||||
|
item.nama_pelapor,
|
||||||
|
item.alamat_pelapor,
|
||||||
|
item.no_telp_pelapor,
|
||||||
|
item.keterangan_pelapor,
|
||||||
|
item.nama_posko
|
||||||
|
]),
|
||||||
|
styles: {
|
||||||
|
fontSize: 4
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
doc.save('Daftar Gangguan Recovery Time.pdf')
|
||||||
|
} else {
|
||||||
|
const workbook = new Workbook()
|
||||||
|
const worksheet = workbook.addWorksheet('Daftar Gangguan Recovery Time')
|
||||||
|
|
||||||
|
exportToExcel({
|
||||||
|
component: e.component,
|
||||||
|
worksheet,
|
||||||
|
autoFilterEnabled: true
|
||||||
|
}).then(() => {
|
||||||
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
|
saveAs(
|
||||||
|
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||||
|
'Daftar Gangguan Recovery Time.xlsx'
|
||||||
|
)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
e.cancel = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
|
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user