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

Fix alignment issues in CSS and table columns

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-07 10:51:16 +07:00
parent bfeabfdaee
commit c6bb405b57
6 changed files with 101770 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
View File

@ -19,33 +19,34 @@
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="nama_uid" caption="Nama UID" css-class="custom-table-column"
group-index="0" v-if="filters.groupBy" />
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="cellRight" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="cellRight" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="cellRight" />
</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="total_durasi_response" data-type="number"
caption="Total" css-class="custom-table-column" />
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
@ -53,17 +54,17 @@
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
</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="total_durasi_recovery" data-type="number"
caption="Total" css-class="custom-table-column" />
caption="Total" css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
@ -71,12 +72,32 @@
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
</DxColumn>
</DxColumn>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellLeft="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #cellRight="{ data }">
<p class="text-right cursor-pointer">
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
formatNumber(data.text) :
data.text }}
</p>
</template>
<template #data-waktu="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@ -90,7 +111,7 @@
import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -109,6 +130,8 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const position = { of: '#data' }
const showIndicator = ref(true)
@ -185,4 +208,7 @@ const filterData = (params: any) => {
}
const filters = ref({ groupBy: false })
onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
})
</script>