Refactor data assignment in onMounted hooks

This commit is contained in:
Dede Fuji Abdul 2024-03-12 13:54:29 +07:00
parent 99afd50f37
commit d4ad845ac3
30 changed files with 382 additions and 207 deletions

View File

@ -127,6 +127,56 @@
}}
</p>
</template>
<DxSummary>
<DxTotalItem
display-format="TOTAL"
show-in-column="user_regu"
css-class="text-white !text-left"
/>
<DxTotalItem
column="jumlah_wo_gangguan_individual"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="avg_durasi_wo_gangguan_individual"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="avg_rpt_wo_gangguan_individual"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="avg_rct_wo_gangguan_individual"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="jumlah_wo_penugasan_khusus"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="avg_wo_penugasan_khusus"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
</DxSummary>
</DxDataGrid>
</div>
@ -748,7 +798,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -853,17 +905,19 @@ const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanChe
const filters = ref()
onMounted(() => {
data.value = [
{
user_regu: '11110.REGU1',
personil_yantek: '11110_FAUZI',
jumlah_wo_gangguan_individual: 54,
avg_durasi_wo_gangguan_individual: 70.67,
avg_rpt_wo_gangguan_individual: 40.69,
avg_rct_wo_gangguan_individual: 71.61,
jumlah_wo_penugasan_khusus: 31,
avg_wo_penugasan_khusus: 63.79
}
]
if (import.meta.env.DEV) {
data.value = [
{
user_regu: '11110.REGU1',
personil_yantek: '11110_FAUZI',
jumlah_wo_gangguan_individual: 54,
avg_durasi_wo_gangguan_individual: 70.67,
avg_rpt_wo_gangguan_individual: 40.69,
avg_rct_wo_gangguan_individual: 71.61,
jumlah_wo_penugasan_khusus: 31,
avg_wo_penugasan_khusus: 63.79
}
]
}
})
</script>

View File

@ -250,6 +250,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
}
})
</script>

View File

@ -512,6 +512,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const showData = () => (showDetail.value = true)
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
}
})
</script>

View File

@ -252,6 +252,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
}
})
</script>

View File

@ -385,6 +385,8 @@ const filterData = (params: any) => {
}
onMounted(() => {
data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
}
})
</script>

View File

@ -405,6 +405,8 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.daftar.gangguanRecoveryTime
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.gangguanRecoveryTime
}
})
</script>

View File

@ -380,6 +380,8 @@ const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.daftar.gangguanResponseTime
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.gangguanResponseTime
}
})
</script>

View File

@ -251,6 +251,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.daftar.daftarGangguanSelesaiTanpaIdPelanggan
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.daftar.daftarGangguanSelesaiTanpaIdPelanggan
}
})
</script>

View File

@ -1164,7 +1164,9 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan
dataSub.value = dummyData.gangguan.rekap.detailGangguan
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan
dataSub.value = dummyData.gangguan.rekap.detailGangguan
}
})
</script>

View File

@ -249,6 +249,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
}
})
</script>

View File

@ -245,6 +245,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
}
})
</script>

View File

@ -562,50 +562,52 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiPerJenisGangguan.map(
(item: any, index: number) => {
return {
no: ++index,
sub_kelompok: item.sub_kelompok,
kode: item.kode,
jenisGangguan: item.tipe_permasalahan,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiPerJenisGangguan.map(
(item: any, index: number) => {
return {
no: ++index,
sub_kelompok: item.sub_kelompok,
kode: item.kode,
jenisGangguan: item.tipe_permasalahan,
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
}
}
)
)
}
})
</script>

View File

@ -381,6 +381,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
}
})
</script>

View File

@ -661,48 +661,50 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
(item: any, index: number) => {
return {
no: ++index,
nama_posko: item.nama_posko,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
(item: any, index: number) => {
return {
no: ++index,
nama_posko: item.nama_posko,
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
}
}
)
)
}
})
</script>

View File

@ -669,49 +669,51 @@ const filters = ref({
})
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
(item: any, index: number) => {
return {
no: ++index,
kode_regu: item.kode_regu,
nama_regu: item.nama_regu,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
(item: any, index: number) => {
return {
no: ++index,
kode_regu: item.kode_regu,
nama_regu: item.nama_regu,
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
}
}
)
)
}
})
</script>

View File

@ -380,6 +380,8 @@ const filterData = (params: any) => {
const filters = ref({ groupBy: false })
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
}
})
</script>

View File

@ -408,6 +408,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia
}
})
</script>

View File

@ -313,6 +313,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
}
})
</script>

View File

@ -438,6 +438,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
}
})
</script>

View File

@ -397,6 +397,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
}
})
</script>

View File

@ -417,6 +417,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
}
})
</script>

View File

@ -401,6 +401,8 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan
}
})
</script>

View File

@ -299,6 +299,8 @@ const filterData = (params: any) => {
}
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
}
})
</script>

View File

@ -699,6 +699,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
}
})
</script>

View File

@ -95,7 +95,7 @@
</DxSummary>
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
{{ data.text }}
</p>
</template>
@ -585,6 +585,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
}
})
</script>

View File

@ -585,7 +585,13 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -867,6 +873,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref({ groupBy: false })
onMounted(() => {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
})
</script>

View File

@ -51,6 +51,7 @@
data-type="number"
data-field="no"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="170"
@ -77,6 +78,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -86,6 +88,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
@ -94,7 +97,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="percent"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@ -105,6 +108,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
@ -113,7 +117,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="percent"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@ -126,6 +130,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -134,6 +139,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -162,6 +168,7 @@
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -170,6 +177,7 @@
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@ -182,6 +190,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -190,6 +199,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -218,6 +228,7 @@
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -226,6 +237,7 @@
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@ -235,236 +247,272 @@
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="avg"
display-format="{0}%"
column="persen_selesai"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="avg"
display-format="{0}%"
column="persen_inproses"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}%"
column="persen_selesai"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}%"
column="persen_inproses"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
</DxSummary>
@ -474,12 +522,20 @@
</p>
</template>
<template #percent="{ data }">
<p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
{{ data.text }}
</p>
</template>
@ -857,6 +913,7 @@ import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
const position = { of: '#data' }
const showIndicator = ref(true)
@ -969,6 +1026,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
}
})
</script>

View File

@ -353,7 +353,7 @@
</template>
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
{{ data.text }}
</p>
</template>
@ -842,6 +842,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref({ groupBy: false })
onMounted(() => {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
}
})
</script>

View File

@ -352,7 +352,7 @@
</template>
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
{{ data.text }}
</p>
</template>
@ -841,6 +841,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref({ groupBy: false })
onMounted(() => {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
}
})
</script>

View File

@ -480,7 +480,7 @@
</template>
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
{{ data.text }}
</p>
</template>
@ -968,6 +968,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
}
})
</script>