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

Refactor code to improve performance and readability

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-14 06:09:53 +07:00
parent 7189b2bfbe
commit f4be1d584d
4 changed files with 2049 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

484
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
View File

@ -1,44 +1,200 @@
<template>
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
<Filters
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" :group-index="0" name="namaUlp" />
<DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
<!-- <DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
:group-index="0"
name="namaUlp"
/> -->
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah Dispatching Time Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_kemarin"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_kemarin"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
<p class="!text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid>
</div>
</template>
@ -46,7 +202,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -56,7 +212,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -66,6 +224,7 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())
@ -105,14 +264,17 @@ const onExporting = (e: any) => {
}
}
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.dispatchingTimeGangguan, {
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.dispatchingTimeGangguan,
{
// regional: 0,
idUp3: 0,
idUid: 0,
idUlp: 0,
bulan: currentMonth.value,
tahun: currentYear.value
})
}
)
const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params
@ -145,4 +307,266 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
id: 0,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 230,
nama_uid: 'WILAYAH KALIMANTAN TIMUR',
id_up3: 231,
nama_up3: 'UP3 SAMARINDA',
id_ulp: 23156,
nama_ulp: 'ULP SAMARINDA ULU',
mom_bulan_ini: -213179,
mom_bulan_kemarin: 673,
persen_mom: 31775.994473750405,
yoy_tahun_ini: 2069,
yoy_tahun_kemarin: 1841,
persen_yoy: -12.38457360130364
},
{
id: 1,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 183,
nama_up3: 'UP3 TANJUNGPINANG',
id_ulp: 18302,
nama_ulp: 'ULP KIJANG',
mom_bulan_ini: -114,
mom_bulan_kemarin: 373,
persen_mom: 130.77740603697222,
yoy_tahun_ini: 1324,
yoy_tahun_kemarin: 1931,
persen_yoy: 31.434489901605385
},
{
id: 2,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 182,
nama_up3: 'UP3 DUMAI',
id_ulp: 18240,
nama_ulp: 'ULP SELATPANJANG',
mom_bulan_ini: -869,
mom_bulan_kemarin: 493,
persen_mom: 276.27086351782094,
yoy_tahun_ini: 1454,
yoy_tahun_kemarin: 702,
persen_yoy: -107.12250712250713
},
{
id: 3,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 120,
nama_uid: 'WILAYAH SUMATERA UTARA',
id_up3: 12400,
nama_up3: 'UP3 PADANG SIDIMPUAN',
id_ulp: 12415,
nama_ulp: 'ULP NATAL',
mom_bulan_ini: -16,
mom_bulan_kemarin: 184,
persen_mom: 108.95582431788799,
yoy_tahun_ini: 426,
yoy_tahun_kemarin: 536,
persen_yoy: 20.522388059701495
},
{
id: 4,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 230,
nama_uid: 'WILAYAH KALIMANTAN TIMUR',
id_up3: 231,
nama_up3: 'UP3 SAMARINDA',
id_ulp: 23102,
nama_ulp: 'ULP SAMARINDA SEBERANG',
mom_bulan_ini: -295198,
mom_bulan_kemarin: 1025,
persen_mom: 28899.899321562316,
yoy_tahun_ini: 3193,
yoy_tahun_kemarin: 2649,
persen_yoy: -20.53605134012835
},
{
id: 5,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 32,
nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
id_up3: 32200,
nama_up3: 'UP3 WATAMPONE',
id_ulp: 32240,
nama_ulp: 'ULP SENGKANG',
mom_bulan_ini: -107,
mom_bulan_kemarin: 606,
persen_mom: 117.772648051322,
yoy_tahun_ini: 2082,
yoy_tahun_kemarin: 1190,
persen_yoy: -74.95798319327731
},
{
id: 6,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 181,
nama_up3: 'UP3 PEKANBARU',
id_ulp: 18150,
nama_ulp: 'ULP PERAWANG',
mom_bulan_ini: -407,
mom_bulan_kemarin: 916,
persen_mom: 144.4547767778033,
yoy_tahun_ini: 2897,
yoy_tahun_kemarin: 2706,
persen_yoy: -7.058388765705839
},
{
id: 7,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 183,
nama_up3: 'UP3 TANJUNGPINANG',
id_ulp: 18306,
nama_ulp: 'ULP TANJUNG BATU',
mom_bulan_ini: -539,
mom_bulan_kemarin: 69,
persen_mom: 882.5544353427151,
yoy_tahun_ini: 252,
yoy_tahun_kemarin: 322,
persen_yoy: 21.73913043478261
},
{
id: 8,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 184,
nama_up3: 'UP3 RENGAT',
id_ulp: 18430,
nama_ulp: 'ULP KUALA ENOK',
mom_bulan_ini: -169,
mom_bulan_kemarin: 188,
persen_mom: 190.35948625202792,
yoy_tahun_ini: 591,
yoy_tahun_kemarin: 2752,
persen_yoy: 78.52470930232558
},
{
id: 9,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 181,
nama_up3: 'UP3 PEKANBARU',
id_ulp: 18170,
nama_ulp: 'ULP SIAK SRI INDRAPURA',
mom_bulan_ini: -11,
mom_bulan_kemarin: 391,
persen_mom: 102.89304140589162,
yoy_tahun_ini: 1163,
yoy_tahun_kemarin: 2109,
persen_yoy: 44.85538169748696
},
{
id: 10,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 182,
nama_up3: 'UP3 DUMAI',
id_ulp: 18260,
nama_ulp: 'ULP BAGAN BATU',
mom_bulan_ini: -600,
mom_bulan_kemarin: 964,
persen_mom: 162.33329138602699,
yoy_tahun_ini: 3581,
yoy_tahun_kemarin: 2965,
persen_yoy: -20.775716694772346
},
{
id: 11,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 230,
nama_uid: 'WILAYAH KALIMANTAN TIMUR',
id_up3: 231,
nama_up3: 'UP3 SAMARINDA',
id_ulp: 23112,
nama_ulp: 'ULP TENGGARONG',
mom_bulan_ini: -4524,
mom_bulan_kemarin: 981,
persen_mom: 561.2414600051343,
yoy_tahun_ini: 3234,
yoy_tahun_kemarin: 3514,
persen_yoy: 7.968127490039841
},
{
id: 12,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 183,
nama_up3: 'UP3 TANJUNGPINANG',
id_ulp: 18303,
nama_ulp: 'ULP TANJUNG UBAN',
mom_bulan_ini: -186,
mom_bulan_kemarin: 191,
persen_mom: 197.5691701222732,
yoy_tahun_ini: 615,
yoy_tahun_kemarin: 1058,
persen_yoy: 41.87145557655955
},
{
id: 13,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 184,
nama_up3: 'UP3 RENGAT',
id_ulp: 18410,
nama_ulp: 'ULP RENGAT KOTA',
mom_bulan_ini: -476,
mom_bulan_kemarin: 955,
persen_mom: 149.94027462127963,
yoy_tahun_ini: 2931,
yoy_tahun_kemarin: 4545,
persen_yoy: 35.51155115511551
},
{
id: 14,
nama_regional: 'REGIONAL JMB',
id_uid: 101,
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
id_up3: 52200,
nama_up3: 'UP3 PURWOKERTO',
id_ulp: 52201,
nama_ulp: 'ULP PURWOKERTO KOTA',
mom_bulan_ini: -63,
mom_bulan_kemarin: 3642,
persen_mom: 101.7401502360751,
yoy_tahun_ini: 11511,
yoy_tahun_kemarin: 14451,
persen_yoy: 20.344612829561967
},
{
id: 15,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 180,
nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
id_up3: 181,
nama_up3: 'UP3 PEKANBARU',
id_ulp: 18111,
nama_ulp: 'ULP PEKANBARU KOTA BARAT',
mom_bulan_ini: -1097,
mom_bulan_kemarin: 1964,
persen_mom: 155.88116671737166,
yoy_tahun_ini: 6506,
yoy_tahun_kemarin: 5316,
persen_yoy: -22.385252069224983
}
]
}
})
</script>

684
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
View File

@ -1,78 +1,341 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" :caption="`${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column">
<DxColumn
:width="200"
alignment="center"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn
alignment="center"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
:group-index="1"
/>
<DxColumn
alignment="center"
data-field="nama_up3"
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
:group-index="2"
/>
<DxColumn
alignment="center"
caption="Jumlah dan Durasi RPT & RCT Gangguan"
css-class="custom-table-column"
>
<DxColumn
alignment="center"
:caption="`${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="a" data-type="number"
data-field="total_durasi_response_time_bulan_ini" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="a"
data-type="number"
data-field="total_durasi_response_time_bulan_ini"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="b" data-type="number"
data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="e" data-type="number"
data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rct_gangguan_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear} `"
css-class="custom-table-column">
<DxColumn
alignment="center"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear} `"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="a" data-type="number"
data-field="total_durasi_response_time_tahun_ini" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="a"
data-type="number"
data-field="total_durasi_response_time_tahun_ini"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="b" data-type="number"
data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_sampai_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_sampai_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="d" data-type="number"
data-field="total_durasi_recovery_time_tahun_ini" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="d"
data-type="number"
data-field="total_durasi_recovery_time_tahun_ini"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="e" data-type="number"
data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_sampai_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rch_gangguan_sampai_bulan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
</DxColumn>
<DxSummary>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="total_durasi_response_time_bulan_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="jumlah_gangguan_rpt_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="rpt_gangguan_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="total_rct_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="jumlah_gangguan_rct_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="rct_gangguan_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="total_durasi_response_time_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="jumlah_gangguan_rpt_sampai_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="rpt_gangguan_sampai_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="total_durasi_recovery_time_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="jumlah_gangguan_rct_sampai_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="rch_gangguan_sampai_bulan"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
<p class="!text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid>
</div>
</template>
@ -86,11 +349,13 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxGroupItem,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -100,6 +365,7 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())
@ -110,14 +376,17 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan, {
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
{
bulan: 10,
tahun: 2023,
// regional: '',
idUlp: 0,
idUid: 0,
idUp3: 0
})
}
)
const filterData = (params: any) => {
const {
// regional,
@ -194,8 +463,339 @@ const filters = ref<any>({
tahun: 2024
})
onMounted(() => {
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>

484
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
View File

@ -1,44 +1,200 @@
<template>
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
<Filters
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" :group-index="0" name="namaUlp" />
<DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
<!-- <DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
:group-index="0"
name="namaUlp"
/> -->
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah RCT Kali Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_kemarin"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_kemarin"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
<p class="!text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid>
</div>
</template>
@ -46,7 +202,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -56,7 +212,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -66,6 +224,7 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())
@ -76,14 +235,17 @@ const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.recoveryTimeGangguan, {
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.recoveryTimeGangguan,
{
// regional: 0,
idUp3: 0,
idUid: 0,
idUlp: 0,
bulan: currentMonth.value,
tahun: currentYear.value
})
}
)
const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params
@ -146,4 +308,266 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
id: 0,
nama_regional: null,
id_uid: 0,
nama_uid: '',
id_up3: 0,
nama_up3: '',
id_ulp: 0,
nama_ulp: '',
mom_bulan_ini: 12443791,
mom_bulan_kemarin: 9182428,
persen_mom: -35.517436129093525,
yoy_tahun_ini: 139773892,
yoy_tahun_kemarin: 168209007,
persen_yoy: 16.904632817908496
},
{
id: 1,
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',
mom_bulan_ini: 16186,
mom_bulan_kemarin: 112331,
persen_mom: 85.59079862192984,
yoy_tahun_ini: 354676,
yoy_tahun_kemarin: 624303,
persen_yoy: 43.18848379713056
},
{
id: 2,
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',
mom_bulan_ini: 384375,
mom_bulan_kemarin: 22976,
persen_mom: -1572.9413300835654,
yoy_tahun_ini: 1643180,
yoy_tahun_kemarin: 492691,
persen_yoy: -233.51126771140534
},
{
id: 3,
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',
mom_bulan_ini: 914842,
mom_bulan_kemarin: 585884,
persen_mom: -56.14729195540414,
yoy_tahun_ini: 8072389,
yoy_tahun_kemarin: 11055796,
persen_yoy: 26.985004064836215
},
{
id: 4,
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',
mom_bulan_ini: 43840,
mom_bulan_kemarin: 59012,
persen_mom: 25.710025079644815,
yoy_tahun_ini: 1098120,
yoy_tahun_kemarin: 2481724,
persen_yoy: 55.751727428191046
},
{
id: 5,
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',
mom_bulan_ini: 796862,
mom_bulan_kemarin: 673478,
persen_mom: -18.32042026614084,
yoy_tahun_ini: 6845897,
yoy_tahun_kemarin: 7566389,
persen_yoy: 9.522270134406254
},
{
id: 6,
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',
mom_bulan_ini: 787315,
mom_bulan_kemarin: 264692,
persen_mom: -197.44571048614995,
yoy_tahun_ini: 7747710,
yoy_tahun_kemarin: 7916066,
persen_yoy: 2.12676347064312
},
{
id: 7,
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',
mom_bulan_ini: 505036,
mom_bulan_kemarin: 413603,
persen_mom: -22.10646441152506,
yoy_tahun_ini: 7155021,
yoy_tahun_kemarin: 5869321,
persen_yoy: -21.905429946666743
},
{
id: 8,
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',
mom_bulan_ini: 160505,
mom_bulan_kemarin: 379378,
persen_mom: 57.69259155776033,
yoy_tahun_ini: 1509396,
yoy_tahun_kemarin: 3844624,
persen_yoy: 60.740087977393884
},
{
id: 9,
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',
mom_bulan_ini: 181058,
mom_bulan_kemarin: 395103,
persen_mom: 54.17448108467918,
yoy_tahun_ini: 2039104,
yoy_tahun_kemarin: 5170462,
persen_yoy: 60.56244103524985
},
{
id: 10,
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',
mom_bulan_ini: 83184,
mom_bulan_kemarin: 144261,
persen_mom: 42.337845987481025,
yoy_tahun_ini: 1111887,
yoy_tahun_kemarin: 2440181,
persen_yoy: 54.4342407386993
},
{
id: 11,
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',
mom_bulan_ini: 843557,
mom_bulan_kemarin: 1369703,
persen_mom: 38.41314503947206,
yoy_tahun_ini: 8579030,
yoy_tahun_kemarin: 16227325,
persen_yoy: 47.13219831364689
},
{
id: 12,
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',
mom_bulan_ini: 433495,
mom_bulan_kemarin: 404500,
persen_mom: -7.168108776266996,
yoy_tahun_ini: 4905051,
yoy_tahun_kemarin: 4976204,
persen_yoy: 1.4298650135725948
},
{
id: 13,
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',
mom_bulan_ini: 97727,
mom_bulan_kemarin: 75563,
persen_mom: -29.331815835792654,
yoy_tahun_ini: 1842074,
yoy_tahun_kemarin: 686794,
persen_yoy: -168.21346721142
},
{
id: 14,
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',
mom_bulan_ini: 483861,
mom_bulan_kemarin: 1000406,
persen_mom: 51.63353678406567,
yoy_tahun_ini: 5168384,
yoy_tahun_kemarin: 8611936,
persen_yoy: 39.98580574681465
},
{
id: 15,
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',
mom_bulan_ini: 1657675,
mom_bulan_kemarin: 973693,
persen_mom: -70.246165885962,
yoy_tahun_ini: 16774614,
yoy_tahun_kemarin: 12737494,
persen_yoy: -31.694774498029204
}
]
}
})
</script>

500
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
View File

@ -1,44 +1,200 @@
<template>
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
<Filters
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" :group-index="0" name="namaUlp" />
<DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
<!-- <DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
:group-index="0"
name="namaUlp"
/> -->
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah RPT Kali Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_kemarin"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_kemarin"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
<p class="!text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid>
</div>
</template>
@ -46,7 +202,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -56,7 +212,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -66,6 +224,7 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())
@ -76,14 +235,17 @@ const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.responseTimeGangguan, {
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.responseTimeGangguan,
{
// regional: 0,
idUp3: 0,
idUid: 0,
idUlp: 0,
bulan: currentMonth.value,
tahun: currentYear.value
})
}
)
const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params
@ -146,4 +308,282 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
id: 0,
nama_regional: null,
id_uid: 0,
nama_uid: '',
id_up3: 0,
nama_up3: '',
id_ulp: 0,
nama_ulp: '',
mom_bulan_ini: 12443791,
mom_bulan_kemarin: 9182428,
persen_mom: -35.517436129093525,
yoy_tahun_ini: 139773892,
yoy_tahun_kemarin: 168209007,
persen_yoy: 16.904632817908496
},
{
id: 1,
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',
mom_bulan_ini: 16186,
mom_bulan_kemarin: 112331,
persen_mom: 85.59079862192984,
yoy_tahun_ini: 354676,
yoy_tahun_kemarin: 624303,
persen_yoy: 43.18848379713056
},
{
id: 2,
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',
mom_bulan_ini: 384375,
mom_bulan_kemarin: 22976,
persen_mom: -1572.9413300835654,
yoy_tahun_ini: 1643180,
yoy_tahun_kemarin: 492691,
persen_yoy: -233.51126771140534
},
{
id: 3,
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',
mom_bulan_ini: 914842,
mom_bulan_kemarin: 585884,
persen_mom: -56.14729195540414,
yoy_tahun_ini: 8072389,
yoy_tahun_kemarin: 11055796,
persen_yoy: 26.985004064836215
},
{
id: 4,
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',
mom_bulan_ini: 43840,
mom_bulan_kemarin: 59012,
persen_mom: 25.710025079644815,
yoy_tahun_ini: 1098120,
yoy_tahun_kemarin: 2481724,
persen_yoy: 55.751727428191046
},
{
id: 5,
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',
mom_bulan_ini: 796862,
mom_bulan_kemarin: 673478,
persen_mom: -18.32042026614084,
yoy_tahun_ini: 6845897,
yoy_tahun_kemarin: 7566389,
persen_yoy: 9.522270134406254
},
{
id: 6,
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',
mom_bulan_ini: 787315,
mom_bulan_kemarin: 264692,
persen_mom: -197.44571048614995,
yoy_tahun_ini: 7747710,
yoy_tahun_kemarin: 7916066,
persen_yoy: 2.12676347064312
},
{
id: 7,
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',
mom_bulan_ini: 505036,
mom_bulan_kemarin: 413603,
persen_mom: -22.10646441152506,
yoy_tahun_ini: 7155021,
yoy_tahun_kemarin: 5869321,
persen_yoy: -21.905429946666743
},
{
id: 8,
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',
mom_bulan_ini: 160505,
mom_bulan_kemarin: 379378,
persen_mom: 57.69259155776033,
yoy_tahun_ini: 1509396,
yoy_tahun_kemarin: 3844624,
persen_yoy: 60.740087977393884
},
{
id: 9,
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',
mom_bulan_ini: 181058,
mom_bulan_kemarin: 395103,
persen_mom: 54.17448108467918,
yoy_tahun_ini: 2039104,
yoy_tahun_kemarin: 5170462,
persen_yoy: 60.56244103524985
},
{
id: 10,
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',
mom_bulan_ini: 83184,
mom_bulan_kemarin: 144261,
persen_mom: 42.337845987481025,
yoy_tahun_ini: 1111887,
yoy_tahun_kemarin: 2440181,
persen_yoy: 54.4342407386993
},
{
id: 11,
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',
mom_bulan_ini: 843557,
mom_bulan_kemarin: 1369703,
persen_mom: 38.41314503947206,
yoy_tahun_ini: 8579030,
yoy_tahun_kemarin: 16227325,
persen_yoy: 47.13219831364689
},
{
id: 12,
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',
mom_bulan_ini: 433495,
mom_bulan_kemarin: 404500,
persen_mom: -7.168108776266996,
yoy_tahun_ini: 4905051,
yoy_tahun_kemarin: 4976204,
persen_yoy: 1.4298650135725948
},
{
id: 13,
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',
mom_bulan_ini: 97727,
mom_bulan_kemarin: 75563,
persen_mom: -29.331815835792654,
yoy_tahun_ini: 1842074,
yoy_tahun_kemarin: 686794,
persen_yoy: -168.21346721142
},
{
id: 14,
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',
mom_bulan_ini: 483861,
mom_bulan_kemarin: 1000406,
persen_mom: 51.63353678406567,
yoy_tahun_ini: 5168384,
yoy_tahun_kemarin: 8611936,
persen_yoy: 39.98580574681465
},
{
id: 15,
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',
mom_bulan_ini: 1657675,
mom_bulan_kemarin: 973693,
persen_mom: -70.246165885962,
yoy_tahun_ini: 16774614,
yoy_tahun_kemarin: 12737494,
persen_yoy: -31.694774498029204
},
{
id: 16,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31900,
nama_up3: 'UP3 LUWUK',
id_ulp: 31910,
nama_ulp: 'ULP TOILI',
mom_bulan_ini: 163754,
mom_bulan_kemarin: 84028,
persen_mom: -94.88027800257058,
yoy_tahun_ini: 2165678,
yoy_tahun_kemarin: 1939057,
persen_yoy: -11.687175776679076
}
]
}
})
</script>