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

Add new GraphQL queries for monthly KPI details

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-04-05 10:45:46 +07:00
parent 30cd13cf33
commit 71cfe4d532
3 changed files with 298 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,7 +96,7 @@
caption="Keluhan"
css-class="custom-table-column"
name="keluhanBulanLalu"
cell-template="formatNumber"
cell-template="formatNumberKeluhanCurrentMonthLastYear"
/>
<DxColumn
:width="120"
@ -105,7 +105,7 @@
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberGangguanCurrentMonthLastYear"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn
@ -158,7 +158,7 @@
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberKeluhanCurrentMonthCurrentYear"
/>
<DxColumn
:width="120"
@ -167,7 +167,7 @@
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberGangguanCurrentMonthCurrentYear"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn
@ -627,7 +627,100 @@
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: null,
tahun: lastYear,
bulan: currentMonth
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberKeluhanCurrentMonthLastYear="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'keluhan',
tahun: lastYear,
bulan: currentMonth
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberGangguanCurrentMonthLastYear="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'gangguan',
tahun: lastYear,
bulan: currentMonth
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberKeluhanCurrentMonthCurrentYear="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'keluhan',
tahun: lastYear,
bulan: currentMonth
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberGangguanCurrentMonthCurrentYear="{ data }">
<p
class="text-right cursor-pointer"
@click="
setParameterRequest({
type: 'gangguan',
tahun: lastYear,
bulan: currentMonth
})
"
>
{{
isNumber(data.text)
? data.column.caption == '%'
@ -639,13 +732,31 @@
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
<p
class="text-right"
@click="
setParameterRequest({
type: null,
tahun: lastYear,
bulan: currentMonth
})
"
>
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p
class="text-left"
@click="
setParameterRequest({
type: null,
tahun: lastYear,
bulan: currentMonth
})
"
>
{{ data.text }}
</p>
</template>
@ -714,7 +825,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_uid"
caption="UID/UIW"
:allow-resizing="false"
css-class="custom-table-column"
@ -723,7 +834,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_up3"
caption="UP3"
:allow-resizing="false"
css-class="custom-table-column"
@ -732,7 +843,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_ulp"
caption="ULP"
:allow-resizing="false"
css-class="custom-table-column"
@ -765,7 +876,7 @@
/>
<DxColumn
:width="150"
data-field=""
data-field="alamat_pelapor"
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
@ -773,7 +884,7 @@
/>
<DxColumn
:width="150"
data-field=""
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
@ -781,7 +892,7 @@
/>
<DxColumn
:width="150"
data-field=""
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
@ -789,7 +900,7 @@
/>
<DxColumn
:width="150"
data-field=""
data-field="penyebab"
caption="Penyebab"
:allow-resizing="false"
css-class="custom-table-column"
@ -807,7 +918,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_issuetype"
caption="Jenis Gangguan"
:allow-resizing="false"
css-class="custom-table-column"
@ -816,25 +927,25 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_response_time"
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_lapor"
caption="Tgl Lapor"
:allow-resizing="false"
css-class="custom-table-column"
@ -864,6 +975,12 @@
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
@ -876,17 +993,17 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
<InputText :readonly="true" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
<InputText :readonly="true" value="" 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">
@ -906,22 +1023,41 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" type="textarea" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.alamat_pelapor"
type="textarea"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" type="textarea" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.keterangan_pelapor"
type="textarea"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" type="textarea" value="" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataSubSelected?.penyebab"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -931,22 +1067,42 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.nama_issuetype"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
</div>
</div>
</div>
@ -990,6 +1146,7 @@ import {
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
const client = apolloClient()
provideApolloClient(client)
@ -1009,6 +1166,7 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const reportMeta = ref({
regional: { id: 0, name: 'Semua Regional' },
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -1021,6 +1179,21 @@ const reportMeta = ref({
currentYear: currentYear.value,
lastYear: lastYear.value
})
const parameterRequest = ref<any>({
type: null,
tahun: new Date().getFullYear(),
bulan: new Date().getMonth()
})
const setParameterRequest = (data: any) => {
parameterRequest.value = data
const parameter = parameterRequest.value
if (parameter.type != null) {
agreeToShowDialog.value = true
} else {
agreeToShowDialog.value = false
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -1041,26 +1214,31 @@ const onExportingDetail = (e: any) => {
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
bulan: parameterRequest.value.bulan,
tahun: parameterRequest.value.tahun,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
}
loadingSubData.value = true
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
await requestGraphQl(
parameterRequest.value.type == 'gangguan'
? queries.monalisa.laporan.bulanan.kpiBulananGangguanDetail
: queries.monalisa.laporan.bulanan.kpiBulananKeluhanDetail,
query
)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailKeluhanAll
if (parameterRequest.value.type == 'gangguan') {
dataSub.value = result.data.data.detailKpiBulananGangguan
} else {
dataSub.value = result.data.data.detailKpiBulananKeluhan
}
} else {
dataSub.value = []
}
@ -1082,8 +1260,10 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (agreeToShowDialog.value) {
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {

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

@ -142,70 +142,7 @@
<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"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_tahun_sebelumnya"
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_sebelumnya"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_informasi_tahun_sebelumnya"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_informasi_tahun_sebelumnya"
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_sebelumnya"
data-type="number"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn
alignment="center"
:caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
>
<DxColumn

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

@ -2903,6 +2903,82 @@ export const queries = {
komplain_pelanggan
}
}
`,
kpiBulananGangguanDetail: gql`
query detailKpiBulananGangguan(
$bulan: Int!
$tahun: Int!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
detailKpiBulananGangguan(
bulan: $bulan
tahun: $tahun
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
no_laporan
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
penyebab
kode_gangguan
jenis_gangguan
durasi_response_time
durasi_recovery_time
waktu_lapor
}
}
`,
kpiBulananKeluhanDetail: gql`
query detailKpiBulananKeluhan(
$bulan: Int!
$tahun: Int!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
detailKpiBulananKeluhan(
bulan: $bulan
tahun: $tahun
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
no_laporan
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
penyebab
nama_issuetype
nama_subissuetype
durasi_response_time
durasi_recovery_time
waktu_lapor
}
}
`
},
kumulatif: {