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:
Dede Fuji Abdul
2024-03-13 00:38:50 +07:00
parent 772f893d83
commit ae33b9b3a6
3 changed files with 204 additions and 42 deletions

View File

@@ -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'