defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor code to improve performance and

Browse Source 
readability.
This commit is contained in:
Dede Fuji Abdul
2023-11-08 13:29:23 +07:00
parent 85b4e69eb5
commit cbb7e0e0c4
1 changed files with 236 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
src/components/Pages/Gangguan/Table_11.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :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">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -12,60 +12,136 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column" />
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="posko" caption="Posko" css-class="custom-table-column"
:group-index="0" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
caption="%" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
caption="%" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxTotalItem name="total" summary-type="sum" display-format="Total" show-in-column="no"
css-class="text-white" />
<DxTotalItem name="total" summary-type="sum" display-format="{0}" show-in-column="laporan.total"
column="laporan.total" css-class="text-white" />
<DxTotalItem name="total" column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.max" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.min" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
</DxSummary>
</DxDataGrid>
</div>
</template>
@ -74,7 +150,7 @@
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -115,6 +191,126 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = [
{
no: 1,
posko: 'POSKO CONDET',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
{
no: 2,
posko: 'POSKO CONDET',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
{
no: 3,
posko: 'POSKO ANGKREK',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
]
onMounted(() => {
const filters = useFiltersStore()