Update table columns and add summary items

This commit is contained in:
kur0nek-o
2024-03-01 16:33:23 +07:00
parent 91e01ca8de
commit f65d97907f
3 changed files with 439 additions and 8 deletions

View File

@@ -45,18 +45,31 @@
<DxColumnFixing :enabled="true" />
<DxColumn
:width="50"
:width="100"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
data-type="number"
data-field="no"
/>
<!-- <DxColumn
:width="120"
alignment="center"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="0"
/> -->
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Unit"
css-class="custom-table-column"
cell-templete="cell-left"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
@@ -83,6 +96,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-templete="percent"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -101,6 +115,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-templete="percent"
/>
</DxColumn>
</DxColumn>
@@ -217,11 +232,257 @@
</DxColumn>
</DxColumn>
<DxSummary>
<DxGroupItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}%"
column="persen_selesai"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}%"
column="persen_inproses"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
:show-in-group-footer="true"
/>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}%"
column="persen_selesai"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}%"
column="persen_inproses"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white"
/>
</DxSummary>
<template #data-waktu="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<template #percent="{ data }">
<p>{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<p class="text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid>
</div>
</template>
@@ -240,7 +501,10 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem,
DxGroupItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'