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

feat: implement server side in daftar gangguan melapor lebih dari 1 kali

Browse Source
This commit is contained in:
bagus 2024-05-03 17:06:50 +07:00
parent b40a877cda
commit ed931d8eb3
3 changed files with 70 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
View File

@ -1,5 +1,5 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
<Type6 @update:filters="(value) => (filters = value)" />
</Filters>
@ -7,9 +7,10 @@
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
@option-changed="handleRequestChange"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
v-if="loadingData == false"
:remote-operations="true"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -47,11 +48,12 @@
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:allow-sorting="false"
css-class="custom-table-column !text-right"
:width="50"
alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
data-field="no"
caption="No"
/>
<DxColumn
@ -310,7 +312,6 @@
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -324,13 +325,12 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<!-- -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
<!-- <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
/> -->
<DxColumn
css-class="custom-table-column"
@ -415,7 +415,7 @@
</div>
</DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
<BufferDialog v-if="loadingSubData" />
</template>
<script setup lang="ts">
@ -436,7 +436,7 @@ import {
DxSelection
} from 'devextreme-vue/data-grid'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref, reactive } from 'vue'
import { ref, reactive } from 'vue'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
@ -451,11 +451,11 @@ const requestOptions = reactive<IRequestOptions>({
filter: null
})
const reportData: any = ref(null)
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const detailType = ref('form')
const dataGridRef = ref<DxDataGrid | null>(null)
@ -528,7 +528,6 @@ const setDetailType = (columnCaption: string) => {
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const query = {
@ -656,19 +655,20 @@ const mapSearchOptions = (searchOptions: any) => {
return result.filter((item: any) => item)
}
const filterData = async (params: any) => {
llowTableRequest.value = true
const filterData = () => {
allowTableRequest.value = true
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
resetData()
const createQuery = (params: any) => {
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
const query = {
return {
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
dateFrom: dateValue[0]
@ -681,131 +681,31 @@ const filterData = async (params: any) => {
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loadingData.value = true
await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKali, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanMelaporLebihDariSatuKali
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta, data)
const onExporting = async (e: any) => {
const dataGrid = dataGridRef.value!.instance!
if (e.format === 'pdf' || e.format === 'document') {
reportData.value = await data.load()
}
if (e.format === 'pdf' && reportData.value) {
dataGrid.beginCustomLoading('')
const pdf = await exportToPDF(reportMeta, reportData)
if (pdf) {
dataGrid.endCustomLoading()
}
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta, data, e)
} else {
exportToDOCX(reportMeta, data)
await exportToXLSX(reportMeta, e)
} else if (e.format === 'document' && reportData.value) {
dataGrid.beginCustomLoading('')
const doc = await exportToDOCX(reportMeta, reportData)
if (doc) {
dataGrid.endCustomLoading()
}
}
}
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
no_laporan: 'G5423020100150',
pembuat_laporan: 'PLNMOBILE',
waktu_lapor: '01-02-2023 00:16:17',
waktu_response: '01-02-2023 00:56:28',
waktu_recovery: '01-02-2023 01:00:37',
jumlah_lapor: 0,
durasi_response_time: 2411,
durasi_recovery_time: 249,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'Raihana S. Rahmahadi',
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
no_telp_pelapor: '6282138889101',
keterangan_pelapor:
'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
media: 'PLN Mobile',
nama_posko: 'POSKO CIRACAS'
},
{
no_laporan: 'G5423020100985',
pembuat_laporan: 'PLNMOBILE',
waktu_lapor: '01-02-2023 03:09:50',
waktu_response: '01-02-2023 03:42:40',
waktu_recovery: '01-02-2023 03:49:35',
jumlah_lapor: 0,
durasi_response_time: 1970,
durasi_recovery_time: 415,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'Risky Ariyanto',
alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
no_telp_pelapor: '6285240208016',
keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
media: 'PLN Mobile',
nama_posko: 'POSKO CIRACAS'
},
{
no_laporan: 'G5423020101461',
pembuat_laporan: 'PLNMOBILE',
waktu_lapor: '01-02-2023 05:38:01',
waktu_response: '01-02-2023 05:48:13',
waktu_recovery: '01-02-2023 05:54:06',
jumlah_lapor: 0,
durasi_response_time: 612,
durasi_recovery_time: 353,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'Junaedi Muntoro',
alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
no_telp_pelapor: '628111588806',
keterangan_pelapor:
'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
media: 'PLN Mobile',
nama_posko: 'POSKO CIRACAS'
},
{
no_laporan: 'G5423020101612',
pembuat_laporan: 'PLNMOBILE',
waktu_lapor: '01-02-2023 05:54:33',
waktu_response: '01-01-1970 00:00:00',
waktu_recovery: '01-01-1970 00:00:00',
jumlah_lapor: 0,
durasi_response_time: 0,
durasi_recovery_time: 0,
status_akhir: 'Dibatalkan',
idpel_nometer: '',
nama_pelapor: 'Raihana S. Rahmahadi',
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
no_telp_pelapor: '6282138889101',
keterangan_pelapor: 'listrik turun lagi setelah diganti mcb oleh petugas jam 1 malam',
media: 'PLN Mobile',
nama_posko: 'POSKO CIRACAS'
},
{
no_laporan: 'G5523020100067',
pembuat_laporan: 'CC.55.SUMIATI',
waktu_lapor: '01-02-2023 05:57:02',
waktu_response: '01-02-2023 06:18:55',
waktu_recovery: '01-01-1970 00:00:00',
jumlah_lapor: 0,
durasi_response_time: 0,
durasi_recovery_time: 0,
status_akhir: 'Dibatalkan',
idpel_nometer: '',
nama_pelapor: 'BP ANAL ',
alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
no_telp_pelapor: '6285777592240',
keterangan_pelapor: 'BANYAK RUMAH PADAM ',
media: 'Call PLN 123',
nama_posko: 'POSKO CIRACAS'
}
]
}
})
</script>

4
src/report/Gangguan/Daftar/DGangguan_DKPL.ts
View File

@ -217,7 +217,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
return true
}
const exportToXLSX = (reportMeta: any, e: any) => {
const exportToXLSX = async (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`)
@ -270,7 +270,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet.mergeCells('A6:S6')
worksheet.mergeCells('A7:S7')
exportToExcel({
await exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,

47
src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
View File

@ -46,12 +46,13 @@ const formatMetaData = (reportMeta: any) => {
return { dateFromFormat, dateToFormat, dayTo }
}
const exportToPDF = (reportMeta: any, data: any) => {
const exportToPDF = async (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
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 resultData = data.value.data
const doc = new jsPDF({
orientation: 'landscape'
})
@ -129,7 +130,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
'Posko'
]
],
body: data.value.map((item: any, i: any) => [
body: resultData.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.waktu_lapor,
@ -197,12 +198,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
margin: { left: 230 }
})
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
})
await doc
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
.then(() => {
console.log('PDF Exported')
})
.catch((error) => {
console.error('Error while exporting PDF', error)
})
return true
}
const exportToXLSX = (reportMeta: any, data: any, e: any) => {
const exportToXLSX = async (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`)
@ -261,14 +269,11 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
worksheet.mergeCells('H7:J7')
worksheet.mergeCells('H8:J8')
exportToExcel({
await exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 11, column: 1 },
loadPanel: {
enabled: false
}
topLeftCell: { row: 11, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -278,15 +283,16 @@ const exportToXLSX = (reportMeta: any, data: any, e: any) => {
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const exportToDOCX = async (reportMeta: any, data: any) => {
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear()
const meta = formatMetaData(reportMeta)
const resultData = data.value.data
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return resultData.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
@ -532,10 +538,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
]
})
Packer.toBlob(doc).then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
})
await Packer.toBlob(doc)
.then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('DOCX Exported')
})
.catch((error) => {
console.error('Error while exporting DOCX', error)
})
return true
}
export { exportToPDF, exportToXLSX, exportToDOCX }