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

Refactor filterData function parameters

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Pages/Gangguan/Table_1.vue
View File

@ -297,11 +297,11 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
}
}
`
const filterData = (data: any) => {
const dateValue = data.periode.split(' s/d ')
const posko = data.posko ? data.posko.id : ''
const uid = data.uid ? data.uid.id : 0
const up3 = data.up3 ? data.up3.id : 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('-'),

34
src/components/Pages/Gangguan/Table_10.vue
View File

@ -1,5 +1,11 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div>
<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"
@ -80,7 +86,7 @@
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,
@ -180,16 +186,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
idUid: 0,
idUp3: 0
})
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('-'),
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,
idUid: uid,
idUp3: up3
@ -205,19 +209,13 @@ watch(detected, () => {
onError((queryError) => {
console.log(queryError)
})
})
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
const filters= ref();
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
</script>

130
src/components/Pages/Gangguan/Table_11.vue
View File

@ -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>

36
src/components/Pages/Gangguan/Table_12.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type9 @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" @selection-changed="onSelectionChanged"
@ -7,7 +13,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" />
@ -167,21 +175,28 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
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) {
data.value = queryResult.data.rekapitulasiGangguanPerRegu;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -190,8 +205,7 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-9'
})
})
}
const filters = ref()
</script>

36
src/components/Pages/Gangguan/Table_13.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type9 @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" @selection-changed="onSelectionChanged"
@ -7,7 +13,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" />
@ -168,20 +176,29 @@ query rekapitulasiGangguanPerTanggal(
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
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) {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -190,8 +207,7 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-9'
})
})
}
const filters = ref();
</script>

38
src/components/Pages/Gangguan/Table_14.vue
View File

@ -1,4 +1,10 @@
<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="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,7 +13,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" />
@ -136,21 +144,31 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
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) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -159,9 +177,7 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
}
const filters = ref();
</script>

71
src/components/Pages/Gangguan/Table_15.vue
View File

@ -1,24 +1,33 @@
<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="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<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"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<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" />
<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="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
css-class="custom-table-column" />
</DxDataGrid>
</div>
@ -100,22 +109,32 @@ query rekapitulasiGangguanAlihPosko
posko_out
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_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_ALIH_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) {
data.value = queryResult.data.rekapitulasiGangguanAlihPosko
;
loadingVisible.value = false
data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -124,9 +143,7 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
}
const filters = ref();
</script>

134
src/components/Pages/Gangguan/Table_16.vue
View File

@ -1,46 +1,61 @@
<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="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<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"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<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" />
<DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="a" css-class="custom-table-column" />
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -50,20 +65,23 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking"
caption="i" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" caption="j=(i/d)*100"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
caption="j=(i/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking"
caption="k" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" caption="l" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking"
caption="l" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -71,20 +89,23 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking" caption="m" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"
caption="m" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" caption="n=(m/d)*100"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
caption="n=(m/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking"
caption="o" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking"
caption="p" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -94,20 +115,25 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking"
caption="q" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking" caption="r=(q/d)*100"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
caption="r=(q/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="s" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="avg_waktu_response_nonmobile_nonmarking" caption="s"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -115,20 +141,23 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking"
caption="u" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking" caption="v=(u/d)*100"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
caption="v=(u/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking"
caption="w" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking"
caption="x" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -233,22 +262,32 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
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_DISELESAIKAN_MOBILE_APKT, {
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,
})
const filters = useFiltersStore()
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -257,9 +296,8 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
}
const filters = ref();
</script>

54
src/components/Pages/Gangguan/Table_17.vue
View File

@ -1,4 +1,10 @@
<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="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,15 +13,15 @@
<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" />
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="NO" data-type="number"
css-class="custom-table-column" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" data-type="number" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -184,22 +190,31 @@ query rekapitulasiGangguanRatingPerPosko
total
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_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_RATING_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) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -209,10 +224,7 @@ onMounted(() => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
}
const filters = ref();
</script>

40
src/components/Pages/Gangguan/Table_18.vue
View File

@ -1,4 +1,10 @@
<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="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,7 +13,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" />
@ -158,22 +166,30 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
total
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
`
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_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) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -182,9 +198,7 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
}
const filters = ref()
</script>

57
src/components/Pages/Gangguan/Table_19.vue
View File

@ -1,17 +1,27 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type18 @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" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<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"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<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" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
@ -130,22 +140,31 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
up3
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
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_KOREKSI_TRANSAKSI_INDIVIDUAL, {
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) {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -154,9 +173,7 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-18',
reportButton: true
})
})
}
const filters = ref()
</script>

7
src/components/Pages/Gangguan/Table_2.vue
View File

@ -232,10 +232,9 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
idUp3: 0,
})
const filterData = (data: any) => {
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ');
console.log(data)
const filterData = (params: any) => {
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params;
const dateValue = params.periode.split(' s/d ');
refetch({
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,

50
src/components/Pages/Gangguan/Table_20.vue
View File

@ -1,4 +1,10 @@
<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="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -7,12 +13,15 @@
<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" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
@ -138,21 +147,28 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_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_ALIH_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) {
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -161,9 +177,7 @@ onMounted(() => {
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
}
const filters = ref();
</script>

6
src/components/Pages/Gangguan/Table_3.vue
View File

@ -66,9 +66,9 @@ const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const filterData = (data: any) => {
const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ')
const filterData = (params: any) => {
const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = params;
const dateValue = params.periode.split(' s/d ')
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),

6
src/components/Pages/Gangguan/Table_4.vue
View File

@ -67,9 +67,9 @@ const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const filterData = (data: any) => {
const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ')
const filterData = (params: any) => {
const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = params;
const dateValue = params.periode.split(' s/d ')
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),

12
src/components/Pages/Gangguan/Table_5.vue
View File

@ -55,16 +55,10 @@
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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';
import { useDateStore } from '@/stores/date';
import { useSearchStore } from '@/stores/filtersAction';
import { usePostsStore } from '@/stores/posts';
import { useRegionStore } from '@/stores/region';
import { useUp3Store } from '@/stores/up3';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
@ -108,9 +102,9 @@ const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PE
idUid: 0,
idUp3: 0,
})
const filterData = (data: any) => {
const { posko, uid, up3 } = data;
const dateValue = data.periode.split(' s/d ')
const filterData = (params: any) => {
const { posko, uid, up3 } = params;
const dateValue = params.periode.split(' s/d ')
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),

6
src/components/Pages/Gangguan/Table_6.vue
View File

@ -97,9 +97,9 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BER
idUp3: 0,
media : "Twitter"
})
const filterData = (data: any) => {
const { posko, uid, up3, media } = data;
const dateValue = data.periode.split(' s/d ')
const filterData = (params: any) => {
const { posko, uid, up3, media } = params;
const dateValue = params.periode.split(' s/d ')
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),

20
src/components/Pages/Gangguan/Table_7.vue
View File

@ -56,16 +56,10 @@
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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';
import { useDateStore } from '@/stores/date';
import { useSearchStore } from '@/stores/filtersAction';
import { usePostsStore } from '@/stores/posts';
import { useRegionStore } from '@/stores/region';
import { useUp3Store } from '@/stores/up3';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
@ -109,14 +103,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
idUid: 0,
idUp3: 0,
})
const filterData = (data: any) => {
const dateValue = data.periode.split(' s/d ')
const posko = data.posko ? data.posko.id : ''
const uid = data.uid ? data.uid.id : 0
const up3 = data.up3 ? data.up3.id : 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('-'),
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

55
src/components/Pages/Gangguan/Table_8.vue
View File

@ -1,4 +1,10 @@
<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="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -8,7 +14,8 @@
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel v-model:visible.sync="loading" :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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
@ -139,37 +146,35 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const filterData = (param: any) => {
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
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
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,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [...data.value, {
...item,
nama_unit: 'UNIT'
}];
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [...data.value, {
...item,
nama_unit: 'UNIT'
}];
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -205,11 +210,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
const filters = ref();
</script>

757
src/components/Pages/Gangguan/Table_9.vue
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>

1
src/components/Pages/Keluhan/Table_21.vue
View File

@ -1,4 +1,5 @@
<template>
<div>
<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"