Update Anomali_LAPPGU_LPP and Anomali_LAPPGP_LPP components
This commit is contained in:
Dede Fuji Abdul
@@ -4,6 +4,7 @@
|
||||
</div>
|
||||
<DxDataGrid
|
||||
ref="dataGridRef"
|
||||
:data-source="data"
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
@@ -18,6 +19,7 @@
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
@@ -27,7 +29,6 @@
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
@@ -42,59 +43,96 @@
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:min-width="170"
|
||||
data-type="text"
|
||||
data-field=""
|
||||
caption="Semua Unit"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:min-width="170"
|
||||
data-type="text"
|
||||
data-field="id_uid"
|
||||
caption="UID"
|
||||
css-class="custom-table-column"
|
||||
:group-index="1"
|
||||
name="namaUID"
|
||||
:calculate-group-value="(rowData: any) => rowData.nama_uid"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:min-width="170"
|
||||
data-type="text"
|
||||
data-field="id_up3"
|
||||
caption="UP3"
|
||||
css-class="custom-table-column"
|
||||
:group-index="1"
|
||||
name="namaUID"
|
||||
:calculate-group-value="(rowData: any) => rowData.nama_up3"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="wo_cc123"
|
||||
data-type="number"
|
||||
caption="a"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="wo_pln_mobile"
|
||||
data-type="number"
|
||||
caption="b"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="wo_loket"
|
||||
data-type="number"
|
||||
caption="c"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="wo_lainnya"
|
||||
data-type="number"
|
||||
caption="d"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="wo_total"
|
||||
data-type="number"
|
||||
caption="e=a+b+c+d"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@@ -107,30 +145,33 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="total_anomali"
|
||||
data-type="number"
|
||||
caption="f"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="anomali_cc123"
|
||||
data-type="number"
|
||||
caption="g"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="total_anomali"
|
||||
data-type="number"
|
||||
caption="h=f+g"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@@ -144,33 +185,180 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="persen_anomali_pln_mobile"
|
||||
data-type="number"
|
||||
caption="i=f/e"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatPercentage"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="persen_anomali_cc123"
|
||||
data-type="number"
|
||||
caption="j=g/e"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatPercentage"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="persen_anomali_total"
|
||||
data-type="number"
|
||||
caption="k=i+j"
|
||||
css-class="custom-table-column"
|
||||
:calculate-display-value="
|
||||
(rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
|
||||
"
|
||||
cell-template="formatPercentage"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatPercentage="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="wo_cc123"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="wo_pln_mobile"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="wo_loket"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="wo_lainnya"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="wo_total"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="anomali_pln_mobile_marking"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="anomali_cc123_marking"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="total_anomali_marking"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="persen_anomali_cc123_marking"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="persen_anomali_pln_mobile"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="persen_anomali_total"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:calculate-custom-summary="
|
||||
(options: any) => {
|
||||
if (options.summaryProcess === 'start') {
|
||||
options.totalValue = 0
|
||||
options.count = 0
|
||||
}
|
||||
if (options.summaryProcess === 'calculate') {
|
||||
if (options.value) {
|
||||
options.totalValue += options.value
|
||||
options.count++
|
||||
}
|
||||
}
|
||||
if (options.summaryProcess === 'finalize') {
|
||||
return options.totalValue / options.count
|
||||
}
|
||||
}
|
||||
"
|
||||
:calculate-display-value="
|
||||
(rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
|
||||
"
|
||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
||||
/>
|
||||
</DxSummary>
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
@@ -181,25 +369,34 @@ import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxGroupItem,
|
||||
DxGrouping,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxSelection,
|
||||
DxSummary
|
||||
} 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'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const loading = ref(false)
|
||||
const props = defineProps({
|
||||
data: Array as () => any[]
|
||||
data: Array as () => any[],
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const loading = computed(() => props.loading)
|
||||
const data = computed(() => props.data)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
|
||||
Reference in New Issue
Block a user