Refactor CSS styles and fix formatting issues in MonalisaLK_EnergyNotSales.vue
This commit is contained in:
Dede Fuji Abdul
@@ -74,4 +74,4 @@
|
|||||||
"vitest": "^1.3.1",
|
"vitest": "^1.3.1",
|
||||||
"vue-tsc": "^2.0.5"
|
"vue-tsc": "^2.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6058,10 +6058,6 @@ body {
|
|||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:w-2\/6 {
|
|
||||||
width: 33.333333%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:w-80 {
|
.lg\:w-80 {
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
@@ -6074,10 +6070,6 @@ body {
|
|||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg\:flex-row {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg\:flex-col {
|
.lg\:flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@@ -6086,16 +6078,6 @@ body {
|
|||||||
flex-wrap: nowrap;
|
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 {
|
.lg\:rounded-t-3xl {
|
||||||
border-top-left-radius: 1.5rem;
|
border-top-left-radius: 1.5rem;
|
||||||
border-top-right-radius: 1.5rem;
|
border-top-right-radius: 1.5rem;
|
||||||
|
|||||||
@@ -1,173 +1,534 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="false">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="200"
|
||||||
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="user_regu"
|
||||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
|
caption="User Regu"
|
||||||
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" cell-template="cellRight" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
|
cell-template="formatText"
|
||||||
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"
|
<DxColumn
|
||||||
caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
|
:width="200"
|
||||||
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="personil_yantek"
|
||||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
|
caption="Personil Yantek"
|
||||||
caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" cell-template="cellRight" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="200" alignment="center" data-field="avg_wo_penugasan_khusus" data-type="number"
|
cell-template="formatText"
|
||||||
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" cell-template="cellRight" />
|
/>
|
||||||
|
<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()">
|
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="dialogDataSelected" title="Daftar Detail Jumlah WO Gangguan Individu"
|
<DetailDialog
|
||||||
@on-close="closeDialogDataSelected" :full-width="true">
|
: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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<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"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)]"
|
||||||
@selection-changed="onDataSubSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="dataSub"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft" />
|
:width="50"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellLeft" />
|
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="UP3" css-class="custom-table-column"
|
data-type="number"
|
||||||
cell-template="cellLeft" />
|
caption="No"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column"
|
cell-template="formatText"
|
||||||
cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Dispatch By" css-class="custom-table-column"
|
caption="UID/UIW"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Dispatch Time"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column"
|
caption="UP3"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Shif" css-class="custom-table-column"
|
cell-template="formatText"
|
||||||
cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Check In Petugas"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column"
|
caption="Posko"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Penugasan Baru"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Dalam Perjalanan"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Pengerjaan"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Nyala Sementara"
|
caption="Sumber Lapor"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Nyala" css-class="custom-table-column"
|
cell-template="formatText"
|
||||||
cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Selesai" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi WO" css-class="custom-table-column"
|
caption="Created By"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Check Out Petugas"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="RPT" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="RCT" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Rating" css-class="custom-table-column"
|
caption="Dispatch By"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Jml Pelanggan Padam"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Fasilitas" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sub Fasilitas"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Peralatan" css-class="custom-table-column"
|
caption="Dispatch Time"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Dampak Kerusakan"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Penyebab" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Kelompok Penyebab"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Cuaca" css-class="custom-table-column"
|
caption="User Regu"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Penyebab Padam"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tindakan" css-class="custom-table-column"
|
caption="Nama Regu"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column"
|
cell-template="formatText"
|
||||||
cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="BLTH" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellLeft" />
|
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">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
|
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
|
||||||
<div class="p-4 space-y-2 bg-white rounded-xl">
|
<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>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">BLTH</h3>
|
||||||
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
|
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -413,8 +772,8 @@ const dataSubSelected = ref<any>()
|
|||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataSub = ref<any[]>([])
|
const dataSub = ref<any[]>([])
|
||||||
const dialogDataSelected = ref(false)
|
const dialogDataSelected = ref(false)
|
||||||
const closeDialogDataSelected = () => dialogDataSelected.value = false
|
const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||||
const showDialogDataSelected = () => dialogDataSelected.value = true
|
const showDialogDataSelected = () => (dialogDataSelected.value = true)
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
@@ -496,15 +855,15 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = [
|
data.value = [
|
||||||
{
|
{
|
||||||
"user_regu": "11110.REGU1",
|
user_regu: '11110.REGU1',
|
||||||
"personil_yantek": "11110_FAUZI",
|
personil_yantek: '11110_FAUZI',
|
||||||
"jumlah_wo_gangguan_individual": 54,
|
jumlah_wo_gangguan_individual: 54,
|
||||||
"avg_durasi_wo_gangguan_individual": 70.67,
|
avg_durasi_wo_gangguan_individual: 70.67,
|
||||||
"avg_rpt_wo_gangguan_individual": 40.69,
|
avg_rpt_wo_gangguan_individual: 40.69,
|
||||||
"avg_rct_wo_gangguan_individual": 71.61,
|
avg_rct_wo_gangguan_individual: 71.61,
|
||||||
"jumlah_wo_penugasan_khusus": 31,
|
jumlah_wo_penugasan_khusus: 31,
|
||||||
"avg_wo_penugasan_khusus": 63.79
|
avg_wo_penugasan_khusus: 63.79
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,52 +1,169 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type16 @update:filters="(value) => filters = value" />
|
<Type16 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="" :column-width="100" @exporting="" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
: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"
|
<DxColumn
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
:width="150"
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
data-field="no_laporan"
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
cell-template="cellCenter"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
<DxColumn
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
:width="150"
|
||||||
caption="Status" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
data-field="nama_pelapor"
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
caption="Nama Pelapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
cell-template="formatText"
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
<DxColumn
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
:width="170"
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
data-field="alamat_pelapor"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
caption="Alamat Pelapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_posko"
|
cell-template="formatText"
|
||||||
caption="Sumber Lapor" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media"
|
<DxColumn
|
||||||
caption="Tgl Media" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media"
|
:width="150"
|
||||||
caption="Keterangan Media" cell-template="cellLeft" />
|
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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer">
|
<p class="cursor-pointer">
|
||||||
@@ -54,14 +171,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -135,4 +252,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
|
data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,181 +1,342 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="dataTable">
|
<div id="dataTable">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :remote-operations="true" :data-source="data"
|
<DxDataGrid
|
||||||
key-expr="no_laporan" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
:remote-operations="true"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
:data-source="data"
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
key-expr="no_laporan"
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
|
:show-column-lines="true"
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
:show-row-lines="false"
|
||||||
<DxSelection mode="single" />
|
:show-borders="true"
|
||||||
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
:row-alternation-enabled="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:hover-state-enabled="true"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
@selection-changed="onSelectionChanged"
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
:column-width="100"
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
@exporting="onExporting"
|
||||||
<DxColumn css-class="custom-table-column !text-right" :width="50" alignment="center"
|
:allow-column-resizing="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number"
|
column-resizing-mode="widget"
|
||||||
caption="No" />
|
>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
<DxPager
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
|
:visible="true"
|
||||||
caption="Pembuat Laporan" cell-template="cellLeft" />
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
display-mode="full"
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
:show-page-size-selector="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
|
:show-info="true"
|
||||||
caption="Tgl Dialihkan" cell-template="cellCenter" />
|
:show-navigation-buttons="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
/>
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
<DxSelection mode="single" />
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
<DxLoadPanel
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
:position="position"
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
:show-indicator="showIndicator"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:show-pane="showPane"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
:shading="shading"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
|
v-if="loading"
|
||||||
caption="Posko Asal" cell-template="cellLeft" />
|
v-model:visible="loading"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
|
:enabled="true"
|
||||||
caption="Posko Tujuan" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
caption="Status" cell-template="cellLeft" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
:enabled="true"
|
||||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
:allow-export-selected-data="false"
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
<DxColumn
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column !text-right"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
:width="50"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="250" alignment="center" data-field="keterangan_pelapor"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
data-type="number"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
caption="No"
|
||||||
caption="Sumber Lapor" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
|
<DxColumn
|
||||||
caption="Posko" cell-template="cellLeft" />
|
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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</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>
|
</div>
|
||||||
|
</DetailDialog>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -183,13 +344,13 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPager,
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
@@ -211,146 +372,146 @@ const showPane = ref(true)
|
|||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const showDetail = ref(false)
|
||||||
const closeDetail = () => showDetail.value = false
|
const closeDetail = () => (showDetail.value = false)
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape',
|
orientation: 'landscape',
|
||||||
unit: 'mm',
|
unit: 'mm',
|
||||||
format: 'F4'
|
format: 'F4'
|
||||||
})
|
})
|
||||||
|
|
||||||
// Initialize page number
|
// Initialize page number
|
||||||
const pageNumber = ref(1)
|
const pageNumber = ref(1)
|
||||||
autoTable(doc, {
|
autoTable(doc, {
|
||||||
head: [
|
head: [
|
||||||
[
|
[
|
||||||
'No Laporan',
|
'No Laporan',
|
||||||
'Pembuat Laporan',
|
'Pembuat Laporan',
|
||||||
'Tgl Lapor',
|
'Tgl Lapor',
|
||||||
'Tgl Dialihkan',
|
'Tgl Dialihkan',
|
||||||
'Tgl Response',
|
'Tgl Response',
|
||||||
'Tgl Recovery',
|
'Tgl Recovery',
|
||||||
'Durasi Response Time',
|
'Durasi Response Time',
|
||||||
'Durasi Recovery Time',
|
'Durasi Recovery Time',
|
||||||
'Posko Awal',
|
'Posko Awal',
|
||||||
'Posko Tujuan',
|
'Posko Tujuan',
|
||||||
'Status',
|
'Status',
|
||||||
'IDPEL/NO METER',
|
'IDPEL/NO METER',
|
||||||
'Nama Pelapor',
|
'Nama Pelapor',
|
||||||
'Alamat Pelapor',
|
'Alamat Pelapor',
|
||||||
'No Telp Pelapor',
|
'No Telp Pelapor',
|
||||||
'Keterangan Pelapor',
|
'Keterangan Pelapor',
|
||||||
'Sumber Lapor',
|
'Sumber Lapor',
|
||||||
'Posko'
|
'Posko'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
startY: 10,
|
startY: 10,
|
||||||
body: data.value.map((item) => [
|
body: data.value.map((item) => [
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.pembuat_laporan,
|
item.pembuat_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
item.waktu_dialihkan,
|
item.waktu_dialihkan,
|
||||||
item.waktu_response,
|
item.waktu_response,
|
||||||
item.waktu_recovery,
|
item.waktu_recovery,
|
||||||
item.durasi_response_time,
|
item.durasi_response_time,
|
||||||
item.durasi_recovery_time,
|
item.durasi_recovery_time,
|
||||||
item.nama_posko_lama,
|
item.nama_posko_lama,
|
||||||
item.nama_posko_baru,
|
item.nama_posko_baru,
|
||||||
item.status_akhir,
|
item.status_akhir,
|
||||||
item.idpel_nometer,
|
item.idpel_nometer,
|
||||||
item.nama_pelapor,
|
item.nama_pelapor,
|
||||||
item.alamat_pelapor,
|
item.alamat_pelapor,
|
||||||
item.no_telp_pelapor,
|
item.no_telp_pelapor,
|
||||||
item.keterangan_pelapor,
|
item.keterangan_pelapor,
|
||||||
item.media,
|
item.media,
|
||||||
item.posko
|
item.posko
|
||||||
]),
|
]),
|
||||||
styles: {
|
styles: {
|
||||||
fontSize: 6,
|
fontSize: 6,
|
||||||
cellWidth: 'wrap'
|
cellWidth: 'wrap'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
doc.setProperties({
|
doc.setProperties({
|
||||||
title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
|
title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
|
||||||
subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
|
subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
|
||||||
})
|
})
|
||||||
|
|
||||||
pageNumber.value++ // Increment the pageNumber
|
pageNumber.value++ // Increment the pageNumber
|
||||||
doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
||||||
|
|
||||||
// exportToPdf({
|
// exportToPdf({
|
||||||
// jsPDFDocument: doc,
|
// jsPDFDocument: doc,
|
||||||
// component: e.component,
|
// component: e.component,
|
||||||
// }).then(() => {
|
// }).then(() => {
|
||||||
// doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
// doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
|
||||||
|
|
||||||
// })
|
// })
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
|
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(
|
saveAs(
|
||||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||||
'DaftarGangguanDialihkanKePoskoLain.xlsx'
|
'DaftarGangguanDialihkanKePoskoLain.xlsx'
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: dateValue[1]
|
dateTo: dateValue[1]
|
||||||
? dateValue[1].split('-').reverse().join('-')
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
|
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
console.log(queryResult.networkStatus)
|
console.log(queryResult.networkStatus)
|
||||||
})
|
})
|
||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
queries.gangguan.daftar.dataDialihkanKePoskoLain,
|
queries.gangguan.daftar.dataDialihkanKePoskoLain,
|
||||||
{
|
{
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
dataDetail.value = data
|
dataDetail.value = data
|
||||||
}
|
}
|
||||||
const showData = () => showDetail.value = true
|
const showData = () => (showDetail.value = true)
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
|
data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,52 +1,169 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="" :column-width="100" @exporting="" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
: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"
|
<DxColumn
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
:width="150"
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
data-field="no_laporan"
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
cell-template="cellCenter"
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
data-field="waktu_lapor"
|
||||||
caption="Status" cell-template="cellCenter" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
cell-template="cellCenter"
|
||||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
<DxColumn
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
:width="150"
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
data-field="waktu_response"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
caption="Tgl Response"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
cell-template="cellCenter"
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
<DxColumn
|
||||||
caption="Sumber Lapor" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
:width="150"
|
||||||
cell-template="cellLeft" />
|
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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer">
|
<p class="cursor-pointer">
|
||||||
@@ -54,14 +171,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -137,4 +254,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
|
data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,53 +1,175 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type6 @update:filters="(value) => filters = value" />
|
<Type6 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
|
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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
:allow-export-selected-data="false"
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
<DxColumn
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
:width="50"
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
data-type="number"
|
||||||
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
caption="No"
|
||||||
cell-template="cellRight" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
data-field="no_laporan"
|
||||||
caption="Status" cell-template="cellCenter" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
cell-template="cellCenter"
|
||||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
<DxColumn
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
:width="150"
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
data-field="waktu_lapor"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
cell-template="cellCenter"
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
<DxColumn
|
||||||
caption="Sumber Lapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
:width="150"
|
||||||
cell-template="cellLeft" />
|
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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@@ -55,27 +177,31 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showData()">
|
||||||
{{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
|
{{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</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="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<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">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<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)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
class-name="flex-1"
|
||||||
" />
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
@@ -197,19 +338,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
dataDetail.value = data
|
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, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
minJmlLapor: 1,
|
queries.gangguan.daftar.melaporLebihDariSatuKali,
|
||||||
maxJmlLapor: 1,
|
{
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
minJmlLapor: 1,
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
maxJmlLapor: 1,
|
||||||
posko: 0,
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
posko: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
|
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
|
||||||
@@ -243,4 +387,4 @@ const filterData = (params: any) => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
|
data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,67 +1,193 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type7 @update:filters="(value) => filters = value" :sla-options="[
|
<Type7
|
||||||
{
|
@update:filters="(value) => (filters = value)"
|
||||||
id: 1,
|
:sla-options="[
|
||||||
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
|
{
|
||||||
min: '1',
|
id: 1,
|
||||||
max: '180'
|
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
|
||||||
},
|
min: '1',
|
||||||
{
|
max: '180'
|
||||||
id: 2,
|
},
|
||||||
name: 'Melebihi SLA (> 3 Jam)',
|
{
|
||||||
min: '181',
|
id: 2,
|
||||||
max: `${99999 * 60 * 24}`
|
name: 'Melebihi SLA (> 3 Jam)',
|
||||||
}
|
min: '181',
|
||||||
]" />
|
max: `${99999 * 60 * 24}`
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
/>
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:column-width="100" @exporting="" :allow-column-resizing="true" @selection-changed="onSelectionChanged"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
: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"
|
<DxColumn
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
:width="150"
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
data-field="no_laporan"
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
cell-template="cellCenter"
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
data-field="waktu_lapor"
|
||||||
caption="Status" cell-template="cellCenter" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
|
cell-template="cellCenter"
|
||||||
caption="Referensi Marking" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
<DxColumn
|
||||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
:width="150"
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
data-field="waktu_response"
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
caption="Tgl Response"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
cell-template="cellCenter"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
<DxColumn
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
:width="150"
|
||||||
caption="Sumber Lapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
data-field="waktu_recovery"
|
||||||
cell-template="cellLeft" />
|
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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@@ -69,14 +195,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -107,18 +233,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<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)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
class-name="flex-1"
|
||||||
" />
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
@@ -183,13 +334,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
|||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPager,
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries } from '@/utils/api/api.graphql'
|
import { queries } from '@/utils/api/api.graphql'
|
||||||
@@ -208,13 +359,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
dataDetail.value = data
|
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 filterData = (params: any) => {
|
||||||
const { minTime, maxTime, posko, uid, up3 } = params
|
const { minTime, maxTime, posko, uid, up3 } = params
|
||||||
console.table(params);
|
console.table(params)
|
||||||
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
@@ -242,7 +393,6 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
|
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
|
|||||||
@@ -1,53 +1,170 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type7 @update:filters="(value) => filters = value" />
|
<Type7 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
cell-template="cellCenter" />
|
: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"
|
<DxColumn
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
:width="150"
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
data-field="no_laporan"
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
cell-template="cellCenter"
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
data-field="waktu_lapor"
|
||||||
caption="Status" cell-template="cellCenter" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
|
cell-template="cellCenter"
|
||||||
caption="Referensi Marking" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
<DxColumn
|
||||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
:width="150"
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
data-field="waktu_response"
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
caption="Tgl Response"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
cell-template="cellCenter"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
<DxColumn
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
:width="150"
|
||||||
cell-template="cellLeft" />
|
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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@@ -55,14 +172,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -93,18 +210,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<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)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
class-name="flex-1"
|
||||||
" />
|
:value="
|
||||||
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
@@ -194,9 +336,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
dataDetail.value = data
|
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 filterData = (params: any) => {
|
||||||
const { minTime, maxTime, posko, uid, up3 } = params
|
const { minTime, maxTime, posko, uid, up3 } = params
|
||||||
|
|||||||
@@ -1,52 +1,169 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="" :column-width="100" @exporting="" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
: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"
|
<DxColumn
|
||||||
caption="No Laporan" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
:width="150"
|
||||||
caption="Tgl Lapor" cell-template="cellCenter" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
data-field="no_laporan"
|
||||||
caption="Tgl Response" cell-template="cellCenter" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
cell-template="cellCenter"
|
||||||
caption="Tgl Recovery" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data-waktu" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
data-field="waktu_lapor"
|
||||||
caption="Status" cell-template="cellCenter" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
cell-template="cellCenter"
|
||||||
caption="IDPEL/NO METER" cell-template="cellCenter" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
<DxColumn
|
||||||
caption="Nama Pelapor" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
:width="150"
|
||||||
caption="Alamat Pelapor" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
data-field="waktu_response"
|
||||||
caption="No Telp Pelapor" cell-template="cellCenter" />
|
caption="Tgl Response"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
cell-template="cellCenter"
|
||||||
caption="Keterangan Pelapor" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
<DxColumn
|
||||||
caption="Sumber Lapor" cell-template="cellCenter" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
:width="150"
|
||||||
cell-template="cellLeft" />
|
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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer">
|
<p class="cursor-pointer">
|
||||||
@@ -54,14 +171,14 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -94,13 +211,16 @@ const shading = ref(true)
|
|||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.selesaiTanpaIDPelanggan, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
queries.gangguan.daftar.selesaiTanpaIDPelanggan,
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
{
|
||||||
posko: 0,
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
posko: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
|
|||||||
@@ -61,7 +61,7 @@
|
|||||||
data-field="nama_posko"
|
data-field="nama_posko"
|
||||||
caption="Nama Unit"
|
caption="Nama Unit"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
data-field="nama_posko"
|
data-field="nama_posko"
|
||||||
caption="Nama Unit"
|
caption="Nama Unit"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
name="namaUnit"
|
name="namaUnit"
|
||||||
:group-index="0"
|
:group-index="0"
|
||||||
/>
|
/>
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
data-field="nama_regional"
|
data-field="nama_regional"
|
||||||
caption="Regional"
|
caption="Regional"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
:group-index="1"
|
:group-index="1"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -89,7 +89,7 @@
|
|||||||
data-field="nama_uid"
|
data-field="nama_uid"
|
||||||
caption="UID"
|
caption="UID"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
:group-index="2"
|
:group-index="2"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -98,7 +98,7 @@
|
|||||||
data-field="nama_up3"
|
data-field="nama_up3"
|
||||||
caption="UP3"
|
caption="UP3"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
:group-index="3"
|
:group-index="3"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
caption="Total"
|
caption="Total"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
caption="Selesai"
|
caption="Selesai"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="70"
|
:width="70"
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
caption="%"
|
caption="%"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -139,7 +139,7 @@
|
|||||||
caption="In Progress"
|
caption="In Progress"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="70"
|
:width="70"
|
||||||
@@ -149,7 +149,7 @@
|
|||||||
caption="%"
|
caption="%"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -160,7 +160,7 @@
|
|||||||
caption="Rata-Rata"
|
caption="Rata-Rata"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -170,7 +170,7 @@
|
|||||||
caption="Max"
|
caption="Max"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -180,7 +180,7 @@
|
|||||||
caption="Min"
|
caption="Min"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -190,7 +190,7 @@
|
|||||||
caption=">SLA"
|
caption=">SLA"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -200,7 +200,7 @@
|
|||||||
caption="≤SLA"
|
caption="≤SLA"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
@@ -212,7 +212,7 @@
|
|||||||
caption="Rata-Rata"
|
caption="Rata-Rata"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -222,7 +222,7 @@
|
|||||||
caption="Max"
|
caption="Max"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -232,7 +232,7 @@
|
|||||||
caption="Min"
|
caption="Min"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -242,7 +242,7 @@
|
|||||||
caption=">SLA"
|
caption=">SLA"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -252,7 +252,7 @@
|
|||||||
caption="≤SLA"
|
caption="≤SLA"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
@@ -264,7 +264,7 @@
|
|||||||
caption="Rata-Rata"
|
caption="Rata-Rata"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -274,7 +274,7 @@
|
|||||||
caption="Max"
|
caption="Max"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -284,7 +284,7 @@
|
|||||||
caption="Min"
|
caption="Min"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -294,7 +294,7 @@
|
|||||||
caption=">SLA"
|
caption=">SLA"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -304,7 +304,7 @@
|
|||||||
caption="≤SLA"
|
caption="≤SLA"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@@ -314,13 +314,13 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||||
{{
|
{{
|
||||||
isNumber(data.text)
|
isNumber(data.text)
|
||||||
@@ -332,7 +332,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p @click="showDialogDataSelected()">
|
<p @click="showDialogDataSelected()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
@@ -560,7 +560,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -568,7 +568,7 @@
|
|||||||
data-field="nama_posko"
|
data-field="nama_posko"
|
||||||
caption="Posko"
|
caption="Posko"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -576,7 +576,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Lapor"
|
caption="No Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -584,7 +584,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl/Jam Lapor"
|
caption="Tgl/Jam Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -593,7 +593,7 @@
|
|||||||
caption="Tgl/Jam Datang"
|
caption="Tgl/Jam Datang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -602,7 +602,7 @@
|
|||||||
caption="Tgl/Jam Nyala"
|
caption="Tgl/Jam Nyala"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -611,7 +611,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -620,7 +620,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -629,7 +629,7 @@
|
|||||||
caption="Durasi Penugasan Regu"
|
caption="Durasi Penugasan Regu"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -638,7 +638,7 @@
|
|||||||
caption="Durasi Perjalanan Regu"
|
caption="Durasi Perjalanan Regu"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -647,7 +647,7 @@
|
|||||||
caption="Jarak Closing (m)"
|
caption="Jarak Closing (m)"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -656,7 +656,7 @@
|
|||||||
caption="Dispatch Oleh"
|
caption="Dispatch Oleh"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -665,7 +665,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -674,7 +674,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -683,7 +683,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -692,7 +692,7 @@
|
|||||||
caption="No Telp Pelapor"
|
caption="No Telp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -701,7 +701,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -710,7 +710,7 @@
|
|||||||
caption="Sumber Lapor"
|
caption="Sumber Lapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -719,7 +719,7 @@
|
|||||||
caption="Diselesaikan Oleh"
|
caption="Diselesaikan Oleh"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -728,7 +728,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -737,7 +737,7 @@
|
|||||||
caption="Referensi Marking"
|
caption="Referensi Marking"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -746,7 +746,7 @@
|
|||||||
caption="Kode Gangguan"
|
caption="Kode Gangguan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -755,7 +755,7 @@
|
|||||||
caption="Jenis Gangguan"
|
caption="Jenis Gangguan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -764,7 +764,7 @@
|
|||||||
caption="Penyebab"
|
caption="Penyebab"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -773,22 +773,22 @@
|
|||||||
caption="Tindakan"
|
caption="Tindakan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,43 +1,121 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
@reset-form="data = []"
|
||||||
|
:report-button="true"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
css-class="custom-table-column"
|
||||||
name="number" cell-template="cellRight" />
|
:width="50"
|
||||||
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
|
data-type="number"
|
||||||
css-class="custom-table-column" :group-index="0" />
|
caption="No"
|
||||||
<DxColumn alignment="center" :min-width="180" data-field="nama_posko" caption="Nama Posko"
|
name="number"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
cell-template="formatNumber"
|
||||||
<DxColumn :width="180" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column"
|
/>
|
||||||
cell-template="cellRight" />
|
<DxColumn
|
||||||
<DxColumn :width="180" alignment="center" data-field="posko_out" caption="Posko OUT"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
: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>
|
<DxSummary>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="number" display-format="Total" css-class="!text-left" />
|
<DxGroupItem
|
||||||
<DxGroupItem :show-in-group-footer="true" column="posko_in" summary-type="sum" display-format="{0}"
|
:show-in-group-footer="true"
|
||||||
css-class="!text-right" />
|
column="number"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="posko_out" summary-type="sum" display-format="{0}"
|
display-format="Total"
|
||||||
css-class="!text-right" />
|
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>
|
</DxSummary>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
@@ -46,17 +124,21 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@@ -169,4 +251,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
|
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,33 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
@reset-form="data = []"
|
||||||
|
:report-button="true"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
css-class="custom-table-column"
|
||||||
data-field="no" cell-template="cellRight" />
|
:width="50"
|
||||||
<DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="cellLeft"
|
alignment="center"
|
||||||
css-class="custom-table-column" header-cell-template="title-header" />
|
: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 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"
|
<DxColumn
|
||||||
:caption="i" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
<DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellRight" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
|
/>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer">
|
<p class="cursor-pointer">
|
||||||
@@ -35,17 +90,21 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -56,12 +115,26 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxTotalItem display-format="Call PLN 123" show-in-column="media" css-class="text-white !text-left" />
|
<DxTotalItem
|
||||||
<DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
|
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"
|
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()))" />
|
<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>
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@@ -174,4 +247,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
|
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,123 +1,383 @@
|
|||||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
|
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
:report-button="true"
|
||||||
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
<DxGroupPanel :visible="true" />
|
<DxGroupPanel :visible="true" />
|
||||||
<DxGrouping :auto-expand-all="true" />
|
<DxGrouping :auto-expand-all="true" />
|
||||||
|
|
||||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellRight" />
|
:width="60"
|
||||||
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellLeft" />
|
data-field="no"
|
||||||
<DxColumn :width="120" alignment="center" data-field="sub_kelompok" caption="Kelompok"
|
caption="NO"
|
||||||
css-class="custom-table-column" group-index="0" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
|
cell-template="formatNumber"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
|
<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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
: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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
|
<DxColumn
|
||||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
|
alignment="center"
|
||||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
|
<DxColumn
|
||||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
|
alignment="center"
|
||||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="responseTime.menit.total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="recoveryTime.menit.total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" cell-template="cellRight" />
|
<DxGroupItem
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
|
:show-in-group-footer="true"
|
||||||
cell-template="cellRight" />
|
column="no"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
display-format="Total"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
cell-template="formatNumber"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
|
/>
|
||||||
display-format="{0}" cell-template="cellRight" />
|
<DxGroupItem
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
column="laporan.total"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
display-format="{0}"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
cell-template="formatNumber"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
/>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
|
<DxGroupItem
|
||||||
display-format="{0}" cell-template="cellRight" />
|
:show-in-group-footer="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
|
column="laporan.sudahSelesai.jml"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
summary-type="sum"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
|
display-format="{0}"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
cell-template="formatNumber"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
|
/>
|
||||||
display-format="{0}" cell-template="cellRight" />
|
<DxGroupItem
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
column="laporan.sudahSelesai.persen"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
display-format="{0}"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
|
cell-template="formatNumber"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
/>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
|
<DxGroupItem
|
||||||
display-format="{0}" cell-template="cellRight" />
|
:show-in-group-footer="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
|
column="laporan.belumSelesai.jml"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
summary-type="sum"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
display-format="{0}"
|
||||||
display-format="{0}" cell-template="cellRight" />
|
cell-template="formatNumber"
|
||||||
<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="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>
|
</DxSummary>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
@@ -126,22 +386,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -244,51 +508,49 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiPerJenisGangguan.map(
|
data.value = queryResult.data.rekapitulasiPerJenisGangguan.map((item: any, index: number) => {
|
||||||
(item: any, index: number) => {
|
return {
|
||||||
return {
|
no: ++index,
|
||||||
no: ++index,
|
sub_kelompok: item.sub_kelompok,
|
||||||
sub_kelompok: item.sub_kelompok,
|
kode: item.kode,
|
||||||
kode: item.kode,
|
jenisGangguan: item.tipe_permasalahan,
|
||||||
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: {
|
laporan: {
|
||||||
total: item.total,
|
lebihSla: item.total_diatas_sla_response,
|
||||||
sudahSelesai: {
|
kurangSla: item.total_dibawah_sla_response
|
||||||
jml: item.total_selesai,
|
}
|
||||||
persen: item.persen_selesai
|
},
|
||||||
},
|
recoveryTime: {
|
||||||
belumSelesai: {
|
menit: {
|
||||||
jml: item.total_inproses,
|
total: item.total_durasi_recovery,
|
||||||
persen: item.persen_inproses
|
rataRata: item.avg_durasi_recovery,
|
||||||
}
|
max: item.max_durasi_recovery,
|
||||||
|
min: item.min_durasi_recovery
|
||||||
},
|
},
|
||||||
responseTime: {
|
laporan: {
|
||||||
menit: {
|
lebihSla: item.total_diatas_sla_recovery,
|
||||||
total: item.total_durasi_response,
|
kurangSla: item.total_dibawah_sla_recovery
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
})
|
||||||
}
|
}
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
console.log(queryResult.networkStatus)
|
console.log(queryResult.networkStatus)
|
||||||
|
|||||||
@@ -1,81 +1,245 @@
|
|||||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
|
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
@reset-form="data = []"
|
||||||
|
:report-button="true"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="60" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight" />
|
:width="60"
|
||||||
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="cellCenter" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
: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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="total_durasi_response"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="total_durasi_recovery"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@@ -85,22 +249,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -169,13 +337,16 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguanSE004, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
queries.gangguan.rekap.jenisGangguanSE004,
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
{
|
||||||
posko: 0,
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
posko: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|||||||
@@ -1,156 +1,485 @@
|
|||||||
<!-- Rekapitulasi Gangguan Per Posko -->
|
<!-- Rekapitulasi Gangguan Per Posko -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type8 @update:filters="(value) => filters = value" />
|
:report-button="true"
|
||||||
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type8 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellRight" />
|
:width="60"
|
||||||
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
|
alignment="center"
|
||||||
css-class="custom-table-column" :group-index="0" cell-template="cellLeft" />
|
data-field="no"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column"
|
caption="NO"
|
||||||
cell-template="cellLeft" />
|
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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
: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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
|
<DxColumn
|
||||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
|
alignment="center"
|
||||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
|
<DxColumn
|
||||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
|
alignment="center"
|
||||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="responseTime.menit.total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="recoveryTime.menit.total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
|
<DxGroupItem
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
column="no"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
display-format="Total"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
css-class="!text-left"
|
||||||
<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
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
column="laporan.total"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
|
summary-type="sum"
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
css-class="!text-right"
|
||||||
: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"
|
<DxGroupItem
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
:show-in-group-footer="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
|
column="laporan.sudahSelesai.jml"
|
||||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
summary-type="sum"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
css-class="!text-right"
|
||||||
<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
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
column="laporan.sudahSelesai.persen"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
summary-type="avg"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
|
css-class="!text-right"
|
||||||
: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"
|
<DxGroupItem
|
||||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
:show-in-group-footer="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
|
column="laporan.belumSelesai.jml"
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
|
summary-type="sum"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
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="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
|
||||||
<DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
|
summary-type="sum"
|
||||||
|
display-format="Total"
|
||||||
|
show-in-column="no"
|
||||||
css-class="text-white !text-right"
|
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"
|
<DxTotalItem
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
summary-type="sum"
|
||||||
<DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
show-in-column="laporan.total"
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
column="laporan.total"
|
||||||
<DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
|
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="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
/>
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
<DxTotalItem
|
||||||
<DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
column="laporan.sudahSelesai.jml"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
summary-type="sum"
|
||||||
<DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
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="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
/>
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
<DxTotalItem
|
||||||
<DxTotalItem column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
column="laporan.sudahSelesai.persen"
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
summary-type="avg"
|
||||||
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
css-class="text-white !text-right"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
:customize-text="(e: any) => formatPercentage(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
|
||||||
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
column="laporan.belumSelesai.jml"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
summary-type="sum"
|
||||||
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
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="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
/>
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
<DxTotalItem
|
||||||
<DxTotalItem column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
column="laporan.belumSelesai.persen"
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
summary-type="avg"
|
||||||
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
css-class="text-white !text-right"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
:customize-text="(e: any) => formatPercentage(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
|
||||||
|
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>
|
</DxSummary>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
@@ -159,22 +488,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -328,46 +661,48 @@ const filterData = (params: any) => {
|
|||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map((item: any, index: number) => {
|
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
|
||||||
return {
|
(item: any, index: number) => {
|
||||||
no: ++index,
|
return {
|
||||||
nama_posko: item.nama_posko,
|
no: ++index,
|
||||||
laporan: {
|
nama_posko: item.nama_posko,
|
||||||
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: {
|
laporan: {
|
||||||
lebihSla: item.total_diatas_sla_response,
|
total: item.total,
|
||||||
kurangSla: item.total_dibawah_sla_response
|
sudahSelesai: {
|
||||||
}
|
jml: item.total_selesai,
|
||||||
},
|
persen: item.persen_selesai
|
||||||
recoveryTime: {
|
},
|
||||||
menit: {
|
belumSelesai: {
|
||||||
total: item.total_durasi_recovery,
|
jml: item.total_inproses,
|
||||||
rataRata: item.avg_durasi_recovery,
|
persen: item.persen_inproses
|
||||||
max: item.max_durasi_recovery,
|
}
|
||||||
min: item.min_durasi_recovery
|
|
||||||
},
|
},
|
||||||
laporan: {
|
responseTime: {
|
||||||
lebihSla: item.total_diatas_sla_recovery,
|
menit: {
|
||||||
kurangSla: item.total_dibawah_sla_recovery
|
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,156 +1,490 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters
|
||||||
<Type9 @update:filters="(value) => filters = value" />
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
:report-button="true"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type9 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="cellRight" />
|
:width="60"
|
||||||
<DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
|
alignment="center"
|
||||||
group-index="0" v-if="filters.groupBy" />
|
data-field="no"
|
||||||
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
|
caption="NO"
|
||||||
cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="200" alignment="center" data-field="nama_regu" caption="Nama Regu"
|
cell-template="formatNumber"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
|
<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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
: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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
|
<DxColumn
|
||||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
|
alignment="center"
|
||||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
|
<DxColumn
|
||||||
caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
|
alignment="center"
|
||||||
caption="%" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="responseTime.menit.total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="recoveryTime.menit.total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
|
<DxGroupItem
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
column="no"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
display-format="Total"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
css-class="!text-left"
|
||||||
<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
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
column="laporan.total"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
|
summary-type="sum"
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
css-class="!text-right"
|
||||||
: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"
|
<DxGroupItem
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
:show-in-group-footer="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
|
column="laporan.sudahSelesai.jml"
|
||||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
summary-type="sum"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
css-class="!text-right"
|
||||||
<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
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
:show-in-group-footer="true"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
column="laporan.sudahSelesai.persen"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
summary-type="avg"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
|
css-class="!text-right"
|
||||||
: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"
|
<DxGroupItem
|
||||||
css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
:show-in-group-footer="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
|
column="laporan.belumSelesai.jml"
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
|
summary-type="sum"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
|
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="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
|
||||||
<DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
|
summary-type="sum"
|
||||||
|
display-format="Total"
|
||||||
|
show-in-column="no"
|
||||||
css-class="text-white !text-right"
|
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"
|
<DxTotalItem
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
summary-type="sum"
|
||||||
<DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
show-in-column="laporan.total"
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
column="laporan.total"
|
||||||
<DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
|
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="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
|
/>
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
|
<DxTotalItem
|
||||||
<DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
column="laporan.sudahSelesai.jml"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
summary-type="sum"
|
||||||
<DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
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="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
/>
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
<DxTotalItem
|
||||||
<DxTotalItem column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
column="laporan.sudahSelesai.persen"
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
summary-type="avg"
|
||||||
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
css-class="text-white !text-right"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
:customize-text="(e: any) => formatPercentage(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
|
||||||
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
|
column="laporan.belumSelesai.jml"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
summary-type="sum"
|
||||||
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
|
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="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
|
/>
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
<DxTotalItem
|
||||||
<DxTotalItem column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
|
column="laporan.belumSelesai.persen"
|
||||||
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
|
summary-type="avg"
|
||||||
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
|
css-class="text-white !text-right"
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
:customize-text="(e: any) => formatPercentage(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
|
||||||
|
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>
|
</DxSummary>
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
@@ -159,22 +493,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -331,47 +669,49 @@ const filters = ref({
|
|||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map((item: any, index: number) => {
|
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
|
||||||
return {
|
(item: any, index: number) => {
|
||||||
no: ++index,
|
return {
|
||||||
kode_regu: item.kode_regu,
|
no: ++index,
|
||||||
nama_regu: item.nama_regu,
|
kode_regu: item.kode_regu,
|
||||||
laporan: {
|
nama_regu: item.nama_regu,
|
||||||
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: {
|
laporan: {
|
||||||
lebihSla: item.total_diatas_sla_response,
|
total: item.total,
|
||||||
kurangSla: item.total_dibawah_sla_response
|
sudahSelesai: {
|
||||||
}
|
jml: item.total_selesai,
|
||||||
},
|
persen: item.persen_selesai
|
||||||
recoveryTime: {
|
},
|
||||||
menit: {
|
belumSelesai: {
|
||||||
total: item.total_durasi_recovery,
|
jml: item.total_inproses,
|
||||||
rataRata: item.avg_durasi_recovery,
|
persen: item.persen_inproses
|
||||||
max: item.max_durasi_recovery,
|
}
|
||||||
min: item.min_durasi_recovery
|
|
||||||
},
|
},
|
||||||
laporan: {
|
responseTime: {
|
||||||
lebihSla: item.total_diatas_sla_recovery,
|
menit: {
|
||||||
kurangSla: item.total_dibawah_sla_recovery
|
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>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters
|
||||||
<Type9 @update:filters="(value) => filters = value" />
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
:report-button="true"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type9 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
css-class="custom-table-column"
|
||||||
cell-template="cellRight" />
|
:width="50"
|
||||||
<DxColumn :width="120" alignment="center" data-field="nama_uid" caption="Nama UID" css-class="custom-table-column"
|
alignment="center"
|
||||||
group-index="0" v-if="filters.groupBy" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
: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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="total_durasi_response"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" 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"
|
<DxColumn
|
||||||
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
|
data-field="total_durasi_recovery"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
caption="Total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
|
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@@ -84,22 +248,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -173,13 +341,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerTanggal, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
queries.gangguan.rekap.gangguanPerTanggal,
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
{
|
||||||
posko: 0,
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
posko: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
@@ -211,4 +382,4 @@ const filters = ref({ groupBy: false })
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
|
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,64 +1,182 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => filters = value" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-type="number"
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
caption="No"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
: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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Response Time"
|
caption="Tgl Response"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_recovery"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
|
caption="Tgl Recovery"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
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()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -84,12 +202,22 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
@@ -224,13 +367,16 @@ const onExporting = (e: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanBerdasarkanMedia, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
queries.keluhan.daftar.keluhanBerdasarkanMedia,
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
{
|
||||||
idUlp: 0,
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
idUlp: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|||||||
@@ -1,56 +1,175 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => filters = value" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
css-class="custom-table-column !align-top"
|
||||||
cell-template="cellRight" />
|
:width="50"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
alignment="center"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
|
data-type="number"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
caption="No"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
cell-template="formatNumber"
|
||||||
css-class="custom-table-column !align-top" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
alignment="center"
|
||||||
css-class="custom-table-column !align-top" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column !align-top" />
|
css-class="custom-table-column !align-top"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
cell-template="formatText"
|
||||||
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"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" cell-template="data-waktu" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
|
alignment="center"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
data-field="pembuat_laporan"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
caption="Pembuat Laporan"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
css-class="custom-table-column !align-top"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column !align-top" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
css-class="custom-table-column !align-top"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
/>
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
<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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer">
|
<p class="cursor-pointer">
|
||||||
@@ -58,22 +177,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p class="!text-right">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -192,4 +315,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
|
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,55 +1,179 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type10 @update:filters="(value) => filters = value" />
|
<Type10 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-type="number"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
caption="No"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellRight" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
caption="Tgl Response"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
cell-template="formatText"
|
||||||
cell-template="cellLeft" />
|
/>
|
||||||
|
<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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@@ -57,22 +181,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showData()">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -108,18 +236,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@@ -244,15 +392,18 @@ const onExporting = (e: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
minJmlLapor: 1,
|
queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali,
|
||||||
maxJmlLapor: 100,
|
{
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
minJmlLapor: 1,
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
maxJmlLapor: 100,
|
||||||
idUlp: 0,
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
idUlp: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
@@ -289,4 +440,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
|
data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,62 +1,173 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type11 @update:filters="(value) => filters = value" />
|
<Type11 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
:width="170"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
caption="Tgl Response"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_recovery"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
caption="Tgl Recovery"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
cell-template="formatText"
|
||||||
cell-template="cellLeft" />
|
/>
|
||||||
|
<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()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template #formatTime="{ data }">
|
||||||
<template #data-waktu="{ data }">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -87,18 +198,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@@ -222,15 +353,18 @@ const onExporting = (e: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanRecoveryTime, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
queries.keluhan.daftar.keluhanRecoveryTime,
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
{
|
||||||
minDurasiRecoveryTime: 0,
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
maxDurasiRecoveryTime: 0,
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUlp: 0,
|
minDurasiRecoveryTime: 0,
|
||||||
idUid: 0,
|
maxDurasiRecoveryTime: 0,
|
||||||
idUp3: 0
|
idUlp: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
@@ -265,4 +399,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
|
data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,52 +1,164 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type11 @update:filters="(value) => filters = value" />
|
<Type11 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
:width="170"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
caption="Tgl Response"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_recovery"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
caption="Tgl Recovery"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
cell-template="formatText"
|
||||||
cell-template="cellLeft" />
|
/>
|
||||||
|
<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 }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@@ -54,22 +166,26 @@
|
|||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="showData()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer" @click="showData()">
|
<p class="text-right cursor-pointer" @click="showData()">
|
||||||
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
{{
|
||||||
formatNumber(data.text) :
|
isNumber(data.text)
|
||||||
data.text }}
|
? data.column.caption == '%'
|
||||||
|
? formatPercentage(data.text)
|
||||||
|
: formatNumber(data.text)
|
||||||
|
: data.text
|
||||||
|
}}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -100,18 +216,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@@ -236,15 +372,18 @@ const onExporting = (e: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanResponseTime, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
queries.keluhan.daftar.keluhanResponseTime,
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
{
|
||||||
minDurasiResponseTime: 0,
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
maxDurasiResponseTime: 0,
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUlp: 0,
|
minDurasiResponseTime: 0,
|
||||||
idUid: 0,
|
maxDurasiResponseTime: 0,
|
||||||
idUp3: 0
|
idUlp: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
@@ -280,4 +419,4 @@ const filters = ref()
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
|
data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,62 +1,180 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => filters = value" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="false">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-type="number"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
caption="No"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column" cell-template="data-waktu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="cellLeft" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
caption="Tgl Response"
|
||||||
cell-template="cellLeft" />
|
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()">
|
<p class="text-left cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer !text-right" @click="showData()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -87,18 +205,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_response_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_response_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_response_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||||
<InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
|
<InputText
|
||||||
? formatWaktu(dataDetail?.durasi_recovery_time)
|
:readonly="true"
|
||||||
: '-'
|
:value="
|
||||||
" class-name="flex-1" />
|
parseInt(dataDetail?.durasi_recovery_time)
|
||||||
|
? formatWaktu(dataDetail?.durasi_recovery_time)
|
||||||
|
: '-'
|
||||||
|
"
|
||||||
|
class-name="flex-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<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">
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@@ -222,13 +360,16 @@ const onExporting = (e: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan,
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
{
|
||||||
idUlp: 0,
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
idUlp: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|||||||
@@ -1,61 +1,190 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => filters = value" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column !align-top"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
data-type="number"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
|
caption="No"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
alignment="center"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
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"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
: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"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
data-field="no_telp_pelapor"
|
||||||
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
|
caption="No Tlp Pelapor"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
css-class="custom-table-column !align-top"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
|
alignment="center"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
data-field="keterangan_pelapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
|
caption="Keterangan Pelapor"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
css-class="custom-table-column !align-top"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
|
cell-template="formatText"
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
|
<DxColumn
|
||||||
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
: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">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -128,13 +257,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanDiselesaikanCC123, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
queries.keluhan.daftar.keluhanDiselesaikanCC123,
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
{
|
||||||
idUlp: 0,
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUp3: 0
|
idUlp: 0,
|
||||||
})
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
@@ -169,4 +301,4 @@ const filterData = (params: any) => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
|
data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -63,7 +63,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Total"
|
caption="Total"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Selesai"
|
caption="Selesai"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="70"
|
:width="70"
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="%"
|
caption="%"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="percent"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -90,7 +90,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="InProgress"
|
caption="InProgress"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="70"
|
:width="70"
|
||||||
@@ -99,7 +99,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="%"
|
caption="%"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="percent"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -108,7 +108,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Rata-Rata"
|
caption="Rata-Rata"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -135,7 +135,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="> SLA"
|
caption="> SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -144,7 +144,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="≤ SLA"
|
caption="≤ SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
@@ -155,7 +155,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Rata-Rata"
|
caption="Rata-Rata"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -182,7 +182,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="> SLA"
|
caption="> SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -191,22 +191,30 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="≤ SLA"
|
caption="≤ SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="defaults"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #percent="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
<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>
|
||||||
|
|
||||||
<template #defaults="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
<p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -269,7 +277,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -277,7 +285,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -285,7 +293,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -294,7 +302,7 @@
|
|||||||
caption="Dalam Proses Bidang"
|
caption="Dalam Proses Bidang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -303,7 +311,7 @@
|
|||||||
caption="Selesai Bidang Unit"
|
caption="Selesai Bidang Unit"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -312,7 +320,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -321,7 +329,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -330,7 +338,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -339,7 +347,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -348,7 +356,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -357,7 +365,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -366,7 +374,7 @@
|
|||||||
caption="No Tlp Pelapor"
|
caption="No Tlp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -375,7 +383,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -384,7 +392,7 @@
|
|||||||
caption="Rayon"
|
caption="Rayon"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -393,7 +401,7 @@
|
|||||||
caption="Uraian"
|
caption="Uraian"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -402,22 +410,22 @@
|
|||||||
caption="Respon Pelanggan"
|
caption="Respon Pelanggan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
@@ -581,6 +589,7 @@ import { useQuery } from '@vue/apollo-composable'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { queries } from '@/utils/api/api.graphql'
|
import { queries } from '@/utils/api/api.graphql'
|
||||||
import { dummyData } from '@/utils/dummy'
|
import { dummyData } from '@/utils/dummy'
|
||||||
|
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
|
|||||||
@@ -58,7 +58,7 @@
|
|||||||
data-field="media"
|
data-field="media"
|
||||||
caption="Nama Media"
|
caption="Nama Media"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cell-left"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -94,7 +94,7 @@
|
|||||||
/>
|
/>
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -158,7 +158,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -166,7 +166,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -174,7 +174,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -183,7 +183,7 @@
|
|||||||
caption="Dalam Proses Bidang"
|
caption="Dalam Proses Bidang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -192,7 +192,7 @@
|
|||||||
caption="Selesai Bidang Unit"
|
caption="Selesai Bidang Unit"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -201,7 +201,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -210,7 +210,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -219,7 +219,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -228,7 +228,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -237,7 +237,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -246,7 +246,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -255,7 +255,7 @@
|
|||||||
caption="No Tlp Pelapor"
|
caption="No Tlp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -264,7 +264,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -273,7 +273,7 @@
|
|||||||
caption="Rayon"
|
caption="Rayon"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -282,7 +282,7 @@
|
|||||||
caption="Uraian"
|
caption="Uraian"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -291,22 +291,22 @@
|
|||||||
caption="Respon Pelanggan"
|
caption="Respon Pelanggan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -51,6 +51,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
data-field="no"
|
||||||
caption="No"
|
caption="No"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<!-- <DxColumn
|
<!-- <DxColumn
|
||||||
:width="120"
|
:width="120"
|
||||||
@@ -68,7 +69,7 @@
|
|||||||
data-field="fungsi_bidang"
|
data-field="fungsi_bidang"
|
||||||
caption="Fungsi Bidang"
|
caption="Fungsi Bidang"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cell-left"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -78,6 +79,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Total"
|
caption="Total"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -87,6 +89,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Jml"
|
caption="Jml"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="70"
|
:width="70"
|
||||||
@@ -95,7 +98,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="%"
|
caption="%"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="percent"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
@@ -106,6 +109,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Jml"
|
caption="Jml"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="70"
|
:width="70"
|
||||||
@@ -114,7 +118,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="%"
|
caption="%"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="percent"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@@ -127,6 +131,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Total"
|
caption="Total"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -135,6 +140,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Rata-Rata"
|
caption="Rata-Rata"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -143,7 +149,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -152,7 +158,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -163,6 +169,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption=">SLA"
|
caption=">SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -171,6 +178,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="≤SLA"
|
caption="≤SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@@ -183,6 +191,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Total"
|
caption="Total"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -191,6 +200,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Rata-Rata"
|
caption="Rata-Rata"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -199,7 +209,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -208,7 +218,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -219,6 +229,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption=">SLA"
|
caption=">SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -227,6 +238,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="≤SLA"
|
caption="≤SLA"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@@ -236,122 +248,137 @@
|
|||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="Total"
|
display-format="Total"
|
||||||
show-in-column="no"
|
show-in-column="no"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total"
|
column="total"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_selesai"
|
column="total_selesai"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="avg"
|
||||||
display-format="{0}%"
|
display-format="{0}%"
|
||||||
column="persen_selesai"
|
column="persen_selesai"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_inproses"
|
column="total_inproses"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="avg"
|
||||||
display-format="{0}%"
|
display-format="{0}%"
|
||||||
column="persen_inproses"
|
column="persen_inproses"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_durasi_response"
|
column="total_durasi_response"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="avg_durasi_response"
|
column="avg_durasi_response"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="min_durasi_response"
|
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
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="max_durasi_response"
|
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
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_diatas_sla_response"
|
column="total_diatas_sla_response"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_dibawah_sla_response"
|
column="total_dibawah_sla_response"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_durasi_recovery"
|
column="total_durasi_recovery"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="avg_durasi_recovery"
|
column="avg_durasi_recovery"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="min_durasi_recovery"
|
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
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="max_durasi_recovery"
|
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
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_diatas_sla_recovery"
|
column="total_diatas_sla_recovery"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
<DxTotalItem
|
<DxTotalItem
|
||||||
summary-type="sum"
|
summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}"
|
||||||
column="total_dibawah_sla_recovery"
|
column="total_dibawah_sla_recovery"
|
||||||
css-class="text-white"
|
css-class="text-white !text-right"
|
||||||
/>
|
/>
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<template #percent="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
<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>
|
||||||
<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 }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -414,7 +441,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -422,7 +449,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -430,7 +457,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -439,7 +466,7 @@
|
|||||||
caption="Dalam Proses Bidang"
|
caption="Dalam Proses Bidang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -448,7 +475,7 @@
|
|||||||
caption="Selesai Bidang Unit"
|
caption="Selesai Bidang Unit"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -457,7 +484,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -466,7 +493,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -475,7 +502,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -484,7 +511,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -493,7 +520,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -502,7 +529,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -511,7 +538,7 @@
|
|||||||
caption="No Tlp Pelapor"
|
caption="No Tlp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -520,7 +547,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -529,7 +556,7 @@
|
|||||||
caption="Rayon"
|
caption="Rayon"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -538,7 +565,7 @@
|
|||||||
caption="Uraian"
|
caption="Uraian"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -547,22 +574,22 @@
|
|||||||
caption="Respon Pelanggan"
|
caption="Respon Pelanggan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
@@ -728,6 +755,7 @@ import { useQuery } from '@vue/apollo-composable'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { queries } from '@/utils/api/api.graphql'
|
import { queries } from '@/utils/api/api.graphql'
|
||||||
import { dummyData } from '@/utils/dummy'
|
import { dummyData } from '@/utils/dummy'
|
||||||
|
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
|
|||||||
@@ -58,7 +58,7 @@
|
|||||||
data-field="tipe_keluhan"
|
data-field="tipe_keluhan"
|
||||||
caption="Jenis Keluhan"
|
caption="Jenis Keluhan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cell-left"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<!-- <DxColumn
|
<!-- <DxColumn
|
||||||
:width="170"
|
:width="170"
|
||||||
@@ -142,7 +142,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -151,7 +151,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -198,7 +198,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -207,7 +207,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -468,8 +468,8 @@
|
|||||||
/>
|
/>
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -478,7 +478,7 @@
|
|||||||
<p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
|
<p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -542,7 +542,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -550,7 +550,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -558,7 +558,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -567,7 +567,7 @@
|
|||||||
caption="Dalam Proses Bidang"
|
caption="Dalam Proses Bidang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -576,7 +576,7 @@
|
|||||||
caption="Selesai Bidang Unit"
|
caption="Selesai Bidang Unit"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -585,7 +585,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -594,7 +594,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -603,7 +603,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -612,7 +612,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -621,7 +621,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -630,7 +630,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -639,7 +639,7 @@
|
|||||||
caption="No Tlp Pelapor"
|
caption="No Tlp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -648,7 +648,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -657,7 +657,7 @@
|
|||||||
caption="Rayon"
|
caption="Rayon"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -666,7 +666,7 @@
|
|||||||
caption="Uraian"
|
caption="Uraian"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -675,22 +675,22 @@
|
|||||||
caption="Respon Pelanggan"
|
caption="Respon Pelanggan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -68,7 +68,7 @@
|
|||||||
data-field="kelompok"
|
data-field="kelompok"
|
||||||
caption="Kelompok Keluhan"
|
caption="Kelompok Keluhan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cell-left"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -143,7 +143,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -152,7 +152,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -199,7 +199,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -208,7 +208,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -342,8 +342,8 @@
|
|||||||
/>
|
/>
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -352,7 +352,7 @@
|
|||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -416,7 +416,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -424,7 +424,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -432,7 +432,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -441,7 +441,7 @@
|
|||||||
caption="Dalam Proses Bidang"
|
caption="Dalam Proses Bidang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -450,7 +450,7 @@
|
|||||||
caption="Selesai Bidang Unit"
|
caption="Selesai Bidang Unit"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -459,7 +459,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -468,7 +468,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -477,7 +477,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -486,7 +486,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -495,7 +495,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -504,7 +504,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -513,7 +513,7 @@
|
|||||||
caption="No Tlp Pelapor"
|
caption="No Tlp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -522,7 +522,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -531,7 +531,7 @@
|
|||||||
caption="Rayon"
|
caption="Rayon"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -540,7 +540,7 @@
|
|||||||
caption="Uraian"
|
caption="Uraian"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -549,22 +549,22 @@
|
|||||||
caption="Respon Pelanggan"
|
caption="Respon Pelanggan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -58,7 +58,7 @@
|
|||||||
data-field="tanggal_lapor"
|
data-field="tanggal_lapor"
|
||||||
caption="Tanggal Lapor"
|
caption="Tanggal Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cell-left"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="170"
|
:width="170"
|
||||||
@@ -142,7 +142,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -151,7 +151,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -198,7 +198,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Max"
|
caption="Max"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -207,7 +207,7 @@
|
|||||||
data-type="number"
|
data-type="number"
|
||||||
caption="Min"
|
caption="Min"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
@@ -341,8 +341,8 @@
|
|||||||
/>
|
/>
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -351,7 +351,7 @@
|
|||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -415,7 +415,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -423,7 +423,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -431,7 +431,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -440,7 +440,7 @@
|
|||||||
caption="Dalam Proses Bidang"
|
caption="Dalam Proses Bidang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -449,7 +449,7 @@
|
|||||||
caption="Selesai Bidang Unit"
|
caption="Selesai Bidang Unit"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -458,7 +458,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -467,7 +467,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -476,7 +476,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -485,7 +485,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -494,7 +494,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -503,7 +503,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -512,7 +512,7 @@
|
|||||||
caption="No Tlp Pelapor"
|
caption="No Tlp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -521,7 +521,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -530,7 +530,7 @@
|
|||||||
caption="Rayon"
|
caption="Rayon"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -539,7 +539,7 @@
|
|||||||
caption="Uraian"
|
caption="Uraian"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -548,22 +548,22 @@
|
|||||||
caption="Respon Pelanggan"
|
caption="Respon Pelanggan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -68,7 +68,7 @@
|
|||||||
data-field="nama_ulp"
|
data-field="nama_ulp"
|
||||||
caption="Unit"
|
caption="Unit"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cell-left"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@@ -469,8 +469,8 @@
|
|||||||
/>
|
/>
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
@@ -479,7 +479,7 @@
|
|||||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
<p class="cursor-pointer text-left" @click="showDialogDataSelected()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -543,7 +543,7 @@
|
|||||||
"
|
"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="cellRight"
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -551,7 +551,7 @@
|
|||||||
data-field="no_laporan"
|
data-field="no_laporan"
|
||||||
caption="No Laporan"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -559,7 +559,7 @@
|
|||||||
data-field="waktu_lapor"
|
data-field="waktu_lapor"
|
||||||
caption="Tgl Lapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -568,7 +568,7 @@
|
|||||||
caption="Dalam Proses Bidang"
|
caption="Dalam Proses Bidang"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -577,7 +577,7 @@
|
|||||||
caption="Selesai Bidang Unit"
|
caption="Selesai Bidang Unit"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -586,7 +586,7 @@
|
|||||||
caption="Durasi Response Time"
|
caption="Durasi Response Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -595,7 +595,7 @@
|
|||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -604,7 +604,7 @@
|
|||||||
caption="Status"
|
caption="Status"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -613,7 +613,7 @@
|
|||||||
caption="IDPEL/NO METER"
|
caption="IDPEL/NO METER"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="data-waktu"
|
cell-template="formatTime"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -622,7 +622,7 @@
|
|||||||
caption="Nama Pelapor"
|
caption="Nama Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -631,7 +631,7 @@
|
|||||||
caption="Alamat Pelapor"
|
caption="Alamat Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -640,7 +640,7 @@
|
|||||||
caption="No Tlp Pelapor"
|
caption="No Tlp Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="200"
|
:width="200"
|
||||||
@@ -649,7 +649,7 @@
|
|||||||
caption="Keterangan Pelapor"
|
caption="Keterangan Pelapor"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -658,7 +658,7 @@
|
|||||||
caption="Rayon"
|
caption="Rayon"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -667,7 +667,7 @@
|
|||||||
caption="Uraian"
|
caption="Uraian"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@@ -676,22 +676,22 @@
|
|||||||
caption="Respon Pelanggan"
|
caption="Respon Pelanggan"
|
||||||
:allow-resizing="false"
|
:allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="cellLeft"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<template #cellLeft="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cellRight="{ data }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right cursor-pointer">
|
<p class="text-right cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #formatTime="{ data }">
|
||||||
<p>
|
<p>
|
||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -1,54 +1,139 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
:report-button="true"
|
||||||
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
:min-width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatText"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
<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
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Gangguan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
|
css-class="custom-table-column"
|
||||||
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>
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
|
css-class="custom-table-column"
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
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>
|
||||||
<DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
|
<DxColumn
|
||||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="percent" />
|
: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 }">
|
<template #percent="{ data }">
|
||||||
<p>{{ data.text }}%</p>
|
<p>{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -162,4 +247,4 @@ const filterData = (params: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,40 +1,102 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
:report-button="true"
|
||||||
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
:min-width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatText"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
|
alignment="center"
|
||||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
data-field="terencana"
|
||||||
<DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
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">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -146,4 +208,4 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,46 +1,113 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
:report-button="true"
|
||||||
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :min-width="250" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
:min-width="250"
|
||||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
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 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"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
|
alignment="center"
|
||||||
caption="Total Gangguan" css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
<DxColumn
|
||||||
caption="Jan 2020" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
|
alignment="center"
|
||||||
caption="Total Keluhan" css-class="custom-table-column" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
<DxColumn
|
||||||
caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="percent" />
|
: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 }">
|
<template #percent="{ data }">
|
||||||
<p>{{ data.text }}%</p>
|
<p>{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -160,4 +227,4 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,86 +1,242 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
:report-button="true"
|
||||||
|
@reset-form="data = []"
|
||||||
|
@run-search="() => filterData(filters)"
|
||||||
|
class="mb-4"
|
||||||
|
>
|
||||||
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
: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}`"
|
<DxColumn
|
||||||
css-class="custom-table-column">
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
|
:caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
|
||||||
caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
|
>
|
||||||
caption="Gangguan" 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 alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
|
<DxColumn
|
||||||
data-type="number" caption="Keluhan" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
|
alignment="center"
|
||||||
data-type="number" caption="Gangguan" css-class="custom-table-column" />
|
data-field="total_keluhan_informasi_tahun_sebelumnya"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
|
data-type="number"
|
||||||
caption="Total" css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
<DxColumn
|
||||||
data-field="total_tahun_sebelumnya" data-type="number" />
|
alignment="center"
|
||||||
|
caption="Total Komplain"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
data-field="total_tahun_sebelumnya"
|
||||||
|
data-type="number"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
<DxColumn
|
||||||
css-class="custom-table-column">
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
|
:caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
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
|
||||||
|
: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 alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
|
<DxColumn
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
data-field="total_keluhan_informasi_tahun_ini"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
|
data-type="number"
|
||||||
caption="Total" css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
<DxColumn
|
||||||
data-field="total_tahun_ini" data-type="number" />
|
alignment="center"
|
||||||
|
caption="Total Komplain"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
data-field="total_tahun_ini"
|
||||||
|
data-type="number"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="delta_keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
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>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" cell-template="percent" />
|
data-field="persen_delta_keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
|
data-type="number"
|
||||||
caption="Informasi" css-class="custom-table-column" cell-template="percent" />
|
caption="Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
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>
|
</DxColumn>
|
||||||
|
|
||||||
<template #percent="{ data }">
|
<template #percent="{ data }">
|
||||||
<p>{{ data.text }}%</p>
|
<p>{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -197,4 +353,4 @@ const filterData = (params: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,53 +1,133 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
:min-width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatText"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
<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
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Gangguan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
|
css-class="custom-table-column"
|
||||||
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>
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
|
css-class="custom-table-column"
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
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>
|
||||||
<DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
|
<DxColumn
|
||||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="percent" />
|
: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 }">
|
<template #percent="{ data }">
|
||||||
<p>{{ data.text }}%</p>
|
<p>{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -122,14 +202,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.agingComplaintKumulatif, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
regional: '',
|
queries.monalisa.laporan.kumulatif.agingComplaintKumulatif,
|
||||||
idUlp: 0,
|
{
|
||||||
idUid: 0,
|
regional: '',
|
||||||
idUp3: 0,
|
idUlp: 0,
|
||||||
bulan: 10,
|
idUid: 0,
|
||||||
tahun: 2023
|
idUp3: 0,
|
||||||
})
|
bulan: 10,
|
||||||
|
tahun: 2023
|
||||||
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||||
currentYear.value = tahun.id
|
currentYear.value = tahun.id
|
||||||
@@ -155,4 +238,4 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,39 +1,96 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
:min-width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatText"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
|
alignment="center"
|
||||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
data-field="terencana"
|
||||||
<DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
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">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -141,4 +198,4 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,45 +1,107 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :min-width="250" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
:min-width="250"
|
||||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
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 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"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
|
alignment="center"
|
||||||
caption="Total Gangguan" css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
<DxColumn
|
||||||
caption="Jan 2020" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
|
alignment="center"
|
||||||
caption="Total Keluhan" css-class="custom-table-column" />
|
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>
|
</DxColumn>
|
||||||
<DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
|
<DxColumn
|
||||||
caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="percent" />
|
: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 }">
|
<template #percent="{ data }">
|
||||||
<p>{{ data.text }}%</p>
|
<p>{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -112,14 +174,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
regional: '',
|
queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif,
|
||||||
idUlp: 0,
|
{
|
||||||
idUid: 0,
|
regional: '',
|
||||||
idUp3: 0,
|
idUlp: 0,
|
||||||
bulan: 10,
|
idUid: 0,
|
||||||
tahun: 2023
|
idUp3: 0,
|
||||||
})
|
bulan: 10,
|
||||||
|
tahun: 2023
|
||||||
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||||
|
|
||||||
@@ -144,4 +209,4 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,85 +1,236 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
<DxLoadPanel
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
: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" />
|
<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" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="cell-left" />
|
: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}`"
|
<DxColumn
|
||||||
css-class="custom-table-column">
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
|
:caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
|
||||||
caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
|
>
|
||||||
caption="Gangguan" 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 alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
|
<DxColumn
|
||||||
data-type="number" caption="Keluhan" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
|
alignment="center"
|
||||||
data-type="number" caption="Gangguan" css-class="custom-table-column" />
|
data-field="total_keluhan_informasi_tahun_sebelumnya"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
|
data-type="number"
|
||||||
caption="Total" css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
<DxColumn
|
||||||
data-field="total_tahun_sebelumnya" data-type="number" />
|
alignment="center"
|
||||||
|
caption="Total Komplain"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
data-field="total_tahun_sebelumnya"
|
||||||
|
data-type="number"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
<DxColumn
|
||||||
css-class="custom-table-column">
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
|
:caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
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
|
||||||
|
: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 alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
|
<DxColumn
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
data-field="total_keluhan_informasi_tahun_ini"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
|
data-type="number"
|
||||||
caption="Total" css-class="custom-table-column" />
|
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>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
<DxColumn
|
||||||
data-field="total_tahun_ini" data-type="number" />
|
alignment="center"
|
||||||
|
caption="Total Komplain"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
data-field="total_tahun_ini"
|
||||||
|
data-type="number"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="delta_keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
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>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
<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"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" cell-template="percent" />
|
data-field="persen_delta_keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
|
data-type="number"
|
||||||
caption="Informasi" css-class="custom-table-column" cell-template="percent" />
|
caption="Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="percent" />
|
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>
|
</DxColumn>
|
||||||
|
|
||||||
<template #percent="{ data }">
|
<template #percent="{ data }">
|
||||||
<p>{{ data.text }}%</p>
|
<p>{{ data.text }}%</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #cell-left="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left">
|
<p class="text-left">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
@@ -155,14 +306,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
regional: '',
|
queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif,
|
||||||
idUlp: 0,
|
{
|
||||||
idUid: 0,
|
regional: '',
|
||||||
idUp3: 0,
|
idUlp: 0,
|
||||||
bulan: 10,
|
idUid: 0,
|
||||||
tahun: 2023
|
idUp3: 0,
|
||||||
})
|
bulan: 10,
|
||||||
|
tahun: 2023
|
||||||
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||||
currentYear.value = tahun.id
|
currentYear.value = tahun.id
|
||||||
|
|||||||
Reference in New Issue
Block a user