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

fix: add margin bottom to all table

Browse Source
This commit is contained in:
kur0nek-o
2024-02-29 10:43:15 +07:00
parent c842088e63
commit cd1ca307d0
73 changed files with 9991 additions and 4764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Pages/Keluhan/Table_21.vue
View File

@ -5,7 +5,7 @@
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"

221
src/components/Pages/Keluhan/Table_22.vue
View File

@ -4,52 +4,176 @@
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :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="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<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="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="jumlah_lapor"
caption="Jml Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -113,7 +237,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -123,8 +252,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

201
src/components/Pages/Keluhan/Table_23.vue
View File

@ -4,49 +4,161 @@
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :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="data" />
<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="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -103,7 +215,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -113,8 +230,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

201
src/components/Pages/Keluhan/Table_24.vue
View File

@ -4,49 +4,161 @@
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :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="data" />
<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="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -104,7 +216,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -114,8 +231,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

211
src/components/Pages/Keluhan/Table_25.vue
View File

@ -4,50 +4,168 @@
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :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="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<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="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -105,7 +223,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -115,8 +238,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

218
src/components/Pages/Keluhan/Table_26.vue
View File

@ -4,52 +4,170 @@
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :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="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn
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="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
css-class="custom-table-column" cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_media"
caption="Tgl Media"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_media"
caption="Keterangan Media"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -77,13 +195,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -128,7 +255,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 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
class-name="flex-1 h-[56px]"
/>
</div>
</div>
</DetailDialog>

2
src/components/Pages/Keluhan/Table_27.vue
View File

@ -5,7 +5,7 @@
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"

346
src/components/Pages/Keluhan/Table_28.vue
View File

@ -1,56 +1,189 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
cell-template="data" header-cell-template="title-header" />
<DxColumn
:width="170"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="data"
header-cell-template="title-header"
/>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption="> SLA" css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Selesai"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="InProgress"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤ SLA"
css-class="custom-table-column"
cell-template="data"
/>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
css-class="custom-table-column" cell-template="data" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_recovery"
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_recovery"
data-type="number"
caption="≤ SLA"
css-class="custom-table-column"
cell-template="data"
/>
</DxColumn>
<template #data="{ data }">
<p class="cursor-pointer" @click="showDialog()">
@ -66,8 +199,12 @@
</DxDataGrid>
</div>
<DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
@on-close="closeDetailDialog">
<DetailDialog
:open="showDialogDetail"
:full-width="true"
title="Detail Rekapitulasi Keluhan All"
@on-close="closeDetailDialog"
>
<div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
<div class="flex flex-1 p-4 bg-white rounded-xl">
<div class="w-full">
@ -111,107 +248,77 @@
css-class="custom-table-column" />
</DxDataGrid> -->
</div>
</div>
<div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Laporan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tgl Lapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Dalam Proses Bidang:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Dalam Proses Bidang:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Selesai Bidang Unit:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Selesai Bidang Unit:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Response Time:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Status:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
IDPEL/NO METER::
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER::</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Nama Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Alamat Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Telp Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Keterangan Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Rayon:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Rayon:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Uraian:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Uraian:</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Response Pelanggan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Pelanggan:</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div>
</div>
</div>
</DetailDialog>
@ -300,41 +407,40 @@ const onExporting = (e: any) => {
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanAll
(
query rekapitulasiKeluhanAll(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanAll
(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
rekapitulasiKeluhanAll(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id_ulp
nama_ulp
total
total_selesai
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`
id_ulp
nama_ulp
total
total_selesai
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
@ -343,14 +449,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0

408
src/components/Pages/Keluhan/Table_29.vue
View File

@ -1,79 +1,214 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @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"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<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="fungsi_bidang" caption="Fungsi Bidang"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
<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="fungsi_bidang"
caption="Fungsi Bidang"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -83,14 +218,14 @@ import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -106,37 +241,37 @@ const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
@ -175,38 +310,39 @@ const GET_DATA = gql`
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
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
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 filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
</script>

460
src/components/Pages/Keluhan/Table_30.vue
View File

@ -1,79 +1,214 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @run-search="() => filterData(filters)" class="mb-4">
<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"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<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="tipe_keluhan" caption="Jenis Keluhan"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
<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="tipe_keluhan"
caption="Jenis Keluhan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -82,7 +217,16 @@ import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -95,110 +239,108 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerJenisKeluhan
(
query rekapitulasiKeluhanPerJenisKeluhan(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerJenisKeluhan
(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
rekapitulasiKeluhanPerJenisKeluhan(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
tipe_keluhan
total
total_selesai
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`;
tipe_keluhan
total
total_selesai
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
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,
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 filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
</script>

462
src/components/Pages/Keluhan/Table_31.vue
View File

@ -1,80 +1,214 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @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"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<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="kelompok" caption="Kelompok Keluhan"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
<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="kelompok"
caption="Kelompok Keluhan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -82,7 +216,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type13 from '@/components/Form/FiltersType/Type13.vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -95,109 +238,108 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerKelompokKeluhan
(
query rekapitulasiKeluhanPerKelompokKeluhan(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerKelompokKeluhan
(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
rekapitulasiKeluhanPerKelompokKeluhan(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
kelompok
total
total_selesai
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`;
kelompok
total
total_selesai
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
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,
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 filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
</script>
</script>

238
src/components/Pages/Keluhan/Table_32.vue
View File

@ -1,75 +1,209 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
<Type13 @update:filters="(value) => (filters = value)" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:data-source="data" :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"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:data-source="data"
: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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tanggal_lapor"
caption="Tanggal Lapor"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
@ -179,24 +313,26 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
}
console.log(queryResult.data)
console.log(queryResult.loading)

237
src/components/Pages/Keluhan/Table_33.vue
View File

@ -1,74 +1,209 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" />
<Type8 @update:filters="(value) => (filters = value)" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
@ -179,14 +314,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
@ -195,7 +334,6 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -204,6 +342,5 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
</script>

77
src/components/Pages/Keluhan/Table_34.vue
View File

@ -1,27 +1,67 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Nama Media"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
css-class="custom-table-column" />
<DxColumn
v-for="i in 31"
:width="150"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
@ -146,14 +186,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
@ -162,7 +206,6 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
}
console.log(queryResult.data)
console.log(queryResult.loading)

442
src/components/Pages/Keluhan/Table_35.vue
View File

@ -1,72 +1,199 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @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"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<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="150" alignment="center" data-field="regu" caption="Kode Unit"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
<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="150"
alignment="center"
data-field="regu"
caption="Kode Unit"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_idUlp"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="in_process"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_in_process"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_rating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_rating"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_1"
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_2"
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_3"
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_4"
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_5"
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="indeks_rating"
data-type="number"
caption="Indeks"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_non_rating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_non_rating"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -75,7 +202,16 @@ import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -88,111 +224,109 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanRatingPerUnit
(
query rekapitulasiKeluhanRatingPerUnit(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanRatingPerUnit
(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
rekapitulasiKeluhanRatingPerUnit(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_idUlp
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}`;
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_idUlp
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
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,
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 filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
</script>
</script>