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

Refactor CSS styles and fix formatting issues in MonalisaLK_EnergyNotSales.vue

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-11 22:42:15 +07:00
parent d8d5dc9f5b
commit 99afd50f37
40 changed files with 6887 additions and 2429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,64 +1,182 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="false">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="false"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
: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" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Response Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_media"
caption="Tgl Media"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_media"
caption="Keterangan Media"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showData()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -84,12 +202,22 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -114,18 +242,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -140,7 +278,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
@ -224,13 +367,16 @@ const onExporting = (e: any) => {
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanBerdasarkanMedia, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.daftar.keluhanBerdasarkanMedia,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')

225
src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
View File

@ -1,56 +1,175 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
: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" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
cell-template="cellRight" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column !align-top" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column !align-top" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column !align-top" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column !align-top" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column !align-top" cell-template="data-waktu" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column !align-top" cell-template="data-waktu" />
<DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column !align-top" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn
css-class="custom-table-column !align-top"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="pembuat_laporan"
caption="Pembuat Laporan"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column !align-top"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_dialihkan"
caption="Tgl Dialihkan"
css-class="custom-table-column !align-top"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column !align-top"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column !align-top"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column !align-top"
cell-template="formatTime"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column !align-top"
cell-template="formatTime"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_unit_lama"
caption="Unit Asal"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column !align-top"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
@ -58,22 +177,26 @@
</p>
</template>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
formatNumber(data.text) :
data.text }}
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #data-waktu="{ data }">
<p>
<template #formatTime="{ data }">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -192,4 +315,4 @@ const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
})
</script>
</script>

289
src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
View File

@ -1,55 +1,179 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type10 @update:filters="(value) => filters = value" />
<Type10 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="false">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="false"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
: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" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="cellLeft" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="120"
alignment="center"
data-field="jumlah_lapor"
caption="Jml Lapor"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -57,22 +181,26 @@
</p>
</template>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
formatNumber(data.text) :
data.text }}
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showData()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -108,18 +236,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -139,7 +277,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -149,7 +292,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -244,15 +392,18 @@ const onExporting = (e: any) => {
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, {
minJmlLapor: 1,
maxJmlLapor: 100,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali,
{
minJmlLapor: 1,
maxJmlLapor: 100,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
@ -289,4 +440,4 @@ const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
})
</script>
</script>

258
src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
View File

@ -1,62 +1,173 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => filters = value" />
<Type11 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="false">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="false"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
: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" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="cellLeft" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showData()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -87,18 +198,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -118,7 +239,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -128,7 +254,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -222,15 +353,18 @@ const onExporting = (e: any) => {
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanRecoveryTime, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiRecoveryTime: 0,
maxDurasiRecoveryTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.daftar.keluhanRecoveryTime,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiRecoveryTime: 0,
maxDurasiRecoveryTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
@ -265,4 +399,4 @@ const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
})
</script>
</script>

269
src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
View File

@ -1,52 +1,164 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => filters = value" />
<Type11 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="false">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="false"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
: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" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="cellLeft" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -54,22 +166,26 @@
</p>
</template>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
formatNumber(data.text) :
data.text }}
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showData()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -100,18 +216,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -131,7 +257,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -141,7 +272,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -236,15 +372,18 @@ const onExporting = (e: any) => {
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanResponseTime, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiResponseTime: 0,
maxDurasiResponseTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.daftar.keluhanResponseTime,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiResponseTime: 0,
maxDurasiResponseTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
@ -280,4 +419,4 @@ const filters = ref()
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
})
</script>
</script>

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

@ -1,62 +1,180 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="false">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="false"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
: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" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="cellLeft" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showData()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -87,18 +205,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -118,7 +246,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -128,7 +261,12 @@
<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>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -222,13 +360,16 @@ const onExporting = (e: any) => {
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')

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

@ -1,61 +1,190 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
: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" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP"
css-class="custom-table-column !align-top" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn
css-class="custom-table-column !align-top"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Contact Center"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_uid"
caption="UI Dist."
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="ULP"
css-class="custom-table-column !align-top"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
css-class="custom-table-column !align-top" cell-template="cellLeft" />
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Tlp Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="APKT Status"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Created By"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Penyelesaian"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="jumlah_lapor"
caption="Lapor Ulang"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_issuetype"
caption="Issue Type"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_subissuetype"
caption="Sub Issue Type"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
@ -128,13 +257,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanDiselesaikanCC123, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.keluhan.daftar.keluhanDiselesaikanCC123,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filters = ref()
const filterData = (params: any) => {
@ -169,4 +301,4 @@ const filterData = (params: any) => {
onMounted(() => {
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
})
</script>
</script>

79
src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
View File

@ -63,7 +63,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -72,7 +72,7 @@
data-type="number"
caption="Selesai"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
@ -81,7 +81,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="percent"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -90,7 +90,7 @@
data-type="number"
caption="InProgress"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
@ -99,7 +99,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="percent"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -108,7 +108,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -135,7 +135,7 @@
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -144,7 +144,7 @@
data-type="number"
caption="≤ SLA"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
@ -155,7 +155,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -182,7 +182,7 @@
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -191,22 +191,30 @@
data-type="number"
caption="≤ SLA"
css-class="custom-table-column"
cell-template="defaults"
cell-template="formatNumber"
/>
</DxColumn>
<template #formatTime="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<template #percent="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #defaults="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">
<template #formatText="{ data }">
<p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
{{ data.text }}
</p>
</template>
@ -269,7 +277,7 @@
"
data-type="number"
caption="No"
cell-template="cellRight"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -277,7 +285,7 @@
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -285,7 +293,7 @@
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -294,7 +302,7 @@
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -303,7 +311,7 @@
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -312,7 +320,7 @@
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -321,7 +329,7 @@
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -330,7 +338,7 @@
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -339,7 +347,7 @@
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -348,7 +356,7 @@
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -357,7 +365,7 @@
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -366,7 +374,7 @@
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -375,7 +383,7 @@
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -384,7 +392,7 @@
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -393,7 +401,7 @@
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -402,22 +410,22 @@
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -581,6 +589,7 @@ import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const position = { of: '#data' }
const showIndicator = ref(true)

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

@ -58,7 +58,7 @@
data-field="media"
caption="Nama Media"
css-class="custom-table-column"
cell-template="cell-left"
cell-template="formatText"
/>
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn
@ -94,7 +94,7 @@
/>
</DxSummary>
<template #cell-left="{ data }">
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
{{ data.text }}
</p>
@ -158,7 +158,7 @@
"
data-type="number"
caption="No"
cell-template="cellRight"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -166,7 +166,7 @@
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -174,7 +174,7 @@
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -183,7 +183,7 @@
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -192,7 +192,7 @@
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -201,7 +201,7 @@
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -210,7 +210,7 @@
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -219,7 +219,7 @@
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -228,7 +228,7 @@
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -237,7 +237,7 @@
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -246,7 +246,7 @@
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -255,7 +255,7 @@
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -264,7 +264,7 @@
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -273,7 +273,7 @@
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -282,7 +282,7 @@
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -291,22 +291,22 @@
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>

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

@ -51,6 +51,7 @@
data-type="number"
data-field="no"
caption="No"
cell-template="formatNumber"
/>
<!-- <DxColumn
:width="120"
@ -68,7 +69,7 @@
data-field="fungsi_bidang"
caption="Fungsi Bidang"
css-class="custom-table-column"
cell-template="cell-left"
cell-template="formatText"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
@ -78,6 +79,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -87,6 +89,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
@ -95,7 +98,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="percent"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@ -106,6 +109,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
@ -114,7 +118,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="percent"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@ -127,6 +131,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -135,6 +140,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -143,7 +149,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -152,7 +158,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -163,6 +169,7 @@
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -171,6 +178,7 @@
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@ -183,6 +191,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -191,6 +200,7 @@
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -199,7 +209,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -208,7 +218,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -219,6 +229,7 @@
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -227,6 +238,7 @@
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
@ -236,122 +248,137 @@
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}%"
column="persen_selesai"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}%"
column="persen_inproses"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
css-class="text-white !text-right"
/>
</DxSummary>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<template #percent="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #cell-left="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
<template #formatText="{ data }">
<p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
{{ data.text }}
</p>
</template>
@ -414,7 +441,7 @@
"
data-type="number"
caption="No"
cell-template="cellRight"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -422,7 +449,7 @@
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -430,7 +457,7 @@
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -439,7 +466,7 @@
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -448,7 +475,7 @@
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -457,7 +484,7 @@
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -466,7 +493,7 @@
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -475,7 +502,7 @@
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -484,7 +511,7 @@
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -493,7 +520,7 @@
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -502,7 +529,7 @@
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -511,7 +538,7 @@
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -520,7 +547,7 @@
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -529,7 +556,7 @@
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -538,7 +565,7 @@
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -547,22 +574,22 @@
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -728,6 +755,7 @@ import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
const position = { of: '#data' }
const showIndicator = ref(true)

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

@ -58,7 +58,7 @@
data-field="tipe_keluhan"
caption="Jenis Keluhan"
css-class="custom-table-column"
cell-template="cell-left"
cell-template="formatText"
/>
<!-- <DxColumn
:width="170"
@ -142,7 +142,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -151,7 +151,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -198,7 +198,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -207,7 +207,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -468,8 +468,8 @@
/>
</DxSummary>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -478,7 +478,7 @@
<p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
{{ data.text }}
</p>
@ -542,7 +542,7 @@
"
data-type="number"
caption="No"
cell-template="cellRight"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -550,7 +550,7 @@
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -558,7 +558,7 @@
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -567,7 +567,7 @@
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -576,7 +576,7 @@
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -585,7 +585,7 @@
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -594,7 +594,7 @@
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -603,7 +603,7 @@
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -612,7 +612,7 @@
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -621,7 +621,7 @@
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -630,7 +630,7 @@
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -639,7 +639,7 @@
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -648,7 +648,7 @@
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -657,7 +657,7 @@
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -666,7 +666,7 @@
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -675,22 +675,22 @@
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>

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

@ -68,7 +68,7 @@
data-field="kelompok"
caption="Kelompok Keluhan"
css-class="custom-table-column"
cell-template="cell-left"
cell-template="formatText"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
@ -143,7 +143,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -152,7 +152,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -199,7 +199,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -208,7 +208,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -342,8 +342,8 @@
/>
</DxSummary>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -352,7 +352,7 @@
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
{{ data.text }}
</p>
@ -416,7 +416,7 @@
"
data-type="number"
caption="No"
cell-template="cellRight"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -424,7 +424,7 @@
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -432,7 +432,7 @@
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -441,7 +441,7 @@
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -450,7 +450,7 @@
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -459,7 +459,7 @@
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -468,7 +468,7 @@
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -477,7 +477,7 @@
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -486,7 +486,7 @@
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -495,7 +495,7 @@
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -504,7 +504,7 @@
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -513,7 +513,7 @@
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -522,7 +522,7 @@
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -531,7 +531,7 @@
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -540,7 +540,7 @@
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -549,22 +549,22 @@
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>

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

@ -58,7 +58,7 @@
data-field="tanggal_lapor"
caption="Tanggal Lapor"
css-class="custom-table-column"
cell-template="cell-left"
cell-template="formatText"
/>
<DxColumn
:width="170"
@ -142,7 +142,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -151,7 +151,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -198,7 +198,7 @@
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -207,7 +207,7 @@
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -341,8 +341,8 @@
/>
</DxSummary>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -351,7 +351,7 @@
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
{{ data.text }}
</p>
@ -415,7 +415,7 @@
"
data-type="number"
caption="No"
cell-template="cellRight"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -423,7 +423,7 @@
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -431,7 +431,7 @@
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -440,7 +440,7 @@
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -449,7 +449,7 @@
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -458,7 +458,7 @@
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -467,7 +467,7 @@
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -476,7 +476,7 @@
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -485,7 +485,7 @@
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -494,7 +494,7 @@
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -503,7 +503,7 @@
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -512,7 +512,7 @@
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -521,7 +521,7 @@
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -530,7 +530,7 @@
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -539,7 +539,7 @@
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -548,22 +548,22 @@
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>

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

@ -68,7 +68,7 @@
data-field="nama_ulp"
caption="Unit"
css-class="custom-table-column"
cell-template="cell-left"
cell-template="formatText"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
@ -469,8 +469,8 @@
/>
</DxSummary>
<template #data-waktu="{ data }">
<p class="cursor-pointer" @click="showDialogDataSelected()">
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -479,7 +479,7 @@
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<template #formatText="{ data }">
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
{{ data.text }}
</p>
@ -543,7 +543,7 @@
"
data-type="number"
caption="No"
cell-template="cellRight"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
@ -551,7 +551,7 @@
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -559,7 +559,7 @@
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -568,7 +568,7 @@
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -577,7 +577,7 @@
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -586,7 +586,7 @@
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -595,7 +595,7 @@
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -604,7 +604,7 @@
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -613,7 +613,7 @@
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="data-waktu"
cell-template="formatTime"
/>
<DxColumn
:width="150"
@ -622,7 +622,7 @@
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -631,7 +631,7 @@
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -640,7 +640,7 @@
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="200"
@ -649,7 +649,7 @@
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -658,7 +658,7 @@
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -667,7 +667,7 @@
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<DxColumn
:width="150"
@ -676,22 +676,22 @@
caption="Respon Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="cellLeft"
cell-template="formatText"
/>
<template #cellLeft="{ data }">
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>