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

Update table columns and add summary items

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
View File

@ -40,11 +40,13 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn
:width="50" :width="100"
alignment="center" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" caption="NO"
css-class="custom-table-column" css-class="custom-table-column"
data-field="no"
data-type="number"
/> />
<DxColumn <DxColumn
:width="170" :width="170"
@ -52,6 +54,7 @@
data-field="media" data-field="media"
caption="Nama Media" caption="Nama Media"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="cell-left"
/> />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn <DxColumn
@ -64,6 +67,34 @@
css-class="custom-table-column" css-class="custom-table-column"
/> />
</DxColumn> </DxColumn>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Call PLN 123"
show-in-column="no"
css-class="text-white"
/>
<DxTotalItem
v-for="i in 31"
summary-type="sum"
display-format="{0}"
:column="`tgl${i}`"
css-class="text-white"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
</DxSummary>
<template #cell-left="{ data }">
<p class="text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -72,7 +103,6 @@
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue' import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -82,7 +112,9 @@ import {
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid' } 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'

141
src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
View File

@ -45,11 +45,13 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn
:width="50" :width="100"
alignment="center" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" caption="NO"
css-class="custom-table-column" css-class="custom-table-column"
data-type="number"
data-field="no"
/> />
<DxColumn <DxColumn
:width="170" :width="170"
@ -57,6 +59,16 @@
data-field="tanggal_lapor" data-field="tanggal_lapor"
caption="Tanggal Lapor" caption="Tanggal Lapor"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="cell-left"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="0"
v-if="filters.groupBy"
/> />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn
@ -83,6 +95,7 @@
data-type="number" data-type="number"
caption="%" caption="%"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="percent"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@ -101,6 +114,7 @@
data-type="number" data-type="number"
caption="%" caption="%"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="percent"
/> />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -217,11 +231,130 @@
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxSummary>
<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 }"> <template #data-waktu="{ data }">
<p> <p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
<template #percent="{ data }">
<p>{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<p class="text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -240,7 +373,9 @@ import {
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid' } 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'
@ -334,7 +469,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filters = ref() const filters = ref({ groupBy: false })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')

268
src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
View File

@ -45,18 +45,31 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn
:width="50" :width="100"
alignment="center" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" caption="NO"
css-class="custom-table-column" 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 <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
data-field="nama_ulp" data-field="nama_ulp"
caption="Unit" caption="Unit"
css-class="custom-table-column" css-class="custom-table-column"
cell-templete="cell-left"
/> />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn
@ -83,6 +96,7 @@
data-type="number" data-type="number"
caption="%" caption="%"
css-class="custom-table-column" css-class="custom-table-column"
cell-templete="percent"
/> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@ -101,6 +115,7 @@
data-type="number" data-type="number"
caption="%" caption="%"
css-class="custom-table-column" css-class="custom-table-column"
cell-templete="percent"
/> />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -217,11 +232,257 @@
</DxColumn> </DxColumn>
</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 }"> <template #data-waktu="{ data }">
<p> <p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
<template #percent="{ data }">
<p>{{ data.text }}%</p>
</template>
<template #cell-left="{ data }">
<p class="text-left">
{{ data.text }}
</p>
</template>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -240,7 +501,10 @@ import {
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxSummary,
DxTotalItem,
DxGroupItem
} from 'devextreme-vue/data-grid' } 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'