Refactor filterData function parameters

This commit is contained in:
probdg
2024-02-10 07:05:19 +07:00
parent eece7bcb92
commit b9732be2c9
21 changed files with 458 additions and 1102 deletions

View File

@@ -1,5 +1,11 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -119,7 +125,6 @@
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@@ -233,739 +238,15 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = [
{
no: 1,
kode: 'A',
jenisGangguan: 'Gangguan A',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50
},
belumSelesai: {
jml: 5,
persen: 50
}
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10
},
laporan: {
lebihSla: 5,
kurangSla: 5
}
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10
},
laporan: {
lebihSla: 5,
kurangSla: 5
}
}
},
{
no: 2,
kode: 'A',
jenisGangguan: 'Gangguan A',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50
},
belumSelesai: {
jml: 5,
persen: 50
}
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10
},
laporan: {
lebihSla: 5,
kurangSla: 5
}
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10
},
laporan: {
lebihSla: 5,
kurangSla: 5
}
}
},
{
no: 3,
kode: 'B',
jenisGangguan: 'Gangguan B',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50
},
belumSelesai: {
jml: 5,
persen: 50
}
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10
},
laporan: {
lebihSla: 5,
kurangSla: 5
}
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10
},
laporan: {
lebihSla: 5,
kurangSla: 5
}
}
},
{
no: 4,
kode: 'B',
jenisGangguan: 'Gangguan B',
laporan: {
total: 12,
sudahSelesai: {
jml: 6,
persen: 50
},
belumSelesai: {
jml: 6,
persen: 50
}
},
responseTime: {
menit: {
total: 15,
rataRata: 12.5,
max: 18,
min: 10
},
laporan: {
lebihSla: 7,
kurangSla: 5
}
},
recoveryTime: {
menit: {
total: 18,
rataRata: 15,
max: 20,
min: 12
},
laporan: {
lebihSla: 8,
kurangSla: 4
}
}
},
{
no: 5,
kode: 'C',
jenisGangguan: 'Gangguan C',
laporan: {
total: 8,
sudahSelesai: {
jml: 4,
persen: 50
},
belumSelesai: {
jml: 4,
persen: 50
}
},
responseTime: {
menit: {
total: 14,
rataRata: 14,
max: 16,
min: 12
},
laporan: {
lebihSla: 6,
kurangSla: 2
}
},
recoveryTime: {
menit: {
total: 22,
rataRata: 16,
max: 26,
min: 14
},
laporan: {
lebihSla: 9,
kurangSla: 3
}
}
},
{
no: 6,
kode: 'A',
jenisGangguan: 'Gangguan A',
laporan: {
total: 8,
sudahSelesai: {
jml: 4,
persen: 50
},
belumSelesai: {
jml: 4,
persen: 50
}
},
responseTime: {
menit: {
total: 12,
rataRata: 15,
max: 18,
min: 10
},
laporan: {
lebihSla: 6,
kurangSla: 2
}
},
recoveryTime: {
menit: {
total: 16,
rataRata: 18,
max: 22,
min: 14
},
laporan: {
lebihSla: 8,
kurangSla: 0
}
}
},
{
no: 7,
kode: 'C',
jenisGangguan: 'Gangguan C',
laporan: {
total: 15,
sudahSelesai: {
jml: 10,
persen: 66.67
},
belumSelesai: {
jml: 5,
persen: 33.33
}
},
responseTime: {
menit: {
total: 20,
rataRata: 13.33,
max: 24,
min: 10
},
laporan: {
lebihSla: 9,
kurangSla: 6
}
},
recoveryTime: {
menit: {
total: 25,
rataRata: 16.67,
max: 30,
min: 14
},
laporan: {
lebihSla: 12,
kurangSla: 3
}
}
},
{
no: 8,
kode: 'D',
jenisGangguan: 'Gangguan D',
laporan: {
total: 7,
sudahSelesai: {
jml: 2,
persen: 28.57
},
belumSelesai: {
jml: 5,
persen: 71.43
}
},
responseTime: {
menit: {
total: 18,
rataRata: 9,
max: 20,
min: 6
},
laporan: {
lebihSla: 1,
kurangSla: 6
}
},
recoveryTime: {
menit: {
total: 28,
rataRata: 14,
max: 30,
min: 10
},
laporan: {
lebihSla: 4,
kurangSla: 3
}
}
},
{
no: 9,
kode: 'D',
jenisGangguan: 'Gangguan D',
laporan: {
total: 12,
sudahSelesai: {
jml: 8,
persen: 66.67
},
belumSelesai: {
jml: 4,
persen: 33.33
}
},
responseTime: {
menit: {
total: 24,
rataRata: 20,
max: 28,
min: 16
},
laporan: {
lebihSla: 9,
kurangSla: 3
}
},
recoveryTime: {
menit: {
total: 32,
rataRata: 26,
max: 36,
min: 22
},
laporan: {
lebihSla: 11,
kurangSla: 1
}
}
},
{
no: 10,
kode: 'E',
jenisGangguan: 'Gangguan E',
laporan: {
total: 15,
sudahSelesai: {
jml: 12,
persen: 80
},
belumSelesai: {
jml: 3,
persen: 20
}
},
responseTime: {
menit: {
total: 22,
rataRata: 14.67,
max: 26,
min: 10
},
laporan: {
lebihSla: 11,
kurangSla: 4
}
},
recoveryTime: {
menit: {
total: 30,
rataRata: 20,
max: 36,
min: 16
},
laporan: {
lebihSla: 13,
kurangSla: 2
}
}
},
{
no: 11,
kode: 'F',
jenisGangguan: 'Gangguan F',
laporan: {
total: 9,
sudahSelesai: {
jml: 6,
persen: 66.67
},
belumSelesai: {
jml: 3,
persen: 33.33
}
},
responseTime: {
menit: {
total: 18,
rataRata: 12,
max: 22,
min: 10
},
laporan: {
lebihSla: 8,
kurangSla: 1
}
},
recoveryTime: {
menit: {
total: 28,
rataRata: 18.67,
max: 34,
min: 16
},
laporan: {
lebihSla: 10,
kurangSla: 2
}
}
},
{
no: 12,
kode: 'G',
jenisGangguan: 'Gangguan G',
laporan: {
total: 11,
sudahSelesai: {
jml: 7,
persen: 63.64
},
belumSelesai: {
jml: 4,
persen: 36.36
}
},
responseTime: {
menit: {
total: 20,
rataRata: 14.29,
max: 24,
min: 12
},
laporan: {
lebihSla: 8,
kurangSla: 3
}
},
recoveryTime: {
menit: {
total: 32,
rataRata: 22.86,
max: 36,
min: 18
},
laporan: {
lebihSla: 11,
kurangSla: 1
}
}
},
{
no: 13,
kode: 'H',
jenisGangguan: 'Gangguan H',
laporan: {
total: 7,
sudahSelesai: {
jml: 5,
persen: 71.43
},
belumSelesai: {
jml: 2,
persen: 28.57
}
},
responseTime: {
menit: {
total: 16,
rataRata: 12.8,
max: 20,
min: 10
},
laporan: {
lebihSla: 4,
kurangSla: 3
}
},
recoveryTime: {
menit: {
total: 26,
rataRata: 20.8,
max: 30,
min: 18
},
laporan: {
lebihSla: 7,
kurangSla: 0
}
}
},
{
no: 14,
kode: 'I',
jenisGangguan: 'Gangguan I',
laporan: {
total: 14,
sudahSelesai: {
jml: 10,
persen: 71.43
},
belumSelesai: {
jml: 4,
persen: 28.57
}
},
responseTime: {
menit: {
total: 22,
rataRata: 15.71,
max: 28,
min: 10
},
laporan: {
lebihSla: 5,
kurangSla: 6
}
},
recoveryTime: {
menit: {
total: 32,
rataRata: 22.86,
max: 36,
min: 18
},
laporan: {
lebihSla: 7,
kurangSla: 7
}
}
},
{
no: 15,
kode: 'J',
jenisGangguan: 'Gangguan J',
laporan: {
total: 10,
sudahSelesai: {
jml: 8,
persen: 80
},
belumSelesai: {
jml: 2,
persen: 20
}
},
responseTime: {
menit: {
total: 20,
rataRata: 16,
max: 26,
min: 12
},
laporan: {
lebihSla: 6,
kurangSla: 4
}
},
recoveryTime: {
menit: {
total: 30,
rataRata: 23,
max: 36,
min: 18
},
laporan: {
lebihSla: 8,
kurangSla: 2
}
}
},
{
no: 16,
kode: 'K',
jenisGangguan: 'Gangguan K',
laporan: {
total: 13,
sudahSelesai: {
jml: 9,
persen: 69.23
},
belumSelesai: {
jml: 4,
persen: 30.77
}
},
responseTime: {
menit: {
total: 24,
rataRata: 18.46,
max: 28,
min: 16
},
laporan: {
lebihSla: 6,
kurangSla: 7
}
},
recoveryTime: {
menit: {
total: 34,
rataRata: 25.38,
max: 40,
min: 20
},
laporan: {
lebihSla: 9,
kurangSla: 4
}
}
},
{
no: 17,
kode: 'L',
jenisGangguan: 'Gangguan L',
laporan: {
total: 16,
sudahSelesai: {
jml: 11,
persen: 68.75
},
belumSelesai: {
jml: 5,
persen: 31.25
}
},
responseTime: {
menit: {
total: 26,
rataRata: 19.38,
max: 32,
min: 16
},
laporan: {
lebihSla: 7,
kurangSla: 4
}
},
recoveryTime: {
menit: {
total: 36,
rataRata: 24,
max: 42,
min: 20
},
laporan: {
lebihSla: 8,
kurangSla: 5
}
}
},
{
no: 18,
kode: 'M',
jenisGangguan: 'Gangguan M',
laporan: {
total: 12,
sudahSelesai: {
jml: 8,
persen: 66.67
},
belumSelesai: {
jml: 4,
persen: 33.33
}
},
responseTime: {
menit: {
total: 22,
rataRata: 18.33,
max: 28,
min: 14
},
laporan: {
lebihSla: 5,
kurangSla: 7
}
},
recoveryTime: {
menit: {
total: 32,
rataRata: 24,
max: 36,
min: 18
},
laporan: {
lebihSla: 6,
kurangSla: 6
}
}
}
]
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ')
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const posko = params.posko ? params.posko.id : ''
const uid = params.uid ? params.uid.id : 0
const up3 = params.up3 ? params.up3.id : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko,
idUid: uid,
idUp3: up3
})
@@ -1024,13 +305,7 @@ watch(detected, () => {
onError((queryError) => {
console.log(queryError)
})
})
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
const filters= ref();
</script>