Update table columns and add summary items
This commit is contained in:
@@ -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'
|
||||
|
Reference in New Issue
Block a user