Update CSS styles and table data fields
This commit is contained in:
Dede Fuji Abdul
@ -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)
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@ -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, {
|
||||
|
||||
@ -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, {
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
Reference in New Issue
Block a user