Refactor filterData function parameters
This commit is contained in:
		| @@ -1,6 +1,11 @@ | ||||
| <!-- Rekapitulasi Gangguan Per Posko --> | ||||
| <template> | ||||
|      | ||||
|     <Filters @run-search="() => filterData(filters)" class="mb-4"> | ||||
|         <Type8 @update:filters="(value) => { | ||||
|             filters = value | ||||
|         } | ||||
|             " /> | ||||
|     </Filters> | ||||
|     <div id="data"> | ||||
|         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" | ||||
|             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" | ||||
| @@ -9,7 +14,9 @@ | ||||
|             <DxSelection mode="single" /> | ||||
|             <DxPaging :enabled="false" /> | ||||
|             <DxScrolling column-rendering-mode="virtual" mode="virtual" /> | ||||
|             <DxLoadPanel :enabled="true" /> | ||||
|             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" | ||||
|                 v-model:visible.sync="loading" :enabled="true" /> | ||||
|  | ||||
|             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> | ||||
|             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> | ||||
|             <DxColumnFixing :enabled="true" /> | ||||
| @@ -152,7 +159,6 @@ | ||||
| import Filters from '@/components/Form/Filters.vue' | ||||
| import Type8 from '@/components/Form/FiltersType/Type8.vue' | ||||
| import { onMounted, ref } from 'vue' | ||||
| import { useFiltersStore } from '@/stores/filters' | ||||
| import { DxDataGrid } from 'devextreme-vue' | ||||
| import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid' | ||||
| import { jsPDF } from 'jspdf' | ||||
| @@ -207,7 +213,6 @@ query rekapitulasiGangguanPerPosko( | ||||
|         total_selesai | ||||
|         } | ||||
| }`; | ||||
| const loadingVisible = ref<boolean>(true) | ||||
|  | ||||
| const onExporting = (e: any) => { | ||||
|     if (e.format === 'pdf') { | ||||
| @@ -243,95 +248,32 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { | ||||
|     console.log(data) | ||||
| } | ||||
|  | ||||
| const poskoOptions = ['POSKO A', 'POSKO B', 'POSKO C', 'POSKO D', 'POSKO E']; | ||||
|  | ||||
| const createDummy = () => { | ||||
|     var dummy = data.value; | ||||
|     for (let i = 1; i <= 50; i++) { | ||||
|         const randomPosko = poskoOptions[Math.floor(Math.random() * poskoOptions.length)]; | ||||
|  | ||||
|         const totalLaporan = Math.floor(Math.random() * 21); | ||||
|         const laporanSelesai = Math.floor(Math.random() * (totalLaporan + 1)); | ||||
|         const laporanBelumSelesai = totalLaporan - laporanSelesai; | ||||
|  | ||||
|         const responseTimeTotal = Math.floor(Math.random() * 31); | ||||
|         const responseTimeRataRata = (Math.random() * 21) + 10; | ||||
|         const responseTimeMax = responseTimeRataRata + Math.floor(Math.random() * 11); | ||||
|         const responseTimeMin = responseTimeRataRata - Math.floor(Math.random() * 11); | ||||
|  | ||||
|         const responseTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1)); | ||||
|         const responseTimeKurangSla = laporanSelesai - responseTimeLebihSla; | ||||
|  | ||||
|         const recoveryTimeTotal = Math.floor(Math.random() * 31); | ||||
|         const recoveryTimeRataRata = (Math.random() * 21) + 10; | ||||
|         const recoveryTimeMax = recoveryTimeRataRata + Math.floor(Math.random() * 11); | ||||
|         const recoveryTimeMin = recoveryTimeRataRata - Math.floor(Math.random() * 11); | ||||
|  | ||||
|         const recoveryTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1)); | ||||
|         const recoveryTimeKurangSla = laporanSelesai - recoveryTimeLebihSla; | ||||
|  | ||||
|         const entry = { | ||||
|             no: i, | ||||
|             posko: randomPosko, | ||||
|             laporan: { | ||||
|                 total: totalLaporan, | ||||
|                 sudahSelesai: { | ||||
|                     jml: laporanSelesai, | ||||
|                     persen: (laporanSelesai / totalLaporan) * 100, | ||||
|                 }, | ||||
|                 belumSelesai: { | ||||
|                     jml: laporanBelumSelesai, | ||||
|                     persen: (laporanBelumSelesai / totalLaporan) * 100, | ||||
|                 }, | ||||
|             }, | ||||
|             responseTime: { | ||||
|                 menit: { | ||||
|                     total: responseTimeTotal, | ||||
|                     rataRata: responseTimeRataRata, | ||||
|                     max: responseTimeMax, | ||||
|                     min: responseTimeMin, | ||||
|                 }, | ||||
|                 laporan: { | ||||
|                     lebihSla: responseTimeLebihSla, | ||||
|                     kurangSla: responseTimeKurangSla, | ||||
|                 }, | ||||
|             }, | ||||
|             recoveryTime: { | ||||
|                 menit: { | ||||
|                     total: recoveryTimeTotal, | ||||
|                     rataRata: recoveryTimeRataRata, | ||||
|                     max: recoveryTimeMax, | ||||
|                     min: recoveryTimeMin, | ||||
|                 }, | ||||
|                 laporan: { | ||||
|                     lebihSla: recoveryTimeLebihSla, | ||||
|                     kurangSla: recoveryTimeKurangSla, | ||||
|                 }, | ||||
|             } | ||||
|         }; | ||||
|  | ||||
|         dummy.push(entry); | ||||
|     } | ||||
|     data.value = dummy; | ||||
| } | ||||
|  | ||||
|  | ||||
| onMounted(() => { | ||||
|     const filters = useFiltersStore() | ||||
|     const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, { | ||||
|         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         dateTo: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         posko: "", | ||||
|         idUid: 0, | ||||
|         idUp3: 0, | ||||
| const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, { | ||||
|     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|     dateTo: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|     posko: "", | ||||
|     idUid: 0, | ||||
|     idUp3: 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] ? 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, | ||||
|     }) | ||||
|     onResult(queryResult => { | ||||
|         if (queryResult.data != undefined) { | ||||
|            | ||||
|  | ||||
|             var i = 1; | ||||
|             queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => { | ||||
|                 const entry = { | ||||
|                     no : Number(i++), | ||||
|                     no: Number(i++), | ||||
|                     posko: item.posko, | ||||
|                     laporan: { | ||||
|                         total: item.total, | ||||
| @@ -341,7 +283,7 @@ onMounted(() => { | ||||
|                         }, | ||||
|                         belumSelesai: { | ||||
|                             jml: item.total_inproses, | ||||
|                             persen:item.persen_inproses, | ||||
|                             persen: item.persen_inproses, | ||||
|                         }, | ||||
|                     }, | ||||
|                     responseTime: { | ||||
| @@ -376,8 +318,7 @@ onMounted(() => { | ||||
|             }) | ||||
|  | ||||
|             data.value = [...data.value]; | ||||
|             console.log(data.value) | ||||
|             loadingVisible.value = false | ||||
|  | ||||
|         } | ||||
|         console.log(queryResult.data) | ||||
|         console.log(queryResult.loading) | ||||
| @@ -386,10 +327,7 @@ onMounted(() => { | ||||
|     onError((error) => { | ||||
|         console.log(error) | ||||
|     }) | ||||
|     filters.setConfig({ | ||||
|         type: 'type-8', | ||||
|         reportButton: true | ||||
|     }) | ||||
|     // createDummy() | ||||
| }) | ||||
|  | ||||
| } | ||||
| const filters = ref(); | ||||
| </script> | ||||
		Reference in New Issue
	
	Block a user