Update pagination and allowed page sizes in RGangguan_ALL.vue and add summary and group items in RGangguan_JenisGangguanSE.vue
This commit is contained in:
@ -24,10 +24,10 @@
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPaging :page-size="40" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
:allowed-page-sizes="[20, 40, 60]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
@ -54,6 +54,7 @@
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -308,12 +309,6 @@
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
|
@ -20,7 +20,6 @@
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
@ -257,135 +256,146 @@
|
||||
:show-in-group-footer="true"
|
||||
column="no"
|
||||
display-format="Total"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-left"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.jml"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.persen"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.jml"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.persen"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.rataRata"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.max"
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
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="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
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"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.rataRata"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.max"
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
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="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.lebihSla"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.kurangSla"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
cell-template="formatNumber"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #cellCenter="{ data }">
|
||||
<p class="cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
|
@ -63,6 +63,16 @@
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellCenter"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="kode"
|
||||
caption="Kode"
|
||||
css-class="custom-table-column"
|
||||
cell-template="cellCenter"
|
||||
name="kodeGroup"
|
||||
:group-index="0"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
@ -272,6 +282,151 @@
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="no"
|
||||
display-format="Total"
|
||||
css-class="!text-left"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_selesai"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="persen_selesai"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_inproses"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="persen_inproses"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_durasi_response"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="avg_durasi_response"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="max_durasi_response"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="min_durasi_response"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_diatas_sla_response"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_dibawah_sla_response"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_durasi_recovery"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="avg_durasi_recovery"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="max_durasi_recovery"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="min_durasi_recovery"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_diatas_sla_recovery"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="total_dibawah_sla_recovery"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -290,7 +445,9 @@ import {
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxSelection,
|
||||
DxSummary,
|
||||
DxGroupItem
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
|
Reference in New Issue
Block a user