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

Refactor code to fix variable names and improve readability

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-04-14 20:59:47 +07:00
parent 0c7af82c36
commit 807ac7dba4
13 changed files with 1534 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
View File

@ -459,7 +459,7 @@
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
Laporan Pengaduan {{ parameterRequest.media != null ? parameterRequest.media : '' }}
Detail Petugas {{ parameterRequest.media != null ? parameterRequest.media : '' }}
{{
parameterRequest.marking != null
? parameterRequest.marking == 1
@ -480,7 +480,6 @@ import {
DxExport,
DxGroupItem,
DxGrouping,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,

8
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
View File

@ -874,11 +874,11 @@ const getDetail = async () => {
const query = {
dateFrom: ref?.tanggal ? reformatDate(ref?.tanggal, 'yyyy/MM/dd', 'yyyy-MM-dd') : '',
dateTo: ref?.tanggal ? reformatDate(ref?.tanggal, 'yyyy/MM/dd', 'yyyy-MM-dd') : '',
posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
posko: progressSelected.value == 0 ? 0 : ref?.id_posko ? ref?.id_posko : 0,
idUid: progressSelected.value == 0 ? 0 : ref?.id_uid ? ref?.id_uid : 0,
idUp3: progressSelected.value == 0 ? 0 : ref?.id_up3 ? ref?.id_up3 : 0,
idRegu: ref?.id_regu ? ref?.id_regu : 0,
idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
idUlp: progressSelected.value == 0 ? 0 : ref?.id_ulp ? ref?.id_ulp : 0,
namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
media: ref?.media ? ref?.media : '',
isSelesai: progressSelected.value,

2
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
View File

@ -928,7 +928,7 @@ const getDetail = async () => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref?.id_ulp ? ref?.id_ulp : 0,
posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
idRegu: ref?.id_regu ? ref?.id_regu : 0,

2
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
View File

@ -920,7 +920,7 @@ const getDetail = async () => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref?.id_ulp ? ref?.id_ulp : 0,
posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
idRegu: ref?.id_regu ? ref?.id_regu : 0,

22
src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
View File

@ -182,7 +182,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_response"
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
@ -191,7 +191,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_recovery"
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
@ -218,7 +218,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="status_akhir"
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
@ -272,7 +272,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_ulp"
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
@ -281,7 +281,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="uraian"
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
@ -290,7 +290,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="respon_pelanggan"
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
@ -334,7 +334,7 @@
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.dalam_proses_bidang"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
</div>
@ -343,7 +343,7 @@
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.selesai_bidang_unit"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
</div>
@ -419,7 +419,7 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
<InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -437,7 +437,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataSubSelected?.response_pelanggan"
:value="dataSubSelected?.respon_pelanggan"
class-name="flex-1"
/>
</div>
@ -572,7 +572,7 @@ const getDetail = async () => {
}
loadingSubData.value = true
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia, query)
await requestGraphQl(queries.keluhan.rekap.keluhanBerdasarkanMediaDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailRekapitulasiKeluhanBerdasarkanMedia

5
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
View File

@ -508,7 +508,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -516,7 +516,6 @@ import {
DxExport,
DxGroupItem,
DxGrouping,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
@ -587,7 +586,7 @@ const filterData = async (params: any) => {
lastYear.value = tahun.id - 1
const query = {
namaRegional: regional.name == 'Semua Regional' ? '' : regional.nama_regional,
namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,

315
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
View File

@ -1,89 +1,223 @@
<template>
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" :report-button="true" @reset-form="data = []"
@run-search="() => filterData(filters)" class="mb-4">
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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="onDataSelectionChanged"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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="onDataSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<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" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
css-class="custom-table-column">
<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="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" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn
alignment="center"
:caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
css-class="custom-table-column"
>
<DxColumn
v-if="grouping.length > 0"
v-for="(group, index) in grouping"
:width="150"
alignment="center"
:data-field="group.data"
:caption="group.caption"
css-class="custom-table-column"
cell-template="formatText"
:group-index="index"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
</DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="150"
alignment="center"
data-field="terencana"
data-type="number"
caption="Terencana"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tidak_terencana"
data-type="number"
caption="Tidak Terencana"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="bencana_alam"
data-type="number"
caption="Bencana Alam"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="170"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:min-width="170"
alignment="center"
data-field="kpi_ens"
data-type="number"
caption="KPI ENS"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxSummary>
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
css-class="text-white !text-left" />
<DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="terencana"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="bencana_alam"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="kpi_ens"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
:align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
:align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
:align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
:align-by-column="true" column="total" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
:align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem
css-class="!text-right"
show-in-column="terencana"
:show-in-group-footer="false"
:align-by-column="true"
column="terencana"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="tidak_terencana"
:show-in-group-footer="false"
:align-by-column="true"
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="bencana_alam"
:show-in-group-footer="false"
:align-by-column="true"
column="bencana_alam"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total"
:show-in-group-footer="false"
:align-by-column="true"
column="total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="kpi_ens"
:show-in-group-footer="false"
:align-by-column="true"
column="kpi_ens"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -98,7 +232,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue'
@ -106,7 +240,6 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -155,6 +288,20 @@ const reportMeta = ref({
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
periode: ''
})
const grouping = ref<any[]>([
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -235,6 +382,46 @@ const filterData = async (params: any) => {
currentYear.value = tahun.id
lastYear.value = tahun.id - 1
var groupList: any[] = [
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
]
if (uid?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'Regional') {
groupList.splice(index, 1)
}
})
if (up3?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UID') {
groupList.splice(index, 1)
}
})
if (ulp?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UP3') {
groupList.splice(index, 1)
}
})
}
}
}
grouping.value = groupList
const query = {
namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
idUid: uid ? uid.id : 0,

321
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
View File

@ -1,93 +1,229 @@
<template>
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" :report-button="true" @reset-form="data = []"
@run-search="() => filterData(filters)" class="mb-4">
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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
ref="dataGridRef"
:allow-column-reordering="true"
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"
>
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<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_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"
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" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn
v-if="grouping.length > 0"
v-for="(group, index) in grouping"
:width="150"
alignment="center"
:data-field="group.data"
:caption="group.caption"
css-class="custom-table-column"
cell-template="formatText"
:group-index="index"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Kepatuhan dan Akurasi APKT"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
:caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
caption="Total Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="150"
alignment="center"
data-field="gangguan_berulang"
data-type="number"
:caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="gangguan_total"
data-type="number"
caption="Total Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
:caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
caption="Total Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="150"
alignment="center"
data-field="keluhan_berulang"
data-type="number"
:caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="keluhan_total"
data-type="number"
caption="Total Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
<DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
<DxColumn
:min-width="150"
alignment="center"
data-field="komplain_pelanggan"
data-type="number"
caption="Komplain Pelanggan %"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxSummary>
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
css-class="text-white !text-left" />
<DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="gangguan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="keluhan_berulang" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="keluhan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="komplain_pelanggan" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="gangguan_berulang"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="gangguan_total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="keluhan_berulang"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="keluhan_total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="komplain_pelanggan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
:align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
:align-by-column="true" column="gangguan_total" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="keluhan_berulang" :show-in-group-footer="false"
:align-by-column="true" column="keluhan_berulang" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="keluhan_total" :show-in-group-footer="false"
:align-by-column="true" column="keluhan_total" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="komplain_pelanggan" :show-in-group-footer="false"
:align-by-column="true" column="komplain_pelanggan" summary-type="sum" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxGroupItem
css-class="!text-right"
show-in-column="gangguan_berulang"
:show-in-group-footer="false"
:align-by-column="true"
column="gangguan_berulang"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="gangguan_total"
:show-in-group-footer="false"
:align-by-column="true"
column="gangguan_total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="keluhan_berulang"
:show-in-group-footer="false"
:align-by-column="true"
column="keluhan_berulang"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="keluhan_total"
:show-in-group-footer="false"
:align-by-column="true"
column="keluhan_total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="komplain_pelanggan"
:show-in-group-footer="false"
:align-by-column="true"
column="komplain_pelanggan"
summary-type="sum"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -109,7 +245,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue'
@ -117,7 +253,6 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -168,6 +303,20 @@ const reportMeta = ref({
currentMonth: currentMonth.value,
currentYear: currentYear.value
})
const grouping = ref<any[]>([
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -200,6 +349,46 @@ const filterData = async (params: any) => {
currentYear.value = tahun.id
lastYear.value = tahun.id - 1
var groupList: any[] = [
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
]
if (uid?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'Regional') {
groupList.splice(index, 1)
}
})
if (up3?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UID') {
groupList.splice(index, 1)
}
})
if (ulp?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UP3') {
groupList.splice(index, 1)
}
})
}
}
}
grouping.value = groupList
const query = {
namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
idUid: uid ? uid.id : 0,

96
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
View File

@ -41,36 +41,15 @@
<DxColumnFixing :enabled="true" />
<DxColumn
v-if="grouping.length > 0"
v-for="(group, index) in grouping"
:width="150"
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_regional"
caption="Regional"
:data-field="group.data"
:caption="group.caption"
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"
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"
cell-template="formatText"
:group-index="index"
/>
<DxColumn
alignment="center"
@ -1158,7 +1137,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue'
@ -1166,7 +1145,6 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -1191,9 +1169,7 @@ import {
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX,
exportToDOCX
} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
@ -1228,6 +1204,20 @@ const reportMeta = ref({
currentYear: currentYear.value,
lastYear: lastYear.value
})
const grouping = ref<any[]>([
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
])
const parameterRequest = ref<any>({
type: null,
tahun: new Date().getFullYear(),
@ -1337,6 +1327,46 @@ const filterData = async (params: any) => {
resetData()
const { regional, ulp, uid, up3, bulan, tahun } = params
var groupList: any[] = [
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
]
if (uid?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'Regional') {
groupList.splice(index, 1)
}
})
if (up3?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UID') {
groupList.splice(index, 1)
}
})
if (ulp?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UP3') {
groupList.splice(index, 1)
}
})
}
}
}
grouping.value = groupList
currentMonth.value = bulan.id
currentYear.value = tahun.id
lastYear.value = tahun.id - 1

316
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
View File

@ -1,89 +1,223 @@
<template>
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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="onDataSelectionChanged"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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="onDataSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<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" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
css-class="custom-table-column">
<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="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" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn
alignment="center"
:caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
css-class="custom-table-column"
>
<DxColumn
v-if="grouping.length > 0"
v-for="(group, index) in grouping"
:width="150"
alignment="center"
:data-field="group.data"
:caption="group.caption"
css-class="custom-table-column"
cell-template="formatText"
:group-index="index"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
</DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="150"
alignment="center"
data-field="terencana"
data-type="number"
caption="Terencana"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tidak_terencana"
data-type="number"
caption="Tidak Terencana"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="bencana_alam"
data-type="number"
caption="Bencana Alam"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="170"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:min-width="170"
alignment="center"
data-field="kpi_ens"
data-type="number"
caption="KPI ENS"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxSummary>
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
css-class="text-white !text-left" />
<DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="terencana"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="bencana_alam"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="kpi_ens"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
:align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
:align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
:align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
:align-by-column="true" column="total" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
:align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem
css-class="!text-right"
show-in-column="terencana"
:show-in-group-footer="false"
:align-by-column="true"
column="terencana"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="tidak_terencana"
:show-in-group-footer="false"
:align-by-column="true"
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="bencana_alam"
:show-in-group-footer="false"
:align-by-column="true"
column="bencana_alam"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total"
:show-in-group-footer="false"
:align-by-column="true"
column="total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="kpi_ens"
:show-in-group-footer="false"
:align-by-column="true"
column="kpi_ens"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -98,7 +232,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue'
@ -106,7 +240,6 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -126,7 +259,6 @@ import {
exportToPDF,
exportToXLSX,
exportToDOCX
} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales'
const client = apolloClient()
@ -156,6 +288,20 @@ const reportMeta = ref({
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
periode: ''
})
const grouping = ref<any[]>([
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -232,6 +378,46 @@ const filterData = async (params: any) => {
resetData()
const { regional, ulp, uid, up3, bulan, tahun } = params
var groupList: any[] = [
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
]
if (uid?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'Regional') {
groupList.splice(index, 1)
}
})
if (up3?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UID') {
groupList.splice(index, 1)
}
})
if (ulp?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UP3') {
groupList.splice(index, 1)
}
})
}
}
}
grouping.value = groupList
currentMonth.value = bulan.id
currentYear.value = tahun.id
lastYear.value = tahun.id - 1

95
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
View File

@ -40,36 +40,15 @@
<DxColumnFixing :enabled="true" />
<DxColumn
v-if="grouping.length > 0"
v-for="(group, index) in grouping"
:width="150"
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_regional"
caption="Regional"
:data-field="group.data"
:caption="group.caption"
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"
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"
cell-template="formatText"
:group-index="index"
/>
<DxColumn
alignment="center"
@ -267,13 +246,12 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -293,7 +271,6 @@ import {
exportToPDF,
exportToXLSX,
exportToDOCX
} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan'
const client = apolloClient()
@ -325,6 +302,20 @@ const reportMeta = ref({
currentMonth: currentMonth.value,
currentYear: currentYear.value
})
const grouping = ref<any[]>([
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -333,9 +324,7 @@ const onExporting = (e: any) => {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
@ -403,6 +392,46 @@ const filterData = async (params: any) => {
resetData()
const { regional, ulp, uid, up3, bulan, tahun } = params
var groupList: any[] = [
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
]
if (uid?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'Regional') {
groupList.splice(index, 1)
}
})
if (up3?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UID') {
groupList.splice(index, 1)
}
})
if (ulp?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UP3') {
groupList.splice(index, 1)
}
})
}
}
}
grouping.value = groupList
currentMonth.value = bulan.id
currentYear.value = tahun.id
lastYear.value = tahun.id - 1

802
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
View File

@ -1,207 +1,613 @@
<template>
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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="onDataSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<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_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"
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" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn
v-if="grouping.length > 0"
v-for="(group, index) in grouping"
:width="150"
alignment="center"
:data-field="group.data"
:caption="group.caption"
css-class="custom-table-column"
cell-template="formatText"
:group-index="index"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn
alignment="center"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
>
<DxColumn
:width="120"
alignment="center"
data-field="total_keluhan_tahun_sebelumnya"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
name="keluhanBulanLalu"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_tahun_sebelumnya"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
data-type="number" caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
data-type="number" caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn
:width="120"
alignment="center"
data-field="total_keluhan_informasi_tahun_sebelumnya"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_informasi_tahun_sebelumnya"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_informasi_tahun_sebelumnya"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
data-field="total_tahun_sebelumnya" data-type="number" />
<DxColumn
alignment="center"
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_tahun_sebelumnya"
data-type="number"
/>
</DxColumn>
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_ini" data-type="number"
caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
alignment="center"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
>
<DxColumn
:width="120"
alignment="center"
data-field="total_keluhan_tahun_ini"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_tahun_ini"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="120"
alignment="center"
data-field="total_keluhan_informasi_tahun_ini"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_informasi_tahun_ini"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_informasi_tahun_ini"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
data-field="total_tahun_ini" data-type="number" cell-template="formatNumber" />
<DxColumn
alignment="center"
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_tahun_ini"
data-type="number"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn
:width="150"
alignment="center"
data-field="delta_keluhan"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" cell-template="formatPercentage" />
<DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
caption="Gangguan" css-class="custom-table-column" cell-template="formatPercentage" />
<DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
caption="Informasi" css-class="custom-table-column" cell-template="formatPercentage" />
<DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
css-class="custom-table-column" cell-template="formatPercentage" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_delta_keluhan"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_delta_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_delta_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_delta_total"
data-type="number"
caption="% Total"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
</DxColumn>
<DxSummary>
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
css-class="text-white !text-left" />
<DxTotalItem column="total_keluhan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_gangguan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_keluhan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_gangguan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_keluhan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_gangguan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="delta_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="delta_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="delta_informasi" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="persen_delta_keluhan" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxTotalItem column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxTotalItem column="persen_delta_informasi" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxTotalItem column="persen_delta_total" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="total_keluhan_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_gangguan_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_keluhan_informasi_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_gangguan_informasi_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_informasi_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_keluhan_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_gangguan_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_keluhan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_gangguan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="delta_keluhan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="delta_gangguan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="delta_informasi"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_delta_keluhan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="persen_delta_gangguan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="persen_delta_informasi"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="persen_delta_total"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_sebelumnya"
:show-in-group-footer="false" :align-by-column="true" column="total_keluhan_tahun_sebelumnya"
summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_sebelumnya"
:show-in-group-footer="false" :align-by-column="true" column="total_gangguan_tahun_sebelumnya"
summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_sebelumnya"
:show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_sebelumnya"
summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_sebelumnya"
:show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_sebelumnya"
summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_sebelumnya"
:show-in-group-footer="false" :align-by-column="true" column="total_informasi_tahun_sebelumnya"
summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_tahun_sebelumnya" :show-in-group-footer="false"
:align-by-column="true" column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_ini" :show-in-group-footer="false"
:align-by-column="true" column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_ini" :show-in-group-footer="false"
:align-by-column="true" column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_ini"
:show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_ini"
summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_ini"
:show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_ini"
summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_ini" :show-in-group-footer="false"
:align-by-column="true" column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="total_tahun_ini" :show-in-group-footer="false"
:align-by-column="true" column="total_tahun_ini" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="delta_keluhan" :show-in-group-footer="false"
:align-by-column="true" column="delta_keluhan" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="delta_gangguan" :show-in-group-footer="false"
:align-by-column="true" column="delta_gangguan" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="delta_informasi" :show-in-group-footer="false"
:align-by-column="true" column="delta_informasi" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem css-class="!text-right" show-in-column="persen_delta_keluhan" :show-in-group-footer="false"
:align-by-column="true" column="persen_delta_keluhan" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxGroupItem css-class="!text-right" show-in-column="persen_delta_gangguan" :show-in-group-footer="false"
:align-by-column="true" column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
:customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxGroupItem css-class="!text-right" show-in-column="persen_delta_informasi" :show-in-group-footer="false"
:align-by-column="true" column="persen_delta_informasi" summary-type="avg" display-format="{0}"
:customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxGroupItem css-class="!text-right" show-in-column="persen_delta_total" :show-in-group-footer="false"
:align-by-column="true" column="persen_delta_total" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
" />
<DxGroupItem
css-class="!text-right"
show-in-column="total_keluhan_tahun_sebelumnya"
:show-in-group-footer="false"
:align-by-column="true"
column="total_keluhan_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_gangguan_tahun_sebelumnya"
:show-in-group-footer="false"
:align-by-column="true"
column="total_gangguan_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_keluhan_informasi_tahun_sebelumnya"
:show-in-group-footer="false"
:align-by-column="true"
column="total_keluhan_informasi_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_gangguan_informasi_tahun_sebelumnya"
:show-in-group-footer="false"
:align-by-column="true"
column="total_gangguan_informasi_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_informasi_tahun_sebelumnya"
:show-in-group-footer="false"
:align-by-column="true"
column="total_informasi_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_tahun_sebelumnya"
:show-in-group-footer="false"
:align-by-column="true"
column="total_tahun_sebelumnya"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_keluhan_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_keluhan_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_gangguan_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_gangguan_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_keluhan_informasi_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_keluhan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_gangguan_informasi_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_gangguan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_informasi_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="delta_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="delta_keluhan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="delta_gangguan"
:show-in-group-footer="false"
:align-by-column="true"
column="delta_gangguan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="delta_informasi"
:show-in-group-footer="false"
:align-by-column="true"
column="delta_informasi"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_keluhan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_gangguan"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_gangguan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_informasi"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_informasi"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_total"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_total"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -222,7 +628,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue'
@ -230,7 +636,6 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -250,7 +655,6 @@ import {
exportToPDF,
exportToXLSX,
exportToDOCX
} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain'
const client = apolloClient()
@ -283,6 +687,20 @@ const reportMeta = ref({
currentYear: currentYear.value,
lastYear: lastYear.value
})
const grouping = ref<any[]>([
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -359,6 +777,46 @@ const filterData = async (params: any) => {
resetData()
const { regional, ulp, uid, up3, bulan, tahun } = params
var groupList: any[] = [
{
data: 'nama_regional',
caption: 'Regional'
},
{
data: 'nama_uid',
caption: 'UID'
},
{
data: 'nama_up3',
caption: 'UP3'
}
]
if (uid?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'Regional') {
groupList.splice(index, 1)
}
})
if (up3?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UID') {
groupList.splice(index, 1)
}
})
if (ulp?.id != 0) {
groupList.forEach((item, index) => {
if (item.caption == 'UP3') {
groupList.splice(index, 1)
}
})
}
}
}
grouping.value = groupList
currentYear.value = tahun.id
currentMonth.value = bulan.id
lastYear.value = tahun.id - 1

2
src/utils/api/api.graphql.ts
View File

@ -946,6 +946,7 @@ export const queries = {
namaRegional: $namaRegional
media: $media
) {
uraian
id
nama_regional
id_uid
@ -1167,6 +1168,7 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
nama_regional
id
id_uid
nama_uid