Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

This commit is contained in:
kur0nek-o
2024-04-01 10:38:48 +07:00
39 changed files with 1832 additions and 916 deletions

View File

@ -1,7 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp, selectedUlp, itemsUid, itemsUp3, itemsUlp } from './reference' import {
selectedUid,
selectedUp3Ulp,
selectedUlp,
itemsUid,
itemsUp3,
itemsUlp,
fetchUid
} from './reference'
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -27,7 +35,7 @@ const data = ref({
up3: uppp.value, up3: uppp.value,
ulp: ulp.value, ulp: ulp.value,
periode: '', periode: '',
jenisLaporan: '' jenisLaporan: jenisLaporan.value[0]
}) })
const setUid = (value: any) => { const setUid = (value: any) => {
uid.value = value uid.value = value
@ -51,7 +59,7 @@ const setUlp = (value: any) => {
onMounted(() => { onMounted(() => {
emit('update:filters', data.value) emit('update:filters', data.value)
// fetchUid() fetchUid()
}) })
</script> </script>
@ -78,11 +86,7 @@ onMounted(() => {
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">
<label class="filter-input-label">Jenis Laporan:</label> <label class="filter-input-label">Jenis Laporan:</label>
<Select <Select @update:selected="(value) => (data.jenisLaporan = value)" :data="jenisLaporan" />
@update:selected="(value) => (data.jenisLaporan = value)"
:data="jenisLaporan"
:placeholder="'Semua Jenis Laporan'"
/>
</div> </div>
<div class="flex flex-col flex-1 space-y-2"> <div class="flex flex-col flex-1 space-y-2">

View File

@ -20,7 +20,7 @@ import { Anomali_LAPPGP_LPT, Anomali_LAPPGP_LPP } from '../.'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { Type4 } from '@/components/Form/FiltersType' import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import { queries } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
@ -44,50 +44,58 @@ const filters = ref({
up3: 0 up3: 0
}) })
const filterData = (params: any) => { const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const { ulp, uid, up3, jenisLaporan } = params const { ulp, uid, up3, jenisLaporan } = params
console.table('LAPPGP', jenisLaporan)
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const query = {
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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
namaRegional: ''
}
const { onResult, onError, loading, refetch } = useQuery( loadingData.value = true
filters.value.jenisLaporan.name == 'Laporan Berulang Unit' await requestGraphQl(
? queries.anomali.gangguan.petugasBerulang jenisLaporan.name == 'Laporan Berulang Unit'
: filters.value.jenisLaporan.name == 'Laporan Rating Negatif' ? queries.anomali.gangguan.unitBerulang
? queries.anomali.gangguan.petugasRatingNegatif : jenisLaporan.name == 'Laporan Rating Negatif'
: queries.anomali.gangguan.petugasSkipStep, ? queries.anomali.gangguan.unitRatingNegatif
{ : queries.anomali.gangguan.unitSkipStep,
namaRegional: '', query
// 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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
) )
.then((result) => {
onResult((queryResult) => { if (result.data.data != undefined) {
if (queryResult.data != undefined) { if (jenisLaporan.name == 'Laporan Berulang Unit') {
if (jenisLaporan.name == 'Laporan Berulang Unit') { data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasBerulang } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
} else if (jenisLaporan.name == 'Laporan Rating Negatif') { data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasRatingNegatif } else {
data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
}
} else { } else {
data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasSkipStep data.value = []
} }
} })
console.log(queryResult.data) .catch((err) => {
}) console.error(err)
onError((error) => { })
console.log(error) .finally(() => {
}) loadingData.value = false
})
watch(loading, (value) => {
loadingData.value = value
})
} }
onMounted(() => { onMounted(() => {

View File

@ -18,6 +18,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping auto-expand-all="false" expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -36,6 +37,37 @@
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
<!-- <DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> -->
<DxColumn <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
@ -178,6 +210,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGrouping,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,

View File

@ -19,7 +19,7 @@
:word-wrap-enabled="true" :word-wrap-enabled="true"
:data-source="data" :data-source="data"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -50,15 +50,36 @@
cell-template="formatText" cell-template="formatText"
/> />
<DxColumn <DxColumn
:width="170"
alignment="center" alignment="center"
data-field="nama_ulp" :min-width="170"
caption="Nama Unit" data-type="text"
data-field=""
caption="Semua Unit"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
name="namaUnit"
:group-index="0" :group-index="0"
/> />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/>
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
<DxColumn <DxColumn
:width="170" :width="170"

View File

@ -20,7 +20,7 @@ import Filters from '@/components/Form/Filters.vue'
import { Anomali_LAPPGU_LPP, Anomali_LAPPGU_LPT } from '../.' import { Anomali_LAPPGU_LPP, Anomali_LAPPGU_LPT } from '../.'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { queries } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { apolloClient } from '@/utils/api/api.graphql' import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable' import { provideApolloClient } from '@vue/apollo-composable'
@ -44,50 +44,58 @@ const filters = ref({
up3: 0 up3: 0
}) })
const filterData = (params: any) => { const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const { ulp, uid, up3, jenisLaporan } = params const { ulp, uid, up3, jenisLaporan } = params
console.table('LAPPGU', jenisLaporan)
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const query = {
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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
namaRegional: ''
}
const { onResult, onError, loading, refetch } = useQuery( loadingData.value = true
filters.value.jenisLaporan.name == 'Laporan Berulang Unit' await requestGraphQl(
jenisLaporan.name == 'Laporan Berulang Unit'
? queries.anomali.gangguan.unitBerulang ? queries.anomali.gangguan.unitBerulang
: filters.value.jenisLaporan.name == 'Laporan Rating Negatif' : jenisLaporan.name == 'Laporan Rating Negatif'
? queries.anomali.gangguan.unitRatingNegatif ? queries.anomali.gangguan.unitRatingNegatif
: queries.anomali.gangguan.unitSkipStep, : queries.anomali.gangguan.unitSkipStep,
{ query
namaRegional: '',
// 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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
) )
.then((result) => {
onResult((queryResult) => { if (result.data.data != undefined) {
if (queryResult.data != undefined) { if (jenisLaporan.name == 'Laporan Berulang Unit') {
if (jenisLaporan.name == 'Laporan Berulang Unit') { data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitBerulang } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
} else if (jenisLaporan.name == 'Laporan Rating Negatif') { data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif } else {
data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
}
} else { } else {
data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitSkipStep data.value = []
} }
} })
}) .catch((err) => {
console.error(err)
onError((error) => { })
console.log(error) .finally(() => {
}) loadingData.value = false
})
watch(loading, (value) => {
loadingData.value = value
})
} }
onMounted(() => { onMounted(() => {

View File

@ -18,6 +18,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping auto-expand-all="false" expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -36,6 +37,37 @@
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
<!-- <DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> -->
<DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
<DxColumn <DxColumn
:width="170" :width="170"
@ -116,6 +148,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGrouping,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,

View File

@ -19,7 +19,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -29,7 +29,6 @@
:show-indicator="showIndicator" :show-indicator="showIndicator"
:show-pane="showPane" :show-pane="showPane"
:shading="shading" :shading="shading"
v-if="loading"
v-model:visible="loading" v-model:visible="loading"
:enabled="true" :enabled="true"
/> />
@ -49,16 +48,38 @@
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
<DxColumn <DxColumn
:width="170"
alignment="center" alignment="center"
data-field="nama_ulp" :min-width="170"
caption="Nama Unit" data-type="text"
name="namaUnit" data-field=""
caption="Semua Unit"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
:group-index="0" :group-index="0"
/> />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/>
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn <DxColumn

View File

@ -1,10 +1,17 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => filters = value" /> <Type4
</Filters> @update:filters="(value) => (filters = value)"
:jenis-laporan="[
{ id: 1, name: 'Laporan Berulang Unit' },
{ id: 2, name: 'Laporan Rating Negatif' },
{ id: 3, name: 'Laporan Skip Step' }
]"
/>
</Filters>
<Anomali_LAPPKU_LPT :data="data" /> <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" />
<Anomali_LAPPKU_LPP :data="data" /> <Anomali_LAPPKU_LPP :data="data" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -14,66 +21,76 @@ import { Anomali_LAPPKU_LPT, Anomali_LAPPKU_LPP } from '../.'
import { Type4 } from '@/components/Form/FiltersType' import { Type4 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const GET_laporanCheckInCheckOut = gql` const filters = ref({
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) { jenisLaporan: {
laporanCheckInCheckOut( id: 1,
dateFrom: $dateFrom name: 'Laporan Berulang Unit'
dateTo: $dateTo },
posko: $posko ulp: 0,
idUid: $idUid uid: 0,
idUp3: $idUp3 up3: 0
) { })
avg_durasi_wo_gangguan_individual
avg_durasi_wo_penugasan_khusus const resetData = () => {
avg_rct_wo_gangguan_individual data.value = []
avg_rpt_wo_gangguan_individual dataSub.value = []
jumlah_wo_gangguan_individual }
jumlah_wo_penugasan_khusus
personil_yantek const filterData = async (params: any) => {
user_regu resetData()
} const { ulp, uid, up3, jenisLaporan } = params
console.table('LAPPKU', jenisLaporan)
const dateValue = params.periode.split(' s/d ')
const query = {
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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
namaRegional: ''
} }
`
const filterData = (params: any) => { loadingData.value = true
const { posko, uid, up3 } = params await requestGraphQl(
const dateValue = params.periode.split(' s/d ') jenisLaporan.name == 'Laporan Berulang Unit'
refetch({ ? queries.anomali.keluhan.unitBerulang
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), : jenisLaporan.name == 'Laporan Rating Negatif'
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? queries.anomali.keluhan.unitRatingNegatif
posko: posko ? posko.id : "", : queries.anomali.keluhan.unitSkipStep,
idUid: uid ? uid.id : 0, query
idUp3: up3 ? up3.id : 0 )
}) .then((result) => {
onResult((queryResult) => { if (result.data.data != undefined) {
if (queryResult.data != undefined) { if (jenisLaporan.name == 'Laporan Berulang Unit') {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => { data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitBerulang
data.value = [ } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
...data.value, data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
{ } else {
...item, data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
}
]
})
} }
console.log(queryResult.data) } else {
console.log(queryResult.loading) data.value = []
console.log(queryResult.networkStatus) }
}) })
onError((error) => { .catch((err) => {
console.log(error) console.error(err)
})
.finally(() => {
loadingData.value = false
}) })
} }
const { onResult, onError, loading, refetch } = useQuery( </script>
GET_laporanCheckInCheckOut,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

View File

@ -4,6 +4,7 @@
</div> </div>
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
:data-source="data"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
@ -17,6 +18,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping auto-expand-all="false" expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -26,7 +28,6 @@
:show-indicator="showIndicator" :show-indicator="showIndicator"
:show-pane="showPane" :show-pane="showPane"
:shading="shading" :shading="shading"
v-if="loading"
v-model:visible="loading" v-model:visible="loading"
:enabled="true" :enabled="true"
/> />
@ -40,18 +41,20 @@
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="" data-field="nama_ulp"
caption="Nama Unit" caption="Nama Unit"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
/> />
<DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
<DxColumn <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
data-field="" data-field="wo_total"
data-type="number" data-type="number"
caption="a" caption="a"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn <DxColumn
@ -62,10 +65,11 @@
<DxColumn <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
data-field="" data-field="total_anomali"
data-type="number" data-type="number"
caption="b" caption="b"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn <DxColumn
@ -76,12 +80,45 @@
<DxColumn <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
data-field="" data-field="persen_anomali_pln_mobile_marking"
data-type="number" data-type="number"
caption="c=b/a" caption="c=b/a"
css-class="custom-table-column" css-class="custom-table-column"
:calculate-display-value="
(rowData: any) => (rowData.total_anomali / rowData.wo_total) * 100
"
cell-template="formatPercentage"
/> />
</DxColumn> </DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid> </DxDataGrid>
</template> </template>
@ -91,6 +128,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
@ -103,12 +141,18 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const props = defineProps({ const props = defineProps({
data: Array as () => any[] data: Array as () => any[],
loading: {
type: Boolean,
default: false
}
}) })
const data = computed(() => props.data) const data = computed(() => props.data)
const loading = ref(false) const loading = ref(false)

View File

@ -4,6 +4,7 @@
</div> </div>
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
:data-source="data"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
@ -18,6 +19,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -27,7 +29,6 @@
:show-indicator="showIndicator" :show-indicator="showIndicator"
:show-pane="showPane" :show-pane="showPane"
:shading="shading" :shading="shading"
v-if="loading"
v-model:visible="loading" v-model:visible="loading"
:enabled="true" :enabled="true"
/> />
@ -42,59 +43,96 @@
<DxColumn <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
data-field="" data-field="nama_ulp"
caption="Nama Unit" caption="Nama Unit"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="wo_cc123"
data-type="number" data-type="number"
caption="a" caption="a"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="wo_pln_mobile"
data-type="number" data-type="number"
caption="b" caption="b"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column"> <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="wo_loket"
data-type="number" data-type="number"
caption="c" caption="c"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column"> <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="wo_lainnya"
data-type="number" data-type="number"
caption="d" caption="d"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="wo_total"
data-type="number" data-type="number"
caption="e=a+b+c+d" caption="e=a+b+c+d"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -107,30 +145,33 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="total_anomali"
data-type="number" data-type="number"
caption="f" caption="f"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="anomali_cc123"
data-type="number" data-type="number"
caption="g" caption="g"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="total_anomali"
data-type="number" data-type="number"
caption="h=f+g" caption="h=f+g"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber"
/> />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -144,33 +185,180 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="persen_anomali_pln_mobile"
data-type="number" data-type="number"
caption="i=f/e" caption="i=f/e"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatPercentage"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="persen_anomali_cc123"
data-type="number" data-type="number"
caption="j=g/e" caption="j=g/e"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatPercentage"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="persen_anomali_total"
data-type="number" data-type="number"
caption="k=i+j" caption="k=i+j"
css-class="custom-table-column" css-class="custom-table-column"
:calculate-display-value="
(rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
"
cell-template="formatPercentage"
/> />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<DxSummary>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="wo_cc123"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="wo_pln_mobile"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="wo_loket"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="wo_lainnya"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="wo_total"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="anomali_pln_mobile_marking"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="anomali_cc123_marking"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_anomali_marking"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="persen_anomali_cc123_marking"
summary-type="avg"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="persen_anomali_pln_mobile"
summary-type="avg"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="persen_anomali_total"
summary-type="avg"
css-class="!text-right"
:calculate-custom-summary="
(options: any) => {
if (options.summaryProcess === 'start') {
options.totalValue = 0
options.count = 0
}
if (options.summaryProcess === 'calculate') {
if (options.value) {
options.totalValue += options.value
options.count++
}
}
if (options.summaryProcess === 'finalize') {
return options.totalValue / options.count
}
}
"
:calculate-display-value="
(rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary>
</DxDataGrid> </DxDataGrid>
</template> </template>
@ -181,25 +369,34 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxSummary
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const loading = ref(false)
const props = defineProps({ const props = defineProps({
data: Array as () => any[] data: Array as () => any[],
loading: {
type: Boolean,
default: false
}
}) })
const loading = computed(() => props.loading)
const data = computed(() => props.data) const data = computed(() => props.data)
const onExporting = (e: any) => { const onExporting = (e: any) => {

View File

@ -184,7 +184,7 @@
<DetailDialog <DetailDialog
:open="dialogDetail" :open="dialogDetail"
title="Daftar Detail Jumlah WO Gangguan Individu" title="Daftar Detail Penugasan Khusus"
@on-close="closedialogDetail" @on-close="closedialogDetail"
:full-width="true" :full-width="true"
> >
@ -243,7 +243,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_uid"
caption="UID/UIW" caption="UID/UIW"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -251,7 +251,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_up3"
caption="UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -259,7 +259,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_posko"
caption="Posko" caption="Posko"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -267,7 +267,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="media"
caption="Sumber Lapor" caption="Sumber Lapor"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -275,7 +275,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="pembuat_laporan"
caption="Created By" caption="Created By"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -283,7 +283,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="dispatch_by"
caption="Dispatch By" caption="Dispatch By"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -291,15 +291,15 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_dispatch"
caption="Dispatch Time" caption="Dispatch Time"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatNumber"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="user_regu"
caption="User Regu" caption="User Regu"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -307,7 +307,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_regu"
caption="Nama Regu" caption="Nama Regu"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -315,7 +315,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="personil_yantek"
caption="Nama Petugas" caption="Nama Petugas"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -323,7 +323,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="shift"
caption="Shif" caption="Shif"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -331,7 +331,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="check_in_petugas"
caption="Check In Petugas" caption="Check In Petugas"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -339,7 +339,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="no_laporan"
caption="No Laporan" caption="No Laporan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -347,7 +347,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_lapor"
caption="Tgl Lapor" caption="Tgl Lapor"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -355,7 +355,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_dispatch"
caption="Tgl Penugasan Baru" caption="Tgl Penugasan Baru"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -363,7 +363,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_perjalanan"
caption="Tgl Dalam Perjalanan" caption="Tgl Dalam Perjalanan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -371,7 +371,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_response"
caption="Tgl Pengerjaan" caption="Tgl Pengerjaan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -379,7 +379,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_nyala_sementara"
caption="Tgl Nyala Sementara" caption="Tgl Nyala Sementara"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -387,7 +387,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_nyala"
caption="Tgl Nyala" caption="Tgl Nyala"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -395,7 +395,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="waktu_selesai"
caption="Tgl Selesai" caption="Tgl Selesai"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -403,7 +403,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_waktu_response"
caption="Durasi Perjalanan" caption="Durasi Perjalanan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -411,7 +411,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_wo"
caption="Durasi WO" caption="Durasi WO"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -419,7 +419,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="check_out_petugas"
caption="Check Out Petugas" caption="Check Out Petugas"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -427,39 +427,39 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_menit_response"
caption="RPT" caption="RPT"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatNumber"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_menit_recovery"
caption="RCT" caption="RCT"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatNumber"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="rating"
caption="Rating" caption="Rating"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatNumber"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="jml_pelanggan_padam"
caption="Jml Pelanggan Padam" caption="Jml Pelanggan Padam"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatNumber"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="fasilitas"
caption="Fasilitas" caption="Fasilitas"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -467,7 +467,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="sub_fasilitas"
caption="Sub Fasilitas" caption="Sub Fasilitas"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -475,7 +475,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="peralatan"
caption="Peralatan" caption="Peralatan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -483,7 +483,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="dampak_kerusakan"
caption="Dampak Kerusakan" caption="Dampak Kerusakan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -491,7 +491,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="penyebab"
caption="Penyebab" caption="Penyebab"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -499,7 +499,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="kelompok_penyebab"
caption="Kelompok Penyebab" caption="Kelompok Penyebab"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -507,7 +507,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="cuaca"
caption="Cuaca" caption="Cuaca"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -515,7 +515,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -523,7 +523,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="keterangan"
caption="Keterangan" caption="Keterangan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -531,15 +531,16 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="penyebab_padam"
caption="Penyebab Padam" caption="Penyebab Padam"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
:calculate-display-value="(item: any) => `${item.penyebab} - ${item.kelompok_penyebab}`"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tindakan"
caption="Tindakan" caption="Tindakan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -547,7 +548,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="status_akhir"
caption="APKT Status" caption="APKT Status"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -555,7 +556,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="referensi_marking"
caption="Referensi Marking" caption="Referensi Marking"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -563,10 +564,10 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="blth"
caption="BLTH" caption="BLTH"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatNumber"
/> />
<template #formatText="{ data }"> <template #formatText="{ data }">
@ -587,202 +588,279 @@
<div class="p-4 space-y-2 bg-white rounded-xl"> <div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Created By:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Created By:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.pembuat_laporan"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch By:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch By:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.dispatch_by" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Time:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Time:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.durasi_waktu_dispatch"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">User Regu:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">User Regu:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.user_regu" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Regu:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Regu:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_regu" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.personil_yantek"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Shif:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Shif:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.shift" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Check In Petugas:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Check In Petugas:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.check_in_petugas"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Regu:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Regu:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.waktu_dispatch"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Dalam Perjalanan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Dalam Perjalanan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.waktu_perjalanan"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.waktu_perjalanan"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_nyala_sementara"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.waktu_nyala" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.waktu_selesai" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.durasi_waktu_response"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi WO:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi WO:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.durasi_wo" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Check Out Petugas:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Check Out Petugas:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.check_out_petugas"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">RPT</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">RPT</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.durasi_menit_response"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">RCT</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">RCT</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.durasi_menit_recovery"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rating</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Rating</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.rating" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jml Pelanggan Padam:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Jml Pelanggan Padam:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.jml_pelanggan_padam"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.fasilitas" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.sub_fasilitas" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Peralatan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Peralatan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.peralatan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dampak Kerusakan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Dampak Kerusakan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.dampak_kerusakan"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok Penyebab:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.kelompok_penyebab"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Cuaca:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Cuaca:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.cuaca" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab Padam:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab Padam:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="`${dataSubSelected?.penyebab} - ${dataSubSelected?.kelompok_penyebab}`"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">PKT Status:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">APKT Status:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">BLTH</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">BLTH</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.blth" class-name="flex-1" />
</div> </div>
</div> </div>
</div> </div>
@ -813,7 +891,7 @@ import { Workbook } from 'exceljs'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import { Type1 } from '@/components/Form/FiltersType' import { Type1 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
@ -838,10 +916,9 @@ const loadingSubData = ref(false)
const closedialogDetail = () => (dialogDetail.value = false) const closedialogDetail = () => (dialogDetail.value = false)
const getDetail = () => { const getDetail = async () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ') const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value const selected = dataSelected.value
const query = { const query = {
dateFrom: dateValue[0] dateFrom: dateValue[0]
@ -850,29 +927,27 @@ const getDetail = () => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
posko: ref.id_posko, idPosko: selected?.id_posko ? selected?.id_posko : 0,
idUid: ref.id_uid, idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: ref.id_up3 idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
personilYantek: selected?.personil_yantek ? selected?.personil_yantek : ''
} }
const { onResult, onError, loading, refetch } = useQuery( loadingSubData.value = true
queries.gangguan.rekap.gangguanAllDetail, await requestGraphQl(queries.cico.laporanCheckInCheckOutDetail, query)
query .then((result) => {
) if (result.data.data != undefined) {
dataSub.value = result.data.data.detailCheckInCheckOut
onResult((queryResult) => { } else {
if (queryResult.data != undefined) { dataSub.value = []
dataSub.value = queryResult.data.detailGangguan }
} })
}) .catch((err) => {
console.error(err)
onError((error) => { })
console.log(error) .finally(() => {
}) loadingSubData.value = false
})
watch(loading, (value) => {
loadingSubData.value = value
})
} }
const dataGridRef = ref<DxDataGrid | null>(null) const dataGridRef = ref<DxDataGrid | null>(null)
@ -920,23 +995,27 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0] dataSubSelected.value = selectedRowsData[0]
} }
dataSubSelected.value = data
console.log(data)
} }
const filterData = (params: any) => { const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, { const query = {
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
@ -946,20 +1025,23 @@ const filterData = (params: any) => {
idPosko: posko ? posko.id : 0, idPosko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) }
onResult((queryResult) => { loadingData.value = true
if (queryResult.data != undefined) { await requestGraphQl(queries.cico.laporanCheckInCheckOut, query)
data.value = queryResult.data.laporanCheckInCheckOut .then((result) => {
} if (result.data.data != undefined) {
console.log(queryResult.data) data.value = result.data.data.laporanCheckInCheckOut
}) } else {
onError((error) => { data.value = []
console.log(error) }
}) })
watch(loading, (value) => { .catch((err) => {
loadingData.value = value console.error(err)
}) })
.finally(() => {
loadingData.value = false
})
} }
const filters = ref() const filters = ref()

View File

@ -19,6 +19,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping auto-expand-all="false" expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -171,6 +172,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,

View File

@ -69,7 +69,6 @@
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
:group-index="0" :group-index="0"
v-if="filters?.uid ? filters?.uid.id == 0 : 0"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
@ -78,7 +77,7 @@
caption="Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
:group-index="filters?.uid.id != 0 ? 0 : 1" :group-index="1"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
@ -87,7 +86,7 @@
caption="UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
:group-index="filters?.uid.id != 0 ? 0 : 2" :group-index="2"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
@ -96,7 +95,7 @@
caption="UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
:group-index="filters?.uid.id != 0 ? 0 : 3" :group-index="3"
/> />
<!-- <DxColumn <!-- <DxColumn
:width="150" :width="150"
@ -1082,6 +1081,7 @@ import {
exportDetailToPDF, exportDetailToPDF,
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_ALL' } from '@/report/Gangguan/Rekap/RGangguan_ALL'
import { getDataRowGroup } from '@/utils/data'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
@ -1109,59 +1109,44 @@ const reportMeta = ref({
periode: '' periode: ''
}) })
const getDataRowGroup = (data: any): any => {
if (data.items) {
if (Array.isArray(data.items)) {
return getDataRowGroup(data.items)
} else {
if (data.items.collapsedItems) {
}
}
} else if (data.collapsedItems) {
return {}
} else {
return {}
}
}
const onCellClicked = (e: any) => { const onCellClicked = (e: any) => {
console.log('cell clicked', e)
// console.log('group cell clicked', e.column.caption)
// console.log('value', e.values[e.row.groupIndex])
if (e.rowType == 'group') { if (e.rowType == 'group') {
groupDialog.value = true groupDialog.value = true
groupIndex.value = e.row.groupIndex groupIndex.value = e.row.groupIndex
setAgreementDialog(e.column.caption) setAgreementDialog(e.column.caption)
const data = getDataRowGroup(e.data) const data = getDataRowGroup(e.data)
console.log('data', data) console.table(data)
if (e.row.groupIndex == 0) { groupData.value = data
//
} else if (e.row.groupIndex == 1) {
if (e.row.isExpanded) {
const data = e.data.items[0].collapsedItems[0].items[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0].items[0].items[0]
groupData.value = data
}
} else if (e.row.groupIndex == 2) {
if (e.row.isExpanded) {
const data = e.data.items[0].collapsedItems[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0].items[0]
groupData.value = data
}
} else if (e.row.groupIndex == 3) {
if (e.row.isExpanded) {
const data = e.data.items[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0]
groupData.value = data
}
}
showDetail() showDetail()
// if (e.row.groupIndex == 0) {
// //
// } else if (e.row.groupIndex == 1) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0].items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 2) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 3) {
// if (e.row.isExpanded) {
// const data = e.data.items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0]
// groupData.value = data
// }
// }
// showDetail()
} else { } else {
groupDialog.value = false groupDialog.value = false
} }
@ -1267,12 +1252,28 @@ const getDetail = async () => {
tanggal: '' tanggal: ''
} }
if (groupDialog.value) { if (groupDialog.value) {
if (groupIndex.value == 0) { // if (groupColumnCaption.value != 'Semua Unit') {
query = { // if (groupColumnCaption.value == 'Regional') {
...query, // query = {
isSelesai: progressSelected.value // ...query,
} // namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
} else if (groupIndex.value == 1) { // }
// } else if (groupColumnCaption.value == 'UID') {
// query = {
// ...query,
// idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// } else if (groupColumnCaption.value == 'UP3') {
// query = {
// ...query,
// idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
// idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// }
// }
if (groupIndex.value == 1) {
query = { query = {
...query, ...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : '' namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''

View File

@ -1134,7 +1134,7 @@ import {
exportDetailToXLSX exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_KTI' } from '@/report/Gangguan/Rekap/RGangguan_KTI'
import { getMonthNumber } from '@/utils/texts' import { getMonthNumber } from '@/utils/texts'
import { getDataRowGroup } from '@/utils/data'
const client = apolloClient() const client = apolloClient()
provideApolloClient(client) provideApolloClient(client)
const position = { of: '#data' } const position = { of: '#data' }
@ -1155,53 +1155,30 @@ const reportMeta = ref({
posko: { id: 0, name: 'Semua Posko' }, posko: { id: 0, name: 'Semua Posko' },
periode: '' periode: ''
}) })
const groupIndex = ref(0)
const groupDialog = ref(false) const groupDialog = ref(false)
const groupData = ref<any>(null) const groupData = ref<any>(null)
const onCellClicked = (e: any) => { const onCellClicked = (e: any) => {
console.log('cell clicked', e) // if (e.rowType == 'group') {
// console.log('group cell clicked', e.column.caption) // groupDialog.value = true
// console.log('value', e.values[e.row.groupIndex]) // if (e.row.groupIndex != 0) {
if (e.rowType == 'group') { // const data = getDataRowGroup(e.data)
groupDialog.value = true // console.table(data)
groupIndex.value = e.row.groupIndex // groupData.value = data
if (e.row.groupIndex == 0) { // }
// // showDetail()
} else if (e.row.groupIndex == 1) { // } else {
if (e.row.isExpanded) { // groupDialog.value = false
const data = e.data.items[0].collapsedItems[0].items[0] // }
groupData.value = data
} else {
const data = e.data.collapsedItems[0].items[0].items[0]
groupData.value = data
}
} else if (e.row.groupIndex == 2) {
if (e.row.isExpanded) {
const data = e.data.items[0].collapsedItems[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0].items[0]
groupData.value = data
}
} else if (e.row.groupIndex == 3) {
if (e.row.isExpanded) {
const data = e.data.items[0]
groupData.value = data
} else {
const data = e.data.collapsedItems[0]
groupData.value = data
}
}
showDetail()
} else {
groupDialog.value = false
}
} }
const setMonth = (month: any) => { const setMonth = (month: any) => {
if (month != '') { if (month != '') {
monthSelected.value = getMonthNumber(month) if (getMonthNumber(month) == 0) {
monthSelected.value = null
} else {
monthSelected.value = getMonthNumber(month)
}
} else { } else {
monthSelected.value = null monthSelected.value = null
} }
@ -1316,17 +1293,25 @@ const filterData = async (params: any) => {
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0, idUp3: up3 ? up3.id : 0,
is_transaksi_individual: is_transaksi_individual:
jenisTransaksi.length == 4 jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0 ? 0
: jenisTransaksi.includes('Koreksi Transaksi Individual') : jenisTransaksi.includes('Koreksi Transaksi Individual')
? 1 ? 1
: 2, : 2,
is_cleansing_transaksi_tm: is_cleansing_transaksi_tm:
jenisTransaksi.length == 4 ? 0 : jenisTransaksi.includes('Cleansing Traksaksi TM') ? 1 : 2, jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Cleansing Traksaksi TM')
? 1
: 2,
is_koreksi_transaksi_tm: is_koreksi_transaksi_tm:
jenisTransaksi.length == 4 ? 0 : jenisTransaksi.includes('Koreksi Transaksi TM') ? 1 : 2, jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Koreksi Transaksi TM')
? 1
: 2,
is_koreksi_gangguan_dan_anev: is_koreksi_gangguan_dan_anev:
jenisTransaksi.length == 4 jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0 ? 0
: jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev') : jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev')
? 1 ? 1

View File

@ -195,7 +195,7 @@
<DxColumn <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
data-field="nama_ulp" data-field="nama_unit_baru"
caption="Nama ULP" caption="Nama ULP"
css-class="custom-table-column !align-top" css-class="custom-table-column !align-top"
cell-template="formatText" cell-template="formatText"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -46,16 +46,38 @@
/> />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<!-- <DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_ulp" data-field="nama_regional"
caption="Nama Unit" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaUlp" name="namaRegional"
/> --> />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/>
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
@ -179,6 +201,62 @@
css-class="text-white !text-right" css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)" :customize-text="(e: any) => formatPercentage(e.value)"
/> />
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="mom_bulan_kemarin"
column="mom_bulan_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="mom_bulan_ini"
column="mom_bulan_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_mom"
column="persen_mom"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_kemarin"
column="yoy_tahun_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_ini"
column="yoy_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_yoy"
column="persen_yoy"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
@ -211,6 +289,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping, DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,

View File

@ -25,6 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping :context-menu-enabled="true" expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -44,7 +45,38 @@
:allow-export-selected-data="false" :allow-export-selected-data="false"
/> />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
:group-index="0"
name="namaRegional"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UIW"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/>
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_ulp" data-field="nama_ulp"
@ -180,6 +212,62 @@
css-class="text-white !text-right" css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)" :customize-text="(e: any) => formatPercentage(e.value)"
/> />
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="mom_bulan_kemarin"
column="mom_bulan_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="mom_bulan_ini"
column="mom_bulan_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_mom"
column="persen_mom"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_kemarin"
column="yoy_tahun_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_ini"
column="yoy_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_yoy"
column="persen_yoy"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -194,6 +282,8 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,

View File

@ -54,27 +54,35 @@
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170"
data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_uid" :min-width="170"
data-type="text"
data-field="id_uid"
caption="UIW" caption="UIW"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_up3" :min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" :group-index="1"
:group-index="2" name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
<DxColumn <DxColumn
@ -151,6 +159,35 @@
css-class="text-white !text-right" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="jumlah_gangguan"
column="jumlah_gangguan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="jumlah_informasi"
column="jumlah_informasi"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="total"
column="total"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -463,6 +500,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping, DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPager, DxPager,

View File

@ -24,7 +24,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -53,6 +53,14 @@
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
/> />
<DxColumn
alignment="center"
data-field=""
caption="NASIONAL"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_regional" data-field="nama_regional"
@ -104,7 +112,7 @@
alignment="center" alignment="center"
caption="b" caption="b"
data-type="number" data-type="number"
data-field="jumlah_gangguan_rpt_bulan" data-field="count_durasi_response_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -115,7 +123,7 @@
alignment="center" alignment="center"
caption="c=a/b" caption="c=a/b"
data-type="number" data-type="number"
data-field="rpt_gangguan_bulan" data-field="avg_durasi_response_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -126,7 +134,7 @@
alignment="center" alignment="center"
caption="d" caption="d"
data-type="number" data-type="number"
data-field="total_rct_bulan" data-field="total_durasi_recovery_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -137,7 +145,7 @@
alignment="center" alignment="center"
caption="e" caption="e"
data-type="number" data-type="number"
data-field="jumlah_gangguan_rct_bulan" data-field="count_durasi_recovery_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -148,7 +156,7 @@
alignment="center" alignment="center"
caption="f=d/e" caption="f=d/e"
data-type="number" data-type="number"
data-field="rct_gangguan_bulan" data-field="avg_durasi_recovery_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -176,7 +184,7 @@
alignment="center" alignment="center"
caption="b" caption="b"
data-type="number" data-type="number"
data-field="jumlah_gangguan_rpt_sampai_bulan" data-field="count_durasi_response_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -187,7 +195,7 @@
alignment="center" alignment="center"
caption="c=a/b" caption="c=a/b"
data-type="number" data-type="number"
data-field="rpt_gangguan_sampai_bulan" data-field="avg_durasi_response_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -209,7 +217,7 @@
alignment="center" alignment="center"
caption="e" caption="e"
data-type="number" data-type="number"
data-field="jumlah_gangguan_rct_sampai_bulan" data-field="count_durasi_recovery_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -220,7 +228,7 @@
alignment="center" alignment="center"
caption="f=d/e" caption="f=d/e"
data-type="number" data-type="number"
data-field="rch_gangguan_sampai_bulan" data-field="avg_durasi_recovery_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -242,8 +250,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_gangguan_rpt_bulan" show-in-column="count_durasi_response_time_bulan_ini"
column="jumlah_gangguan_rpt_bulan" column="count_durasi_response_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -251,8 +259,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rpt_gangguan_bulan" show-in-column="avg_durasi_response_time_bulan_ini"
column="rpt_gangguan_bulan" column="avg_durasi_response_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -260,8 +268,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="total_rct_bulan" show-in-column="total_durasi_recovery_time_bulan_ini"
column="total_rct_bulan" column="total_durasi_recovery_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -269,8 +277,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_gangguan_rct_bulan" show-in-column="count_durasi_recovery_time_bulan_ini"
column="jumlah_gangguan_rct_bulan" column="count_durasi_recovery_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -278,8 +286,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rct_gangguan_bulan" show-in-column="avg_durasi_recovery_time_bulan_ini"
column="rct_gangguan_bulan" column="avg_durasi_recovery_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -296,8 +304,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_gangguan_rpt_sampai_bulan" show-in-column="count_durasi_response_time_tahun_ini"
column="jumlah_gangguan_rpt_sampai_bulan" column="count_durasi_response_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -305,8 +313,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rpt_gangguan_sampai_bulan" show-in-column="avg_durasi_response_time_tahun_ini"
column="rpt_gangguan_sampai_bulan" column="avg_durasi_response_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -323,8 +331,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_gangguan_rct_sampai_bulan" show-in-column="count_durasi_recovery_time_tahun_ini"
column="jumlah_gangguan_rct_sampai_bulan" column="count_durasi_recovery_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -332,8 +340,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rch_gangguan_sampai_bulan" show-in-column="avg_durasi_recovery_time_tahun_ini"
column="rch_gangguan_sampai_bulan" column="avg_durasi_recovery_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -538,337 +546,5 @@ const filters = ref<any>({
onMounted(() => { onMounted(() => {
getMonthName(filters.value.bulan.id) getMonthName(filters.value.bulan.id)
data.value = [
{
id: 0,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 120,
nama_uid: 'WILAYAH SUMATERA UTARA',
id_up3: 12100,
nama_up3: 'UP3 PEMATANG SIANTAR',
id_ulp: 12102,
nama_ulp: 'ULP LIMA PULUH',
total_durasi_response_time_bulan_ini: 15239,
count_durasi_response_time_bulan_ini: 26,
avg_durasi_response_time_bulan_ini: 586.1153846153846,
total_durasi_recovery_time_bulan_ini: 31425,
count_durasi_recovery_time_bulan_ini: 26,
avg_durasi_recovery_time_bulan_ini: 1208.6538461538462,
total_durasi_response_time_tahun_ini: 353812,
count_durasi_response_time_tahun_ini: 746,
avg_durasi_response_time_tahun_ini: 474.2788203753351,
total_durasi_recovery_time_tahun_ini: 708488,
count_durasi_recovery_time_tahun_ini: 746,
avg_durasi_recovery_time_tahun_ini: 474.2788203753351
},
{
id: 1,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 41,
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
id_up3: 412,
nama_up3: 'UP3 TERNATE',
id_ulp: 41230,
nama_ulp: 'ULP BACAN',
total_durasi_response_time_bulan_ini: 475280,
count_durasi_response_time_bulan_ini: 378,
avg_durasi_response_time_bulan_ini: 1257.3544973544974,
total_durasi_recovery_time_bulan_ini: 834379,
count_durasi_recovery_time_bulan_ini: 378,
avg_durasi_recovery_time_bulan_ini: 2207.3518518518517,
total_durasi_response_time_tahun_ini: 2353207,
count_durasi_response_time_tahun_ini: 2185,
avg_durasi_response_time_tahun_ini: 1076.982608695652,
total_durasi_recovery_time_tahun_ini: 3773486,
count_durasi_recovery_time_tahun_ini: 2034,
avg_durasi_recovery_time_tahun_ini: 1076.982608695652
},
{
id: 2,
nama_regional: 'REGIONAL JMB',
id_uid: 101,
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
id_up3: 52150,
nama_up3: 'UP3 MAGELANG',
id_ulp: 52156,
nama_ulp: 'ULP PARAKAN',
total_durasi_response_time_bulan_ini: 1149446,
count_durasi_response_time_bulan_ini: 991,
avg_durasi_response_time_bulan_ini: 1159.8849646821393,
total_durasi_recovery_time_bulan_ini: 2064288,
count_durasi_recovery_time_bulan_ini: 991,
avg_durasi_recovery_time_bulan_ini: 2083.0353178607465,
total_durasi_response_time_tahun_ini: 11820004,
count_durasi_response_time_tahun_ini: 10220,
avg_durasi_response_time_tahun_ini: 1156.5561643835617,
total_durasi_recovery_time_tahun_ini: 19879614,
count_durasi_recovery_time_tahun_ini: 10215,
avg_durasi_recovery_time_tahun_ini: 1156.5561643835617
},
{
id: 3,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31500,
nama_up3: 'UP3 TOLITOLI',
id_ulp: 31530,
nama_ulp: 'ULP BANGKIR',
total_durasi_response_time_bulan_ini: 52509,
count_durasi_response_time_bulan_ini: 52,
avg_durasi_response_time_bulan_ini: 1009.7884615384615,
total_durasi_recovery_time_bulan_ini: 96349,
count_durasi_recovery_time_bulan_ini: 52,
avg_durasi_recovery_time_bulan_ini: 1852.8653846153845,
total_durasi_response_time_tahun_ini: 13888593,
count_durasi_response_time_tahun_ini: 2300,
avg_durasi_response_time_tahun_ini: 6038.518695652174,
total_durasi_recovery_time_tahun_ini: 2188450,
count_durasi_recovery_time_tahun_ini: 2291,
avg_durasi_recovery_time_tahun_ini: 6038.518695652174
},
{
id: 4,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 154,
nama_up3: 'UP3 SITUBONDO',
id_ulp: 51654,
nama_ulp: 'ULP WONOSARI',
total_durasi_response_time_bulan_ini: 1408665,
count_durasi_response_time_bulan_ini: 843,
avg_durasi_response_time_bulan_ini: 1671.0142348754448,
total_durasi_recovery_time_bulan_ini: 2183667,
count_durasi_recovery_time_bulan_ini: 843,
avg_durasi_recovery_time_bulan_ini: 2590.3523131672596,
total_durasi_response_time_tahun_ini: 11091744,
count_durasi_response_time_tahun_ini: 8376,
avg_durasi_response_time_tahun_ini: 1324.2292263610316,
total_durasi_recovery_time_tahun_ini: 17694880,
count_durasi_recovery_time_tahun_ini: 8237,
avg_durasi_recovery_time_tahun_ini: 1324.2292263610316
},
{
id: 5,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 110,
nama_uid: 'WILAYAH ACEH',
id_up3: 116,
nama_up3: 'UP3 SIGLI',
id_ulp: 11662,
nama_ulp: 'ULP MEUREUDU',
total_durasi_response_time_bulan_ini: 762987,
count_durasi_response_time_bulan_ini: 735,
avg_durasi_response_time_bulan_ini: 1038.0775510204082,
total_durasi_recovery_time_bulan_ini: 1550302,
count_durasi_recovery_time_bulan_ini: 735,
avg_durasi_recovery_time_bulan_ini: 2109.2544217687073,
total_durasi_response_time_tahun_ini: 8107328,
count_durasi_response_time_tahun_ini: 8068,
avg_durasi_response_time_tahun_ini: 1004.874566187407,
total_durasi_recovery_time_tahun_ini: 15846250,
count_durasi_recovery_time_tahun_ini: 8064,
avg_durasi_recovery_time_tahun_ini: 1004.874566187407
},
{
id: 6,
nama_regional: 'REGIONAL JMB',
id_uid: 287,
nama_uid: 'DISTRIBUSI BALI',
id_up3: 329,
nama_up3: 'UP3 BALI UTARA',
id_ulp: 55340,
nama_ulp: 'ULP GILIMANUK',
total_durasi_response_time_bulan_ini: 809159,
count_durasi_response_time_bulan_ini: 656,
avg_durasi_response_time_bulan_ini: 1233.4740853658536,
total_durasi_recovery_time_bulan_ini: 1309097,
count_durasi_recovery_time_bulan_ini: 656,
avg_durasi_recovery_time_bulan_ini: 1995.5746951219512,
total_durasi_response_time_tahun_ini: 12308918,
count_durasi_response_time_tahun_ini: 8660,
avg_durasi_response_time_tahun_ini: 1421.35311778291,
total_durasi_recovery_time_tahun_ini: 19393316,
count_durasi_recovery_time_tahun_ini: 8626,
avg_durasi_recovery_time_tahun_ini: 1421.35311778291
},
{
id: 7,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13300,
nama_up3: 'UP3 SOLOK',
id_ulp: 13334,
nama_ulp: 'ULP SILUNGKANG',
total_durasi_response_time_bulan_ini: 138385,
count_durasi_response_time_bulan_ini: 187,
avg_durasi_response_time_bulan_ini: 740.0267379679144,
total_durasi_recovery_time_bulan_ini: 292325,
count_durasi_recovery_time_bulan_ini: 187,
avg_durasi_recovery_time_bulan_ini: 1563.235294117647,
total_durasi_response_time_tahun_ini: 1356526,
count_durasi_response_time_tahun_ini: 1575,
avg_durasi_response_time_tahun_ini: 861.2863492063492,
total_durasi_recovery_time_tahun_ini: 2834067,
count_durasi_recovery_time_tahun_ini: 1553,
avg_durasi_recovery_time_tahun_ini: 861.2863492063492
},
{
id: 8,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 221,
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
id_up3: 2220,
nama_up3: 'UP3 BARABAI',
id_ulp: 22230,
nama_ulp: 'ULP AMUNTAI',
total_durasi_response_time_bulan_ini: 208716,
count_durasi_response_time_bulan_ini: 329,
avg_durasi_response_time_bulan_ini: 634.3951367781156,
total_durasi_recovery_time_bulan_ini: 382846,
count_durasi_recovery_time_bulan_ini: 329,
avg_durasi_recovery_time_bulan_ini: 1163.6656534954407,
total_durasi_response_time_tahun_ini: 2571552,
count_durasi_response_time_tahun_ini: 3294,
avg_durasi_response_time_tahun_ini: 780.6775956284152,
total_durasi_recovery_time_tahun_ini: 4579466,
count_durasi_recovery_time_tahun_ini: 3269,
avg_durasi_recovery_time_tahun_ini: 780.6775956284152
},
{
id: 9,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31700,
nama_up3: 'UP3 KOTAMOBAGU',
id_ulp: 31730,
nama_ulp: 'ULP MODAYAG',
total_durasi_response_time_bulan_ini: 172545,
count_durasi_response_time_bulan_ini: 106,
avg_durasi_response_time_bulan_ini: 1627.7830188679245,
total_durasi_recovery_time_bulan_ini: 241479,
count_durasi_recovery_time_bulan_ini: 106,
avg_durasi_recovery_time_bulan_ini: 2278.103773584906,
total_durasi_response_time_tahun_ini: 1863546,
count_durasi_response_time_tahun_ini: 1801,
avg_durasi_response_time_tahun_ini: 1034.728484175458,
total_durasi_recovery_time_tahun_ini: 2899034,
count_durasi_recovery_time_tahun_ini: 1759,
avg_durasi_recovery_time_tahun_ini: 1034.728484175458
},
{
id: 10,
nama_regional: 'REGIONAL JMB',
id_uid: 427,
nama_uid: 'DISTRIBUSI JAWA BARAT',
id_up3: 546,
nama_up3: 'UP3 TASIKMALAYA',
id_ulp: 53231,
nama_ulp: 'ULP CIAMIS',
total_durasi_response_time_bulan_ini: 1077336,
count_durasi_response_time_bulan_ini: 1604,
avg_durasi_response_time_bulan_ini: 671.6558603491272,
total_durasi_recovery_time_bulan_ini: 1901265,
count_durasi_recovery_time_bulan_ini: 1604,
avg_durasi_recovery_time_bulan_ini: 1185.327306733167,
total_durasi_response_time_tahun_ini: 12491127,
count_durasi_response_time_tahun_ini: 20694,
avg_durasi_response_time_tahun_ini: 603.6110466801972,
total_durasi_recovery_time_tahun_ini: 19887846,
count_durasi_recovery_time_tahun_ini: 20343,
avg_durasi_recovery_time_tahun_ini: 603.6110466801972
},
{
id: 11,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 157,
nama_up3: 'UP3 SURABAYA UTARA',
id_ulp: 51101,
nama_ulp: 'ULP INDRAPURA',
total_durasi_response_time_bulan_ini: 468551,
count_durasi_response_time_bulan_ini: 438,
avg_durasi_response_time_bulan_ini: 1069.7511415525114,
total_durasi_recovery_time_bulan_ini: 857038,
count_durasi_recovery_time_bulan_ini: 438,
avg_durasi_recovery_time_bulan_ini: 1956.7077625570776,
total_durasi_response_time_tahun_ini: 6115468,
count_durasi_response_time_tahun_ini: 5889,
avg_durasi_response_time_tahun_ini: 1038.4561046018,
total_durasi_recovery_time_tahun_ini: 10632184,
count_durasi_recovery_time_tahun_ini: 5658,
avg_durasi_recovery_time_tahun_ini: 1038.4561046018
},
{
id: 12,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 41,
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
id_up3: 414,
nama_up3: 'UP3 MASOHI',
id_ulp: 41430,
nama_ulp: 'ULP MASOHI',
total_durasi_response_time_bulan_ini: 113695,
count_durasi_response_time_bulan_ini: 145,
avg_durasi_response_time_bulan_ini: 784.1034482758621,
total_durasi_recovery_time_bulan_ini: 211422,
count_durasi_recovery_time_bulan_ini: 145,
avg_durasi_recovery_time_bulan_ini: 1458.0827586206897,
total_durasi_response_time_tahun_ini: 2363191,
count_durasi_response_time_tahun_ini: 2822,
avg_durasi_response_time_tahun_ini: 837.4170800850461,
total_durasi_recovery_time_tahun_ini: 4201912,
count_durasi_recovery_time_tahun_ini: 2818,
avg_durasi_recovery_time_tahun_ini: 837.4170800850461
},
{
id: 13,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13100,
nama_up3: 'UP3 PADANG',
id_ulp: 13105,
nama_ulp: 'ULP LUBUK ALUNG',
total_durasi_response_time_bulan_ini: 504207,
count_durasi_response_time_bulan_ini: 516,
avg_durasi_response_time_bulan_ini: 977.1453488372093,
total_durasi_recovery_time_bulan_ini: 974512,
count_durasi_recovery_time_bulan_ini: 516,
avg_durasi_recovery_time_bulan_ini: 1888.5891472868218,
total_durasi_response_time_tahun_ini: 5776799,
count_durasi_response_time_tahun_ini: 5202,
avg_durasi_response_time_tahun_ini: 1110.4957708573625,
total_durasi_recovery_time_tahun_ini: 10668074,
count_durasi_recovery_time_tahun_ini: 5035,
avg_durasi_recovery_time_tahun_ini: 1110.4957708573625
},
{
id: 14,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 153,
nama_up3: 'UP3 SIDOARJO',
id_ulp: 51182,
nama_ulp: 'ULP PORONG',
total_durasi_response_time_bulan_ini: 2711446,
count_durasi_response_time_bulan_ini: 2407,
avg_durasi_response_time_bulan_ini: 1126.483589530536,
total_durasi_recovery_time_bulan_ini: 4361855,
count_durasi_recovery_time_bulan_ini: 2407,
avg_durasi_recovery_time_bulan_ini: 1812.1541337764852,
total_durasi_response_time_tahun_ini: 27345376,
count_durasi_response_time_tahun_ini: 21982,
avg_durasi_response_time_tahun_ini: 1243.9894459102902,
total_durasi_recovery_time_tahun_ini: 43993555,
count_durasi_recovery_time_tahun_ini: 21919,
avg_durasi_recovery_time_tahun_ini: 1243.9894459102902
}
]
}) })
</script> </script>

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping :context-menu-enabled="true" expand-mode="rowClick" /> <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -55,11 +55,35 @@
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_uid" :min-width="170"
caption="UID" data-type="text"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
:group-index="0" :group-index="0"
name="namaRegional"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UIW"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@ -199,6 +223,7 @@
show-in-column="mom_bulan_kemarin" show-in-column="mom_bulan_kemarin"
column="mom_bulan_kemarin" column="mom_bulan_kemarin"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/> />
<DxGroupItem <DxGroupItem
:show-in-group-footer="false" :show-in-group-footer="false"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -46,16 +46,38 @@
/> />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<!-- <DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_ulp" data-field="nama_regional"
caption="Nama Unit" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaUlp" name="namaRegional"
/> --> />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UIW"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/>
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
@ -179,6 +201,62 @@
css-class="text-white !text-right" css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)" :customize-text="(e: any) => formatPercentage(e.value)"
/> />
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="mom_bulan_kemarin"
column="mom_bulan_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="mom_bulan_ini"
column="mom_bulan_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_mom"
column="persen_mom"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_kemarin"
column="yoy_tahun_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_ini"
column="yoy_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_yoy"
column="persen_yoy"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
@ -211,6 +289,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping, DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -46,16 +46,38 @@
/> />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<!-- <DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_ulp" data-field="nama_regional"
caption="Nama Unit" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaUlp" name="namaRegional"
/> --> />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UIW"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/>
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
@ -179,6 +201,62 @@
css-class="text-white !text-right" css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)" :customize-text="(e: any) => formatPercentage(e.value)"
/> />
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="mom_bulan_kemarin"
column="mom_bulan_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="mom_bulan_ini"
column="mom_bulan_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_mom"
column="persen_mom"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_kemarin"
column="yoy_tahun_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_ini"
column="yoy_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_yoy"
column="persen_yoy"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
@ -211,6 +289,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping, DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,

View File

@ -26,7 +26,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -57,27 +57,35 @@
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170"
data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_uid" :min-width="170"
data-type="text"
data-field="id_uid"
caption="UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_up3" :min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" :group-index="1"
:group-index="2" name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
@ -106,7 +114,7 @@
alignment="center" alignment="center"
caption="b" caption="b"
data-type="number" data-type="number"
data-field="jumlah_keluhan_rpt_bulan" data-field="count_durasi_response_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -117,7 +125,7 @@
alignment="center" alignment="center"
caption="c=a/b" caption="c=a/b"
data-type="number" data-type="number"
data-field="rpt_keluhan_bulan" data-field="avg_durasi_response_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -128,7 +136,7 @@
alignment="center" alignment="center"
caption="d" caption="d"
data-type="number" data-type="number"
data-field="total_rct_bulan" data-field="total_durasi_recovery_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -139,7 +147,7 @@
alignment="center" alignment="center"
caption="e" caption="e"
data-type="number" data-type="number"
data-field="jumlah_keluhan_rct_bulan" data-field="count_durasi_recovery_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -150,7 +158,7 @@
alignment="center" alignment="center"
caption="f=d/e" caption="f=d/e"
data-type="number" data-type="number"
data-field="rct_keluhan_bulan" data-field="avg_durasi_recovery_time_bulan_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -178,7 +186,7 @@
alignment="center" alignment="center"
caption="b" caption="b"
data-type="number" data-type="number"
data-field="jumlah_keluhan_rpt_sampai_bulan" data-field="count_durasi_response_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -189,7 +197,7 @@
alignment="center" alignment="center"
caption="c=a/b" caption="c=a/b"
data-type="number" data-type="number"
data-field="rpt_keluhan_sampai_bulan" data-field="avg_durasi_response_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -211,7 +219,7 @@
alignment="center" alignment="center"
caption="e" caption="e"
data-type="number" data-type="number"
data-field="jumlah_keluhan_rct_sampai_bulan" data-field="count_durasi_recovery_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -222,7 +230,7 @@
alignment="center" alignment="center"
caption="f=d/e" caption="f=d/e"
data-type="number" data-type="number"
data-field="rch_keluhan_sampai_bulan" data-field="avg_durasi_recovery_time_tahun_ini"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
@ -236,6 +244,7 @@
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="total_durasi_response_time_bulan_ini" show-in-column="total_durasi_response_time_bulan_ini"
column="total_durasi_response_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -243,7 +252,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_keluhan_rpt_bulan" show-in-column="count_durasi_response_time_bulan_ini"
column="count_durasi_response_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -251,7 +261,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rpt_keluhan_bulan" show-in-column="avg_durasi_response_time_bulan_ini"
column="avg_durasi_response_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -259,7 +270,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="total_rct_bulan" show-in-column="total_durasi_recovery_time_bulan_ini"
column="total_durasi_recovery_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -267,7 +279,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_keluhan_rct_bulan" show-in-column="count_durasi_recovery_time_bulan_ini"
column="count_durasi_recovery_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -275,7 +288,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rct_keluhan_bulan" show-in-column="avg_durasi_recovery_time_bulan_ini"
column="avg_durasi_recovery_time_bulan_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -284,6 +298,7 @@
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="total_durasi_response_time_tahun_ini" show-in-column="total_durasi_response_time_tahun_ini"
column="total_durasi_response_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -291,7 +306,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_keluhan_rpt_sampai_bulan" show-in-column="count_durasi_response_time_tahun_ini"
column="count_durasi_response_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -299,7 +315,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rpt_keluhan_sampai_bulan" show-in-column="avg_durasi_response_time_tahun_ini"
column="avg_durasi_response_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -308,6 +325,7 @@
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="total_durasi_recovery_time_tahun_ini" show-in-column="total_durasi_recovery_time_tahun_ini"
column="total_durasi_recovery_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -315,7 +333,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="jumlah_keluhan_rct_sampai_bulan" show-in-column="count_durasi_recovery_time_tahun_ini"
column="count_durasi_recovery_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
@ -323,7 +342,8 @@
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
summary-type="sum" summary-type="sum"
show-in-column="rch_keluhan_sampai_bulan" show-in-column="avg_durasi_recovery_time_tahun_ini"
column="avg_durasi_recovery_time_tahun_ini"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -60,19 +60,33 @@
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="nama_regional"
caption="Nama UID" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_uid"
caption="Nama UP3" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -55,11 +55,35 @@
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_uid" :min-width="170"
data-type="text"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
:group-index="0"
name="namaRegional"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" :group-index="1"
:group-index="0" name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
<DxColumn <DxColumn
@ -119,6 +143,37 @@
css-class="text-white !text-right" css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)" :customize-text="(e: any) => formatPercentage(e.value)"
/> />
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="jumlah_keluhan"
column="jumlah_keluhan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="jumlah_informasi"
column="jumlah_informasi"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="total"
column="total"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
@ -157,6 +212,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping, DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -55,11 +55,35 @@
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
data-field="nama_uid" :min-width="170"
data-type="text"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
:group-index="0"
name="namaRegional"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_uid"
caption="UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" :group-index="1"
:group-index="0" name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="id_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@ -181,6 +205,7 @@
show-in-column="mom_bulan_kemarin" show-in-column="mom_bulan_kemarin"
column="mom_bulan_kemarin" column="mom_bulan_kemarin"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/> />
<DxGroupItem <DxGroupItem
:show-in-group-footer="false" :show-in-group-footer="false"
@ -259,6 +284,7 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxGrouping, DxGrouping,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -51,27 +51,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -51,27 +51,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -56,27 +56,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -56,27 +56,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -51,27 +51,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -26,7 +26,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -52,27 +52,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -56,27 +56,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -56,27 +56,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -51,27 +51,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -26,7 +26,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="true"
> >
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -52,27 +52,32 @@
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_regional" data-field="nama_regional"
caption="Nama Regional" caption="Regional"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" :group-index="0"
name="namaRegional"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_uid" data-field="id_uid"
caption="Nama UID" caption="UID"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="1" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_uid"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
data-type="text" data-type="text"
data-field="nama_up3" data-field="id_up3"
caption="Nama UP3" caption="UP3"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="2" :group-index="1"
name="namaUID"
:calculate-group-value="(rowData: any) => rowData.nama_up3"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"

View File

@ -19,19 +19,25 @@ const props = defineProps({
selected: { selected: {
type: Object as () => DataItem, type: Object as () => DataItem,
default: () => ({ id: 0, name: '' }) default: () => ({ id: 0, name: '' })
},
indexSelected: {
type: Number,
default: 0
} }
}) })
const emit = defineEmits(['update:selected']) const emit = defineEmits(['update:selected'])
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]) const data = computed(() =>
const selected = ref(data.value[0].id) props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
watch(
() => props.selected,
(value: any) => {
selected.value = value.id
}
) )
const selected = ref(data.value[props.indexSelected].id)
// watch(
// () => props.selected,
// (value: any) => {
// selected.value = value.id
// }
// )
</script> </script>
<template> <template>

View File

@ -2243,6 +2243,13 @@ export const queries = {
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp nama_ulp
mom_bulan_ini mom_bulan_ini
mom_bulan_kemarin mom_bulan_kemarin
@ -2270,6 +2277,13 @@ export const queries = {
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp nama_ulp
mom_bulan_ini mom_bulan_ini
mom_bulan_kemarin mom_bulan_kemarin
@ -2811,6 +2825,70 @@ export const queries = {
} }
}, },
cico: { cico: {
laporanCheckInCheckOutDetail: gql`
query detailCheckInCheckOut(
$dateFrom: Date!
$dateTo: Date!
$idPosko: Int!
$idUid: Int!
$idUp3: Int!
$personilYantek: String!
) {
detailCheckInCheckOut(
dateFrom: $dateFrom
dateTo: $dateTo
idPosko: $idPosko
idUid: $idUid
idUp3: $idUp3
personilYantek: $personilYantek
) {
id
id_uid
nama_uid
id_up3
nama_up3
id_posko
nama_posko
media
pembuat_laporan
dispatch_by
durasi_waktu_dispatch
user_regu
nama_regu
personil_yantek
shift
check_in_petugas
no_laporan
durasi_wo
waktu_lapor
waktu_dispatch
waktu_perjalanan
waktu_nyala_sementara
waktu_nyala
waktu_selesai
waktu_response
durasi_waktu_response
check_out_petugas
durasi_menit_response
durasi_menit_recovery
rating
jml_pelanggan_padam
fasilitas
sub_fasilitas
peralatan
dampak_kerusakan
kelompok_penyebab
cuaca
keterangan_pelapor
keterangan
penyebab
tindakan
status_akhir
referensi_marking
blth
}
}
`,
laporanCheckInCheckOut: gql` laporanCheckInCheckOut: gql`
query laporanCheckInCheckOut( query laporanCheckInCheckOut(
$dateFrom: Date! $dateFrom: Date!
@ -2826,6 +2904,9 @@ export const queries = {
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
id_uid
id_up3
id_posko
user_regu user_regu
personil_yantek personil_yantek
jumlah_wo_gangguan_individual jumlah_wo_gangguan_individual
@ -2922,12 +3003,16 @@ export const queries = {
gangguan: { gangguan: {
unitBerulang: gql` unitBerulang: gql`
query anomaliPenangananPengaduanGangguanUnitBerulang( query anomaliPenangananPengaduanGangguanUnitBerulang(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String! $namaRegional: String!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
anomaliPenangananPengaduanGangguanUnitBerulang( anomaliPenangananPengaduanGangguanUnitBerulang(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional namaRegional: $namaRegional
idUlp: $idUlp idUlp: $idUlp
idUid: $idUid idUid: $idUid
@ -2961,12 +3046,16 @@ export const queries = {
`, `,
unitRatingNegatif: gql` unitRatingNegatif: gql`
query anomaliPenangananPengaduanGangguanUnitRatingNegatif( query anomaliPenangananPengaduanGangguanUnitRatingNegatif(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String! $namaRegional: String!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
anomaliPenangananPengaduanGangguanUnitRatingNegatif( anomaliPenangananPengaduanGangguanUnitRatingNegatif(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional namaRegional: $namaRegional
idUlp: $idUlp idUlp: $idUlp
idUid: $idUid idUid: $idUid
@ -3000,12 +3089,16 @@ export const queries = {
`, `,
unitSkipStep: gql` unitSkipStep: gql`
query anomaliPenangananPengaduanGangguanUnitSkipStep( query anomaliPenangananPengaduanGangguanUnitSkipStep(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String! $namaRegional: String!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
anomaliPenangananPengaduanGangguanUnitSkipStep( anomaliPenangananPengaduanGangguanUnitSkipStep(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional namaRegional: $namaRegional
idUlp: $idUlp idUlp: $idUlp
idUid: $idUid idUid: $idUid
@ -3039,12 +3132,16 @@ export const queries = {
`, `,
petugasBerulang: gql` petugasBerulang: gql`
query anomaliPenangananPengaduanGangguanPetugasBerulang( query anomaliPenangananPengaduanGangguanPetugasBerulang(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String! $namaRegional: String!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
anomaliPenangananPengaduanGangguanPetugasBerulang( anomaliPenangananPengaduanGangguanPetugasBerulang(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional namaRegional: $namaRegional
idUlp: $idUlp idUlp: $idUlp
idUid: $idUid idUid: $idUid
@ -3074,12 +3171,16 @@ export const queries = {
`, `,
petugasRatingNegatif: gql` petugasRatingNegatif: gql`
query anomaliPenangananPengaduanGangguanPetugasRatingNegatif( query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String! $namaRegional: String!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
anomaliPenangananPengaduanGangguanPetugasRatingNegatif( anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional namaRegional: $namaRegional
idUlp: $idUlp idUlp: $idUlp
idUid: $idUid idUid: $idUid
@ -3109,12 +3210,16 @@ export const queries = {
`, `,
petugasSkipStep: gql` petugasSkipStep: gql`
query anomaliPenangananPengaduanGangguanPetugasSkipStep( query anomaliPenangananPengaduanGangguanPetugasSkipStep(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String! $namaRegional: String!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
anomaliPenangananPengaduanGangguanPetugasSkipStep( anomaliPenangananPengaduanGangguanPetugasSkipStep(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional namaRegional: $namaRegional
idUlp: $idUlp idUlp: $idUlp
idUid: $idUid idUid: $idUid
@ -3142,6 +3247,119 @@ export const queries = {
} }
} }
` `
},
keluhan: {
unitBerulang: gql`
query anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
wo_cc123
wo_pln_mobile
wo_loket
wo_lainnya
wo_total
anomali_pln_mobile
anomali_cc123
total_anomali
persen_anomali_pln_mobile
persen_anomali_cc123
}
}
`,
unitSkipStep: gql`
query anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
wo_cc123
wo_pln_mobile
wo_loket
wo_lainnya
wo_total
anomali_pln_mobile
anomali_cc123
total_anomali
persen_anomali_pln_mobile
persen_anomali_cc123
}
}
`,
unitRatingNegatif: gql`
query anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
$dateFrom: Date!
$dateTo: Date!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
dateFrom: $dateFrom
dateTo: $dateTo
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
wo_cc123
wo_pln_mobile
wo_loket
wo_lainnya
wo_total
anomali_pln_mobile
anomali_cc123
total_anomali
persen_anomali_pln_mobile
persen_anomali_cc123
}
}
`
} }
}, },
cttKwhPeriksa: { cttKwhPeriksa: {

View File

@ -60,7 +60,11 @@ const getMonthNumber = (monthName: string) => {
'November', 'November',
'Desember' 'Desember'
] ]
return months.indexOf(monthName) + 1 if (months.filter((month) => month.toLowerCase() === monthName.toLowerCase()).length > 0) {
return months.indexOf(monthName) + 1
} else {
return 0
}
} }
const reformatDate = (inputDate: string, originalFormat: string, targetFormat: string): string => { const reformatDate = (inputDate: string, originalFormat: string, targetFormat: string): string => {