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> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -12,60 +12,136 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" 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="" caption="Posko" 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 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" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" 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" <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
css-class="custom-table-column" /> caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
css-class="custom-table-column" /> caption="%" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
css-class="custom-table-column" /> caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
css-class="custom-table-column" /> caption="%" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" 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" <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
css-class="custom-table-column" /> caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA" <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" 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" <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
css-class="custom-table-column" /> caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA" <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</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> </DxDataGrid>
</div> </div>
</template> </template>
@ -74,7 +150,7 @@
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' 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 { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -115,6 +191,126 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) 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(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()