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

feat: implement server-side in daftar gangguan recovery time

Browse Source
This commit is contained in:
kur0nek-o
2024-05-04 14:40:27 +07:00
parent 768abf7dbf
commit b8867a1310
4 changed files with 273 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

369
src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.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">
<Type7
@update:filters="(value) => (filters = value)"
:sla-options="[
@@ -22,10 +22,11 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
@option-changed="handleRequestChange"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
v-if="loading == false"
:remote-operations="true"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@@ -37,6 +38,7 @@
@selection-changed="onSelectionChanged"
column-resizing-mode="widget"
>
<DxLoadPanel :enabled="true" />
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
@@ -47,16 +49,6 @@
:show-info="true"
:show-navigation-buttons="true"
/>
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
: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" />
<DxExport
:enabled="true"
@@ -64,11 +56,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"
/>
@@ -312,8 +305,6 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@@ -321,8 +312,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type7 from '@/components/Form/FiltersType/Type7.vue'
import CustomStore from 'devextreme/data/custom_store'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue'
import { ref, reactive } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@@ -333,50 +326,167 @@ import {
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import {
exportToPDF,
exportToXLSX,
exportToDOCX
} from '@/report/Gangguan/Daftar/DGangguan_RecoveryTime'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
import type { IRequestOptions } from '@/types/requestParams'
const requestOptions = reactive<IRequestOptions>({
skip: 0,
take: 20,
requireTotalCount: true,
sort: null,
filter: null
})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const reportData: any = ref(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const loading = ref(false)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const filters = ref()
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: '',
minTime: '',
maxTime: ''
})
const showDetail = () => (dialogDetail.value = true)
const allowTableRequest = ref(false)
const data = new CustomStore({
load: async (loadOptions: any) => {
if (allowTableRequest.value) {
loadOptions.requireTotalCount = true
const query = {
skip: loadOptions.skip,
take: loadOptions.take,
sort: loadOptions.sort ? loadOptions.sort : null,
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
requireTotalCount: loadOptions.requireTotalCount,
...createQuery(filters.value)
}
return await requestGraphQl(queries.gangguan.daftar.ssdaftarGangguanRecoveryTime, query)
.then((result) => {
const response = result.data.data.ssdaftarGangguanRecoveryTime
let no = query.skip ?? 0
for (const data of response.data) {
data.no = ++no
}
return {
data: response.data,
totalCount: response.totalCount
}
})
.catch((err) => {
throw Error(err)
})
.finally(() => {
reportMeta.value = filters.value
})
} else {
return new Promise(function (resolve) {
resolve({
data: [],
totalCount: 0
})
})
}
}
})
const closeDialog = () => (dialogDetail.value = false)
const resetData = () => {
data.value = []
allowTableRequest.value = false
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
const filterData = async (params: any) => {
resetData()
const handleRequestChange = (e: any) => {
if (e.name === 'searchPanel') {
if (e.value !== '') {
requestOptions.filter = createSearchOptions(e.value)
} else {
requestOptions.filter = null
}
}
if (e.name === 'paging') {
requestOptions.take = e.value
}
if (e.name === 'columns') {
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
const columnDataField = e.component.columnOption(columnIndex).dataField
requestOptions.sort = [
{
selector: columnDataField,
desc: e.value === 'desc'
}
]
}
}
const createSearchOptions = (keyword: string) => {
const dataGrid = dataGridRef.value!.instance!
const columns = dataGrid.getVisibleColumns()
const searchOptions = []
for (const column of columns) {
if (column.dataField === 'no' || !column.dataField) {
continue
}
searchOptions.push({
field: column.dataField,
value: keyword
})
}
return searchOptions
}
const mapSearchOptions = (searchOptions: any) => {
const result = searchOptions.map((option: any) => {
if (Array.isArray(option) && option[0] !== 'no') {
return {
field: option[0],
value: option[2]
}
}
})
return result.filter((item: any) => item)
}
const filterData = () => {
allowTableRequest.value = true
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
const createQuery = (params: any) => {
const { minTime, maxTime, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
const query = {
return {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@@ -389,147 +499,48 @@ const filterData = async (params: any) => {
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loading.value = true
await requestGraphQl(queries.gangguan.daftar.recoveryTime, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanRecoveryTime
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta, data)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const showDetail = () => {
dialogDetail.value = true
clearSelection()
}
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)
exportToXLSX(reportMeta, e)
} else if (e.format === 'document' && reportData.value) {
dataGrid.beginCustomLoading('')
const doc = await exportToDOCX(reportMeta, reportData)
if (doc) {
dataGrid.endCustomLoading()
}
}
}
const filters = ref()
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: '',
minTime: '',
maxTime: ''
})
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',
durasi_response_time: 2411,
durasi_recovery_time: 249,
status_akhir: 'Selesai',
is_marking: 0,
referensi_marking: 'P3124142424',
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',
durasi_response_time: 1970,
durasi_recovery_time: 415,
status_akhir: 'Selesai',
is_marking: 0,
referensi_marking: 'P3124142424',
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',
durasi_response_time: 612,
durasi_recovery_time: 353,
status_akhir: 'Selesai',
is_marking: 0,
referensi_marking: 'P3124142424',
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: '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',
durasi_response_time: 1313,
durasi_recovery_time: 33958236,
status_akhir: 'Dibatalkan',
is_marking: 0,
referensi_marking: 'P3124142424',
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'
},
{
no_laporan: 'G5423020103015',
pembuat_laporan: 'CC.54.EKA.CSOI',
waktu_lapor: '01-02-2023 07:39:03',
waktu_response: '01-02-2023 08:14:56',
waktu_recovery: '01-02-2023 08:19:32',
durasi_response_time: 2153,
durasi_recovery_time: 276,
status_akhir: 'Selesai',
is_marking: 0,
referensi_marking: 'P3124142424',
idpel_nometer: '',
nama_pelapor: 'IBU DIN',
alamat_pelapor:
'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
no_telp_pelapor: '082112050265',
keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
media: 'Call PLN 123',
nama_posko: 'POSKO CIRACAS'
}
]
}
})
</script>

2
src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
View File

@@ -1,5 +1,5 @@
<template>
<Filters @reset-form="resetData" @run-search="() => filterData(filters)" class="mb-4">
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
<Type7 @update:filters="(value) => (filters = value)" />
</Filters>