Refactor CSS styles and fix formatting issues in MonalisaLK_EnergyNotSales.vue
This commit is contained in:
Dede Fuji Abdul
parent
d8d5dc9f5b
commit
99afd50f37
@ -74,4 +74,4 @@
|
||||
"vitest": "^1.3.1",
|
||||
"vue-tsc": "^2.0.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6058,10 +6058,6 @@ body {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.lg\:w-2\/6 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.lg\:w-80 {
|
||||
width: 20rem;
|
||||
}
|
||||
@ -6074,10 +6070,6 @@ body {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.lg\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.lg\:flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -6086,16 +6078,6 @@ body {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.lg\:justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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\:rounded-t-3xl {
|
||||
border-top-left-radius: 1.5rem;
|
||||
border-top-right-radius: 1.5rem;
|
||||
|
||||
@ -1,173 +1,534 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
<Type1 @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="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="false">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="false"
|
||||
>
|
||||
<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="200" alignment="center" data-field="user_regu" caption="User Regu"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
|
||||
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
|
||||
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
|
||||
caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
|
||||
caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
|
||||
caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_wo_penugasan_khusus" data-type="number"
|
||||
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="user_regu"
|
||||
caption="User Regu"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="personil_yantek"
|
||||
caption="Personil Yantek"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="jumlah_wo_gangguan_individual"
|
||||
data-type="number"
|
||||
caption="Jumlah WO Gangguan Individual"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_wo_gangguan_individual"
|
||||
data-type="number"
|
||||
caption="Rata-rata Durasi WO Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="avg_rpt_wo_gangguan_individual"
|
||||
data-type="number"
|
||||
caption="Rata-rata RPT WO Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="avg_rct_wo_gangguan_individual"
|
||||
data-type="number"
|
||||
caption="Rata-rata RCT WO Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="jumlah_wo_penugasan_khusus"
|
||||
data-type="number"
|
||||
caption="Jumlah Wo Penugasan Khusus"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="avg_wo_penugasan_khusus"
|
||||
data-type="number"
|
||||
caption="Rata-rata Durasi WO Penugasan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog :open="dialogDataSelected" title="Daftar Detail Jumlah WO Gangguan Individu"
|
||||
@on-close="closeDialogDataSelected" :full-width="true">
|
||||
|
||||
<DetailDialog
|
||||
:open="dialogDataSelected"
|
||||
title="Daftar Detail Jumlah WO Gangguan Individu"
|
||||
@on-close="closeDialogDataSelected"
|
||||
:full-width="true"
|
||||
>
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataSub" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="UP3" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Dispatch By" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Dispatch Time"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Shif" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Check In Petugas"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Penugasan Baru"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Dalam Perjalanan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Pengerjaan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Nyala Sementara"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Nyala" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Selesai" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi WO" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Check Out Petugas"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="RPT" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="RCT" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Rating" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Jml Pelanggan Padam"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Fasilitas" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sub Fasilitas"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Peralatan" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Dampak Kerusakan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Penyebab" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Kelompok Penyebab"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Cuaca" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Penyebab Padam"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tindakan" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="BLTH" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="UID/UIW"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="UP3"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Posko"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Created By"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Dispatch By"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Dispatch Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="User Regu"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Nama Regu"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Nama Petugas"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Shif"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Check In Petugas"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Penugasan Baru"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Dalam Perjalanan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Pengerjaan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Nyala Sementara"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Nyala"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Selesai"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Durasi Perjalanan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Durasi WO"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Check Out Petugas"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="RPT"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="RCT"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Rating"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Jml Pelanggan Padam"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Fasilitas"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Sub Fasilitas"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Peralatan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Dampak Kerusakan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Penyebab"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Kelompok Penyebab"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Cuaca"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Keterangan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Penyebab Padam"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tindakan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="APKT Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Referensi Marking"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="BLTH"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
|
||||
<div class="p-4 space-y-2 bg-white rounded-xl">
|
||||
@ -370,10 +731,8 @@
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">BLTH</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
@ -413,8 +772,8 @@ const dataSubSelected = ref<any>()
|
||||
const data = ref<any[]>([])
|
||||
const dataSub = ref<any[]>([])
|
||||
const dialogDataSelected = ref(false)
|
||||
const closeDialogDataSelected = () => dialogDataSelected.value = false
|
||||
const showDialogDataSelected = () => dialogDataSelected.value = true
|
||||
const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const showDialogDataSelected = () => (dialogDataSelected.value = true)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
@ -496,15 +855,15 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = [
|
||||
{
|
||||
"user_regu": "11110.REGU1",
|
||||
"personil_yantek": "11110_FAUZI",
|
||||
"jumlah_wo_gangguan_individual": 54,
|
||||
"avg_durasi_wo_gangguan_individual": 70.67,
|
||||
"avg_rpt_wo_gangguan_individual": 40.69,
|
||||
"avg_rct_wo_gangguan_individual": 71.61,
|
||||
"jumlah_wo_penugasan_khusus": 31,
|
||||
"avg_wo_penugasan_khusus": 63.79
|
||||
user_regu: '11110.REGU1',
|
||||
personil_yantek: '11110_FAUZI',
|
||||
jumlah_wo_gangguan_individual: 54,
|
||||
avg_durasi_wo_gangguan_individual: 70.67,
|
||||
avg_rpt_wo_gangguan_individual: 40.69,
|
||||
avg_rct_wo_gangguan_individual: 71.61,
|
||||
jumlah_wo_penugasan_khusus: 31,
|
||||
avg_wo_penugasan_khusus: 63.79
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,52 +1,169 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type16 @update:filters="(value) => filters = value" />
|
||||
<Type16 @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="" :column-width="100" @exporting="" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget">
|
||||
<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=""
|
||||
:column-width="100"
|
||||
@exporting=""
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<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" />
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||
caption="Tgl Response" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_posko"
|
||||
caption="Sumber Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media"
|
||||
caption="Tgl Media" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media"
|
||||
caption="Keterangan Media" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_media"
|
||||
caption="Tgl Media"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_media"
|
||||
caption="Keterangan Media"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer">
|
||||
@ -54,14 +171,14 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -135,4 +252,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,181 +1,342 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
</Filters>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="dataTable">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :remote-operations="true" :data-source="data"
|
||||
key-expr="no_laporan" :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">
|
||||
<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" />
|
||||
<DxSelection mode="single" />
|
||||
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-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" />
|
||||
<DxColumn css-class="custom-table-column !text-right" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
|
||||
caption="Tgl Dialihkan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||
caption="Tgl Response" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
|
||||
caption="Posko Asal" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
|
||||
caption="Posko Tujuan" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="250" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
||||
caption="Sumber Lapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
|
||||
caption="Posko" cell-template="cellLeft" />
|
||||
<div id="dataTable">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:remote-operations="true"
|
||||
:data-source="data"
|
||||
key-expr="no_laporan"
|
||||
: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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<DxSelection mode="single" />
|
||||
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-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"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column !text-right"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_dialihkan"
|
||||
caption="Tgl Dialihkan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko_lama"
|
||||
caption="Posko Asal"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko_baru"
|
||||
caption="Posko Tujuan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko_lama"
|
||||
caption="Posko"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog
|
||||
:open="showDetail"
|
||||
title="Daftar Gangguan Dialihkan ke Posko Lain"
|
||||
@on-close="closeDetail"
|
||||
>
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
class-name="flex-1"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
|
||||
<InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -183,13 +344,13 @@ import Filters from '@/components/Form/Filters.vue'
|
||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { onMounted, ref } from 'vue'
|
||||
@ -211,146 +372,146 @@ const showPane = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
const closeDetail = () => showDetail.value = false
|
||||
const closeDetail = () => (showDetail.value = false)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape',
|
||||
unit: 'mm',
|
||||
format: 'F4'
|
||||
})
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape',
|
||||
unit: 'mm',
|
||||
format: 'F4'
|
||||
})
|
||||
|
||||
// Initialize page number
|
||||
const pageNumber = ref(1)
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No Laporan',
|
||||
'Pembuat Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Dialihkan',
|
||||
'Tgl Response',
|
||||
'Tgl Recovery',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Posko Awal',
|
||||
'Posko Tujuan',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Sumber Lapor',
|
||||
'Posko'
|
||||
]
|
||||
],
|
||||
startY: 10,
|
||||
body: data.value.map((item) => [
|
||||
item.no_laporan,
|
||||
item.pembuat_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_dialihkan,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
item.durasi_recovery_time,
|
||||
item.nama_posko_lama,
|
||||
item.nama_posko_baru,
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.no_telp_pelapor,
|
||||
item.keterangan_pelapor,
|
||||
item.media,
|
||||
item.posko
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 6,
|
||||
cellWidth: 'wrap'
|
||||
}
|
||||
})
|
||||
doc.setProperties({
|
||||
title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
|
||||
subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
|
||||
})
|
||||
// Initialize page number
|
||||
const pageNumber = ref(1)
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No Laporan',
|
||||
'Pembuat Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Dialihkan',
|
||||
'Tgl Response',
|
||||
'Tgl Recovery',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Posko Awal',
|
||||
'Posko Tujuan',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Sumber Lapor',
|
||||
'Posko'
|
||||
]
|
||||
],
|
||||
startY: 10,
|
||||
body: data.value.map((item) => [
|
||||
item.no_laporan,
|
||||
item.pembuat_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_dialihkan,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
item.durasi_recovery_time,
|
||||
item.nama_posko_lama,
|
||||
item.nama_posko_baru,
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.no_telp_pelapor,
|
||||
item.keterangan_pelapor,
|
||||
item.media,
|
||||
item.posko
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 6,
|
||||
cellWidth: 'wrap'
|
||||
}
|
||||
})
|
||||
doc.setProperties({
|
||||
title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
|
||||
subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
|
||||
})
|
||||
|
||||
pageNumber.value++ // Increment the pageNumber
|
||||
doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
||||
pageNumber.value++ // Increment the pageNumber
|
||||
doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
||||
|
||||
// exportToPdf({
|
||||
// jsPDFDocument: doc,
|
||||
// component: e.component,
|
||||
// }).then(() => {
|
||||
// doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
||||
// exportToPdf({
|
||||
// jsPDFDocument: doc,
|
||||
// component: e.component,
|
||||
// }).then(() => {
|
||||
// doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
||||
|
||||
// })
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
|
||||
// })
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
'DaftarGangguanDialihkanKePoskoLain.xlsx'
|
||||
)
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
'DaftarGangguanDialihkanKePoskoLain.xlsx'
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
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),
|
||||
posko: posko ? posko.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
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),
|
||||
posko: posko ? posko.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.daftar.dataDialihkanKePoskoLain,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
queries.gangguan.daftar.dataDialihkanKePoskoLain,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
}
|
||||
const showData = () => showDetail.value = true
|
||||
const showData = () => (showDetail.value = true)
|
||||
const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
|
||||
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,52 +1,169 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
<Type1 @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="" :column-width="100" @exporting="" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget">
|
||||
<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=""
|
||||
:column-width="100"
|
||||
@exporting=""
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<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" />
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||
caption="Tgl Response" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
||||
caption="Sumber Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer">
|
||||
@ -54,14 +171,14 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -137,4 +254,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,53 +1,175 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type6 @update:filters="(value) => filters = value" />
|
||||
<Type6 @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="" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget">
|
||||
<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=""
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<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.sync="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.sync="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||
caption="Tgl Response" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
||||
caption="Sumber Lapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
||||
cell-template="cellLeft" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<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
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
alignment="center"
|
||||
data-field="jumlah_lapor"
|
||||
caption="Jml Lapor"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
@ -55,27 +177,31 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showData()">
|
||||
{{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
|
||||
<DetailDialog
|
||||
:open="showDetail"
|
||||
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
|
||||
@on-close="closeDetail"
|
||||
>
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
@ -104,18 +230,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
class-name="flex-1"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -155,7 +291,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.nama_posko"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -197,19 +338,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
dataDetail.value = data
|
||||
}
|
||||
|
||||
const showData = () => showDetail.value = true
|
||||
const showData = () => (showDetail.value = true)
|
||||
|
||||
const closeDetail = () => showDetail.value = false
|
||||
const closeDetail = () => (showDetail.value = false)
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.melaporLebihDariSatuKali, {
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 1,
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.daftar.melaporLebihDariSatuKali,
|
||||
{
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 1,
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
|
||||
@ -243,4 +387,4 @@ const filterData = (params: any) => {
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,67 +1,193 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type7 @update:filters="(value) => filters = value" :sla-options="[
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
|
||||
min: '1',
|
||||
max: '180'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 3 Jam)',
|
||||
min: '181',
|
||||
max: `${99999 * 60 * 24}`
|
||||
}
|
||||
]" />
|
||||
<Type7
|
||||
@update:filters="(value) => (filters = value)"
|
||||
:sla-options="[
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
|
||||
min: '1',
|
||||
max: '180'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 3 Jam)',
|
||||
min: '181',
|
||||
max: `${99999 * 60 * 24}`
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</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"
|
||||
:column-width="100" @exporting="" :allow-column-resizing="true" @selection-changed="onSelectionChanged"
|
||||
column-resizing-mode="widget">
|
||||
<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"
|
||||
:column-width="100"
|
||||
@exporting=""
|
||||
:allow-column-resizing="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<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" />
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||
caption="Tgl Response" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
|
||||
caption="Referensi Marking" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
||||
caption="Sumber Lapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="referensi_marking"
|
||||
caption="Referensi Marking"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
@ -69,14 +195,14 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -107,18 +233,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
class-name="flex-1"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -158,17 +294,32 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.nama_posko"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.penyebab"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.tindakan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -183,13 +334,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
@ -208,13 +359,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
dataDetail.value = data
|
||||
}
|
||||
|
||||
const showData = () => showDetail.value = true
|
||||
const showData = () => (showDetail.value = true)
|
||||
|
||||
const closeDetail = () => showDetail.value = false
|
||||
const closeDetail = () => (showDetail.value = false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { minTime, maxTime, posko, uid, up3 } = params
|
||||
console.table(params);
|
||||
console.table(params)
|
||||
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
@ -242,7 +393,6 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
|
||||
@ -1,53 +1,170 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type7 @update:filters="(value) => filters = value" />
|
||||
<Type7 @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="" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget">
|
||||
<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=""
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<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" />
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
cell-template="cellCenter" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||
caption="Tgl Response" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
|
||||
caption="Referensi Marking" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="referensi_marking"
|
||||
caption="Referensi Marking"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
@ -55,14 +172,14 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -93,18 +210,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
class-name="flex-1"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -144,17 +271,32 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.nama_posko"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.penyebab"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.tindakan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -194,9 +336,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
dataDetail.value = data
|
||||
}
|
||||
|
||||
const showData = () => showDetail.value = true
|
||||
const showData = () => (showDetail.value = true)
|
||||
|
||||
const closeDetail = () => showDetail.value = false
|
||||
const closeDetail = () => (showDetail.value = false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { minTime, maxTime, posko, uid, up3 } = params
|
||||
|
||||
@ -1,52 +1,169 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
<Type1 @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="" :column-width="100" @exporting="" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget">
|
||||
<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=""
|
||||
:column-width="100"
|
||||
@exporting=""
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<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" />
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||
caption="Tgl Response" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
||||
caption="Status" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
||||
caption="Sumber Lapor" cell-template="cellCenter" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer">
|
||||
@ -54,14 +171,14 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -94,13 +211,16 @@ const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.selesaiTanpaIDPelanggan, {
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.daftar.selesaiTanpaIDPelanggan,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn
|
||||
@ -70,7 +70,7 @@
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
name="namaUnit"
|
||||
:group-index="0"
|
||||
/>
|
||||
@ -80,7 +80,7 @@
|
||||
data-field="nama_regional"
|
||||
caption="Regional"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
:group-index="1"
|
||||
/>
|
||||
<DxColumn
|
||||
@ -89,7 +89,7 @@
|
||||
data-field="nama_uid"
|
||||
caption="UID"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
:group-index="2"
|
||||
/>
|
||||
<DxColumn
|
||||
@ -98,7 +98,7 @@
|
||||
data-field="nama_up3"
|
||||
caption="UP3"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
:group-index="3"
|
||||
/>
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
caption="Total"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -119,7 +119,7 @@
|
||||
caption="Selesai"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -129,7 +129,7 @@
|
||||
caption="%"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -139,7 +139,7 @@
|
||||
caption="In Progress"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -149,7 +149,7 @@
|
||||
caption="%"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -160,7 +160,7 @@
|
||||
caption="Rata-Rata"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -170,7 +170,7 @@
|
||||
caption="Max"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -180,7 +180,7 @@
|
||||
caption="Min"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -190,7 +190,7 @@
|
||||
caption=">SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -200,7 +200,7 @@
|
||||
caption="≤SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
@ -212,7 +212,7 @@
|
||||
caption="Rata-Rata"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -222,7 +222,7 @@
|
||||
caption="Max"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -232,7 +232,7 @@
|
||||
caption="Min"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -242,7 +242,7 @@
|
||||
caption=">SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -252,7 +252,7 @@
|
||||
caption="≤SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
@ -264,7 +264,7 @@
|
||||
caption="Rata-Rata"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -274,7 +274,7 @@
|
||||
caption="Max"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -284,7 +284,7 @@
|
||||
caption="Min"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -294,7 +294,7 @@
|
||||
caption=">SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -304,7 +304,7 @@
|
||||
caption="≤SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
@ -314,13 +314,13 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
@ -332,7 +332,7 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
@ -560,7 +560,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -568,7 +568,7 @@
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -576,7 +576,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -584,7 +584,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl/Jam Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -593,7 +593,7 @@
|
||||
caption="Tgl/Jam Datang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -602,7 +602,7 @@
|
||||
caption="Tgl/Jam Nyala"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -611,7 +611,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -620,7 +620,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -629,7 +629,7 @@
|
||||
caption="Durasi Penugasan Regu"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -638,7 +638,7 @@
|
||||
caption="Durasi Perjalanan Regu"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -647,7 +647,7 @@
|
||||
caption="Jarak Closing (m)"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -656,7 +656,7 @@
|
||||
caption="Dispatch Oleh"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -665,7 +665,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -674,7 +674,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -683,7 +683,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -692,7 +692,7 @@
|
||||
caption="No Telp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -701,7 +701,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -710,7 +710,7 @@
|
||||
caption="Sumber Lapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -719,7 +719,7 @@
|
||||
caption="Diselesaikan Oleh"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -728,7 +728,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -737,7 +737,7 @@
|
||||
caption="Referensi Marking"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -746,7 +746,7 @@
|
||||
caption="Kode Gangguan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -755,7 +755,7 @@
|
||||
caption="Jenis Gangguan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -764,7 +764,7 @@
|
||||
caption="Penyebab"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -773,22 +773,22 @@
|
||||
caption="Tindakan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
|
||||
@ -1,43 +1,121 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type1 @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" @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"
|
||||
@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 css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
name="number" cell-template="cellRight" />
|
||||
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
|
||||
css-class="custom-table-column" :group-index="0" />
|
||||
<DxColumn alignment="center" :min-width="180" data-field="nama_posko" caption="Nama Posko"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="180" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn :width="180" alignment="center" data-field="posko_out" caption="Posko OUT"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
name="number"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:min-width="180"
|
||||
data-field="nama_up3"
|
||||
caption="Nama UP3"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:min-width="180"
|
||||
data-field="nama_up3"
|
||||
caption="Nama UP3"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:min-width="180"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Posko"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="180"
|
||||
alignment="center"
|
||||
data-field="posko_in"
|
||||
caption="Posko IN"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="180"
|
||||
alignment="center"
|
||||
data-field="posko_out"
|
||||
caption="Posko OUT"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem :show-in-group-footer="true" column="number" display-format="Total" css-class="!text-left" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="posko_in" summary-type="sum" display-format="{0}"
|
||||
css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="posko_out" summary-type="sum" display-format="{0}"
|
||||
css-class="!text-right" />
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="number"
|
||||
display-format="Total"
|
||||
css-class="!text-left"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="posko_in"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="posko_out"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
@ -46,17 +124,21 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
@ -169,4 +251,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,33 +1,88 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type1 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :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 css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
data-field="no" cell-template="cellRight" />
|
||||
<DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="cellLeft"
|
||||
css-class="custom-table-column" header-cell-template="title-header" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
data-field="no"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
data-field="media"
|
||||
caption="Nama Media"
|
||||
alignment="center"
|
||||
cell-template="formatText"
|
||||
css-class="custom-table-column"
|
||||
header-cell-template="title-header"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||
<DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number"
|
||||
:caption="i" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
v-for="i in 31"
|
||||
:width="100"
|
||||
alignment="center"
|
||||
:data-field="`tgl${i}`"
|
||||
data-type="number"
|
||||
:caption="i"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer">
|
||||
@ -35,17 +90,21 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
@ -56,12 +115,26 @@
|
||||
</template>
|
||||
|
||||
<DxSummary>
|
||||
<DxTotalItem display-format="Call PLN 123" show-in-column="media" css-class="text-white !text-left" />
|
||||
<DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
|
||||
<DxTotalItem
|
||||
display-format="Call PLN 123"
|
||||
show-in-column="media"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
v-for="i in 31"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
:column="`tgl${i}`"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
@ -174,4 +247,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,123 +1,383 @@
|
||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
|
||||
|
||||
<template>
|
||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type1 @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">
|
||||
<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"
|
||||
>
|
||||
<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" />
|
||||
<DxGroupPanel :visible="true" />
|
||||
<DxGrouping :auto-expand-all="true" />
|
||||
|
||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="120" alignment="center" data-field="sub_kelompok" caption="Kelompok"
|
||||
css-class="custom-table-column" group-index="0" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="60"
|
||||
alignment="center"
|
||||
data-field="no"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="kode"
|
||||
caption="Kode"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="sub_kelompok"
|
||||
caption="Kelompok"
|
||||
css-class="custom-table-column"
|
||||
group-index="0"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jenisGangguan"
|
||||
caption="Jenis Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
|
||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
|
||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.jml"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.persen"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
|
||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
|
||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.jml"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.persen"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.rataRata"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.max"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.min"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.lebihSla"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.kurangSla"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.rataRata"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.max"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.min"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.lebihSla"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.kurangSla"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
|
||||
cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
|
||||
display-format="{0}" cell-template="cellRight" />
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="no"
|
||||
display-format="Total"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.jml"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.persen"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.jml"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.persen"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.rataRata"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.max"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.min"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.rataRata"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.max"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.min"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
@ -126,22 +386,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -244,51 +508,49 @@ const filterData = (params: any) => {
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiPerJenisGangguan.map(
|
||||
(item: any, index: number) => {
|
||||
return {
|
||||
no: ++index,
|
||||
sub_kelompok: item.sub_kelompok,
|
||||
kode: item.kode,
|
||||
jenisGangguan: item.tipe_permasalahan,
|
||||
data.value = queryResult.data.rekapitulasiPerJenisGangguan.map((item: any, index: number) => {
|
||||
return {
|
||||
no: ++index,
|
||||
sub_kelompok: item.sub_kelompok,
|
||||
kode: item.kode,
|
||||
jenisGangguan: item.tipe_permasalahan,
|
||||
laporan: {
|
||||
total: item.total,
|
||||
sudahSelesai: {
|
||||
jml: item.total_selesai,
|
||||
persen: item.persen_selesai
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: item.total_inproses,
|
||||
persen: item.persen_inproses
|
||||
}
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_response,
|
||||
rataRata: item.avg_durasi_response,
|
||||
max: item.max_durasi_response,
|
||||
min: item.min_durasi_response
|
||||
},
|
||||
laporan: {
|
||||
total: item.total,
|
||||
sudahSelesai: {
|
||||
jml: item.total_selesai,
|
||||
persen: item.persen_selesai
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: item.total_inproses,
|
||||
persen: item.persen_inproses
|
||||
}
|
||||
lebihSla: item.total_diatas_sla_response,
|
||||
kurangSla: item.total_dibawah_sla_response
|
||||
}
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_recovery,
|
||||
rataRata: item.avg_durasi_recovery,
|
||||
max: item.max_durasi_recovery,
|
||||
min: item.min_durasi_recovery
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_response,
|
||||
rataRata: item.avg_durasi_response,
|
||||
max: item.max_durasi_response,
|
||||
min: item.min_durasi_response
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_response,
|
||||
kurangSla: item.total_dibawah_sla_response
|
||||
}
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_recovery,
|
||||
rataRata: item.avg_durasi_recovery,
|
||||
max: item.max_durasi_recovery,
|
||||
min: item.min_durasi_recovery
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_recovery,
|
||||
kurangSla: item.total_dibawah_sla_recovery
|
||||
}
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_recovery,
|
||||
kurangSla: item.total_dibawah_sla_recovery
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
|
||||
@ -1,81 +1,245 @@
|
||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
|
||||
|
||||
<template>
|
||||
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type1 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :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 css-class="custom-table-column" :width="60" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
|
||||
cell-template="cellCenter" />
|
||||
<DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="60"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="kode"
|
||||
caption="Kode"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="sub_kelompok"
|
||||
caption="Sub Kelompok (Equipment)"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_selesai"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_selesai"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_inproses"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_inproses"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_durasi_response"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_response"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="max_durasi_response"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="min_durasi_response"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_diatas_sla_response"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_dibawah_sla_response"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="max_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="min_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_diatas_sla_recovery"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_dibawah_sla_recovery"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
@ -85,22 +249,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -169,13 +337,16 @@ const onExporting = (e: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguanSE004, {
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.rekap.jenisGangguanSE004,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
|
||||
@ -1,156 +1,485 @@
|
||||
<!-- Rekapitulasi Gangguan Per Posko -->
|
||||
|
||||
<template>
|
||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type8 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
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">
|
||||
<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="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
|
||||
css-class="custom-table-column" :group-index="0" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="60"
|
||||
alignment="center"
|
||||
data-field="no"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
name="poskoGroup"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
|
||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
|
||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.jml"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.persen"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
|
||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
|
||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.jml"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.persen"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.rataRata"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.max"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.min"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.lebihSla"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.kurangSla"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.rataRata"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.max"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.min"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.lebihSla"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.kurangSla"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
|
||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
|
||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="avg"
|
||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="no"
|
||||
display-format="Total"
|
||||
css-class="!text-left"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.total"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.jml"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.persen"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.jml"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.persen"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.total"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.min"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.total"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.min"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
|
||||
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white !text-right" />
|
||||
<DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
show-in-column="laporan.total"
|
||||
column="laporan.total"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.sudahSelesai.jml"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.sudahSelesai.persen"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.belumSelesai.jml"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.belumSelesai.persen"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.total"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.min"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.total"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.min"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
@ -159,22 +488,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -328,46 +661,48 @@ const filterData = (params: any) => {
|
||||
|
||||
const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map((item: any, index: number) => {
|
||||
return {
|
||||
no: ++index,
|
||||
nama_posko: item.nama_posko,
|
||||
laporan: {
|
||||
total: item.total,
|
||||
sudahSelesai: {
|
||||
jml: item.total_selesai,
|
||||
persen: item.persen_selesai
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: item.total_inproses,
|
||||
persen: item.persen_inproses
|
||||
}
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_response,
|
||||
rataRata: item.avg_durasi_response,
|
||||
max: item.max_durasi_response,
|
||||
min: item.min_durasi_response
|
||||
},
|
||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
|
||||
(item: any, index: number) => {
|
||||
return {
|
||||
no: ++index,
|
||||
nama_posko: item.nama_posko,
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_response,
|
||||
kurangSla: item.total_dibawah_sla_response
|
||||
}
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_recovery,
|
||||
rataRata: item.avg_durasi_recovery,
|
||||
max: item.max_durasi_recovery,
|
||||
min: item.min_durasi_recovery
|
||||
total: item.total,
|
||||
sudahSelesai: {
|
||||
jml: item.total_selesai,
|
||||
persen: item.persen_selesai
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: item.total_inproses,
|
||||
persen: item.persen_inproses
|
||||
}
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_recovery,
|
||||
kurangSla: item.total_dibawah_sla_recovery
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_response,
|
||||
rataRata: item.avg_durasi_response,
|
||||
max: item.max_durasi_response,
|
||||
min: item.min_durasi_response
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_response,
|
||||
kurangSla: item.total_dibawah_sla_response
|
||||
}
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_recovery,
|
||||
rataRata: item.avg_durasi_recovery,
|
||||
max: item.max_durasi_recovery,
|
||||
min: item.min_durasi_recovery
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_recovery,
|
||||
kurangSla: item.total_dibawah_sla_recovery
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,156 +1,490 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type9 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type9 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :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="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
|
||||
group-index="0" v-if="filters.groupBy" />
|
||||
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn :width="200" alignment="center" data-field="nama_regu" caption="Nama Regu"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="60"
|
||||
alignment="center"
|
||||
data-field="no"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="kode_regu"
|
||||
caption="Kode"
|
||||
css-class="custom-table-column"
|
||||
group-index="0"
|
||||
v-if="filters.groupBy"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kode_regu"
|
||||
caption="Kode"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="nama_regu"
|
||||
caption="Nama Regu"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
|
||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
|
||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.jml"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.persen"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
|
||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
|
||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.jml"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.persen"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.rataRata"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.max"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.min"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.lebihSla"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.kurangSla"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.rataRata"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.max"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.min"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.lebihSla"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.kurangSla"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
|
||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
|
||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="avg"
|
||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="no"
|
||||
display-format="Total"
|
||||
css-class="!text-left"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.total"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.jml"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.persen"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.jml"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.persen"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.total"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.min"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.total"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.min"
|
||||
summary-type="avg"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
css-class="!text-right"
|
||||
/>
|
||||
|
||||
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white !text-right" />
|
||||
<DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
||||
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
<DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
show-in-column="laporan.total"
|
||||
column="laporan.total"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.sudahSelesai.jml"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.sudahSelesai.persen"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.belumSelesai.jml"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="laporan.belumSelesai.persen"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.total"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.menit.min"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="responseTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.total"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.rataRata"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.max"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.menit.min"
|
||||
summary-type="avg"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="recoveryTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
@ -159,22 +493,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -331,47 +669,49 @@ const filters = ref({
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map((item: any, index: number) => {
|
||||
return {
|
||||
no: ++index,
|
||||
kode_regu: item.kode_regu,
|
||||
nama_regu: item.nama_regu,
|
||||
laporan: {
|
||||
total: item.total,
|
||||
sudahSelesai: {
|
||||
jml: item.total_selesai,
|
||||
persen: item.persen_selesai
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: item.total_inproses,
|
||||
persen: item.persen_inproses
|
||||
}
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_response,
|
||||
rataRata: item.avg_durasi_response,
|
||||
max: item.max_durasi_response,
|
||||
min: item.min_durasi_response
|
||||
},
|
||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
|
||||
(item: any, index: number) => {
|
||||
return {
|
||||
no: ++index,
|
||||
kode_regu: item.kode_regu,
|
||||
nama_regu: item.nama_regu,
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_response,
|
||||
kurangSla: item.total_dibawah_sla_response
|
||||
}
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_recovery,
|
||||
rataRata: item.avg_durasi_recovery,
|
||||
max: item.max_durasi_recovery,
|
||||
min: item.min_durasi_recovery
|
||||
total: item.total,
|
||||
sudahSelesai: {
|
||||
jml: item.total_selesai,
|
||||
persen: item.persen_selesai
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: item.total_inproses,
|
||||
persen: item.persen_inproses
|
||||
}
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_recovery,
|
||||
kurangSla: item.total_dibawah_sla_recovery
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_response,
|
||||
rataRata: item.avg_durasi_response,
|
||||
max: item.max_durasi_response,
|
||||
min: item.min_durasi_response
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_response,
|
||||
kurangSla: item.total_dibawah_sla_response
|
||||
}
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_recovery,
|
||||
rataRata: item.avg_durasi_recovery,
|
||||
max: item.max_durasi_recovery,
|
||||
min: item.min_durasi_recovery
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_recovery,
|
||||
kurangSla: item.total_dibawah_sla_recovery
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,80 +1,244 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type9 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type9 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :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 css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="nama_uid" caption="Nama UID" css-class="custom-table-column"
|
||||
group-index="0" v-if="filters.groupBy" />
|
||||
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="Nama UID"
|
||||
css-class="custom-table-column"
|
||||
group-index="0"
|
||||
v-if="filters.groupBy"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="tanggal"
|
||||
caption="Tanggal Lapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_selesai"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_selesai"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_inproses"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_inproses"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_durasi_response"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_response"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="max_durasi_response"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="min_durasi_response"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_diatas_sla_response"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_dibawah_sla_response"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="max_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="min_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_diatas_sla_recovery"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_dibawah_sla_recovery"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
@ -84,22 +248,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -173,13 +341,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerTanggal, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.rekap.gangguanPerTanggal,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { posko, uid, up3 } = params
|
||||
@ -211,4 +382,4 @@ const filters = ref({ groupBy: false })
|
||||
onMounted(() => {
|
||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,64 +1,182 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="false"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||
:show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Response Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_media"
|
||||
caption="Tgl Media"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_media"
|
||||
caption="Keterangan Media"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -84,12 +202,22 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -114,18 +242,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -140,7 +278,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_media"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -224,13 +367,16 @@ const onExporting = (e: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanBerdasarkanMedia, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.daftar.keluhanBerdasarkanMedia,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
|
||||
@ -1,56 +1,175 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||
:show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||
cell-template="cellRight" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column !align-top" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column !align-top" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column !align-top" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column !align-top" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column !align-top" cell-template="data-waktu" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column !align-top" cell-template="data-waktu" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column !align-top" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column !align-top"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_dialihkan"
|
||||
caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column !align-top"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column !align-top"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column !align-top"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_unit_lama"
|
||||
caption="Unit Asal"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column !align-top"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer">
|
||||
@ -58,22 +177,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p>
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -192,4 +315,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,55 +1,179 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type10 @update:filters="(value) => filters = value" />
|
||||
<Type10 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="false"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||
:show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
||||
css-class="custom-table-column" cell-template="cellRight" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="jumlah_lapor"
|
||||
caption="Jml Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
@ -57,22 +181,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showData()">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -108,18 +236,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -139,7 +277,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -149,7 +292,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -244,15 +392,18 @@ const onExporting = (e: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, {
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 100,
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali,
|
||||
{
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 100,
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
@ -289,4 +440,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,62 +1,173 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => filters = value" />
|
||||
<Type11 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="false"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||
:show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -87,18 +198,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -118,7 +239,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -128,7 +254,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -222,15 +353,18 @@ const onExporting = (e: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanRecoveryTime, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
minDurasiRecoveryTime: 0,
|
||||
maxDurasiRecoveryTime: 0,
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.daftar.keluhanRecoveryTime,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
minDurasiRecoveryTime: 0,
|
||||
maxDurasiRecoveryTime: 0,
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
@ -265,4 +399,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,52 +1,164 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => filters = value" />
|
||||
<Type11 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="false"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||
:show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
@ -54,22 +166,26 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showData()">
|
||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||
formatNumber(data.text) :
|
||||
data.text }}
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -100,18 +216,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -131,7 +257,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -141,7 +272,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -236,15 +372,18 @@ const onExporting = (e: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanResponseTime, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
minDurasiResponseTime: 0,
|
||||
maxDurasiResponseTime: 0,
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.daftar.keluhanResponseTime,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
minDurasiResponseTime: 0,
|
||||
maxDurasiResponseTime: 0,
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
@ -280,4 +419,4 @@ const filters = ref()
|
||||
onMounted(() => {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,62 +1,180 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="false"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||
:show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data-waktu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||
cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showData()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showData()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -87,18 +205,28 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_response_time)
|
||||
? formatWaktu(dataDetail?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataDetail?.durasi_recovery_time)
|
||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -118,7 +246,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -128,7 +261,12 @@
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
@ -222,13 +360,16 @@ const onExporting = (e: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
|
||||
@ -1,61 +1,190 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||
:show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP"
|
||||
css-class="custom-table-column !align-top" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column !align-top"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Contact Center"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="UI Dist."
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="ULP"
|
||||
css-class="custom-table-column !align-top"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
|
||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Tlp Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="APKT Status"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Created By"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Penyelesaian"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="jumlah_lapor"
|
||||
caption="Lapor Ulang"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_issuetype"
|
||||
caption="Issue Type"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_subissuetype"
|
||||
caption="Sub Issue Type"
|
||||
css-class="custom-table-column !align-top"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -128,13 +257,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanDiselesaikanCC123, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.daftar.keluhanDiselesaikanCC123,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const filters = ref()
|
||||
|
||||
const filterData = (params: any) => {
|
||||
@ -169,4 +301,4 @@ const filterData = (params: any) => {
|
||||
onMounted(() => {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -72,7 +72,7 @@
|
||||
data-type="number"
|
||||
caption="Selesai"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -81,7 +81,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -90,7 +90,7 @@
|
||||
data-type="number"
|
||||
caption="InProgress"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -99,7 +99,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -108,7 +108,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -135,7 +135,7 @@
|
||||
data-type="number"
|
||||
caption="> SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -144,7 +144,7 @@
|
||||
data-type="number"
|
||||
caption="≤ SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
@ -155,7 +155,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -182,7 +182,7 @@
|
||||
data-type="number"
|
||||
caption="> SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -191,22 +191,30 @@
|
||||
data-type="number"
|
||||
caption="≤ SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="defaults"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #defaults="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -269,7 +277,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -277,7 +285,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -285,7 +293,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -294,7 +302,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -303,7 +311,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -312,7 +320,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -321,7 +329,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -330,7 +338,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -339,7 +347,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -348,7 +356,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -357,7 +365,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -366,7 +374,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -375,7 +383,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -384,7 +392,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -393,7 +401,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -402,22 +410,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
@ -581,6 +589,7 @@ import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { dummyData } from '@/utils/dummy'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
data-field="media"
|
||||
caption="Nama Media"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cell-left"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -94,7 +94,7 @@
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -158,7 +158,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -166,7 +166,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -174,7 +174,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -183,7 +183,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -192,7 +192,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -201,7 +201,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -210,7 +210,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -219,7 +219,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -228,7 +228,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -237,7 +237,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -246,7 +246,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -255,7 +255,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -264,7 +264,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -273,7 +273,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -282,7 +282,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -291,22 +291,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
data-type="number"
|
||||
data-field="no"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<!-- <DxColumn
|
||||
:width="120"
|
||||
@ -68,7 +69,7 @@
|
||||
data-field="fungsi_bidang"
|
||||
caption="Fungsi Bidang"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cell-left"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -78,6 +79,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -87,6 +89,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -95,7 +98,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
@ -106,6 +109,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -114,7 +118,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -127,6 +131,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -135,6 +140,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -143,7 +149,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -152,7 +158,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -163,6 +169,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -171,6 +178,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -183,6 +191,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -191,6 +200,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -199,7 +209,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -208,7 +218,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -219,6 +229,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -227,6 +238,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -236,122 +248,137 @@
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}%"
|
||||
column="persen_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}%"
|
||||
column="persen_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
<template #percent="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
<template #cell-left="{ data }">
|
||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -414,7 +441,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -422,7 +449,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -430,7 +457,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -439,7 +466,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -448,7 +475,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -457,7 +484,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -466,7 +493,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -475,7 +502,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -484,7 +511,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -493,7 +520,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -502,7 +529,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -511,7 +538,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -520,7 +547,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -529,7 +556,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -538,7 +565,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -547,22 +574,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
@ -728,6 +755,7 @@ import { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { dummyData } from '@/utils/dummy'
|
||||
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
data-field="tipe_keluhan"
|
||||
caption="Jenis Keluhan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cell-left"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<!-- <DxColumn
|
||||
:width="170"
|
||||
@ -142,7 +142,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -151,7 +151,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -198,7 +198,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -207,7 +207,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -468,8 +468,8 @@
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -478,7 +478,7 @@
|
||||
<p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -542,7 +542,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -550,7 +550,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -558,7 +558,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -567,7 +567,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -576,7 +576,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -585,7 +585,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -594,7 +594,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -603,7 +603,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -612,7 +612,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -621,7 +621,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -630,7 +630,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -639,7 +639,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -648,7 +648,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -657,7 +657,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -666,7 +666,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -675,22 +675,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
data-field="kelompok"
|
||||
caption="Kelompok Keluhan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cell-left"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -143,7 +143,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -152,7 +152,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -199,7 +199,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -208,7 +208,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -342,8 +342,8 @@
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -352,7 +352,7 @@
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -416,7 +416,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -424,7 +424,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -432,7 +432,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -441,7 +441,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -450,7 +450,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -459,7 +459,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -468,7 +468,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -477,7 +477,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -486,7 +486,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -495,7 +495,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -504,7 +504,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -513,7 +513,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -522,7 +522,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -531,7 +531,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -540,7 +540,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -549,22 +549,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
data-field="tanggal_lapor"
|
||||
caption="Tanggal Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cell-left"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
@ -142,7 +142,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -151,7 +151,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -198,7 +198,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -207,7 +207,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -341,8 +341,8 @@
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -351,7 +351,7 @@
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -415,7 +415,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -423,7 +423,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -431,7 +431,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -440,7 +440,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -449,7 +449,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -458,7 +458,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -467,7 +467,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -476,7 +476,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -485,7 +485,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -494,7 +494,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -503,7 +503,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -512,7 +512,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -521,7 +521,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -530,7 +530,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -539,7 +539,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -548,22 +548,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
data-field="nama_ulp"
|
||||
caption="Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cell-left"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -469,8 +469,8 @@
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -479,7 +479,7 @@
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -543,7 +543,7 @@
|
||||
"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="cellRight"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -551,7 +551,7 @@
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -559,7 +559,7 @@
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -568,7 +568,7 @@
|
||||
caption="Dalam Proses Bidang"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -577,7 +577,7 @@
|
||||
caption="Selesai Bidang Unit"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -586,7 +586,7 @@
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -595,7 +595,7 @@
|
||||
caption="Durasi Recovery Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -604,7 +604,7 @@
|
||||
caption="Status"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -613,7 +613,7 @@
|
||||
caption="IDPEL/NO METER"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -622,7 +622,7 @@
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -631,7 +631,7 @@
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -640,7 +640,7 @@
|
||||
caption="No Tlp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
@ -649,7 +649,7 @@
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -658,7 +658,7 @@
|
||||
caption="Rayon"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -667,7 +667,7 @@
|
||||
caption="Uraian"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -676,22 +676,22 @@
|
||||
caption="Respon Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellLeft"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #cellLeft="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #cellRight="{ data }">
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #data-waktu="{ data }">
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
|
||||
@ -1,54 +1,139 @@
|
||||
<template>
|
||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type2 @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" @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"
|
||||
@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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||
<DxColumn :min-width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Gangguan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_recovery_gangguan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="sla_gangguan"
|
||||
data-type="number"
|
||||
caption="SLA (Menit)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_recovery_keluhan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="sla_keluhan"
|
||||
data-type="number"
|
||||
caption="SLA (Jam)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_complaint_gangguan" data-type="number" caption="G"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_complaint_gangguan"
|
||||
data-type="number"
|
||||
caption="G"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_complaint_keluhan"
|
||||
data-type="number"
|
||||
caption="K"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
|
||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="avg_aging_complaint"
|
||||
data-type="number"
|
||||
caption="% Rata-Rata Aging Complains"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p>{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -162,4 +247,4 @@ const filterData = (params: any) => {
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,40 +1,102 @@
|
||||
<template>
|
||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type2 @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" @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"
|
||||
@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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||
<DxColumn :min-width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
|
||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="terencana"
|
||||
data-type="number"
|
||||
caption="Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tidak_terencana"
|
||||
data-type="number"
|
||||
caption="Tidak Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="bencana_alam"
|
||||
data-type="number"
|
||||
caption="Bencana Alam"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="kpi_ens"
|
||||
data-type="number"
|
||||
caption="KPI ENS"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -146,4 +208,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,46 +1,113 @@
|
||||
<template>
|
||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type2 @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" @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"
|
||||
@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 :min-width="250" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:min-width="250"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Kepatuhan dan Akurasi APKT"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number" caption="Jan 2020"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
|
||||
caption="Total Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="gangguan_berulang"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="gangguan_total"
|
||||
data-type="number"
|
||||
caption="Total Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
||||
caption="Jan 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
|
||||
caption="Total Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="komplain_pelanggan"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keluhan_total"
|
||||
data-type="number"
|
||||
caption="Total Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
||||
caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:min-width="150"
|
||||
alignment="center"
|
||||
data-field="komplain_pelanggan"
|
||||
data-type="number"
|
||||
caption="Komplain Pelanggan %"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p>{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -160,4 +227,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,86 +1,242 @@
|
||||
<template>
|
||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Filters
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :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" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
|
||||
caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
name="keluhanBulanLalu"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
|
||||
data-type="number" caption="Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
|
||||
data-type="number" caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_informasi_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_informasi_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_informasi_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
||||
data-field="total_tahun_sebelumnya" data-type="number" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Total Komplain"
|
||||
css-class="custom-table-column"
|
||||
data-field="total_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
|
||||
caption="Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_ini" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
|
||||
caption="Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_informasi_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_informasi_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_informasi_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
||||
data-field="total_tahun_ini" data-type="number" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Total Komplain"
|
||||
css-class="custom-table-column"
|
||||
data-field="total_tahun_ini"
|
||||
data-type="number"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="delta_keluhan"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="delta_gangguan"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="delta_informasi"
|
||||
data-type="number"
|
||||
caption="Informasi"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
|
||||
caption="Informasi" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_keluhan"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_gangguan"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_informasi"
|
||||
data-type="number"
|
||||
caption="Informasi"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_total"
|
||||
data-type="number"
|
||||
caption="% Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p>{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -197,4 +353,4 @@ const filterData = (params: any) => {
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,53 +1,133 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @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" @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"
|
||||
@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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||
<DxColumn :min-width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Gangguan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_recovery_gangguan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="sla_gangguan"
|
||||
data-type="number"
|
||||
caption="SLA (Menit)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_recovery_keluhan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="sla_keluhan"
|
||||
data-type="number"
|
||||
caption="SLA (Jam)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_complaint_gangguan" data-type="number" caption="G"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_complaint_gangguan"
|
||||
data-type="number"
|
||||
caption="G"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_complaint_keluhan"
|
||||
data-type="number"
|
||||
caption="K"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
|
||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="avg_aging_complaint"
|
||||
data-type="number"
|
||||
caption="% Rata-Rata Aging Complains"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p>{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -122,14 +202,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.agingComplaintKumulatif, {
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.monalisa.laporan.kumulatif.agingComplaintKumulatif,
|
||||
{
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||
currentYear.value = tahun.id
|
||||
@ -155,4 +238,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,39 +1,96 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @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" @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"
|
||||
@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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||
<DxColumn :min-width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
|
||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="terencana"
|
||||
data-type="number"
|
||||
caption="Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tidak_terencana"
|
||||
data-type="number"
|
||||
caption="Tidak Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="bencana_alam"
|
||||
data-type="number"
|
||||
caption="Bencana Alam"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:min-width="170"
|
||||
alignment="center"
|
||||
data-field="kpi_ens"
|
||||
data-type="number"
|
||||
caption="KPI ENS"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -141,4 +198,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,45 +1,107 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @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" @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"
|
||||
@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 :min-width="250" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:min-width="250"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Kepatuhan dan Akurasi APKT"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number" caption="Jan 2020"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
|
||||
caption="Total Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="gangguan_berulang"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="gangguan_total"
|
||||
data-type="number"
|
||||
caption="Total Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
||||
caption="Jan 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
|
||||
caption="Total Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="komplain_pelanggan"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keluhan_total"
|
||||
data-type="number"
|
||||
caption="Total Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
||||
caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:min-width="150"
|
||||
alignment="center"
|
||||
data-field="komplain_pelanggan"
|
||||
data-type="number"
|
||||
caption="Komplain Pelanggan %"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p>{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -112,14 +174,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif, {
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif,
|
||||
{
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||
|
||||
@ -144,4 +209,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,85 +1,236 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :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" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
||||
css-class="custom-table-column" cell-template="cell-left" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
|
||||
caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
name="keluhanBulanLalu"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
|
||||
data-type="number" caption="Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
|
||||
data-type="number" caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_informasi_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_informasi_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_informasi_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
||||
data-field="total_tahun_sebelumnya" data-type="number" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Total Komplain"
|
||||
css-class="custom-table-column"
|
||||
data-field="total_tahun_sebelumnya"
|
||||
data-type="number"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
|
||||
caption="Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_ini" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
|
||||
caption="Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
|
||||
caption="Total" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_keluhan_informasi_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_gangguan_informasi_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="total_informasi_tahun_ini"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
||||
data-field="total_tahun_ini" data-type="number" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Total Komplain"
|
||||
css-class="custom-table-column"
|
||||
data-field="total_tahun_ini"
|
||||
data-type="number"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="delta_keluhan"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="delta_gangguan"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="delta_informasi"
|
||||
data-type="number"
|
||||
caption="Informasi"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
|
||||
caption="Gangguan" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
|
||||
caption="Informasi" css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_keluhan"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_gangguan"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_informasi"
|
||||
data-type="number"
|
||||
caption="Informasi"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_delta_total"
|
||||
data-type="number"
|
||||
caption="% Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p>{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #cell-left="{ data }">
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
@ -155,14 +306,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif, {
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif,
|
||||
{
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||
currentYear.value = tahun.id
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user