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

Update CSS styles and table data fields

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-02-28 15:24:14 +07:00
parent 9d55d1f4bf
commit 266844b584
8 changed files with 374 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/assets/css/style.css
View File

@ -1525,6 +1525,10 @@ body {
height: 80vh;
}
.h-\[400px\] {
height: 400px;
}
.max-h-0 {
max-height: 0px;
}
@ -4284,11 +4288,6 @@ body {
border-color: rgb(104 157 170 / var(--tw-border-opacity));
}
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgb(99 102 241 / var(--tw-border-opacity));
}
.focus\:bg-gray-300\/10:focus {
background-color: rgb(209 213 219 / 0.1);
}
@ -5499,6 +5498,10 @@ body {
width: 100%;
}
.sm\:max-w-\[90\%\] {
max-width: 90%;
}
.sm\:max-w-lg {
max-width: 32rem;
}
@ -5899,6 +5902,10 @@ body {
width: 2.5rem;
}
.lg\:w-2\/6 {
width: 33.333333%;
}
.lg\:w-80 {
width: 20rem;
}
@ -5907,10 +5914,30 @@ body {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-nowrap {
flex-wrap: nowrap;
}
.lg\:justify-between {
justify-content: space-between;
}
.lg\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:border-b-0 {
border-bottom-width: 0px;
}

34
src/components/InputText.vue
View File

@ -42,33 +42,17 @@ const switchInputType = () => {
</script>
<template>
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
<input
autocomplete="off"
:type="inputType"
:placeholder="placeholder"
:value="value"
@input="updateValue($event)"
:disabled="disabled"
:readonly="readonly"
:class="[
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-200 ', className]">
<input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
:disabled="disabled" :readonly="readonly" :class="[
'w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0'
]"
/>
<span
@click="switchInputType"
v-if="type == 'password'"
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit"
>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']"
>
]" />
<span @click="switchInputType" v-if="type == 'password'"
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
<svg width="20" height="20" viewBox="0 0 20 20"
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
<path
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z"
/>
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
</svg>
</span>
</div>

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

@ -5,8 +5,8 @@
<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">
@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" />
@ -16,46 +16,204 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="idUlp" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
cell-template="data" />
<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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
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" />
css-class="custom-table-column" cell-template="data" />
</DxColumn>
<template #data="{ data }">
<span class="cursor-pointer" @click="showDialog()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<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">
<!-- <DxDataGrid class="w-full" :data-source="dataDetail" :column-auto-width="true" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onDataDetailSelectionChanged" @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" />
<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 :width="60" alignment="center" data-field="" caption="No" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan"
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="" data-type="number" caption="Selesai"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
@ -65,6 +223,7 @@ import {
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -81,8 +240,29 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
const dataSelected = ref<any>()
const dataDetailSelected = ref<any>()
const showDialogDetail = ref(false)
const dataDetail = ref<any[]>([])
const closeDetailDialog = () => {
showDialogDetail.value = false
}
const showDialog = () => {
showDialogDetail.value = true
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onDataDetailSelectionChanged = ({ selectedRowsData }: any) => {
dataDetailSelected.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -112,11 +292,6 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanAll
@ -135,30 +310,24 @@ query rekapitulasiKeluhanAll
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
idUlp
id_ulp
nama_ulp
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
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, {
@ -184,7 +353,6 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanAll
}
console.log(queryResult.data)
console.log(queryResult.loading)

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

@ -18,21 +18,21 @@
<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="fungsiBidang" caption="Fungsi Bidang"
<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="totalSelesai" data-type="number" caption="Jml"
<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="persenSelesai" data-type="number" caption="%"
<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="totalInProcess" data-type="number" caption="Jml"
<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="persenInProcess" data-type="number" caption="%"
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -40,17 +40,17 @@
<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="avgDurasiResponse" data-type="number"
<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="maxDurasiResponse" data-type="number"
<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="minDurasiResponse" data-type="number"
<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="totalDiatasSlaResponse" data-type="number"
<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="totalDibawahSlaResponse" data-type="number"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -58,17 +58,17 @@
<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="avgDurasiPenyelesaian" data-type="number"
<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="maxDurasiPenyelesaian" data-type="number"
<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="minDurasiPenyelesaian" data-type="number"
<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="totalDiatasSlaPenyelesaian" data-type="number"
<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="totalDibawahSlaPenyelesaian" data-type="number"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -155,24 +155,22 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
avgDurasiPenyelesaian
avgDurasiResponse
fungsiBidang
maxDurasiPenyelesaian
maxDurasiResponse
minDurasiPenyelesaian
minDurasiResponse
persenInProcess
persenSelesai
fungsi_bidang
total
totalDiatasSlaPenyelesaian
totalDiatasSlaResponse
totalDibawahSlaPenyelesaian
totalDibawahSlaResponse
totalDurasiPenyelesaian
totalDurasiResponse
totalInProcess
totalSelesai
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
}
}
`

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

@ -18,7 +18,7 @@
<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_permasalahan" caption="Jenis Keluhan"
<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"
@ -68,7 +68,7 @@
<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_recovery" data-type="number"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -147,27 +147,22 @@ query rekapitulasiKeluhanPerJenisKeluhan
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
tipe_keluhan
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
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, {

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

@ -18,21 +18,21 @@
<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="" caption="Kelompok Keluhan"
<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="" data-type="number" caption="Total"
<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="" data-type="number" caption="Jml"
<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="" data-type="number" caption="%"
<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="" data-type="number" caption="Jml"
<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="" data-type="number" caption="%"
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -40,36 +40,36 @@
<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="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" 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="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" 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>
@ -147,27 +147,22 @@ query rekapitulasiKeluhanPerKelompokKeluhan
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
kelompok
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
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, {

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

@ -18,7 +18,7 @@
<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" caption="Tanggal Lapor"
<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"
@ -153,29 +153,22 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tanggal
tanggal_lapor
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
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
}
}
`

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

@ -18,7 +18,7 @@
<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="idUlp" caption="Unit" 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" />
@ -152,29 +152,23 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
idUlp
id_ulp
nama_ulp
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
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
}
}
`