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

Refactor filterData function in RKeluhan_PerTanggal.vue and RKeluhan_RatingPerUnit.vue

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-02-29 16:25:42 +07:00
parent aa0ffb0324
commit 40c8612f20
14 changed files with 458 additions and 1803 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
View File

@ -4,170 +4,52 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:visible="true" :show-info="true" :show-navigation-buttons="true" />
:allowed-page-sizes="[5, 10, 20]" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
display-mode="full" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
:width="50" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
alignment="center" css-class="custom-table-column" cell-template="data" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
data-type="number" css-class="custom-table-column" cell-template="data" />
caption="No" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
/> css-class="custom-table-column" cell-template="data" />
<DxColumn <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
:width="170" css-class="custom-table-column" cell-template="data" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
data-field="no_laporan" css-class="custom-table-column" cell-template="data" />
caption="No Laporan" <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
css-class="custom-table-column" cell-template="data" />
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
:width="170" css-class="custom-table-column" cell-template="data" />
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
:width="170" css-class="custom-table-column" cell-template="data" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
data-field="waktu_response" css-class="custom-table-column" cell-template="data" />
caption="Tgl Response" <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
css-class="custom-table-column" css-class="custom-table-column" cell-template="data" />
cell-template="data" <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
/> css-class="custom-table-column" cell-template="data" />
<DxColumn <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
:width="170" cell-template="data" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
data-field="waktu_recovery" css-class="custom-table-column" cell-template="data" />
caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
css-class="custom-table-column" css-class="custom-table-column" cell-template="data" />
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_media"
caption="Tgl Media"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_media"
caption="Keterangan Media"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
@ -195,22 +77,13 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
:readonly="true" class-name="flex-1 h-[56px]" />
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -255,12 +128,7 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
<InputText <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1 h-[56px]" />
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
class-name="flex-1 h-[56px]"
/>
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
@ -385,7 +253,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -393,7 +261,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

215
src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
View File

@ -4,168 +4,50 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:visible="true" :show-info="true" :show-navigation-buttons="true" />
:allowed-page-sizes="[5, 10, 20]" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
display-mode="full" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
:width="50" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
alignment="center" css-class="custom-table-column" cell-template="data" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
data-type="number" css-class="custom-table-column" cell-template="data" />
caption="No" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
/> css-class="custom-table-column" cell-template="data" />
<DxColumn <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
:width="170" css-class="custom-table-column" cell-template="data" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
data-field="no_laporan" css-class="custom-table-column" cell-template="data" />
caption="No Laporan" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" css-class="custom-table-column" cell-template="data" />
cell-template="data" <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
/> cell-template="data" />
<DxColumn <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
:width="170" css-class="custom-table-column" cell-template="data" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
data-field="waktu_lapor" css-class="custom-table-column" cell-template="data" />
caption="Tgl Lapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" css-class="custom-table-column" cell-template="data" />
cell-template="data" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
/> css-class="custom-table-column" cell-template="data" />
<DxColumn <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
:width="170" css-class="custom-table-column" cell-template="data" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
data-field="waktu_response" cell-template="data" />
caption="Tgl Response" <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
css-class="custom-table-column" cell-template="data" />
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
@ -223,12 +105,7 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -238,12 +115,8 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
:readonly="true" class-name="flex-1 h-[56px]" />
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -377,7 +250,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -385,7 +258,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

203
src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
View File

@ -4,170 +4,55 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:visible="true" :show-info="true" :show-navigation-buttons="true" />
:allowed-page-sizes="[5, 10, 20]" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
display-mode="full" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
:width="50" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
alignment="center" css-class="custom-table-column" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
data-type="number" css-class="custom-table-column" />
caption="No" <DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
/> css-class="custom-table-column" />
<DxColumn <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP" css-class="custom-table-column" />
:width="170" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
alignment="center" css-class="custom-table-column" />
data-field="no_laporan" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
caption="No Laporan" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Contact Center"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_uid"
caption="UI Dist."
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="ULP"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
/>
<DxColumn <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
:width="170" css-class="custom-table-column" />
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
/>
<DxColumn <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
:width="170" css-class="custom-table-column" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
data-field="no_telp_pelapor" css-class="custom-table-column" />
caption="No Tlp Pelapor" <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
css-class="custom-table-column" css-class="custom-table-column" />
/> <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
<DxColumn css-class="custom-table-column" />
:width="170" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
alignment="center" css-class="custom-table-column" />
data-field="keterangan_pelapor" <DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
caption="Keterangan Pelapor" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
/> css-class="custom-table-column" />
<DxColumn <DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
data-field="status_akhir" css-class="custom-table-column" />
caption="APKT Status"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Created By"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Penyelesaian"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="jumlah_lapor"
caption="Lapor Ulang"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_issuetype"
caption="Issue Type"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_subissuetype"
caption="Sub Issue Type"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -279,7 +164,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
const media = params.media ? params.media.id : '' const media = params.media ? params.media.id : ''
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
@ -288,7 +173,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

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

@ -3,65 +3,25 @@
<Type3 @update:filters="(value) => (filters = value)" /> <Type3 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:width="50" caption="NO" css-class="custom-table-column" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Nama Media"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
v-for="i in 31" css-class="custom-table-column" />
:width="150"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -190,7 +150,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -198,7 +158,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

229
src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
View File

@ -3,208 +3,73 @@
<Type13 @update:filters="(value) => (filters = value)" /> <Type13 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
:width="50" <DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
alignment="center" css-class="custom-table-column" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="fungsi_bidang"
caption="Fungsi Bidang"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
data-field="total_selesai" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
data-field="total_inproses" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
data-field="total" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
data-field="total_diatas_sla_response" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
data-field="total" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
data-field="total_diatas_sla_recovery" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -320,7 +185,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -328,7 +193,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

229
src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
View File

@ -3,208 +3,73 @@
<Type3 @update:filters="(value) => (filters = value)" /> <Type3 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
:width="50" <DxColumn :width="170" alignment="center" data-field="tipe_keluhan" caption="Jenis Keluhan"
alignment="center" css-class="custom-table-column" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tipe_keluhan"
caption="Jenis Keluhan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
data-field="total_selesai" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
data-field="total_inproses" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
data-field="total" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
data-field="total_diatas_sla_response" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
data-field="total" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
data-field="total_diatas_sla_recovery" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -318,7 +183,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -326,7 +191,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

229
src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
View File

@ -3,208 +3,73 @@
<Type13 @update:filters="(value) => (filters = value)" /> <Type13 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
:width="50" <DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok Keluhan"
alignment="center" css-class="custom-table-column" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="kelompok"
caption="Kelompok Keluhan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
data-field="total_selesai" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
data-field="total_inproses" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
data-field="" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
data-field="total_diatas_sla_response" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
data-field="" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
data-field="total_diatas_sla_recovery" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -317,7 +182,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -325,7 +190,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

4
src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
View File

@ -187,7 +187,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -195,7 +195,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

227
src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
View File

@ -3,207 +3,72 @@
<Type8 @update:filters="(value) => (filters = value)" /> <Type8 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:width="50" caption="NO" css-class="custom-table-column" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
data-field="total_selesai" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
data-field="total_inproses" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
data-field="total" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
data-field="total_diatas_sla_response" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
data-field="total" caption="Rata-Rata" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
:width="150" caption=">SLA" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
data-field="total_diatas_sla_recovery" caption="≤SLA" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -318,7 +183,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -326,7 +191,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

4
src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
View File

@ -175,7 +175,7 @@ const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { ulp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -183,7 +183,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })

238
src/components/Pages/Monalisa/Table_36.vue
View File

@ -1,218 +1,64 @@
<template> <template>
<Filters <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible.sync="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible.sync="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-type="text" css-class="custom-table-column" :group-index="0" />
data-field="nama_ulp" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
caption="Nama Unit" css-class="custom-table-column" :group-index="1" />
css-class="custom-table-column" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama ULP"
/> css-class="custom-table-column" :group-index="2" />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-field="mom_bulan_kemarin" :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-field="yoy_tahun_kemarin" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxGroupItem <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}" />
:align-by-column="true" <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}" />
column="mom_bulan_kemarin" <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="sum" display-format="{0}" />
summary-type="sum" <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}" />
display-format="{0}" <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}" />
/> <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="sum" display-format="{0}" />
<DxGroupItem
:align-by-column="true"
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:align-by-column="true"
column="persen_mom"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:align-by-column="true"
column="persen_yoy"
summary-type="sum"
display-format="{0}"
/>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp" css-class="text-white" />
summary-type="sum" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}" css-class="text-white" />
display-format="Total" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white" />
show-in-column="nama_ulp" <DxTotalItem column="persen_mom" summary-type="sum" display-format="{0}" css-class="text-white" />
css-class="text-white" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}" css-class="text-white" />
/> <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white" />
<DxTotalItem <DxTotalItem column="persen_yoy" summary-type="sum" display-format="{0}" css-class="text-white" />
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="persen_mom"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="persen_yoy"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -358,7 +204,7 @@ const filterData = (params: any) => {
// regional: regional, // regional: regional,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
bulan: bulan ? bulan.id : bulanSekarang.value, bulan: bulan ? bulan.id : bulanSekarang.value,
tahun: bulan ? tahun.id : tahunSekarang.value tahun: bulan ? tahun.id : tahunSekarang.value
}) })

131
src/components/Pages/Monalisa/Table_37.vue
View File

@ -1,121 +1,42 @@
<template> <template>
<Filters <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
data-type="text" css-class="custom-table-column" />
data-field="nama_ulp" <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
caption="Nama Unit"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
caption="Jumlah Dispatching Time Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-field="mom_bulan_kemarin" :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-field="yoy_tahun_kemarin" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -256,7 +177,7 @@ const filterData = (params: any) => {
// regional: regional, // regional: regional,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
bulan: bulan ? bulan.id : bulanSekarang.value, bulan: bulan ? bulan.id : bulanSekarang.value,
tahun: bulan ? tahun.id : tahunSekarang.value tahun: bulan ? tahun.id : tahunSekarang.value
}) })

131
src/components/Pages/Monalisa/Table_38.vue
View File

@ -1,121 +1,42 @@
<template> <template>
<Filters <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
data-type="text" css-class="custom-table-column" />
data-field="nama_ulp" <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
caption="Nama Unit"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
caption="Jumlah RCT Kali Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-field="mom_bulan_kemarin" :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-field="yoy_tahun_kemarin" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -227,7 +148,7 @@ const filterData = (params: any) => {
// regional: regional, // regional: regional,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
bulan: bulan ? bulan.id : bulanSekarang.value, bulan: bulan ? bulan.id : bulanSekarang.value,
tahun: bulan ? tahun.id : tahunSekarang.value tahun: bulan ? tahun.id : tahunSekarang.value
}) })

131
src/components/Pages/Monalisa/Table_39.vue
View File

@ -1,121 +1,42 @@
<template> <template>
<Filters <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
class="max-h-[calc(100vh-140px)] mb-10" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:data-source="data" @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
:show-column-lines="true" column-resizing-mode="widget" :word-wrap-enabled="true">
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:position="position" v-if="loading" v-model:visible="loading" :enabled="true" />
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
data-type="text" css-class="custom-table-column" />
data-field="nama_ulp" <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
caption="Nama Unit"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
caption="Jumlah RPT Kali Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-field="mom_bulan_kemarin" :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-field="yoy_tahun_kemarin" :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -227,7 +148,7 @@ const filterData = (params: any) => {
// regional: regional, // regional: regional,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
idUlp: idUlp ? idUlp.id : 0, idUlp: ulp ? ulp.id : 0,
bulan: bulan ? bulan.id : bulanSekarang.value, bulan: bulan ? bulan.id : bulanSekarang.value,
tahun: bulan ? tahun.id : tahunSekarang.value tahun: bulan ? tahun.id : tahunSekarang.value
}) })