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

Add custom summary calculations to RGangguan_PerTanggal.vue

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-04-02 14:56:47 +07:00
parent 232ac14df1
commit 024844d9b7
1 changed files with 202 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,7 +53,7 @@
:width="120"
alignment="center"
data-field="nama_uid"
caption="Nama UID"
caption="UID"
css-class="custom-table-column"
group-index="0"
v-if="isGroupBy"
@@ -296,6 +296,155 @@
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<DxSummary :calculate-custom-summary="calculateCustomSummary">
<DxTotalItem
display-format="TOTAL"
show-in-column="tanggal"
css-class="text-white !text-left"
/>
<DxTotalItem
column="total"
name="total"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_selesai"
name="total_selesai"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_selesai"
name="persen_selesai"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="total_inproses"
name="total_inproses"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_inproses"
name="persen_inproses"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="total_durasi_response"
name="total_durasi_response"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_response"
name="avg_durasi_response"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_response"
name="max_durasi_response"
summary-type="max"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem
column="min_durasi_response"
name="min_durasi_response"
summary-type="min"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem
column="total_diatas_sla_response"
name="total_diatas_sla_response"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_response"
name="total_dibawah_sla_response"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_durasi_recovery"
name="total_durasi_recovery"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_recovery"
name="avg_durasi_recovery"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_recovery"
name="max_durasi_recovery"
summary-type="max"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem
column="min_durasi_recovery"
name="min_durasi_recovery"
summary-type="min"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem
column="total_diatas_sla_recovery"
name="total_diatas_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_recovery"
name="total_dibawah_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
</DxDataGrid>
</div>
@@ -645,7 +794,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@@ -835,6 +986,55 @@ const filterData = async (params: any) => {
})
}
let total = 0
let total_selesai = 0
let persen_selesai = 0
let total_inproses = 0
let persen_inproses = 0
const calculateCustomSummary = (options: any) => {
if (options.name === 'total') {
if (options.summaryProcess === 'calculate') {
total += options.value
} else if (options.summaryProcess === 'finalize') {
options.totalValue = total
}
}
if (options.name === 'total_selesai') {
if (options.summaryProcess === 'calculate') {
total_selesai += options.value
} else if (options.summaryProcess === 'finalize') {
options.totalValue = total_selesai
}
}
if (options.name === 'total_inproses') {
if (options.summaryProcess === 'calculate') {
total_inproses += options.value
} else if (options.summaryProcess === 'finalize') {
options.totalValue = total_inproses
}
}
if (options.name === 'persen_selesai') {
if (options.summaryProcess === 'start') {
total = 0
total_selesai = 0
} else if (options.summaryProcess === 'finalize') {
options.totalValue = (total_selesai / total) * 100
}
}
if (options.name === 'persen_inproses') {
if (options.summaryProcess === 'start') {
total = 0
total_inproses = 0
} else if (options.summaryProcess === 'finalize') {
options.totalValue = (total_inproses / total) * 100
}
}
}
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [