Merge branch 'dev-defuj' of https://github.com/defuj/eis into dev-eko
This commit is contained in:
Eko Haryadi
commit
75735cff71
@ -3,7 +3,8 @@
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite --host",
|
||||
"dev": "vite",
|
||||
"host": "vite --host",
|
||||
"tailwind": "tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch",
|
||||
"build": "run-p type-check build-only",
|
||||
"preview": "vite preview --host",
|
||||
|
||||
@ -5545,10 +5545,6 @@ body {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.sm\:m-8 {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.sm\:mx-0 {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
|
||||
@ -4,7 +4,7 @@ import { ref, watch } from 'vue'
|
||||
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
|
||||
|
||||
const dateValue = ref(
|
||||
`${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}`
|
||||
`${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${(new Date().getMonth() + 1).toString().length == 1 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date().getFullYear()}`
|
||||
)
|
||||
const formatter = ref({
|
||||
date: 'DD-MM-YYYY',
|
||||
@ -15,14 +15,56 @@ const emit = defineEmits(['update:dateValue'])
|
||||
const customShortcuts = () => {
|
||||
return [
|
||||
{
|
||||
label: 'Last 15 Days',
|
||||
label: 'Hari Ini',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setHours(0, 0, 0, 0)), new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Kemarin',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setDate(date.getDate() - 1)), new Date(date.setHours(0, 0, 0, 0))]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '7 Hari Terakhir',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setDate(date.getDate() - 7)), new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '15 Hari Terakhir',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setDate(date.getDate() - 15)), new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Last Years',
|
||||
label: '30 Hari Terakhir',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setDate(date.getDate() - 30)), new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '3 Bulan Terakhir',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setMonth(date.getMonth() - 3)), new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '6 Bulan Terakhir',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setMonth(date.getMonth() - 6)), new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '1 Tahun Terakhir',
|
||||
atClick: () => {
|
||||
const date = new Date()
|
||||
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
|
||||
|
||||
@ -6,9 +6,9 @@ interface SlaOption {
|
||||
max: string
|
||||
}
|
||||
|
||||
import Select from '@/components/Select.vue';
|
||||
import DatePicker from '@/components/DatePicker.vue';
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
@ -17,8 +17,8 @@ import {
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
} from './reference'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
slaOptions: {
|
||||
@ -27,7 +27,7 @@ const props = defineProps({
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 45 menit)',
|
||||
min: '1',
|
||||
min: '0',
|
||||
max: '45'
|
||||
},
|
||||
{
|
||||
@ -143,14 +143,23 @@ onMounted(() => {
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<label class="filter-input-label">Posko:</label>
|
||||
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
|
||||
:placeholder="poskoPlaceholder" />
|
||||
<Select
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
@ -166,12 +175,19 @@ onMounted(() => {
|
||||
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
|
||||
|
||||
<div class="flex flex-1 justify-between gap-x-1.5" :class="[isHidden ? 'hidden' : '']">
|
||||
<InputWithSuffix :value="`${data.minTime} Menit`" @update:text="setMin($event)" class="flex flex-1" />
|
||||
<InputWithSuffix
|
||||
:value="`${data.minTime} Menit`"
|
||||
@update:text="setMin($event)"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix :value="`${data.maxTime} Menit`" @update:text="setMax($event)" class="flex flex-1" />
|
||||
<InputWithSuffix
|
||||
:value="`${data.maxTime} Menit`"
|
||||
@update:text="setMax($event)"
|
||||
class="flex flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -12,12 +12,20 @@
|
||||
|
||||
<Anomali_LAPPGP_LPT
|
||||
:data="data"
|
||||
:loading="loadingData"
|
||||
:filters="filters"
|
||||
@update:data-sub="dataSub = $event"
|
||||
@update:loading-sub-data="loadingSubData = $event"
|
||||
@update:marking="marking = $event"
|
||||
/>
|
||||
<Anomali_LAPPGP_LPP :data="dataSub" />
|
||||
|
||||
<Anomali_LAPPGP_LPP
|
||||
:data="dataSub"
|
||||
:filters="filters"
|
||||
:marking="marking"
|
||||
@update:loading-sub-data="loadingSubData = $event"
|
||||
/>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -29,6 +37,7 @@ import Filters from '@/components/Form/Filters.vue'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -37,6 +46,7 @@ const dataSub = ref<any[]>([])
|
||||
const dialogDetail = ref(false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const marking = ref<any>(0)
|
||||
const filters = ref({
|
||||
jenisLaporan: {
|
||||
id: 1,
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
|
||||
</div>
|
||||
<DxDataGrid
|
||||
ref="dataGridRef"
|
||||
:allow-column-reordering="true"
|
||||
@ -71,7 +68,7 @@
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="nama_petugas"
|
||||
caption="Nama Petugas"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
@ -85,11 +82,11 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="wo_total"
|
||||
data-type="number"
|
||||
caption="a"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberTotalWo"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -102,33 +99,33 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="anomali_pln_mobile_marking"
|
||||
data-field="wo_pln_mobile"
|
||||
data-type="number"
|
||||
caption="b"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberPLNMobile"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="anomali_cc123_marking"
|
||||
data-field="wo_cc123"
|
||||
data-type="number"
|
||||
caption="c"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberCC"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_anomali_marking"
|
||||
data-type="number"
|
||||
caption="d=b+c"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberTotal"
|
||||
:calculate-display-value="(rowData: any) => rowData.wo_pln_mobile + rowData.wo_cc123"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -141,7 +138,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_anomali_pln_mobile_marking"
|
||||
data-field="persen_anomali_pln_mobile"
|
||||
data-type="number"
|
||||
caption="e=b/a"
|
||||
css-class="custom-table-column"
|
||||
@ -152,7 +149,7 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_anomali_cc123_marking"
|
||||
data-field="persen_anomali_cc123"
|
||||
data-type="number"
|
||||
caption="f=c/a"
|
||||
css-class="custom-table-column"
|
||||
@ -163,17 +160,102 @@
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_anomali_marking"
|
||||
data-type="number"
|
||||
caption="g=e+f"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatPercentage"
|
||||
:calculate-display-value="
|
||||
(rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
|
||||
"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: null
|
||||
})
|
||||
"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberTotalWo="{ data }">
|
||||
<p
|
||||
class="text-right"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: null
|
||||
})
|
||||
"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberPLNMobile="{ data }">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: 1
|
||||
})
|
||||
"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberCC="{ data }">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: 2
|
||||
})
|
||||
"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberTotal="{ data }">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: 0
|
||||
})
|
||||
"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -185,23 +267,576 @@
|
||||
</template>
|
||||
|
||||
<template #formatPercentage="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p
|
||||
class="text-right"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: null
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p
|
||||
class="text-left"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: null
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p
|
||||
class="!text-right"
|
||||
@click="
|
||||
setParameterRequest({
|
||||
media: null
|
||||
})
|
||||
"
|
||||
>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
|
||||
<DetailDialog
|
||||
:open="dialogDetail"
|
||||
title="Daftar Detail Anomali Penanganan Pengaduan Berulang Petugas"
|
||||
@on-close="closedialogDetail"
|
||||
:full-width="true"
|
||||
>
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="20" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[20, 50, 100]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="UIW/D"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_up3"
|
||||
caption="UP3"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Rayon"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Nama Petugas"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="No Laporan Referensi"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl/Jam Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl/Jam Datang"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl/Jam Nyala"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_dispatch_time"
|
||||
caption="Durasi Penugasan Regu"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_perjalanan"
|
||||
caption="Durasi Perjalanan Regu"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="distance"
|
||||
caption="Jarak Closing (m)"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="dispatch_by"
|
||||
caption="Dispacth Oleh"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="diselesaikan_oleh"
|
||||
caption="Diselesaikan Oleh"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Status Induk"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="referensi_marking"
|
||||
caption="Referensi Marking"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Referensi Marking Induk"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kode_gangguan"
|
||||
caption="Kode Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jenis_gangguan"
|
||||
caption="Jenis Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="penyebab"
|
||||
caption="Penyebab"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tindakan"
|
||||
caption="Tindakan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
|
||||
<div class="p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">UIW/D:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
|
||||
<InputText :readonly="true" value="" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3>
|
||||
<InputText :readonly="true" value="" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.waktu_response"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.waktu_recovery"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataSubSelected?.durasi_response_time)
|
||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
class-name="flex-1"
|
||||
:value="
|
||||
parseInt(dataSubSelected?.durasi_dispatch_time)
|
||||
? formatWaktu(dataSubSelected?.durasi_dispatch_time)
|
||||
: '-'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataSubSelected?.durasi_perjalanan)
|
||||
? formatWaktu(dataSubSelected?.durasi_perjalanan)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jarak Closing (m):</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.distance" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.dispatch_by" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataSubSelected?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.no_telp_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataSubSelected?.keterangan_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.diselesaikan_oleh"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status Induk:</h3>
|
||||
<InputText :readonly="true" value="" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.referensi_marking"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking Induk:</h3>
|
||||
<InputText :readonly="true" value="" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.jenis_gangguan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -211,73 +846,143 @@ import {
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxGrouping,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} 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 { computed, ref } from 'vue'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
const props = defineProps({
|
||||
data: Array as () => any[]
|
||||
data: Array as () => any[],
|
||||
filters: Object as () => any,
|
||||
marking: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
const filters = computed(() => props.filters)
|
||||
const emit = defineEmits(['update:loadingSubData'])
|
||||
const data = computed(() => props.data)
|
||||
const dataSub = ref([])
|
||||
const dataSelected = ref({})
|
||||
const dataSubSelected = ref({})
|
||||
const dataSub = ref<any[]>([])
|
||||
const dataSelected = ref<any>(null)
|
||||
const dataSubSelected = ref<any>(null)
|
||||
const dialogDetail = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const parameterRequest = ref<any>({
|
||||
media: null
|
||||
})
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
|
||||
const setParameterRequest = (data: any) => {
|
||||
parameterRequest.value = data
|
||||
const parameter = parameterRequest.value
|
||||
if (parameter.media != null) {
|
||||
agreeToShowDialog.value = true
|
||||
} else {
|
||||
agreeToShowDialog.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
resetData()
|
||||
const { jenisLaporan } = filters.value
|
||||
|
||||
const selected = dataSelected.value
|
||||
const query = {
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
media: parameterRequest.value?.media,
|
||||
isMarking: props.marking,
|
||||
idPetugas: selected?.id_petugas ? selected?.id_petugas : 0
|
||||
}
|
||||
|
||||
loadingSubData.value = true
|
||||
emit('update:loadingSubData', loadingSubData.value)
|
||||
await requestGraphQl(
|
||||
jenisLaporan.name == 'Laporan Berulang Unit'
|
||||
? queries.anomali.gangguan.petugasBerulangDetailSub
|
||||
: jenisLaporan.name == 'Laporan Rating Negatif'
|
||||
? queries.anomali.gangguan.petugasRatingNegatifDetailSub
|
||||
: queries.anomali.gangguan.petugasSkipStepDetailSub,
|
||||
query
|
||||
)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
if (jenisLaporan.name == 'Laporan Berulang Unit') {
|
||||
dataSub.value =
|
||||
result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang
|
||||
} else if (jenisLaporan.name == 'Laporan Rating Negatif') {
|
||||
dataSub.value =
|
||||
result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
|
||||
} else {
|
||||
dataSub.value =
|
||||
result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep
|
||||
}
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
dialogDetail.value = true
|
||||
emit('update:loadingSubData', loadingSubData.value)
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const reportMeta = ref<any>(computed(() => props.filters))
|
||||
const clearSelection = () => {
|
||||
const dataGrid = dataGridRef.value!.instance!
|
||||
dataGrid.clearSelection()
|
||||
}
|
||||
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dialogDetail.value = true
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
if (agreeToShowDialog.value) {
|
||||
getDetail()
|
||||
}
|
||||
const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
if (selectedRowsData[0] != undefined) {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
}
|
||||
showDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExportingDetail = (e: any) => {}
|
||||
|
||||
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataSubSelected.value = data
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -227,7 +227,10 @@
|
||||
</DxColumn>
|
||||
|
||||
<template #formatNumberPLNMobileMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -239,7 +242,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberPLNMobileNonMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -251,7 +257,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberCCMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -263,7 +272,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberCCNonMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -275,7 +287,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberTotalMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -287,7 +299,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberTotalNonMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -299,7 +311,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: null, marking: null })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -311,19 +326,25 @@
|
||||
</template>
|
||||
|
||||
<template #formatPercentage="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: null, marking: null })"
|
||||
>
|
||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
|
||||
<p
|
||||
class="text-left cursor-pointer"
|
||||
@click="setParameterRequest({ media: null, marking: null })"
|
||||
>
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right" @click="setParameterRequest(null, null)">
|
||||
<p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -435,6 +456,19 @@
|
||||
/>
|
||||
</DxSummary>
|
||||
</DxDataGrid>
|
||||
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan {{ parameterRequest.media != null ? parameterRequest.media : '' }}
|
||||
{{
|
||||
parameterRequest.marking != null
|
||||
? parameterRequest.marking == 1
|
||||
? 'Marking'
|
||||
: 'Non Marking'
|
||||
: ''
|
||||
}}
|
||||
</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -453,14 +487,10 @@ import {
|
||||
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'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPT'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@ -468,31 +498,28 @@ const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const props = defineProps({
|
||||
data: Array as () => any[],
|
||||
filters: Object as () => any,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
filters: Object as () => any
|
||||
})
|
||||
const emit = defineEmits(['update:dataSub', 'update:loadingSubData', 'update:marking'])
|
||||
const filters = ref<any>(computed(() => props.filters))
|
||||
const data = computed(() => props.data)
|
||||
const dataSub = ref<any[]>([])
|
||||
const dataSelected = ref<any>(null)
|
||||
const dataSubSelected = ref<any>(null)
|
||||
const dialogDetail = ref(false)
|
||||
const loadingData = ref(computed(() => props.loading))
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const mediaSelected = ref<any>(null)
|
||||
const markingSelected = ref<any>(null)
|
||||
const reportMeta = ref<any>(computed(() => props.filters))
|
||||
const parameterRequest = ref<any>({
|
||||
media: null,
|
||||
marking: null
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
|
||||
|
||||
const setParameterRequest = (media: any, marking: any) => {
|
||||
mediaSelected.value = media
|
||||
markingSelected.value = marking
|
||||
|
||||
if (media != null && marking != null) {
|
||||
const setParameterRequest = (data: any) => {
|
||||
parameterRequest.value = data
|
||||
const parameter = parameterRequest.value
|
||||
if (parameter.media != null && parameter.marking != null) {
|
||||
emit('update:marking', parameter.marking)
|
||||
agreeToShowDialog.value = true
|
||||
} else {
|
||||
agreeToShowDialog.value = false
|
||||
@ -506,27 +533,16 @@ const resetData = () => {
|
||||
|
||||
const getDetail = async () => {
|
||||
resetData()
|
||||
const { ulp, uid, up3, jenisLaporan, periode } = filters.value
|
||||
console.table('LAPPGU', jenisLaporan)
|
||||
console.log('Media', mediaSelected.value)
|
||||
console.log('isMarking', markingSelected.value)
|
||||
console.log('periode', periode)
|
||||
const { jenisLaporan } = filters.value
|
||||
|
||||
const dateValue = periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
const query = {
|
||||
// dateFrom: dateValue[0]
|
||||
// ? dateValue[0].split('-').reverse().join('-')
|
||||
// : new Date().toISOString().slice(0, 10),
|
||||
// dateTo: dateValue[1]
|
||||
// ? dateValue[1].split('-').reverse().join('-')
|
||||
// : new Date().toISOString().slice(0, 10),
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
namaRegional: '',
|
||||
media: mediaSelected.value,
|
||||
isMarking: markingSelected.value
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
media: parameterRequest.value?.media,
|
||||
isMarking: parameterRequest.value?.marking
|
||||
}
|
||||
|
||||
loadingSubData.value = true
|
||||
@ -542,11 +558,12 @@ const getDetail = async () => {
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
if (jenisLaporan.name == 'Laporan Berulang Unit') {
|
||||
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitBerulang
|
||||
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasBerulang
|
||||
} else if (jenisLaporan.name == 'Laporan Rating Negatif') {
|
||||
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif
|
||||
dataSub.value =
|
||||
result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
|
||||
} else {
|
||||
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitSkipStep
|
||||
dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasSkipStep
|
||||
}
|
||||
} else {
|
||||
dataSub.value = []
|
||||
@ -580,30 +597,10 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,8 +10,14 @@
|
||||
/>
|
||||
</Filters>
|
||||
|
||||
<Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
|
||||
<Anomali_LAPPGU_LPP :data="dataSecond" />
|
||||
<Anomali_LAPPGU_LPT
|
||||
:data="data"
|
||||
:filters="filters"
|
||||
@update:loading-sub-data="loadingData = $event"
|
||||
/>
|
||||
<Anomali_LAPPGU_LPP :data="dataSecond" :filters="filters" />
|
||||
|
||||
<BufferDialog v-if="loadingData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -23,6 +29,7 @@ import { onMounted, ref, watch } from 'vue'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
|
||||
@ -123,17 +123,16 @@ import {
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} 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 { computed, ref } from 'vue'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPP'
|
||||
|
||||
const props = defineProps({
|
||||
data: Array as () => any[]
|
||||
data: Array as () => any[],
|
||||
filters: Object as () => any
|
||||
})
|
||||
const reportMeta = ref<any>(computed(() => props.filters))
|
||||
const data = computed(() => props.data)
|
||||
const dataSub = ref<any[]>([])
|
||||
const dataSelected = ref<any>({})
|
||||
@ -154,30 +153,10 @@ const closeDialog = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
|
||||
</div>
|
||||
|
||||
<DxDataGrid
|
||||
ref="dataGridRef"
|
||||
:allow-column-reordering="true"
|
||||
@ -276,7 +277,10 @@
|
||||
</DxColumn>
|
||||
|
||||
<template #formatNumberPLNMobileMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -288,7 +292,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberPLNMobileNonMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -300,7 +307,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberCCMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -312,7 +322,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberCCNonMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -324,7 +337,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberTotalMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -336,7 +349,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumberTotalNonMarking="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -348,7 +361,10 @@
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: null, marking: null })"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -360,19 +376,25 @@
|
||||
</template>
|
||||
|
||||
<template #formatPercentage="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setParameterRequest({ media: null, marking: null })"
|
||||
>
|
||||
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
|
||||
<p
|
||||
class="text-left cursor-pointer"
|
||||
@click="setParameterRequest({ media: null, marking: null })"
|
||||
>
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="!text-right" @click="setParameterRequest(null, null)">
|
||||
<p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -787,7 +809,7 @@
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tindakan"
|
||||
caption="Tindaan"
|
||||
caption="Tindakan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
@ -1040,29 +1062,23 @@ import {
|
||||
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 { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPT'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const loading = ref(computed(() => props.loading))
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const props = defineProps({
|
||||
data: Array as () => any[],
|
||||
filters: Object as () => any,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
filters: Object as () => any
|
||||
})
|
||||
const emit = defineEmits(['update:loadingSubData'])
|
||||
const filters = ref<any>(computed(() => props.filters))
|
||||
const data = computed(() => props.data)
|
||||
const dataSub = ref<any[]>([])
|
||||
@ -1073,14 +1089,16 @@ const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const mediaSelected = ref<any>(null)
|
||||
const markingSelected = ref<any>(null)
|
||||
const reportMeta = ref<any>(computed(() => props.filters))
|
||||
const parameterRequest = ref<any>({
|
||||
media: null,
|
||||
marking: null
|
||||
})
|
||||
|
||||
const setParameterRequest = (media: any, marking: any) => {
|
||||
mediaSelected.value = media
|
||||
markingSelected.value = marking
|
||||
|
||||
if (media != null && marking != null) {
|
||||
const setParameterRequest = (data: any) => {
|
||||
parameterRequest.value = data
|
||||
const parameter = parameterRequest.value
|
||||
if (parameter.media != null && parameter.marking != null) {
|
||||
agreeToShowDialog.value = true
|
||||
} else {
|
||||
agreeToShowDialog.value = false
|
||||
@ -1094,11 +1112,7 @@ const resetData = () => {
|
||||
|
||||
const getDetail = async () => {
|
||||
resetData()
|
||||
const { ulp, uid, up3, jenisLaporan, periode } = filters.value
|
||||
console.table('LAPPGU', jenisLaporan)
|
||||
console.log('Media', mediaSelected.value)
|
||||
console.log('isMarking', markingSelected.value)
|
||||
console.log('periode', periode)
|
||||
const { jenisLaporan, periode } = filters.value
|
||||
|
||||
const dateValue = periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
@ -1113,11 +1127,12 @@ const getDetail = async () => {
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
namaRegional: '',
|
||||
media: mediaSelected.value,
|
||||
isMarking: markingSelected.value
|
||||
media: parameterRequest.value?.media,
|
||||
isMarking: parameterRequest.value?.marking
|
||||
}
|
||||
|
||||
loadingSubData.value = true
|
||||
emit('update:loadingSubData', true)
|
||||
await requestGraphQl(
|
||||
jenisLaporan.name == 'Laporan Berulang Unit'
|
||||
? queries.anomali.gangguan.unitBerulangDetail
|
||||
@ -1145,6 +1160,7 @@ const getDetail = async () => {
|
||||
.finally(() => {
|
||||
loadingSubData.value = false
|
||||
dialogDetail.value = true
|
||||
emit('update:loadingSubData', false)
|
||||
})
|
||||
}
|
||||
|
||||
@ -1168,30 +1184,10 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</Filters>
|
||||
|
||||
<Anomali_LAPPKU_LPT :data="data" :loading="loadingData" :filters="filters" />
|
||||
<Anomali_LAPPKU_LPP :data="dataSecond" />
|
||||
<Anomali_LAPPKU_LPP :data="dataSecond" :filters="filters" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -124,20 +124,18 @@ import {
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} 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 { computed, ref } from 'vue'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPP'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const props = defineProps({
|
||||
data: Array as () => any[],
|
||||
filters: Object as () => any,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -145,36 +143,16 @@ const props = defineProps({
|
||||
})
|
||||
const data = computed(() => props.data)
|
||||
const loading = ref(false)
|
||||
const reportMeta = ref<any>(computed(() => props.filters))
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value, true)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const clearSelection = () => {
|
||||
const dataGrid = dataGridRef.value!.instance!
|
||||
|
||||
@ -728,6 +728,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loading" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -747,16 +749,14 @@ import {
|
||||
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'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPT'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
@ -780,6 +780,7 @@ const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const mediaSelected = ref<any>(null)
|
||||
const reportMeta = ref<any>(computed(() => props.filters))
|
||||
|
||||
const setParameterRequest = (media: any) => {
|
||||
mediaSelected.value = media
|
||||
@ -855,30 +856,10 @@ const getDetail = async () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type1 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
@ -193,7 +199,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -868,14 +874,8 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 Filters from '@/components/Form/Filters.vue'
|
||||
import { Type1 } from '@/components/Form/FiltersType'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
@ -884,6 +884,12 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Cico/LaporanCICO'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -899,6 +905,12 @@ const dataSub = ref<any[]>([])
|
||||
const dialogDetail = ref(false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
posko: { id: 0, name: 'Semua Posko' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
|
||||
@ -951,30 +963,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
@ -1021,6 +1022,8 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -122,7 +122,7 @@
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="nama_posko_lama"
|
||||
caption="Posko Asal"
|
||||
@ -130,7 +130,7 @@
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="nama_posko_baru"
|
||||
caption="Posko Tujuan"
|
||||
@ -138,7 +138,7 @@
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
@ -154,7 +154,7 @@
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
@ -162,7 +162,7 @@
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
@ -174,7 +174,7 @@
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -194,7 +194,7 @@
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="nama_posko_lama"
|
||||
caption="Posko"
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
|
||||
min: '1',
|
||||
min: '0',
|
||||
max: '180'
|
||||
},
|
||||
{
|
||||
|
||||
@ -60,50 +60,187 @@
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
|
||||
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatDPT" />
|
||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
|
||||
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
|
||||
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_dispatch"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatDPT"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="max_durasi_dispatch"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="min_durasi_dispatch"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_diatas_sla_dispatch"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_dibawah_sla_dispatch"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRPT" />
|
||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_response"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatRPT"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="max_durasi_response"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="min_durasi_response"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_diatas_sla_response"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_dibawah_sla_response"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||
caption="Rata-Rata" :allow-resizing="false" cs s-class="custom-table-column" cell-template="formatRCT" />
|
||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="avg_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatRCT"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="max_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="min_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_diatas_sla_recovery"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_dibawah_sla_recovery"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total" column="total"
|
||||
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_selesai" column="total_selesai"
|
||||
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_selesai" column="persen_selesai"
|
||||
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="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="total_selesai"
|
||||
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_selesai"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
||||
/>
|
||||
<!-- <DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
@ -112,48 +249,143 @@
|
||||
summary-type="custom"
|
||||
css-class="!text-right"
|
||||
/> -->
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_inproses" column="total_inproses"
|
||||
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_inproses"
|
||||
column="persen_inproses" summary-type="custom" css-class="!text-right"
|
||||
:customize-text="(e: any) => formatPercentage(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
|
||||
summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="total_inproses"
|
||||
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_inproses"
|
||||
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="avg_durasi_dispatch"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
|
||||
summary-type="max" css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
|
||||
summary-type="min" css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
|
||||
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_dibawah_sla_dispatch"
|
||||
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="avg_durasi_response"
|
||||
summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
|
||||
summary-type="max" css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
|
||||
summary-type="min" css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
|
||||
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_dibawah_sla_response"
|
||||
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="avg_durasi_recovery"
|
||||
summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
|
||||
summary-type="max" css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
|
||||
summary-type="min" css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
|
||||
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_dibawah_sla_recovery"
|
||||
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="max_durasi_dispatch"
|
||||
summary-type="max"
|
||||
css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="min_durasi_dispatch"
|
||||
summary-type="min"
|
||||
css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="total_diatas_sla_dispatch"
|
||||
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_dibawah_sla_dispatch"
|
||||
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="avg_durasi_response"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="max_durasi_response"
|
||||
summary-type="max"
|
||||
css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="min_durasi_response"
|
||||
summary-type="min"
|
||||
css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="total_diatas_sla_response"
|
||||
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_dibawah_sla_response"
|
||||
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="avg_durasi_recovery"
|
||||
summary-type="avg"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="max_durasi_recovery"
|
||||
summary-type="max"
|
||||
css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="min_durasi_recovery"
|
||||
summary-type="min"
|
||||
css-class="!text-center"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="total_diatas_sla_recovery"
|
||||
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_dibawah_sla_recovery"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
@ -571,57 +803,22 @@ const setAgreementDialog = (column: string) => {
|
||||
agreeToShowDialog.value = false
|
||||
}
|
||||
}
|
||||
let total_selesai = 0;
|
||||
let total_inproses = 0;
|
||||
let total = 0;
|
||||
|
||||
const calculateCustomSummary = (options: any) => {
|
||||
if (options.name == 'persenSelesai') {
|
||||
console.log(options.component.persen_selesai)
|
||||
|
||||
if (options.name === 'total') {
|
||||
if (options.summaryProcess === 'calculate') {
|
||||
total += options.value;
|
||||
} else if (options.summaryProcess === 'finalize') {
|
||||
options.totalValue = total
|
||||
|
||||
}
|
||||
}
|
||||
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 === 'total_selesai') {
|
||||
if (options.summaryProcess === 'calculate') {
|
||||
total_selesai += options.value;
|
||||
|
||||
} else if (options.summaryProcess === 'finalize') {
|
||||
options.totalValue = total_selesai
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (options.name === 'persen_selesai') {
|
||||
if (options.summaryProcess === 'start') {
|
||||
total_selesai = 0;
|
||||
total = 0;
|
||||
} else if (options.summaryProcess === 'calculate') {
|
||||
|
||||
} else if (options.summaryProcess === 'finalize') {
|
||||
|
||||
options.totalValue = (total_selesai / total) * 100;
|
||||
}
|
||||
}
|
||||
if (options.name === 'persen_inproses') {
|
||||
if (options.summaryProcess === 'start') {
|
||||
total_inproses = 0;
|
||||
total = 0;
|
||||
} else if (options.summaryProcess === 'calculate') {
|
||||
|
||||
} else if (options.summaryProcess === 'finalize') {
|
||||
|
||||
options.totalValue = (total_inproses / total) * 100;
|
||||
switch (options.summaryProcess) {
|
||||
case 'start':
|
||||
// Initializing "totalValue" here
|
||||
options.totalValue = 1
|
||||
break
|
||||
case 'calculate':
|
||||
// Modifying "totalValue" here
|
||||
break
|
||||
case 'finalize':
|
||||
// Assigning the final value to "totalValue" here
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -782,7 +979,7 @@ const showDetail = () => {
|
||||
if (agreeToShowDialog.value) {
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
// getDetail()
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
@ -832,29 +1029,29 @@ onMounted(() => {
|
||||
nama_ulp: 'ULP DOMPU',
|
||||
id_posko: 443201,
|
||||
nama_posko: 'POSKO ULP DOMPU',
|
||||
total: 34,
|
||||
total_selesai: 34,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_dispatch: 4.735294117647059,
|
||||
min_durasi_dispatch: 11,
|
||||
max_durasi_dispatch: 2562,
|
||||
total_dibawah_sla_dispatch: 19,
|
||||
total_diatas_sla_dispatch: 15,
|
||||
avg_durasi_response: 29.848484848484848,
|
||||
min_durasi_response: 625,
|
||||
max_durasi_response: 4202,
|
||||
total_dibawah_sla_response: 27,
|
||||
total_diatas_sla_response: 6,
|
||||
avg_durasi_recovery: 50.53125,
|
||||
min_durasi_recovery: 1282,
|
||||
max_durasi_recovery: 5794,
|
||||
total_dibawah_sla_recovery: 32,
|
||||
total: 426,
|
||||
total_selesai: 374,
|
||||
persen_selesai: 87.79342723004694,
|
||||
total_inproses: 52,
|
||||
persen_inproses: 12.206572769953052,
|
||||
avg_durasi_dispatch: 2.4715447154471546,
|
||||
min_durasi_dispatch: 0,
|
||||
max_durasi_dispatch: 723,
|
||||
total_dibawah_sla_dispatch: 331,
|
||||
total_diatas_sla_dispatch: 38,
|
||||
avg_durasi_response: 12.729411764705882,
|
||||
min_durasi_response: 160,
|
||||
max_durasi_response: 2004,
|
||||
total_dibawah_sla_response: 340,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 21.4070796460177,
|
||||
min_durasi_recovery: 160,
|
||||
max_durasi_recovery: 2619,
|
||||
total_dibawah_sla_recovery: 339,
|
||||
total_diatas_sla_recovery: 0,
|
||||
total_dispatch: 34,
|
||||
total_response: 33,
|
||||
total_recovery: 32
|
||||
count_durasi_dispatch: 394,
|
||||
count_durasi_response: 365,
|
||||
count_durasi_recovery: 364
|
||||
},
|
||||
{
|
||||
id: 316201,
|
||||
@ -867,29 +1064,64 @@ onMounted(() => {
|
||||
nama_ulp: 'ULP MARISA',
|
||||
id_posko: 316201,
|
||||
nama_posko: 'POSKO ULP MARISA',
|
||||
total: 19,
|
||||
total_selesai: 19,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_dispatch: 1.6111111111111112,
|
||||
min_durasi_dispatch: 12,
|
||||
max_durasi_dispatch: 437,
|
||||
total_dibawah_sla_dispatch: 16,
|
||||
total_diatas_sla_dispatch: 2,
|
||||
avg_durasi_response: 17.22222222222222,
|
||||
min_durasi_response: 483,
|
||||
max_durasi_response: 2541,
|
||||
total_dibawah_sla_response: 18,
|
||||
total: 152,
|
||||
total_selesai: 121,
|
||||
persen_selesai: 79.60526315789474,
|
||||
total_inproses: 31,
|
||||
persen_inproses: 20.394736842105264,
|
||||
avg_durasi_dispatch: 1.5221238938053097,
|
||||
min_durasi_dispatch: 1,
|
||||
max_durasi_dispatch: 1748,
|
||||
total_dibawah_sla_dispatch: 101,
|
||||
total_diatas_sla_dispatch: 12,
|
||||
avg_durasi_response: 10.786516853932584,
|
||||
min_durasi_response: 54,
|
||||
max_durasi_response: 2349,
|
||||
total_dibawah_sla_response: 89,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 31.38888888888889,
|
||||
min_durasi_recovery: 1183,
|
||||
max_durasi_recovery: 3216,
|
||||
total_dibawah_sla_recovery: 18,
|
||||
avg_durasi_recovery: 19.32183908045977,
|
||||
min_durasi_recovery: 54,
|
||||
max_durasi_recovery: 3723,
|
||||
total_dibawah_sla_recovery: 87,
|
||||
total_diatas_sla_recovery: 0,
|
||||
total_dispatch: 18,
|
||||
total_response: 18,
|
||||
total_recovery: 18
|
||||
count_durasi_dispatch: 118,
|
||||
count_durasi_response: 94,
|
||||
count_durasi_recovery: 92
|
||||
},
|
||||
{
|
||||
id: 422401,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 42,
|
||||
nama_uid: 'WILAYAH PAPUA DAN PAPUA BARAT',
|
||||
id_up3: 422,
|
||||
nama_up3: 'UP3 BIAK',
|
||||
id_ulp: 42240,
|
||||
nama_ulp: 'ULP WAROPEN',
|
||||
id_posko: 422401,
|
||||
nama_posko: 'POSKO ULP WAROPEN',
|
||||
total: 15,
|
||||
total_selesai: 13,
|
||||
persen_selesai: 86.66666666666667,
|
||||
total_inproses: 2,
|
||||
persen_inproses: 13.333333333333334,
|
||||
avg_durasi_dispatch: 1.0769230769230769,
|
||||
min_durasi_dispatch: 0,
|
||||
max_durasi_dispatch: 218,
|
||||
total_dibawah_sla_dispatch: 13,
|
||||
total_diatas_sla_dispatch: 0,
|
||||
avg_durasi_response: 11.833333333333334,
|
||||
min_durasi_response: 119,
|
||||
max_durasi_response: 1756,
|
||||
total_dibawah_sla_response: 12,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 20.545454545454547,
|
||||
min_durasi_recovery: 119,
|
||||
max_durasi_recovery: 1908,
|
||||
total_dibawah_sla_recovery: 11,
|
||||
total_diatas_sla_recovery: 0,
|
||||
count_durasi_dispatch: 15,
|
||||
count_durasi_response: 14,
|
||||
count_durasi_recovery: 13
|
||||
},
|
||||
{
|
||||
id: 433801,
|
||||
@ -902,29 +1134,29 @@ onMounted(() => {
|
||||
nama_ulp: 'ULP SUMBA BARAT DAYA',
|
||||
id_posko: 433801,
|
||||
nama_posko: 'POSKO ULP SUMBA BARAT DAYA',
|
||||
total: 34,
|
||||
total_selesai: 34,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_dispatch: 2.5185185185185186,
|
||||
min_durasi_dispatch: 17,
|
||||
max_durasi_dispatch: 473,
|
||||
total_dibawah_sla_dispatch: 23,
|
||||
total_diatas_sla_dispatch: 4,
|
||||
avg_durasi_response: 35.34615384615385,
|
||||
min_durasi_response: 768,
|
||||
max_durasi_response: 5726,
|
||||
total_dibawah_sla_response: 19,
|
||||
total_diatas_sla_response: 7,
|
||||
avg_durasi_recovery: 57.34615384615385,
|
||||
min_durasi_recovery: 1571,
|
||||
max_durasi_recovery: 7213,
|
||||
total_dibawah_sla_recovery: 26,
|
||||
total: 188,
|
||||
total_selesai: 162,
|
||||
persen_selesai: 86.17021276595744,
|
||||
total_inproses: 26,
|
||||
persen_inproses: 13.829787234042554,
|
||||
avg_durasi_dispatch: 1.4675324675324675,
|
||||
min_durasi_dispatch: 2,
|
||||
max_durasi_dispatch: 567,
|
||||
total_dibawah_sla_dispatch: 147,
|
||||
total_diatas_sla_dispatch: 7,
|
||||
avg_durasi_response: 12.777777777777779,
|
||||
min_durasi_response: 241,
|
||||
max_durasi_response: 2772,
|
||||
total_dibawah_sla_response: 134,
|
||||
total_diatas_sla_response: 1,
|
||||
avg_durasi_recovery: 26.119402985074625,
|
||||
min_durasi_recovery: 453,
|
||||
max_durasi_recovery: 3755,
|
||||
total_dibawah_sla_recovery: 134,
|
||||
total_diatas_sla_recovery: 0,
|
||||
total_dispatch: 27,
|
||||
total_response: 26,
|
||||
total_recovery: 26
|
||||
count_durasi_dispatch: 158,
|
||||
count_durasi_response: 139,
|
||||
count_durasi_recovery: 138
|
||||
},
|
||||
{
|
||||
id: 514603,
|
||||
@ -937,29 +1169,29 @@ onMounted(() => {
|
||||
nama_ulp: 'ULP NGANJUK',
|
||||
id_posko: 514603,
|
||||
nama_posko: 'POSKO ULP NGANJUK',
|
||||
total: 183,
|
||||
total_selesai: 183,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_dispatch: 11.38888888888889,
|
||||
min_durasi_dispatch: 12,
|
||||
max_durasi_dispatch: 4932,
|
||||
total_dibawah_sla_dispatch: 53,
|
||||
total_diatas_sla_dispatch: 37,
|
||||
avg_durasi_response: 14.10204081632653,
|
||||
min_durasi_response: 315,
|
||||
max_durasi_response: 2385,
|
||||
total_dibawah_sla_response: 49,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 21.73469387755102,
|
||||
min_durasi_recovery: 424,
|
||||
max_durasi_recovery: 3989,
|
||||
total_dibawah_sla_recovery: 49,
|
||||
total: 1436,
|
||||
total_selesai: 1238,
|
||||
persen_selesai: 86.2116991643454,
|
||||
total_inproses: 198,
|
||||
persen_inproses: 13.788300835654596,
|
||||
avg_durasi_dispatch: 7.207339449541284,
|
||||
min_durasi_dispatch: 4,
|
||||
max_durasi_dispatch: 2760,
|
||||
total_dibawah_sla_dispatch: 508,
|
||||
total_diatas_sla_dispatch: 582,
|
||||
avg_durasi_response: 21.72106824925816,
|
||||
min_durasi_response: 130,
|
||||
max_durasi_response: 5415,
|
||||
total_dibawah_sla_response: 945,
|
||||
total_diatas_sla_response: 66,
|
||||
avg_durasi_recovery: 27.93168316831683,
|
||||
min_durasi_recovery: 130,
|
||||
max_durasi_recovery: 5978,
|
||||
total_dibawah_sla_recovery: 1010,
|
||||
total_diatas_sla_recovery: 0,
|
||||
total_dispatch: 90,
|
||||
total_response: 49,
|
||||
total_recovery: 49
|
||||
count_durasi_dispatch: 1180,
|
||||
count_durasi_response: 1101,
|
||||
count_durasi_recovery: 1100
|
||||
},
|
||||
{
|
||||
id: 532931,
|
||||
@ -972,29 +1204,169 @@ onMounted(() => {
|
||||
nama_ulp: 'ULP LELES',
|
||||
id_posko: 532931,
|
||||
nama_posko: 'POSKO ULP LELES',
|
||||
total: 36,
|
||||
total_selesai: 36,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_dispatch: 0.6388888888888888,
|
||||
min_durasi_dispatch: 5,
|
||||
max_durasi_dispatch: 271,
|
||||
total_dibawah_sla_dispatch: 36,
|
||||
total_diatas_sla_dispatch: 0,
|
||||
avg_durasi_response: 10.38888888888889,
|
||||
min_durasi_response: 295,
|
||||
max_durasi_response: 1270,
|
||||
total_dibawah_sla_response: 36,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 21.63888888888889,
|
||||
min_durasi_recovery: 926,
|
||||
max_durasi_recovery: 1886,
|
||||
total_dibawah_sla_recovery: 36,
|
||||
total: 370,
|
||||
total_selesai: 324,
|
||||
persen_selesai: 87.56756756756758,
|
||||
total_inproses: 46,
|
||||
persen_inproses: 12.432432432432433,
|
||||
avg_durasi_dispatch: 0.9965635738831615,
|
||||
min_durasi_dispatch: 3,
|
||||
max_durasi_dispatch: 1495,
|
||||
total_dibawah_sla_dispatch: 285,
|
||||
total_diatas_sla_dispatch: 6,
|
||||
avg_durasi_response: 16.597173144876326,
|
||||
min_durasi_response: 247,
|
||||
max_durasi_response: 5372,
|
||||
total_dibawah_sla_response: 261,
|
||||
total_diatas_sla_response: 22,
|
||||
avg_durasi_recovery: 25.93594306049822,
|
||||
min_durasi_recovery: 475,
|
||||
max_durasi_recovery: 7354,
|
||||
total_dibawah_sla_recovery: 281,
|
||||
total_diatas_sla_recovery: 0,
|
||||
total_dispatch: 36,
|
||||
total_response: 36,
|
||||
total_recovery: 36
|
||||
count_durasi_dispatch: 295,
|
||||
count_durasi_response: 287,
|
||||
count_durasi_recovery: 285
|
||||
},
|
||||
{
|
||||
id: 543601,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 2,
|
||||
nama_uid: 'DISTRIBUSI JAKARTA RAYA',
|
||||
id_up3: 9,
|
||||
nama_up3: 'UP3 CIPUTAT',
|
||||
id_ulp: 54360,
|
||||
nama_ulp: 'UP3 CIPUTAT',
|
||||
id_posko: 543601,
|
||||
nama_posko: 'POSKO CIPUTAT',
|
||||
total: 3446,
|
||||
total_selesai: 2826,
|
||||
persen_selesai: 82.0081253627394,
|
||||
total_inproses: 620,
|
||||
persen_inproses: 17.99187463726059,
|
||||
avg_durasi_dispatch: 3.46793930494371,
|
||||
min_durasi_dispatch: 1,
|
||||
max_durasi_dispatch: 2761,
|
||||
total_dibawah_sla_dispatch: 1740,
|
||||
total_diatas_sla_dispatch: 303,
|
||||
avg_durasi_response: 30.737704918032787,
|
||||
min_durasi_response: 29,
|
||||
max_durasi_response: 8303,
|
||||
total_dibawah_sla_response: 1465,
|
||||
total_diatas_sla_response: 243,
|
||||
avg_durasi_recovery: 49.72835112692764,
|
||||
min_durasi_recovery: 29,
|
||||
max_durasi_recovery: 10280,
|
||||
total_dibawah_sla_recovery: 1686,
|
||||
total_diatas_sla_recovery: 0,
|
||||
count_durasi_dispatch: 2123,
|
||||
count_durasi_response: 1789,
|
||||
count_durasi_recovery: 1768
|
||||
},
|
||||
{
|
||||
id: 327601,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 32,
|
||||
nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
|
||||
id_up3: 32700,
|
||||
nama_up3: 'UP3 BULUKUMBA',
|
||||
id_ulp: 32760,
|
||||
nama_ulp: 'ULP SINJAI',
|
||||
id_posko: 327601,
|
||||
nama_posko: 'POSKO ULP SINJAI',
|
||||
total: 401,
|
||||
total_selesai: 344,
|
||||
persen_selesai: 85.785536159601,
|
||||
total_inproses: 57,
|
||||
persen_inproses: 14.214463840399002,
|
||||
avg_durasi_dispatch: 1.3757396449704142,
|
||||
min_durasi_dispatch: 1,
|
||||
max_durasi_dispatch: 2875,
|
||||
total_dibawah_sla_dispatch: 319,
|
||||
total_diatas_sla_dispatch: 19,
|
||||
avg_durasi_response: 17.36760124610592,
|
||||
min_durasi_response: 615,
|
||||
max_durasi_response: 3359,
|
||||
total_dibawah_sla_response: 318,
|
||||
total_diatas_sla_response: 3,
|
||||
avg_durasi_recovery: 31.22429906542056,
|
||||
min_durasi_recovery: 994,
|
||||
max_durasi_recovery: 3849,
|
||||
total_dibawah_sla_recovery: 321,
|
||||
total_diatas_sla_recovery: 0,
|
||||
count_durasi_dispatch: 340,
|
||||
count_durasi_response: 323,
|
||||
count_durasi_recovery: 323
|
||||
},
|
||||
{
|
||||
id: 146301,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 140,
|
||||
nama_uid: 'WILAYAH SUMATERA SELATAN, JAMBI & BENGKULU (S2JB)',
|
||||
id_up3: 1403,
|
||||
nama_up3: 'UP3 BENGKULU',
|
||||
id_ulp: 14630,
|
||||
nama_ulp: 'ULP MUARA AMAN',
|
||||
id_posko: 146301,
|
||||
nama_posko: 'POSKO ULP MUARA AMAN',
|
||||
total: 16,
|
||||
total_selesai: 14,
|
||||
persen_selesai: 87.5,
|
||||
total_inproses: 2,
|
||||
persen_inproses: 12.5,
|
||||
avg_durasi_dispatch: 3.8,
|
||||
min_durasi_dispatch: 91,
|
||||
max_durasi_dispatch: 991,
|
||||
total_dibawah_sla_dispatch: 9,
|
||||
total_diatas_sla_dispatch: 1,
|
||||
avg_durasi_response: 13.555555555555555,
|
||||
min_durasi_response: 625,
|
||||
max_durasi_response: 1117,
|
||||
total_dibawah_sla_response: 9,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 24.444444444444443,
|
||||
min_durasi_recovery: 1305,
|
||||
max_durasi_recovery: 1825,
|
||||
total_dibawah_sla_recovery: 9,
|
||||
total_diatas_sla_recovery: 0,
|
||||
count_durasi_dispatch: 10,
|
||||
count_durasi_response: 9,
|
||||
count_durasi_recovery: 9
|
||||
},
|
||||
{
|
||||
id: 561201,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 56,
|
||||
nama_uid: 'DISTRIBUSI BANTEN',
|
||||
id_up3: 534,
|
||||
nama_up3: 'UP3 BANTEN UTARA',
|
||||
id_ulp: 56120,
|
||||
nama_ulp: 'ULP CILEGON',
|
||||
id_posko: 561201,
|
||||
nama_posko: 'POSKO ULP CILEGON',
|
||||
total: 1177,
|
||||
total_selesai: 1057,
|
||||
persen_selesai: 89.80458793542905,
|
||||
total_inproses: 120,
|
||||
persen_inproses: 10.195412064570943,
|
||||
avg_durasi_dispatch: 2.6475972540045767,
|
||||
min_durasi_dispatch: 2,
|
||||
max_durasi_dispatch: 2544,
|
||||
total_dibawah_sla_dispatch: 796,
|
||||
total_diatas_sla_dispatch: 78,
|
||||
avg_durasi_response: 19.35131396957123,
|
||||
min_durasi_response: 90,
|
||||
max_durasi_response: 4412,
|
||||
total_dibawah_sla_response: 713,
|
||||
total_diatas_sla_response: 10,
|
||||
avg_durasi_recovery: 32.180281690140845,
|
||||
min_durasi_recovery: 90,
|
||||
max_durasi_recovery: 4951,
|
||||
total_dibawah_sla_recovery: 710,
|
||||
total_diatas_sla_recovery: 0,
|
||||
count_durasi_dispatch: 894,
|
||||
count_durasi_response: 743,
|
||||
count_durasi_recovery: 730
|
||||
}
|
||||
]
|
||||
dataSub.value = []
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
data-field="posko_in"
|
||||
caption="Posko IN"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberPoskoIn"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="180"
|
||||
@ -87,7 +87,7 @@
|
||||
data-field="posko_out"
|
||||
caption="Posko OUT"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberPoskoOut"
|
||||
/>
|
||||
|
||||
<DxSummary>
|
||||
@ -96,6 +96,7 @@
|
||||
column="number"
|
||||
display-format="Total"
|
||||
css-class="!text-left"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
@ -103,6 +104,7 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
@ -110,17 +112,42 @@
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
<p class="text-left cursor-pointer" @click="setPoskoSelected('')">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setPoskoSelected('')">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberPoskoIn="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setPoskoSelected('in')">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberPoskoOut="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="setPoskoSelected('out')">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -522,23 +549,27 @@ const reportMeta = ref({
|
||||
posko: { id: 0, name: 'Semua Posko' },
|
||||
periode: ''
|
||||
})
|
||||
const poskoSelected = ref('')
|
||||
const setPoskoSelected = (value: string) => {
|
||||
poskoSelected.value = value
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
loadingSubData.value = true
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const ref = dataSelected.value
|
||||
|
||||
const query = {
|
||||
var query: any = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
idUid: ref.id_uid,
|
||||
idUp3: ref.id_up3,
|
||||
idPoskoLama: ref.id_posko_lama,
|
||||
idPoskoBaru: ref.id_posko_baru
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
idPoskoLama: poskoSelected.value == 'out' ? ref.id_posko_lama : 0,
|
||||
idPoskoBaru: poskoSelected.value == 'in' ? ref.id_posko_baru : 0
|
||||
}
|
||||
|
||||
await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query)
|
||||
@ -567,9 +598,10 @@ const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
// dialogDetail.value = true
|
||||
if (poskoSelected.value != '') {
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
|
||||
@ -562,7 +562,7 @@ const showDetail = () => {
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
if (date.value != '') {
|
||||
// getDetail()
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -544,7 +544,7 @@ const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
if (monthSelected.value != null) {
|
||||
// getDetail()
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -69,9 +69,9 @@
|
||||
"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
:width="250"
|
||||
alignment="center"
|
||||
data-field="jenisGangguan"
|
||||
data-field="tipe_permasalahan"
|
||||
caption="Jenis Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
@ -80,7 +80,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.total"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
@ -90,7 +90,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.jml"
|
||||
data-field="total_selesai"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
@ -99,7 +99,7 @@
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.sudahSelesai.persen"
|
||||
data-field="persen_selesai"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
@ -110,7 +110,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.jml"
|
||||
data-field="total_inproses"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
@ -119,7 +119,7 @@
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="laporan.belumSelesai.persen"
|
||||
data-field="persen_inproses"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
@ -132,7 +132,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.total"
|
||||
data-field="total_durasi_response"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
@ -141,7 +141,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.rataRata"
|
||||
data-field="avg_durasi_response"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
@ -150,7 +150,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.max"
|
||||
data-field="max_durasi_response"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
@ -159,7 +159,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.menit.min"
|
||||
data-field="min_durasi_response"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
@ -170,7 +170,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.lebihSla"
|
||||
data-field="total_diatas_sla_response"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
@ -179,7 +179,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="responseTime.laporan.kurangSla"
|
||||
data-field="total_dibawah_sla_response"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
@ -192,7 +192,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.total"
|
||||
data-field="total_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
@ -201,7 +201,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.rataRata"
|
||||
data-field="avg_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
@ -210,7 +210,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.max"
|
||||
data-field="max_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
@ -219,7 +219,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.menit.min"
|
||||
data-field="min_durasi_recovery"
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
@ -230,7 +230,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.lebihSla"
|
||||
data-field="total_diatas_sla_recovery"
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
@ -239,7 +239,7 @@
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="recoveryTime.laporan.kurangSla"
|
||||
data-field="total_dibawah_sla_recovery"
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
@ -248,7 +248,7 @@
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxSummary>
|
||||
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="no"
|
||||
@ -257,7 +257,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.total"
|
||||
column="total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -265,7 +265,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.jml"
|
||||
column="total_selesai"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -273,7 +273,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.sudahSelesai.persen"
|
||||
column="persen_selesai"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -281,7 +281,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.jml"
|
||||
column="total_inproses"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -289,7 +289,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="laporan.belumSelesai.persen"
|
||||
column="persen_inproses"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -297,7 +297,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.total"
|
||||
column="total_durasi_response"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -305,7 +305,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.rataRata"
|
||||
column="avg_durasi_response"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -313,7 +313,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.max"
|
||||
column="max_durasi_response"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -321,7 +321,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.menit.min"
|
||||
column="min_durasi_response"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -329,7 +329,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.lebihSla"
|
||||
column="total_diatas_sla_response"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -337,7 +337,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="responseTime.laporan.kurangSla"
|
||||
column="total_dibawah_sla_response"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -345,7 +345,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.total"
|
||||
column="total_durasi_recovery"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -353,7 +353,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.rataRata"
|
||||
column="avg_durasi_recovery"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -361,7 +361,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.max"
|
||||
column="max_durasi_recovery"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -369,7 +369,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.menit.min"
|
||||
column="min_durasi_recovery"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -377,7 +377,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.lebihSla"
|
||||
column="total_diatas_sla_recovery"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -385,7 +385,7 @@
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="true"
|
||||
column="recoveryTime.laporan.kurangSla"
|
||||
column="total_dibawah_sla_recovery"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="!text-right"
|
||||
@ -563,46 +563,8 @@ const filterData = async (params: any) => {
|
||||
data.value = [...result.data.data.rekapitulasiPerJenisGangguan].map(
|
||||
(item: any, index: number) => {
|
||||
return {
|
||||
no: ++index,
|
||||
sub_kelompok: item.sub_kelompok,
|
||||
nama_sub_kelompok: item.nama_sub_kelompok,
|
||||
kode: item.kode,
|
||||
jenisGangguan: item.tipe_permasalahan,
|
||||
laporan: {
|
||||
total: item.total,
|
||||
sudahSelesai: {
|
||||
jml: item.total_selesai,
|
||||
persen: item.persen_selesai
|
||||
},
|
||||
belumSelesai: {
|
||||
jml: item.total_inproses,
|
||||
persen: item.persen_inproses
|
||||
}
|
||||
},
|
||||
responseTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_response,
|
||||
rataRata: item.avg_durasi_response,
|
||||
max: item.max_durasi_response,
|
||||
min: item.min_durasi_response
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_response,
|
||||
kurangSla: item.total_dibawah_sla_response
|
||||
}
|
||||
},
|
||||
recoveryTime: {
|
||||
menit: {
|
||||
total: item.total_durasi_recovery,
|
||||
rataRata: item.avg_durasi_recovery,
|
||||
max: item.max_durasi_recovery,
|
||||
min: item.min_durasi_recovery
|
||||
},
|
||||
laporan: {
|
||||
lebihSla: item.total_diatas_sla_recovery,
|
||||
kurangSla: item.total_dibawah_sla_recovery
|
||||
}
|
||||
}
|
||||
...item,
|
||||
no: ++index
|
||||
}
|
||||
}
|
||||
)
|
||||
@ -619,6 +581,50 @@ const filterData = async (params: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
let total = 0
|
||||
let total_selesai = 0
|
||||
let total_inproses = 0
|
||||
let count_durasi_dispatch = 0
|
||||
let total_durasi_dispatch = 0
|
||||
let count_durasi_response = 0
|
||||
let total_durasi_response = 0
|
||||
let count_durasi_recovery = 0
|
||||
let total_durasi_recovery = 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
|
||||
@ -75,6 +75,15 @@
|
||||
name="UIDGroup"
|
||||
:group-index="2"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_up3"
|
||||
caption="UP3"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
name="UP3Group"
|
||||
:group-index="3"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
@ -1174,6 +1183,7 @@ const setMonth = (month: any) => {
|
||||
|
||||
const getDetail = async () => {
|
||||
loadingSubData.value = true
|
||||
const { jenisTransaksi } = filters.value
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const ref = dataSelected.value
|
||||
const compDate = dateValue[0].split('-').reverse().join('-').split('-')
|
||||
@ -1185,11 +1195,35 @@ const getDetail = async () => {
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
posko: ref?.id_posko ? ref?.id_posko : 0,
|
||||
posko: ref?.id_ulp ? ref?.id_ulp : 0,
|
||||
idUid: ref?.id_uid ? ref?.id_uid : 0,
|
||||
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
|
||||
bulan: monthSelected.value,
|
||||
tahun: parseInt(compDate[0])
|
||||
tahun: parseInt(compDate[0]),
|
||||
is_transaksi_individual:
|
||||
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
|
||||
? 0
|
||||
: jenisTransaksi.includes('Koreksi Transaksi Individual')
|
||||
? 1
|
||||
: 2,
|
||||
is_cleansing_transaksi_tm:
|
||||
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
|
||||
? 0
|
||||
: jenisTransaksi.includes('Cleansing Traksaksi TM')
|
||||
? 1
|
||||
: 2,
|
||||
is_koreksi_transaksi_tm:
|
||||
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
|
||||
? 0
|
||||
: jenisTransaksi.includes('Koreksi Transaksi TM')
|
||||
? 1
|
||||
: 2,
|
||||
is_koreksi_gangguan_dan_anev:
|
||||
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
|
||||
? 0
|
||||
: jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev')
|
||||
? 1
|
||||
: 2
|
||||
}
|
||||
|
||||
loadingSubData.value = true
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
:report-button="true"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type9 @update:filters="(value) => updateFilters(value)" />
|
||||
<Type9 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
@ -998,11 +998,6 @@ const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
}
|
||||
|
||||
const updateFilters = (value: any) => {
|
||||
filters.value = value
|
||||
reportMeta.value.groupBy = value.groupBy
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
:report-button="true"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type9 @update:filters="(value) => updateFilters(value)" />
|
||||
<Type9 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
@ -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'
|
||||
@ -767,11 +918,6 @@ const onExportingDetail = (e: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
const updateFilters = (value: any) => {
|
||||
filters.value = value
|
||||
reportMeta.value.groupBy = value.groupBy
|
||||
}
|
||||
|
||||
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
if (selectedRowsData[0] != undefined) {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
@ -835,6 +981,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 = [
|
||||
|
||||
@ -684,7 +684,59 @@ const reportMeta = ref({
|
||||
})
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
// const ratingToShow = ref(0)
|
||||
// const nonRating = ref(0)
|
||||
|
||||
// const setAgreementDialog = (
|
||||
// status: boolean,
|
||||
// progress: number,
|
||||
// rating: number,
|
||||
// ratingStatus: number
|
||||
// ) => {
|
||||
// agreeToShowDialog.value = status
|
||||
// progressSelected.value = progress
|
||||
// ratingToShow.value = rating
|
||||
// nonRating.value = ratingStatus
|
||||
// }
|
||||
|
||||
// const getDetail = async () => {
|
||||
// const dateValue = filters.value.periode.split(' s/d ')
|
||||
// const ref = dataSelected.value
|
||||
|
||||
// const query = {
|
||||
// dateFrom: dateValue[0]
|
||||
// ? dateValue[0].split('-').reverse().join('-')
|
||||
// : new Date().toISOString().slice(0, 10),
|
||||
// dateTo: dateValue[1]
|
||||
// ? dateValue[1].split('-').reverse().join('-')
|
||||
// : new Date().toISOString().slice(0, 10),
|
||||
// posko: ref?.id_ulp ? ref?.id_ulp : 0,
|
||||
// idUid: ref?.id_uid ? ref?.id_uid : 0,
|
||||
// idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
|
||||
// idRegu: ref?.id_regu ? ref?.id_regu : 0,
|
||||
// namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
|
||||
// isSelesai: progressSelected.value,
|
||||
// isNonRating: nonRating.value,
|
||||
// nilaiRating: ratingToShow.value
|
||||
// }
|
||||
|
||||
// loadingSubData.value = true
|
||||
// await requestGraphQl(queries.gangguan.rekap.gangguanRatingDetail, query)
|
||||
// .then((result) => {
|
||||
// if (result.data.data != undefined) {
|
||||
// dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanRating
|
||||
// } else {
|
||||
// dataSub.value = []
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.error(err)
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loadingSubData.value = false
|
||||
// dialogDetail.value = true
|
||||
// })
|
||||
// }
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
progressSelected.value = progress
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 3 hari)',
|
||||
min: '1',
|
||||
max: '4381'
|
||||
min: '0',
|
||||
max: '4320'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 3 hari)',
|
||||
min: '4382',
|
||||
min: '4321',
|
||||
max: `${99999 * 60 * 24}`
|
||||
}
|
||||
]"
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 1 hari)',
|
||||
min: '1',
|
||||
max: '1501'
|
||||
min: '0',
|
||||
max: '1440'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 1 hari)',
|
||||
min: '1502',
|
||||
min: '1441',
|
||||
max: `${99999 * 60 * 24}`
|
||||
}
|
||||
]"
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
>
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div>
|
||||
<DxDataGrid
|
||||
@cell-click="onCellClicked"
|
||||
@ -503,6 +504,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -511,7 +513,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -532,7 +534,12 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportDetailToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_ALL'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
|
||||
const client = apolloClient()
|
||||
@ -766,6 +773,7 @@ const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
@ -774,6 +782,7 @@ const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -132,7 +133,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -467,18 +468,18 @@ import {
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_BerdasarMedia'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -495,6 +496,12 @@ const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const date = ref('2023-02-04')
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const setDate = (value: any) => {
|
||||
if (isNumber(value)) {
|
||||
@ -539,6 +546,8 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -602,30 +611,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -445,7 +446,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -763,6 +764,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -771,7 +773,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type13 from '@/components/Form/FiltersType/Type13.vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -787,18 +789,18 @@ import {
|
||||
DxSelection,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -817,6 +819,13 @@ const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: '',
|
||||
groupBy: false
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -863,6 +872,14 @@ const filterData = async (params: any) => {
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: params.periode,
|
||||
groupBy: params.groupBy
|
||||
}
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
@ -930,30 +947,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -588,7 +589,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -906,6 +907,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -914,7 +916,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -931,18 +933,18 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerJenisKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -960,6 +962,12 @@ const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -1003,6 +1011,8 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -1067,30 +1077,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -457,7 +458,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -778,7 +779,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type13 from '@/components/Form/FiltersType/Type13.vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -794,18 +795,18 @@ import {
|
||||
DxSelection,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -824,6 +825,13 @@ const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: '',
|
||||
groupBy: false
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -868,6 +876,14 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: params.periode,
|
||||
groupBy: params.groupBy
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -932,30 +948,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -459,7 +460,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -780,7 +781,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type13 from '@/components/Form/FiltersType/Type13.vue'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -796,12 +797,6 @@ import {
|
||||
DxSelection,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
@ -809,6 +804,12 @@ import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { reformatDate } from '@/utils/texts'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerTanggal'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -827,6 +828,13 @@ const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const isGroupBy = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: '',
|
||||
groupBy: false
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -864,6 +872,14 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: ulp ? ulp : { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
periode: params.periode,
|
||||
groupBy: params.groupBy
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -930,30 +946,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -590,7 +591,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -927,18 +928,18 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Keluhan/Rekap/RKeluhan_PerUnit'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -956,6 +957,11 @@ const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const agreeToShowDialog = ref(false)
|
||||
const progressSelected = ref(0)
|
||||
const reportMeta = ref({
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const setAgreementDialog = (status: boolean, progress: number) => {
|
||||
agreeToShowDialog.value = status
|
||||
@ -998,6 +1004,12 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: uid ? uid : { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: up3 ? up3 : { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
periode: params.periode
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -1062,30 +1074,19 @@ const showDetail = () => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,19 +2,21 @@
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type14 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
ref="dataGridRef"
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed=""
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting=""
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -41,49 +43,56 @@
|
||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nomo_gangguan"
|
||||
data-field="no_laporan"
|
||||
caption="Nomor Gangguan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelanggan"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelanggan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
:width="300"
|
||||
alignment="center"
|
||||
data-field="isi_laporan"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Isi Laporan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
:width="300"
|
||||
alignment="center"
|
||||
data-field="penyebab_gangguan"
|
||||
data-field="penyebab"
|
||||
caption="Penyebab Gangguan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_padam"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Padam"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Nyala"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -91,40 +100,123 @@
|
||||
alignment="center"
|
||||
data-field="regu"
|
||||
caption="Regu"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="sumber"
|
||||
data-field="media"
|
||||
caption="Sumber"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-field="nama_material"
|
||||
caption="Nama"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="satuan"
|
||||
data-field="satuan_material"
|
||||
caption="Satuan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="volume"
|
||||
data-field="volume_material"
|
||||
caption="Vol"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<BufferDialog v-if="loading" />
|
||||
|
||||
<DetailDialog :open="dialogDetail" title="Detail Gangguan dan Material" @on-close="closeDialog">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Gangguan:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Isi Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab Gangguan:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.penyebab" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Padam:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Nyala:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Regu:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.regu" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.satuan_material" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Vol:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.volume_material" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -141,16 +233,38 @@ import {
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import { Type14 } from '@/components/Form/FiltersType'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Material/Daftar/Material_DGMYG'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const dataSub = ref<any[]>([])
|
||||
const dataSelected = ref<any>()
|
||||
const dataSubSelected = ref<any>()
|
||||
const dialogDetail = ref(false)
|
||||
const loadingData = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: {
|
||||
id: 0,
|
||||
name: 'Semua Distribusi/Wilayah'
|
||||
},
|
||||
up3: {
|
||||
id: 0,
|
||||
name: 'Semua Area'
|
||||
},
|
||||
posko: {
|
||||
id: 0,
|
||||
name: 'Semua Unit Layanan Pelanggan'
|
||||
},
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -159,7 +273,7 @@ const resetData = () => {
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { posko, idUid, idUp3 } = params
|
||||
const { posko, uid, up3 } = params
|
||||
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
@ -168,12 +282,12 @@ const filterData = async (params: any) => {
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
idUid: idUid ? idUid.id : 0,
|
||||
idUp3: idUp3 ? idUp3.id : 0,
|
||||
posko: posko ? posko.id : 0
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0,
|
||||
idPosko: posko ? posko.id : 0
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.material.daftar.daftarGangguanDanMaterialDipakai, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
@ -181,13 +295,47 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const clearSelection = () => {
|
||||
const dataGrid = dataGridRef.value!.instance!
|
||||
dataGrid.clearSelection()
|
||||
}
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
}
|
||||
const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
if (selectedRowsData[0] != undefined) {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
showDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportToPDF(reportMeta, data)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -7,14 +7,15 @@
|
||||
ref="dataGridRef"
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed=""
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting=""
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -41,14 +42,16 @@
|
||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="kode_material"
|
||||
data-field="kode"
|
||||
caption="Kode Material"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -56,6 +59,7 @@
|
||||
alignment="center"
|
||||
data-field="nama_material"
|
||||
caption="Nama Material"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -63,6 +67,7 @@
|
||||
alignment="center"
|
||||
data-field="satuan"
|
||||
caption="Satuan"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -70,6 +75,7 @@
|
||||
alignment="center"
|
||||
data-field="sumber_material"
|
||||
caption="Sumber Material"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
|
||||
<DxColumn
|
||||
@ -80,11 +86,77 @@
|
||||
data-type="number"
|
||||
:caption="i"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
caption="Jumlah"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<BufferDialog v-if="loading" />
|
||||
|
||||
<DetailDialog
|
||||
:open="dialogDetail"
|
||||
title="Detail Rekapitulasi Pemakaian Material"
|
||||
@on-close="closeDialog"
|
||||
>
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Kode Material:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.kode" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Material:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.satuan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Material:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.sumber_material" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full" v-for="i in 31">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl {{ i }}:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected[`tgl${i}`]" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah:</h3>
|
||||
<InputText :readonly="true" :value="dataSelected?.total" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -105,12 +177,36 @@ import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Material/Rekapitulasi/Material_RPM'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const dataSub = ref<any[]>([])
|
||||
const dataSelected = ref<any>()
|
||||
const dataSubSelected = ref<any>()
|
||||
const dialogDetail = ref(false)
|
||||
const loadingData = ref(false)
|
||||
const reportMeta = ref({
|
||||
uid: {
|
||||
id: 0,
|
||||
name: 'Semua Distribusi/Wilayah'
|
||||
},
|
||||
up3: {
|
||||
id: 0,
|
||||
name: 'Semua Area'
|
||||
},
|
||||
posko: {
|
||||
id: 0,
|
||||
name: 'Semua Unit Layanan Pelanggan'
|
||||
},
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -119,7 +215,7 @@ const resetData = () => {
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { posko, idUid, idUp3 } = params
|
||||
const { posko, uid, up3 } = params
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
@ -127,12 +223,12 @@ const filterData = async (params: any) => {
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
idUid: idUid ? idUid.id : 0,
|
||||
idUp3: idUp3 ? idUp3.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0,
|
||||
posko: posko ? posko.id : 0
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.material.rekap.rekapitulasiPemakaianMaterial, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
@ -140,13 +236,47 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const clearSelection = () => {
|
||||
const dataGrid = dataGridRef.value!.instance!
|
||||
dataGrid.clearSelection()
|
||||
}
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
}
|
||||
const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
if (selectedRowsData[0] != undefined) {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
showDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportToPDF(reportMeta, data)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -92,7 +93,7 @@
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(lastMonth)} ${lastYearMoM}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberMomLastMonthLastYear"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -101,7 +102,7 @@
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(currentMonth)} ${currentYear}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberMomCurrentMonthCurrentYear"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -121,7 +122,7 @@
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberYoyCurrentMonthLastYear"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -130,7 +131,7 @@
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
cell-template="formatNumberYoyCurrentMonthCurrentYear"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -252,7 +253,67 @@
|
||||
</DxSummary>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
<p class="text-right cursor-pointer" @click="setRequirements('', 0, 0)">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberMomLastMonthLastYear="{ data }">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setRequirements('mom', lastMonth, lastYearMoM)"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberMomCurrentMonthCurrentYear="{ data }">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setRequirements('mom', currentMonth, currentYear)"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberYoyCurrentMonthLastYear="{ data }">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setRequirements('yoy', currentMonth, lastYear)"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumberYoyCurrentMonthCurrentYear="{ data }">
|
||||
<p
|
||||
class="text-right cursor-pointer"
|
||||
@click="setRequirements('yoy', currentMonth, currentYear)"
|
||||
>
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
@ -264,7 +325,7 @@
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="!text-left cursor-pointer">
|
||||
<p class="!text-left cursor-pointer" @click="setRequirements('', 0, 0)">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -710,12 +771,6 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
@ -725,6 +780,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -747,33 +808,45 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const dataType = ref('')
|
||||
const dataYear = ref(new Date().getFullYear())
|
||||
const dataMonth = ref(new Date().getMonth())
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const setRequirements = (type: string, month: number, year: number) => {
|
||||
dataType.value = type
|
||||
dataYear.value = year
|
||||
dataMonth.value = month
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
@ -801,6 +874,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -816,32 +904,30 @@ const filterData = async (params: any) => {
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
bulan: dataMonth.value,
|
||||
tahun: dataYear.value,
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
media: selected?.media ? selected?.media : '',
|
||||
isSelesai: 0,
|
||||
tanggal: '',
|
||||
namaIssuetype: '',
|
||||
namaSubissuetype: ''
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
|
||||
}
|
||||
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
await requestGraphQl(
|
||||
dataType.value == 'yoy'
|
||||
? queries.monalisa.gangguan.rekap.dispatchingTimeGangguanDetailYoy
|
||||
: queries.monalisa.gangguan.rekap.dispatchingTimeGangguanDetailMom,
|
||||
query
|
||||
)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
if (dataType.value == 'yoy') {
|
||||
dataSub.value = result.data.data.detailMonalisaDispatchingTimeGangguanYoy
|
||||
} else {
|
||||
dataSub.value = result.data.data.detailMonalisaDispatchingTimeGangguanMoM
|
||||
}
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
@ -863,8 +949,10 @@ const clearSelection = () => {
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
if (dataType.value == 'yoy' || dataType.value == 'mom') {
|
||||
getDetail()
|
||||
}
|
||||
}
|
||||
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
if (selectedRowsData[0] != undefined) {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
@ -877,8 +965,6 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
dataSubSelected.value = data
|
||||
}
|
||||
|
||||
const onExportingDetail = (e: any) => {}
|
||||
|
||||
const filters = ref()
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -285,18 +286,13 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -319,6 +315,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -351,6 +361,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -362,30 +387,10 @@ const filterData = async (params: any) => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -203,7 +204,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -500,6 +501,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -523,12 +525,6 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
@ -537,6 +533,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -555,6 +558,15 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
@ -589,6 +601,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -600,33 +622,21 @@ const filterData = async (params: any) => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -152,17 +153,16 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -181,6 +181,15 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -207,6 +216,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -218,30 +237,10 @@ const filterData = async (params: any) => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -7,6 +8,7 @@
|
||||
>
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
|
||||
<div>
|
||||
<DxDataGrid
|
||||
ref="dataGridRef"
|
||||
@ -379,18 +381,16 @@ import {
|
||||
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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -408,6 +408,17 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -433,6 +444,18 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: bulan.id,
|
||||
currentYear: tahun.id
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -447,30 +470,10 @@ const filterData = async (params: any) => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="filterData(filters)"
|
||||
@ -287,17 +288,15 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -313,33 +312,27 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
|
||||
@ -381,6 +374,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -287,18 +288,13 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { exportToPDF, exportToXLSX } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -321,6 +317,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -353,6 +363,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -363,30 +388,10 @@ const filterData = async (params: any) => {
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -270,6 +271,7 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -292,18 +294,16 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -326,6 +326,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -358,6 +372,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -369,30 +398,10 @@ const filterData = async (params: any) => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -270,6 +271,7 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -292,18 +294,16 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -326,6 +326,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
@ -358,6 +372,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -369,30 +398,10 @@ const filterData = async (params: any) => {
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -138,17 +139,16 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -168,33 +168,22 @@ const filters = ref()
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth() + 1)
|
||||
const lastYear = ref(new Date().getFullYear() - 1)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
@ -284,6 +273,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -47,6 +48,14 @@
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="NASIONAL"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
:group-index="0"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:min-width="170"
|
||||
@ -381,18 +390,16 @@ import {
|
||||
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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -411,33 +418,24 @@ const loadingSubData = ref(false)
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth() + 1)
|
||||
const lastYear = ref(new Date().getFullYear() - 1)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
@ -527,6 +525,18 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: bulan.id,
|
||||
currentYear: tahun.id
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@ -260,6 +261,7 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -283,17 +285,15 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -316,33 +316,27 @@ const lastYearMoM = ref(
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
@ -377,6 +371,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
@ -399,7 +408,8 @@ const getDetail = async () => {
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
isSelesai: 0
|
||||
}
|
||||
|
||||
loadingSubData.value = true
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -193,6 +194,323 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog
|
||||
:open="dialogDetail"
|
||||
title="Detail Keluhan Belum Selesai"
|
||||
@on-close="closedialogDetail"
|
||||
:full-width="true"
|
||||
>
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="20" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[20, 50, 100]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="UID/UIW"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_up3"
|
||||
caption="UP3"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="ULP"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="id_pelanggan"
|
||||
caption="ID Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="penyebab"
|
||||
caption="Penyebab"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kode_gangguan"
|
||||
caption="Kode Gangguan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Jenis Gangguan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time:"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Lapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p>
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
|
||||
<div class="p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" value="" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">ID Pelanggan:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.id_pengguna" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.alamat_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.no_telp_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.keterangan_pelapor"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.nama_jenis_gangguan"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataSubSelected?.durasi_response_time)
|
||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recoery Time:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||
: '-'
|
||||
"
|
||||
class-name="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
|
||||
<InputText :readonly="true" value="" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -208,6 +526,7 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
@ -215,16 +534,20 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -244,33 +567,31 @@ const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
@ -278,22 +599,19 @@ const getDetail = async () => {
|
||||
const selected = dataSelected.value
|
||||
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
|
||||
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
|
||||
bulan: currentMonth.value,
|
||||
tahun: currentYear.value
|
||||
}
|
||||
|
||||
loadingSubData.value = true
|
||||
await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
|
||||
await requestGraphQl(queries.monalisa.keluhan.rekap.keluhanBelumSelesaiDetail, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
dataSub.value = result.data.data.detailKeluhanAll
|
||||
dataSub.value = result.data.data.detailMonalisaKeluhanBelumSelesai
|
||||
} else {
|
||||
dataSub.value = []
|
||||
}
|
||||
@ -360,6 +678,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -287,18 +288,15 @@ import {
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -322,33 +320,27 @@ const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
@ -439,6 +431,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -292,18 +293,16 @@ import {
|
||||
DxTotalItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -326,36 +325,29 @@ const lastYearMoM = ref(
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
dataSub.value = []
|
||||
@ -387,6 +379,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -292,16 +293,14 @@ import {
|
||||
DxTotalItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@ -315,6 +314,20 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
lastMonth: new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1,
|
||||
lastYearMoM: new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear(),
|
||||
currentMonth: new Date().getMonth(),
|
||||
currentYear: new Date().getFullYear(),
|
||||
lastYear: new Date().getFullYear() - 1
|
||||
})
|
||||
|
||||
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
|
||||
const lastYearMoM = ref(
|
||||
@ -326,30 +339,10 @@ const lastYear = ref(currentYear.value - 1)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
@ -384,6 +377,21 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
lastMonth: lastMonth.value,
|
||||
lastYearMoM: lastYearMoM.value,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -168,35 +169,34 @@
|
||||
|
||||
<DxSummary>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="RATA-RATA NASIONAL"
|
||||
show-in-column="nama_ulp"
|
||||
column="nama_ulp"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="avg_durasi_recovery_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="sla_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="avg_durasi_recovery_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="sla_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
@ -229,7 +229,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="avg_durasi_recovery_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -239,7 +239,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="sla_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -249,7 +249,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="avg_durasi_recovery_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -259,7 +259,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="sla_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -346,7 +346,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -648,12 +648,6 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { getMonthName, getMonthNameShort } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
@ -662,6 +656,12 @@ import InputText from '@/components/InputText.vue'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -681,33 +681,33 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
@ -798,6 +798,18 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -270,18 +271,16 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -301,35 +300,25 @@ const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const getDetail = async () => {
|
||||
const dateValue = filters.value.periode.split(' s/d ')
|
||||
const selected = dataSelected.value
|
||||
@ -416,6 +405,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -260,6 +261,7 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -282,18 +284,16 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { getMonthNameShort } from '@/utils/texts'
|
||||
import { getMonthNameShort, getMonthName } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -313,33 +313,24 @@ const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
@ -384,6 +375,18 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
@ -670,7 +671,7 @@
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSubSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
@exporting="onExportingDetail"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
@ -950,6 +951,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
|
||||
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||
</template>
|
||||
|
||||
@ -973,12 +975,6 @@ import {
|
||||
DxGrouping,
|
||||
DxPager
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthNameShort } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
@ -987,6 +983,13 @@ import InputText from '@/components/InputText.vue'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX,
|
||||
exportDetailToPDF,
|
||||
exportDetailToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -1006,33 +1009,34 @@ const dialogDetail = ref(false)
|
||||
const closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
}
|
||||
}
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
const onExportingDetail = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
exportDetailToPDF(reportMeta.value, dataSub.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportDetailToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
@ -1123,6 +1127,19 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -168,35 +169,34 @@
|
||||
|
||||
<DxSummary>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="RATA-RATA NASIONAL"
|
||||
show-in-column="nama_ulp"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="avg_durasi_recovery_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="sla_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="avg_durasi_recovery_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="sla_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
@ -235,7 +235,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="avg_durasi_recovery_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -245,7 +245,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="sla_gangguan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -255,7 +255,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="avg_durasi_recovery_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -265,7 +265,7 @@
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="sla_keluhan"
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
:customize-text="(e: any) => formatNumber(e.value)"
|
||||
/>
|
||||
@ -354,16 +354,14 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { getMonthName, getMonthNameShort } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@ -379,33 +377,24 @@ const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth() + 1)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
@ -492,6 +481,18 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -270,18 +271,16 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -301,33 +300,22 @@ const filters = ref()
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: ''
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
@ -417,6 +405,16 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -282,18 +283,16 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { getMonthNameShort } from '@/utils/texts'
|
||||
import { getMonthNameShort, getMonthName } from '@/utils/texts'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -313,33 +312,24 @@ const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
@ -432,6 +422,18 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<Filters
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
:report-button="true"
|
||||
@ -729,18 +730,16 @@ import {
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} 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 { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import {
|
||||
exportToPDF,
|
||||
exportToXLSX
|
||||
} from '@/report/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -760,33 +759,25 @@ const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
const lastYear = ref(currentYear.value - 1)
|
||||
const filters = ref()
|
||||
const reportMeta = ref({
|
||||
regional: { id: 0, name: 'Semua Regional' },
|
||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||
bulan: { id: new Date().getMonth(), name: getMonthName(new Date().getMonth()) },
|
||||
tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
|
||||
periode: '',
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
})
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
exportToPDF(reportMeta.value, data.value)
|
||||
} else if (e.format === 'xlsx') {
|
||||
exportToXLSX(reportMeta.value, e)
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const getDetail = async () => {
|
||||
@ -876,6 +867,19 @@ const filterData = async (params: any) => {
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
regional: regional,
|
||||
uid: uid,
|
||||
up3: up3,
|
||||
ulp: ulp,
|
||||
bulan: bulan,
|
||||
tahun: tahun,
|
||||
periode: `${bulan.name} ${tahun.name}`,
|
||||
currentMonth: currentMonth.value,
|
||||
currentYear: currentYear.value,
|
||||
lastYear: lastYear.value
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
ref="dataGridRef"
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
@ -118,7 +119,7 @@
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<BufferDialog v-if="loading" />
|
||||
<BufferDialog v-if="loadingData" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -142,13 +143,17 @@ import { Workbook } from 'exceljs'
|
||||
import { Type17 } from '@/components/Form/FiltersType'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
const dataSub = ref<any[]>([])
|
||||
const dataSelected = ref<any>()
|
||||
const dataSubSelected = ref<any>()
|
||||
const dialogDetail = ref(false)
|
||||
const loading = ref(false)
|
||||
const loadingData = ref(false)
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
@ -182,9 +187,21 @@ const clearSelection = () => {
|
||||
const dataGrid = dataGridRef.value!.instance!
|
||||
dataGrid.clearSelection()
|
||||
}
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSub.value = []
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
}
|
||||
const closeDialog = () => {
|
||||
dialogDetail.value = false
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
if (selectedRowsData[0] != undefined) {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
showDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onRowPrepared = (e: any) => {
|
||||
@ -199,53 +216,41 @@ const onRowPrepared = (e: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
noLapor: 'K2316081000039',
|
||||
tipeIsu: 'PDPB',
|
||||
nama: 'BAPAK HAIRUL',
|
||||
unit: 'ULP BARABAI',
|
||||
noTelp: '081350000000',
|
||||
permasalahan: 'MCB KWH SERING TURUN',
|
||||
deskripsi: '-',
|
||||
tglBuat: '10/08/2016 07:18:17',
|
||||
lapUlang: 0,
|
||||
ketLapUlang: '-',
|
||||
status: 'Dalam Proses Manager Unit',
|
||||
durasi: '2638 01:59:17'
|
||||
},
|
||||
{
|
||||
noLapor: 'K2316081000039',
|
||||
tipeIsu: 'PDPB',
|
||||
nama: 'BAPAK HAIRUL',
|
||||
unit: 'ULP BARABAI',
|
||||
noTelp: '081350000000',
|
||||
permasalahan: 'MCB KWH SERING TURUN',
|
||||
deskripsi: '-',
|
||||
tglBuat: '10/08/2016 07:18:17',
|
||||
lapUlang: 0,
|
||||
ketLapUlang: '-',
|
||||
status: 'Dalam Proses Manager Unit',
|
||||
durasi: '2638 01:59:17'
|
||||
},
|
||||
{
|
||||
noLapor: 'K2316081000039',
|
||||
tipeIsu: 'PDPB',
|
||||
nama: 'BAPAK HAIRUL',
|
||||
unit: 'ULP BARABAI',
|
||||
noTelp: '081350000000',
|
||||
permasalahan: 'MCB KWH SERING TURUN',
|
||||
deskripsi: '-',
|
||||
tglBuat: '10/08/2016 07:18:17',
|
||||
lapUlang: 0,
|
||||
ketLapUlang: '-',
|
||||
status: 'Dalam Proses Manager Unit',
|
||||
durasi: '2638 01:59:17'
|
||||
}
|
||||
]
|
||||
|
||||
const filters = ref()
|
||||
const filterData = (filters: any) => {
|
||||
console.log(filters)
|
||||
const resetData = () => {
|
||||
data.value = []
|
||||
}
|
||||
|
||||
const filterData = async (params: any) => {
|
||||
resetData()
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { posko, idUid, idUp3 } = params
|
||||
const query = {
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1]
|
||||
? dateValue[1].split('-').reverse().join('-')
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
idUid: idUid ? idUid.id : 0,
|
||||
idUp3: idUp3 ? idUp3.id : 0,
|
||||
posko: posko ? posko.id : 0
|
||||
}
|
||||
|
||||
loadingData.value = true
|
||||
await requestGraphQl(queries.transaksi.transaksiAPKT, query)
|
||||
.then((result) => {
|
||||
if (result.data.data != undefined) {
|
||||
data.value = result.data.data.rekapitulasiPemakaianMaterial
|
||||
} else {
|
||||
data.value = []
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
.finally(() => {
|
||||
loadingData.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
325
src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
Normal file
325
src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts
Normal file
@ -0,0 +1,325 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Petugas'
|
||||
const fontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
wo_total: 0,
|
||||
anomali_pln_mobile_marking: 0,
|
||||
anomali_cc123_marking: 0
|
||||
// total_anomali_marking: 0
|
||||
// persen_anomali_pln_mobile_marking: 0
|
||||
// persen_anomali_cc123_marking
|
||||
// persen_anomali_marking
|
||||
}
|
||||
|
||||
rawData.forEach((item: any) => {
|
||||
total.wo_total += item.wo_total
|
||||
total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
|
||||
total.anomali_cc123_marking += item.anomali_cc123_marking
|
||||
})
|
||||
|
||||
const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
|
||||
const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / total.wo_total
|
||||
const persen_anomali_cc123_marking = total.anomali_cc123_marking / total.wo_total
|
||||
const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
|
||||
|
||||
formattedData.push([
|
||||
{
|
||||
content: 'Semua Unit',
|
||||
colSpan: 2
|
||||
},
|
||||
formatNumber(total.wo_total),
|
||||
formatNumber(total.anomali_pln_mobile_marking),
|
||||
formatNumber(total.anomali_cc123_marking),
|
||||
formatNumber(total_anomali_marking),
|
||||
formatPercentage(
|
||||
!persen_anomali_pln_mobile_marking ? 0 : persen_anomali_pln_mobile_marking * 100
|
||||
),
|
||||
formatPercentage(!persen_anomali_cc123_marking ? 0 : persen_anomali_cc123_marking * 100),
|
||||
formatPercentage(!persen_anomali_marking ? 0 : persen_anomali_marking * 100)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 25
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'Nama Unit',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Nama Petugas',
|
||||
rowSpan: 3
|
||||
},
|
||||
'Total WO',
|
||||
{
|
||||
content: 'Total Pengaduan Yang Diselesaikan Secara Anomali',
|
||||
colSpan: 3
|
||||
},
|
||||
{
|
||||
content: '% Pengaduan Diselesaikan Secara Anomali',
|
||||
colSpan: 3
|
||||
}
|
||||
],
|
||||
[
|
||||
'(PLN Mobile, CC123, DLL)',
|
||||
'PLN Mobile',
|
||||
'CC 123',
|
||||
'Total',
|
||||
'PLN Mobile',
|
||||
'CC 123',
|
||||
'Total'
|
||||
],
|
||||
['a', 'b', 'c', 'd=b+c', 'e=b/a', 'f=c/a', 'g=e+f']
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 35
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(worksheet, 5, 1, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:I1')
|
||||
worksheet.mergeCells('A2:I2')
|
||||
worksheet.mergeCells('A3:I3')
|
||||
worksheet.mergeCells('A4:I4')
|
||||
worksheet.mergeCells('A5:I5')
|
||||
worksheet.mergeCells('A7:I7')
|
||||
worksheet.mergeCells('A8:I8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
420
src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts
Normal file
420
src/report/Anomali/Gangguan/Anomali_LAPPGP_LPT.ts
Normal file
@ -0,0 +1,420 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Petugas'
|
||||
const fontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
total_petugas: 0,
|
||||
anomali_pln_mobile_marking: 0,
|
||||
anomali_pln_mobile_non_marking: 0,
|
||||
anomali_cc123_marking: 0,
|
||||
anomali_cc123_non_marking: 0
|
||||
// total_anomali_marking: 0,
|
||||
// total_anomali_non_marking: 0,
|
||||
// persen_anomali_pln_mobile_marking
|
||||
// persen_anomali_pln_mobile_non_marking
|
||||
// persen_anomali_cc123_marking
|
||||
// persen_anomali_cc123_non_marking
|
||||
// persen_anomali_marking
|
||||
// persen_anomali_non_marking
|
||||
}
|
||||
|
||||
rawData.forEach((item: any) => {
|
||||
total.total_petugas += item.total_petugas
|
||||
total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
|
||||
total.anomali_pln_mobile_non_marking += item.anomali_pln_mobile_non_marking
|
||||
total.anomali_cc123_marking += item.anomali_cc123_marking
|
||||
total.anomali_cc123_non_marking += item.anomali_cc123_non_marking
|
||||
})
|
||||
|
||||
const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
|
||||
const total_anomali_non_marking =
|
||||
total.anomali_pln_mobile_non_marking + total.anomali_cc123_non_marking
|
||||
const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / total.total_petugas
|
||||
const persen_anomali_pln_mobile_non_marking =
|
||||
total.anomali_pln_mobile_non_marking / total.total_petugas
|
||||
const persen_anomali_cc123_marking = total.anomali_cc123_marking / total.total_petugas
|
||||
const persen_anomali_cc123_non_marking = total.anomali_cc123_non_marking / total.total_petugas
|
||||
const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
|
||||
const persen_anomali_non_marking =
|
||||
persen_anomali_pln_mobile_non_marking + persen_anomali_cc123_non_marking
|
||||
|
||||
formattedData.push([
|
||||
'Semua Unit',
|
||||
formatNumber(total.total_petugas),
|
||||
formatNumber(total.anomali_pln_mobile_marking),
|
||||
formatNumber(total.anomali_pln_mobile_non_marking),
|
||||
formatNumber(total.anomali_cc123_marking),
|
||||
formatNumber(total.anomali_cc123_non_marking),
|
||||
formatNumber(total_anomali_marking),
|
||||
formatNumber(total_anomali_non_marking),
|
||||
formatPercentage(
|
||||
!persen_anomali_pln_mobile_marking || !isFinite(persen_anomali_pln_mobile_marking)
|
||||
? 0
|
||||
: persen_anomali_pln_mobile_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_pln_mobile_non_marking || !isFinite(persen_anomali_pln_mobile_non_marking)
|
||||
? 0
|
||||
: persen_anomali_pln_mobile_non_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_cc123_marking || !isFinite(persen_anomali_cc123_marking)
|
||||
? 0
|
||||
: persen_anomali_cc123_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_cc123_non_marking || !isFinite(persen_anomali_cc123_non_marking)
|
||||
? 0
|
||||
: persen_anomali_cc123_non_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_marking || !isFinite(persen_anomali_marking) ? 0 : persen_anomali_marking
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_non_marking || !isFinite(persen_anomali_non_marking)
|
||||
? 0
|
||||
: persen_anomali_non_marking * 100
|
||||
)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 25
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'Nama Unit',
|
||||
rowSpan: 4
|
||||
},
|
||||
'Total Petugas',
|
||||
{
|
||||
content: 'Total Petugas Yang Pengaduan Diselesaikan Secara Anomali',
|
||||
colSpan: 6
|
||||
},
|
||||
{
|
||||
content: '% Petugas Yang Pengaduan Diselesaikan Secara Anomali',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'a',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'PLN Mobile',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'CC 123',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Total',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'PLN Mobile',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'CC 123',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Total',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'b',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'c',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'd=b+c',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'e=b/a',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'f=c/a',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'g=e+f',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking'
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 35
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(worksheet, 5, 1, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:N1')
|
||||
worksheet.mergeCells('A2:N2')
|
||||
worksheet.mergeCells('A3:N3')
|
||||
worksheet.mergeCells('A4:N4')
|
||||
worksheet.mergeCells('A5:N5')
|
||||
worksheet.mergeCells('A7:N7')
|
||||
worksheet.mergeCells('A8:N8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
292
src/report/Anomali/Gangguan/Anomali_LAPPGU_LPP.ts
Normal file
292
src/report/Anomali/Gangguan/Anomali_LAPPGU_LPP.ts
Normal file
@ -0,0 +1,292 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Unit'
|
||||
const fontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
wo_pln_mobile: 0,
|
||||
total_anomali_marking: 0
|
||||
// persen_anomali_marking
|
||||
}
|
||||
|
||||
rawData.forEach((item: any) => {
|
||||
total.wo_pln_mobile += item.wo_pln_mobile
|
||||
total.total_anomali_marking += item.total_anomali_marking
|
||||
})
|
||||
|
||||
const persen_anomali_marking = (total.total_anomali_marking / total.wo_pln_mobile) * 100
|
||||
|
||||
formattedData.push([
|
||||
'Semua Unit',
|
||||
formatNumber(total.wo_pln_mobile),
|
||||
formatNumber(total.total_anomali_marking),
|
||||
formatPercentage(persen_anomali_marking),
|
||||
formatPercentage(
|
||||
!persen_anomali_marking || !isFinite(persen_anomali_marking) ? 0 : persen_anomali_marking
|
||||
)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 25
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'Nama Unit',
|
||||
rowSpan: 2
|
||||
},
|
||||
'Total WO PLN Mobile',
|
||||
'Total Pengaduan Yang Diselesaikan Secara Anomali',
|
||||
'% Pengaduan Yang Diselesaikan Secara Anomali'
|
||||
],
|
||||
['a', 'b', 'c=b/a']
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 35
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(worksheet, 5, 1, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:D1')
|
||||
worksheet.mergeCells('A2:D2')
|
||||
worksheet.mergeCells('A3:D3')
|
||||
worksheet.mergeCells('A4:D4')
|
||||
worksheet.mergeCells('A5:D5')
|
||||
worksheet.mergeCells('A7:D7')
|
||||
worksheet.mergeCells('A8:D8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
629
src/report/Anomali/Gangguan/Anomali_LAPPGU_LPT.ts
Normal file
629
src/report/Anomali/Gangguan/Anomali_LAPPGU_LPT.ts
Normal file
@ -0,0 +1,629 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan Anomali Penanganan Pengaduan Gangguan Unit'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
wo_cc123: 0,
|
||||
wo_pln_mobile: 0,
|
||||
wo_loket: 0,
|
||||
wo_lainnya: 0,
|
||||
// wo_total
|
||||
anomali_pln_mobile_marking: 0,
|
||||
anomali_pln_mobile_non_marking: 0,
|
||||
anomali_cc123_marking: 0,
|
||||
anomali_cc123_non_marking: 0
|
||||
// total_anomali_marking
|
||||
// total_anomali_non_marking
|
||||
// persen_anomali_pln_mobile_marking
|
||||
// persen_anomali_pln_mobile_non_marking
|
||||
// persen_anomali_cc123_marking
|
||||
// persen_anomali_cc123_non_marking
|
||||
// persen_anomali_marking
|
||||
// persen_anomali_non_marking
|
||||
}
|
||||
|
||||
rawData.forEach((item: any) => {
|
||||
total.wo_cc123 += item.wo_cc123
|
||||
total.wo_pln_mobile += item.wo_pln_mobile
|
||||
total.wo_loket += item.wo_loket
|
||||
total.wo_lainnya += item.wo_lainnya
|
||||
total.anomali_pln_mobile_marking += item.anomali_pln_mobile_marking
|
||||
total.anomali_pln_mobile_non_marking += item.anomali_pln_mobile_non_marking
|
||||
total.anomali_cc123_marking += item.anomali_cc123_marking
|
||||
total.anomali_cc123_non_marking += item.anomali_cc123_non_marking
|
||||
})
|
||||
|
||||
const wo_total = total.wo_cc123 + total.wo_pln_mobile + total.wo_loket + total.wo_lainnya
|
||||
const total_anomali_marking = total.anomali_pln_mobile_marking + total.anomali_cc123_marking
|
||||
const total_anomali_non_marking =
|
||||
total.anomali_pln_mobile_non_marking + total.anomali_cc123_non_marking
|
||||
const persen_anomali_pln_mobile_marking = total.anomali_pln_mobile_marking / wo_total
|
||||
const persen_anomali_pln_mobile_non_marking = total.anomali_pln_mobile_non_marking / wo_total
|
||||
const persen_anomali_cc123_marking = total.anomali_cc123_marking / wo_total
|
||||
const persen_anomali_cc123_non_marking = total.anomali_cc123_non_marking / wo_total
|
||||
const persen_anomali_marking = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
|
||||
const persen_anomali_non_marking =
|
||||
persen_anomali_pln_mobile_non_marking + persen_anomali_cc123_non_marking
|
||||
|
||||
formattedData.push([
|
||||
'Semua Unit',
|
||||
formatNumber(total.wo_cc123),
|
||||
formatNumber(total.wo_pln_mobile),
|
||||
formatNumber(total.wo_loket),
|
||||
formatNumber(total.wo_lainnya),
|
||||
formatNumber(wo_total),
|
||||
formatNumber(total.anomali_pln_mobile_marking),
|
||||
formatNumber(total.anomali_pln_mobile_non_marking),
|
||||
formatNumber(total.anomali_cc123_marking),
|
||||
formatNumber(total.anomali_cc123_non_marking),
|
||||
formatNumber(total_anomali_marking),
|
||||
formatNumber(total_anomali_non_marking),
|
||||
formatPercentage(
|
||||
!persen_anomali_pln_mobile_marking || !isFinite(persen_anomali_pln_mobile_marking)
|
||||
? 0
|
||||
: persen_anomali_pln_mobile_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_pln_mobile_non_marking || !isFinite(persen_anomali_pln_mobile_non_marking)
|
||||
? 0
|
||||
: persen_anomali_pln_mobile_non_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_cc123_marking || !isFinite(persen_anomali_cc123_marking)
|
||||
? 0
|
||||
: persen_anomali_cc123_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_cc123_non_marking || !isFinite(persen_anomali_cc123_non_marking)
|
||||
? 0
|
||||
: persen_anomali_cc123_non_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_marking || !isFinite(persen_anomali_marking)
|
||||
? 0
|
||||
: persen_anomali_marking * 100
|
||||
),
|
||||
formatPercentage(
|
||||
!persen_anomali_non_marking || !isFinite(persen_anomali_non_marking)
|
||||
? 0
|
||||
: persen_anomali_non_marking * 100
|
||||
)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 25
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'Nama Unit',
|
||||
rowSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Total WO',
|
||||
colSpan: 5
|
||||
},
|
||||
{
|
||||
content: 'Total Pengaduan Yang Diselesaikan Secara Anomali',
|
||||
colSpan: 6
|
||||
},
|
||||
{
|
||||
content: '% Pengaduan Yang Diselesaikan Secara Anomali',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
'CC 123',
|
||||
'PLN Mobile',
|
||||
'Loket',
|
||||
'Lainnya',
|
||||
'Total',
|
||||
{
|
||||
content: 'PLN Mobile',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'CC 123',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Total',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'PLN Mobile',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'CC 123',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Total',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'a',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'b',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'c',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'd',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'e=a+b+c+d',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'f',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'g',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'h=f+g',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'i=f/e',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'j=g/e',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'k=i+j',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking',
|
||||
'Marking',
|
||||
'Non Marking'
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 35
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Dalam Proses Bidang',
|
||||
'Selesai Bidang Unit',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Rayon',
|
||||
'Uraian',
|
||||
'Response Pelanggan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
|
||||
item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.no_telp_pelapor,
|
||||
item.keterangan_pelapor,
|
||||
item.nama_ulp,
|
||||
item.uraian,
|
||||
item.respon_pelanggan
|
||||
]),
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
},
|
||||
startY: 24,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(worksheet, 5, 1, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:R1')
|
||||
worksheet.mergeCells('A2:R2')
|
||||
worksheet.mergeCells('A3:R3')
|
||||
worksheet.mergeCells('A4:R4')
|
||||
worksheet.mergeCells('A5:R5')
|
||||
worksheet.mergeCells('A7:R7')
|
||||
worksheet.mergeCells('A8:R8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
||||
290
src/report/Anomali/Keluhan/Anomali_LAPPKU_LPP.ts
Normal file
290
src/report/Anomali/Keluhan/Anomali_LAPPKU_LPP.ts
Normal file
@ -0,0 +1,290 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan Anomali Penanganan Pengaduan Keluhan Unit'
|
||||
const fontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
wo_pln_mobile: 0,
|
||||
total_anomali: 0
|
||||
// persen_anomali
|
||||
}
|
||||
|
||||
rawData.forEach((item: any) => {
|
||||
total.wo_pln_mobile += item.wo_pln_mobile
|
||||
total.total_anomali += item.total_anomali
|
||||
})
|
||||
|
||||
const persen_anomali = (total.total_anomali / total.wo_pln_mobile) * 100
|
||||
|
||||
formattedData.push([
|
||||
'Semua Unit',
|
||||
formatNumber(total.wo_pln_mobile),
|
||||
formatNumber(total.total_anomali),
|
||||
formatPercentage(persen_anomali),
|
||||
formatPercentage(!persen_anomali || !isFinite(persen_anomali) ? 0 : persen_anomali)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 25
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'Nama Unit',
|
||||
rowSpan: 2
|
||||
},
|
||||
'Total WO PLN Mobile',
|
||||
'Total Pengaduan Yang Diselesaikan Secara Anomali',
|
||||
'% Pengaduan Yang Diselesaikan Secara Anomali'
|
||||
],
|
||||
['a', 'b', 'c=b/a']
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 35
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(worksheet, 5, 1, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:D1')
|
||||
worksheet.mergeCells('A2:D2')
|
||||
worksheet.mergeCells('A3:D3')
|
||||
worksheet.mergeCells('A4:D4')
|
||||
worksheet.mergeCells('A5:D5')
|
||||
worksheet.mergeCells('A7:D7')
|
||||
worksheet.mergeCells('A8:D8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX }
|
||||
508
src/report/Anomali/Keluhan/Anomali_LAPPKU_LPT.ts
Normal file
508
src/report/Anomali/Keluhan/Anomali_LAPPKU_LPT.ts
Normal file
@ -0,0 +1,508 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan Anomali Penanganan Pengaduan Keluhan Unit'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
wo_cc123: 0,
|
||||
wo_pln_mobile: 0,
|
||||
wo_loket: 0,
|
||||
wo_lainnya: 0,
|
||||
// wo_total
|
||||
anomali_pln_mobile: 0,
|
||||
anomali_cc123: 0
|
||||
// total_anomali: 0,
|
||||
// persen_anomali_pln_mobile
|
||||
// persen_anomali_cc123
|
||||
// total_persen_anomali
|
||||
}
|
||||
|
||||
rawData.forEach((item: any) => {
|
||||
total.wo_cc123 += item.wo_cc123
|
||||
total.wo_pln_mobile += item.wo_pln_mobile
|
||||
total.wo_loket += item.wo_loket
|
||||
total.wo_lainnya += item.wo_lainnya
|
||||
total.anomali_pln_mobile += item.anomali_pln_mobile
|
||||
total.anomali_cc123 += item.anomali_cc123
|
||||
})
|
||||
|
||||
const wo_total = total.wo_cc123 + total.wo_pln_mobile + total.wo_loket + total.wo_lainnya
|
||||
const total_anomali = total.anomali_pln_mobile + total.anomali_cc123
|
||||
const persen_anomali_pln_mobile = total.anomali_pln_mobile / wo_total
|
||||
const persen_anomali_cc123 = total.anomali_cc123 / wo_total
|
||||
const total_persen_anomali = persen_anomali_pln_mobile + persen_anomali_cc123
|
||||
|
||||
formattedData.push([
|
||||
'Semua Unit',
|
||||
formatNumber(total.wo_cc123),
|
||||
formatNumber(total.wo_pln_mobile),
|
||||
formatNumber(total.wo_loket),
|
||||
formatNumber(total.wo_lainnya),
|
||||
formatNumber(wo_total),
|
||||
formatNumber(total.anomali_pln_mobile),
|
||||
formatNumber(total.anomali_cc123),
|
||||
formatNumber(total_anomali),
|
||||
formatPercentage(!persen_anomali_pln_mobile ? 0 : persen_anomali_pln_mobile * 100),
|
||||
formatPercentage(!persen_anomali_cc123 ? 0 : persen_anomali_cc123 * 100),
|
||||
formatPercentage(!total_persen_anomali ? 0 : total_persen_anomali * 100)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['JENIS LAPORAN', ':', reportMeta.jenisLaporan.name.toUpperCase()]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 25
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'Nama Unit',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Total WO',
|
||||
colSpan: 5
|
||||
},
|
||||
{
|
||||
content: 'Total Pengaduan Yang Diselesaikan Secara Anomali',
|
||||
colSpan: 3
|
||||
},
|
||||
{
|
||||
content: '% Pengaduan Yang Diselesaikan Secara Anomali',
|
||||
colSpan: 3
|
||||
}
|
||||
],
|
||||
[
|
||||
'CC 123',
|
||||
'PLN Mobile',
|
||||
'Loket',
|
||||
'Lainnya',
|
||||
'Total',
|
||||
'PLN Mobile',
|
||||
'CC 123',
|
||||
'Total',
|
||||
'PLN Mobile',
|
||||
'CC 123',
|
||||
'Total'
|
||||
],
|
||||
['a', 'b', 'c', 'd', 'e=a+b+c+d', 'f', 'g', 'h=f+g', 'i=f/e', 'j=g/e', 'k=i+j']
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 35
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Dalam Proses Bidang',
|
||||
'Selesai Bidang Unit',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Rayon',
|
||||
'Uraian',
|
||||
'Response Pelanggan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
|
||||
item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.no_telp_pelapor,
|
||||
item.keterangan_pelapor,
|
||||
item.nama_ulp,
|
||||
item.uraian,
|
||||
item.respon_pelanggan
|
||||
]),
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
},
|
||||
startY: 24,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(worksheet, 5, 1, `JENIS LAPORAN : ${reportMeta.jenisLaporan.name.toUpperCase()}`)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:L1')
|
||||
worksheet.mergeCells('A2:L2')
|
||||
worksheet.mergeCells('A3:L3')
|
||||
worksheet.mergeCells('A4:L4')
|
||||
worksheet.mergeCells('A5:L5')
|
||||
worksheet.mergeCells('A7:L7')
|
||||
worksheet.mergeCells('A8:L8')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
||||
540
src/report/Cico/LaporanCICO.ts
Normal file
540
src/report/Cico/LaporanCICO.ts
Normal file
@ -0,0 +1,540 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan Check In Check Out (CICO)'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
|
||||
const total: any = {
|
||||
jumlah_wo_gangguan_individual: 0,
|
||||
avg_durasi_wo_gangguan_individual: [],
|
||||
avg_rpt_wo_gangguan_individual: [],
|
||||
avg_rct_wo_gangguan_individual: [],
|
||||
jumlah_wo_penugasan_khusus: 0,
|
||||
avg_wo_penugasan_khusus: []
|
||||
}
|
||||
|
||||
rawData.forEach((data: any) => {
|
||||
formattedData.push([
|
||||
data.user_regu,
|
||||
data.personil_yantek,
|
||||
data.jumlah_wo_gangguan_individual,
|
||||
data.avg_durasi_wo_gangguan_individual,
|
||||
data.avg_rpt_wo_gangguan_individual,
|
||||
data.avg_rct_wo_gangguan_individual,
|
||||
data.jumlah_wo_penugasan_khusus,
|
||||
data.avg_wo_penugasan_khusus
|
||||
])
|
||||
|
||||
total.jumlah_wo_gangguan_individual += data.jumlah_wo_gangguan_individual
|
||||
total.avg_durasi_wo_gangguan_individual.push(data.avg_durasi_wo_gangguan_individual)
|
||||
total.avg_rpt_wo_gangguan_individual.push(data.avg_rpt_wo_gangguan_individual)
|
||||
total.avg_rct_wo_gangguan_individual.push(data.avg_rct_wo_gangguan_individual)
|
||||
total.jumlah_wo_penugasan_khusus += data.jumlah_wo_penugasan_khusus
|
||||
total.avg_wo_penugasan_khusus.push(data.avg_wo_penugasan_khusus)
|
||||
})
|
||||
|
||||
formattedData.push([
|
||||
{
|
||||
content: 'TOTAL',
|
||||
colSpan: 2
|
||||
},
|
||||
formatNumber(total.jumlah_wo_gangguan_individual),
|
||||
formatNumber(
|
||||
total.avg_durasi_wo_gangguan_individual.reduce((a: any, b: any) => a + b, 0) /
|
||||
total.avg_durasi_wo_gangguan_individual.length
|
||||
),
|
||||
formatNumber(
|
||||
total.avg_rpt_wo_gangguan_individual.reduce((a: any, b: any) => a + b, 0) /
|
||||
total.avg_rpt_wo_gangguan_individual.length
|
||||
),
|
||||
formatNumber(
|
||||
total.avg_rct_wo_gangguan_individual.reduce((a: any, b: any) => a + b, 0) /
|
||||
total.avg_rct_wo_gangguan_individual.length
|
||||
),
|
||||
formatNumber(total.jumlah_wo_penugasan_khusus),
|
||||
formatNumber(
|
||||
total.avg_wo_penugasan_khusus.reduce((a: any, b: any) => a + b, 0) /
|
||||
total.avg_wo_penugasan_khusus.length
|
||||
)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
console.log(data)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'POSKO',
|
||||
':',
|
||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 23
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'User Regu',
|
||||
'Personil Yantek',
|
||||
'Jumlah WO Gangguan Individual',
|
||||
'Rata-rata Durasi WO Gangguan',
|
||||
'Rata-rata RPT WO Gangguan',
|
||||
'Rata-rata RCT WO Gangguan',
|
||||
'Jumlah WO Penugasan Khusus',
|
||||
'Rata-rata WO Penugasan Khusus'
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 30
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'UID/UIW',
|
||||
'UP3',
|
||||
'Posko',
|
||||
'Sumber Lapor',
|
||||
'Create By',
|
||||
'Dispacth By',
|
||||
'User Regu',
|
||||
'Nama Regu',
|
||||
'Nama Petugas',
|
||||
'Shift',
|
||||
'Check In Petugas',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Penugasan Baru',
|
||||
'Tgl Dalam Perjalanan',
|
||||
'Tgl Pengerjaan',
|
||||
'Tgl Nyala Sementara',
|
||||
'Tgl Nyala',
|
||||
'Tgl Selesai',
|
||||
'Durasi Perjalanan',
|
||||
'Durasi WO',
|
||||
'Check Out Petugas',
|
||||
'RPT',
|
||||
'RCT',
|
||||
'Rating',
|
||||
'Jml Pelanggan Padam',
|
||||
'Fasilitas',
|
||||
'Sub Fasilitas',
|
||||
'Peralatan',
|
||||
'Dampak Kerusakan',
|
||||
'Penyebab',
|
||||
'Kelompok Penyebab',
|
||||
'Cuaca',
|
||||
'Keterangan Pelapor',
|
||||
'Keterangan',
|
||||
'Penyebab Padam',
|
||||
'Tindakan',
|
||||
'APKT Status',
|
||||
'Referensi Marking',
|
||||
'BLTH'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.nama_uid,
|
||||
item.nama_up3,
|
||||
item.nama_posko,
|
||||
item.media,
|
||||
item.pembuat_laporan,
|
||||
item.dispacth_by,
|
||||
item.waktu_dispacth,
|
||||
item.user_regu,
|
||||
item.nama_regu,
|
||||
item.personil_yantek,
|
||||
item.shift,
|
||||
item.check_in_petugas,
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_dispacth,
|
||||
item.waktu_perjalanan,
|
||||
item.waktu_response,
|
||||
item.waktu_nyala_sementara,
|
||||
item.waktu_nyala,
|
||||
item.waktu_selesai,
|
||||
item.durasi_waktu_response,
|
||||
item.durasi_wo,
|
||||
item.check_out_petugas,
|
||||
item.durasi_menit_response,
|
||||
item.durasi_menit_recovery,
|
||||
item.rating,
|
||||
item.jml_pelanggan_padam,
|
||||
item.fasilitas,
|
||||
item.sub_fasilitas,
|
||||
item.peralatan,
|
||||
item.dampak_kerusakan,
|
||||
item.penyebab,
|
||||
item.kelompok_penyebab,
|
||||
item.cuaca,
|
||||
item.keterangan_pelapor,
|
||||
item.keterangan,
|
||||
item.penyebab_padam,
|
||||
item.tindakan,
|
||||
item.status_akhir,
|
||||
item.referensi_marking,
|
||||
item.blth
|
||||
]),
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
},
|
||||
startY: 24,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`POSKO : ${
|
||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:H1')
|
||||
worksheet.mergeCells('A2:H2')
|
||||
worksheet.mergeCells('A3:H3')
|
||||
worksheet.mergeCells('A4:H4')
|
||||
worksheet.mergeCells('A6:H6')
|
||||
worksheet.mergeCells('A7:H7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A3:AP3')
|
||||
worksheet.mergeCells('A4:AP4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
||||
525
src/report/Ctt/CTT_LaporanCttKwhPeriksa.ts
Normal file
525
src/report/Ctt/CTT_LaporanCttKwhPeriksa.ts
Normal file
@ -0,0 +1,525 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Laporan CTT & KWH Periksa'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 4
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
wo_cc123: 0,
|
||||
wo_pln_mobile: 0,
|
||||
wo_comcen: 0,
|
||||
// wo_total
|
||||
rekomendasi_mendatangkan_petugas: 0,
|
||||
rekomendasi_diberikan_ke_pelanggan: 0,
|
||||
dpld: 0,
|
||||
history_p2lt: 0
|
||||
}
|
||||
|
||||
rawData.forEach((item: any) => {
|
||||
total.wo_cc123 += item.wo_cc123
|
||||
total.wo_pln_mobile += item.wo_pln_mobile
|
||||
total.wo_comcen += item.wo_comcen
|
||||
total.rekomendasi_mendatangkan_petugas += item.rekomendasi_mendatangkan_petugas
|
||||
total.rekomendasi_diberikan_ke_pelanggan += item.rekomendasi_diberikan_ke_pelanggan
|
||||
total.dpld += item.dpld
|
||||
total.history_p2lt += item.history_p2lt
|
||||
})
|
||||
|
||||
const wo_total = total.wo_cc123 + total.wo_pln_mobile + total.wo_comcen
|
||||
|
||||
formattedData.push([
|
||||
'Semua Unit',
|
||||
formatNumber(total.wo_cc123),
|
||||
formatNumber(total.wo_pln_mobile),
|
||||
formatNumber(total.wo_comcen),
|
||||
formatNumber(wo_total),
|
||||
formatNumber(total.rekomendasi_mendatangkan_petugas),
|
||||
formatNumber(total.rekomendasi_diberikan_ke_pelanggan),
|
||||
formatNumber(total.dpld),
|
||||
formatNumber(total.history_p2lt)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 25
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'Nama Unit',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Total WO',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Rekomendasi Sistem',
|
||||
colSpan: 2
|
||||
},
|
||||
'DLPD',
|
||||
'Histori P2LT'
|
||||
],
|
||||
[
|
||||
'CC 123',
|
||||
'PLN Mobile',
|
||||
'Comcen',
|
||||
'Total',
|
||||
'Mendatangkan Petugas',
|
||||
'Diberikan ke Pelanggan',
|
||||
{
|
||||
content: 'g',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'h',
|
||||
rowSpan: 2
|
||||
}
|
||||
],
|
||||
['a', 'b', 'c', 'd=a+b+c', 'e', 'f']
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 35
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'UIW/D',
|
||||
'UP3',
|
||||
'Rayon',
|
||||
'IDPEL',
|
||||
'NOMETER',
|
||||
'No. Telepon',
|
||||
'Nama',
|
||||
'Alamat',
|
||||
'Sumber Lapor',
|
||||
'No Laporan',
|
||||
'08',
|
||||
'70',
|
||||
'71',
|
||||
'41',
|
||||
'44',
|
||||
'45',
|
||||
'46',
|
||||
'37',
|
||||
'47',
|
||||
'Jenis DLPD',
|
||||
'Keterangan DLPD',
|
||||
'Bulan Tahun DLPD',
|
||||
'No. Agenda P2TL',
|
||||
'Tgl Mohon P2T',
|
||||
'Tgl Sah P2TL',
|
||||
'Rekomendasi Sistem',
|
||||
'Tgl/Jam Lapor',
|
||||
'Petugas Regu',
|
||||
'User VCC'
|
||||
]
|
||||
],
|
||||
body: rawData
|
||||
? rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.nama_uid,
|
||||
item.nama_up3,
|
||||
item.nama_ulp,
|
||||
item.id_pelanggan,
|
||||
item.nomormeter,
|
||||
item.no_telp_pelapor,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.media,
|
||||
item.no_laporan,
|
||||
item.r08,
|
||||
item.r70,
|
||||
item.r71,
|
||||
item.r41,
|
||||
item.r44,
|
||||
item.r45,
|
||||
item.r46,
|
||||
item.r37,
|
||||
item.r47,
|
||||
item.jenis_dlpd,
|
||||
item.keterangan_dlpd,
|
||||
item.blth_dlpd,
|
||||
item.no_agenda_p2tl,
|
||||
item.tgl_mohon_p2tl,
|
||||
item.tgl_sah_p2tl,
|
||||
item.rekomendasi_sistem,
|
||||
item.waktu_lapor,
|
||||
item.petugas_regu,
|
||||
item.user_vcc
|
||||
])
|
||||
: [],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
},
|
||||
startY: 24,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:I1')
|
||||
worksheet.mergeCells('A2:I2')
|
||||
worksheet.mergeCells('A3:I3')
|
||||
worksheet.mergeCells('A4:I4')
|
||||
worksheet.mergeCells('A6:I6')
|
||||
worksheet.mergeCells('A7:I7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:AD1')
|
||||
worksheet.mergeCells('A3:AD3')
|
||||
worksheet.mergeCells('A4:AD4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
||||
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -43,15 +43,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -43,15 +43,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -32,15 +32,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -279,15 +279,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -101,15 +101,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -78,15 +78,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -107,15 +107,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -109,15 +109,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -256,15 +256,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
@ -272,7 +272,6 @@ const formatMetaData = (reportMeta: any) => {
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
console.log(data)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
|
||||
@ -240,15 +240,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -107,15 +107,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -239,15 +239,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -292,15 +292,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
@ -686,27 +686,27 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
8,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:F1')
|
||||
worksheet.mergeCells('A2:F2')
|
||||
worksheet.mergeCells('A3:F3')
|
||||
worksheet.mergeCells('A4:F4')
|
||||
worksheet.mergeCells('H7:J7')
|
||||
worksheet.mergeCells('H8:J8')
|
||||
worksheet.mergeCells('A1:T1')
|
||||
worksheet.mergeCells('A2:T2')
|
||||
worksheet.mergeCells('A3:T3')
|
||||
worksheet.mergeCells('A4:T4')
|
||||
worksheet.mergeCells('A6:T6')
|
||||
worksheet.mergeCells('A7:T7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 },
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
@ -725,17 +725,18 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('H3:J3')
|
||||
worksheet.mergeCells('H4:J4')
|
||||
worksheet.mergeCells('A1:Q1')
|
||||
worksheet.mergeCells('A3:Q3')
|
||||
worksheet.mergeCells('A4:Q4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
|
||||
@ -290,15 +290,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -84,15 +84,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -59,15 +59,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -45,15 +45,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
||||
|
||||
@ -45,15 +45,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
||||
|
||||
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -34,15 +34,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
|
||||
@ -224,15 +224,15 @@ const formatMetaData = (reportMeta: any) => {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
@ -567,32 +567,37 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`POSKO : ${
|
||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
8,
|
||||
8,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:F1')
|
||||
worksheet.mergeCells('A2:F2')
|
||||
worksheet.mergeCells('A3:F3')
|
||||
worksheet.mergeCells('A4:F4')
|
||||
worksheet.mergeCells('H7:J7')
|
||||
worksheet.mergeCells('H8:J8')
|
||||
worksheet.mergeCells('A1:Q1')
|
||||
worksheet.mergeCells('A2:Q2')
|
||||
worksheet.mergeCells('A3:Q3')
|
||||
worksheet.mergeCells('A4:Q4')
|
||||
worksheet.mergeCells('A6:Q6')
|
||||
worksheet.mergeCells('A7:Q7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 10, column: 1 }
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
@ -608,23 +613,27 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
8,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('H3:J3')
|
||||
worksheet.mergeCells('H4:J4')
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 }
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
|
||||
529
src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
Normal file
529
src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
Normal file
@ -0,0 +1,529 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Keluhan Berdasarkan Media'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 5
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const total: any = {
|
||||
tgl1: 0,
|
||||
tgl2: 0,
|
||||
tgl3: 0,
|
||||
tgl4: 0,
|
||||
tgl5: 0,
|
||||
tgl6: 0,
|
||||
tgl7: 0,
|
||||
tgl8: 0,
|
||||
tgl9: 1,
|
||||
tgl10: 0,
|
||||
tgl11: 0,
|
||||
tgl12: 0,
|
||||
tgl13: 0,
|
||||
tgl14: 0,
|
||||
tgl15: 2,
|
||||
tgl16: 0,
|
||||
tgl17: 0,
|
||||
tgl18: 0,
|
||||
tgl19: 0,
|
||||
tgl20: 0,
|
||||
tgl21: 0,
|
||||
tgl22: 0,
|
||||
tgl23: 0,
|
||||
tgl24: 0,
|
||||
tgl25: 0,
|
||||
tgl26: 0,
|
||||
tgl27: 0,
|
||||
tgl28: 0,
|
||||
tgl29: 0,
|
||||
tgl30: 0,
|
||||
tgl31: 0
|
||||
}
|
||||
|
||||
formattedData.push(
|
||||
...rawData.map((item: any, i: any) => {
|
||||
for (const key in total) {
|
||||
if (key !== 'total') {
|
||||
total[key] += item[key]
|
||||
}
|
||||
}
|
||||
|
||||
return [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.media,
|
||||
formatNumber(item.tgl1),
|
||||
formatNumber(item.tgl2),
|
||||
formatNumber(item.tgl3),
|
||||
formatNumber(item.tgl4),
|
||||
formatNumber(item.tgl5),
|
||||
formatNumber(item.tgl6),
|
||||
formatNumber(item.tgl7),
|
||||
formatNumber(item.tgl8),
|
||||
formatNumber(item.tgl9),
|
||||
formatNumber(item.tgl10),
|
||||
formatNumber(item.tgl11),
|
||||
formatNumber(item.tgl12),
|
||||
formatNumber(item.tgl13),
|
||||
formatNumber(item.tgl14),
|
||||
formatNumber(item.tgl15),
|
||||
formatNumber(item.tgl16),
|
||||
formatNumber(item.tgl17),
|
||||
formatNumber(item.tgl18),
|
||||
formatNumber(item.tgl19),
|
||||
formatNumber(item.tgl20),
|
||||
formatNumber(item.tgl21),
|
||||
formatNumber(item.tgl22),
|
||||
formatNumber(item.tgl23),
|
||||
formatNumber(item.tgl24),
|
||||
formatNumber(item.tgl25),
|
||||
formatNumber(item.tgl26),
|
||||
formatNumber(item.tgl27),
|
||||
formatNumber(item.tgl28),
|
||||
formatNumber(item.tgl29),
|
||||
formatNumber(item.tgl30),
|
||||
formatNumber(item.tgl31)
|
||||
]
|
||||
})
|
||||
)
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
...Array.from({ length: 31 }, (_, i) => formatNumber(total[`tgl${i + 1}`]))
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 23
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'No',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Nama Media',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Tanggal',
|
||||
colSpan: 31
|
||||
}
|
||||
],
|
||||
[...Array.from({ length: 31 }, (_, i) => (i + 1).toString())]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 30
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Dalam Proses Bidang',
|
||||
'Selesai Bidang Unit',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Rayon',
|
||||
'Uraian',
|
||||
'Response Pelanggan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
item.durasi_recovery_time,
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.no_telp_pelapor,
|
||||
item.keterangan_pelapor,
|
||||
item.nama_ulp,
|
||||
item.uraian,
|
||||
item.respon_pelanggan
|
||||
]),
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
},
|
||||
startY: 24,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:AG1')
|
||||
worksheet.mergeCells('A2:AG2')
|
||||
worksheet.mergeCells('A3:AG3')
|
||||
worksheet.mergeCells('A4:AG4')
|
||||
worksheet.mergeCells('A6:AG6')
|
||||
worksheet.mergeCells('A7:AG7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
||||
757
src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts
Normal file
757
src/report/Keluhan/Rekap/RKeluhan_PerFungsiBidang.ts
Normal file
@ -0,0 +1,757 @@
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import {
|
||||
Document,
|
||||
AlignmentType,
|
||||
Packer,
|
||||
Paragraph,
|
||||
Table,
|
||||
TableCell,
|
||||
TableRow,
|
||||
VerticalAlign,
|
||||
TextRun,
|
||||
WidthType,
|
||||
PageOrientation
|
||||
} from 'docx'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import autoTable from 'jspdf-autotable'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Keluhan Per Fungsi Bidang'
|
||||
const fontSize = 5
|
||||
const detailFontSize = 3
|
||||
|
||||
const groupingData = (data: any) => {
|
||||
const groupedData: any = {}
|
||||
|
||||
data.forEach((item: any) => {
|
||||
const { nama_uid } = item
|
||||
|
||||
if (!groupedData[nama_uid]) {
|
||||
groupedData[nama_uid] = []
|
||||
}
|
||||
|
||||
groupedData[nama_uid].push(item)
|
||||
})
|
||||
|
||||
return groupedData
|
||||
}
|
||||
|
||||
const formatData = (rawData: any, groupBy: boolean) => {
|
||||
const formattedData: any = []
|
||||
const grandTotal: any = {
|
||||
total_laporan: 0,
|
||||
total_laporan_sudah_selesai: 0,
|
||||
total_laporan_belum_selesai: 0,
|
||||
total_response_time_total: 0,
|
||||
total_response_time_rata_rata: [],
|
||||
total_response_time_max: [],
|
||||
total_response_time_min: [],
|
||||
total_response_time_lebih_sla: 0,
|
||||
total_response_time_kurang_sla: 0,
|
||||
total_recovery_time_total: 0,
|
||||
total_recovery_time_rata_rata: [],
|
||||
total_recovery_time_max: [],
|
||||
total_recovery_time_min: [],
|
||||
total_recovery_time_lebih_sla: 0,
|
||||
total_recovery_time_kurang_sla: 0
|
||||
}
|
||||
|
||||
if (groupBy) {
|
||||
const data = groupingData(rawData)
|
||||
|
||||
for (const nama_uid in data) {
|
||||
const total: any = {
|
||||
total_laporan: 0,
|
||||
total_laporan_sudah_selesai: 0,
|
||||
total_laporan_belum_selesai: 0,
|
||||
total_response_time_total: 0,
|
||||
total_response_time_rata_rata: [],
|
||||
total_response_time_max: [],
|
||||
total_response_time_min: [],
|
||||
total_response_time_lebih_sla: 0,
|
||||
total_response_time_kurang_sla: 0,
|
||||
total_recovery_time_total: 0,
|
||||
total_recovery_time_rata_rata: [],
|
||||
total_recovery_time_max: [],
|
||||
total_recovery_time_min: [],
|
||||
total_recovery_time_lebih_sla: 0,
|
||||
total_recovery_time_kurang_sla: 0
|
||||
}
|
||||
|
||||
formattedData.push([{ content: nama_uid, colSpan: 19, styles: { fontStyle: 'bold' } }])
|
||||
|
||||
for (let i = 0; i < data[nama_uid].length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
data[nama_uid][i].fungsi_bidang,
|
||||
formatNumber(data[nama_uid][i].total),
|
||||
formatNumber(data[nama_uid][i].total_selesai),
|
||||
formatPercentage(
|
||||
!data[nama_uid][i].total || !data[nama_uid][i].total_selesai
|
||||
? '0%'
|
||||
: (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_uid][i].total_inproses),
|
||||
formatPercentage(
|
||||
!data[nama_uid][i].total_inproses || !data[nama_uid][i].total
|
||||
? '0%'
|
||||
: (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
|
||||
),
|
||||
formatNumber(data[nama_uid][i].total_durasi_response),
|
||||
formatNumber(data[nama_uid][i].avg_durasi_response),
|
||||
formatWaktu(data[nama_uid][i].max_durasi_response),
|
||||
formatWaktu(data[nama_uid][i].min_durasi_response),
|
||||
formatNumber(data[nama_uid][i].total_diatas_sla_response),
|
||||
formatNumber(data[nama_uid][i].total_dibawah_sla_response),
|
||||
formatNumber(data[nama_uid][i].total_durasi_recovery),
|
||||
formatNumber(data[nama_uid][i].avg_durasi_recovery),
|
||||
formatWaktu(data[nama_uid][i].max_durasi_recovery),
|
||||
formatWaktu(data[nama_uid][i].min_durasi_recovery),
|
||||
formatNumber(data[nama_uid][i].total_diatas_sla_recovery),
|
||||
formatNumber(data[nama_uid][i].total_dibawah_sla_recovery)
|
||||
])
|
||||
|
||||
total.total_laporan += data[nama_uid][i].total
|
||||
total.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
|
||||
total.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
|
||||
total.total_response_time_total += data[nama_uid][i].total_durasi_response
|
||||
total.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
|
||||
total.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
|
||||
total.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
|
||||
total.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
|
||||
total.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
|
||||
total.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
|
||||
total.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
|
||||
total.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
|
||||
total.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
|
||||
total.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
|
||||
total.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
|
||||
|
||||
grandTotal.total_laporan += data[nama_uid][i].total
|
||||
grandTotal.total_laporan_sudah_selesai += data[nama_uid][i].total_selesai
|
||||
grandTotal.total_laporan_belum_selesai += data[nama_uid][i].total_inproses
|
||||
grandTotal.total_response_time_total += data[nama_uid][i].total_durasi_response
|
||||
grandTotal.total_response_time_rata_rata.push(data[nama_uid][i].avg_durasi_response)
|
||||
grandTotal.total_response_time_max.push(data[nama_uid][i].max_durasi_response)
|
||||
grandTotal.total_response_time_min.push(data[nama_uid][i].min_durasi_response)
|
||||
grandTotal.total_response_time_lebih_sla += data[nama_uid][i].total_diatas_sla_response
|
||||
grandTotal.total_response_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_response
|
||||
grandTotal.total_recovery_time_total += data[nama_uid][i].total_durasi_recovery
|
||||
grandTotal.total_recovery_time_rata_rata.push(data[nama_uid][i].avg_durasi_recovery)
|
||||
grandTotal.total_recovery_time_max.push(data[nama_uid][i].max_durasi_recovery)
|
||||
grandTotal.total_recovery_time_min.push(data[nama_uid][i].min_durasi_recovery)
|
||||
grandTotal.total_recovery_time_lebih_sla += data[nama_uid][i].total_diatas_sla_recovery
|
||||
grandTotal.total_recovery_time_kurang_sla += data[nama_uid][i].total_dibawah_sla_recovery
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(total.total_laporan),
|
||||
formatNumber(total.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan || !total.total_laporan_sudah_selesai
|
||||
? '0%'
|
||||
: (total.total_laporan_sudah_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!total.total_laporan || !total.total_laporan_belum_selesai
|
||||
? '0%'
|
||||
: (total.total_laporan_belum_selesai / total.total_laporan) * 100
|
||||
),
|
||||
formatNumber(total.total_response_time_total),
|
||||
formatNumber(
|
||||
total.total_response_time_rata_rata.length
|
||||
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_response_time_max)),
|
||||
formatWaktu(Math.min(...total.total_response_time_min)),
|
||||
formatNumber(total.total_response_time_lebih_sla),
|
||||
formatNumber(total.total_response_time_kurang_sla),
|
||||
formatNumber(total.total_recovery_time_total),
|
||||
formatNumber(
|
||||
total.total_recovery_time_rata_rata.length
|
||||
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
total.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...total.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...total.total_recovery_time_min)),
|
||||
formatNumber(total.total_recovery_time_lebih_sla),
|
||||
formatNumber(total.total_recovery_time_kurang_sla)
|
||||
])
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < rawData.length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
rawData[i].fungsi_bidang,
|
||||
formatNumber(rawData[i].total),
|
||||
formatNumber(rawData[i].total_selesai),
|
||||
formatPercentage(
|
||||
!rawData[i].total || !rawData[i].total_selesai
|
||||
? '0%'
|
||||
: (rawData[i].total_selesai / rawData[i].total) * 100
|
||||
),
|
||||
formatNumber(rawData[i].total_inproses),
|
||||
formatPercentage(
|
||||
!rawData[i].total_inproses || !rawData[i].total
|
||||
? '0%'
|
||||
: (rawData[i].total_inproses / rawData[i].total) * 100
|
||||
),
|
||||
formatNumber(rawData[i].total_durasi_response),
|
||||
formatNumber(rawData[i].avg_durasi_response),
|
||||
formatWaktu(rawData[i].max_durasi_response),
|
||||
formatWaktu(rawData[i].min_durasi_response),
|
||||
formatNumber(rawData[i].total_diatas_sla_response),
|
||||
formatNumber(rawData[i].total_dibawah_sla_response),
|
||||
formatNumber(rawData[i].total_durasi_recovery),
|
||||
formatNumber(rawData[i].avg_durasi_recovery),
|
||||
formatWaktu(rawData[i].max_durasi_recovery),
|
||||
formatWaktu(rawData[i].min_durasi_recovery),
|
||||
formatNumber(rawData[i].total_diatas_sla_recovery),
|
||||
formatNumber(rawData[i].total_dibawah_sla_recovery)
|
||||
])
|
||||
|
||||
grandTotal.total_laporan += rawData[i].total
|
||||
grandTotal.total_laporan_sudah_selesai += rawData[i].total_selesai
|
||||
grandTotal.total_laporan_belum_selesai += rawData[i].total_inproses
|
||||
grandTotal.total_response_time_total += rawData[i].total_durasi_response
|
||||
grandTotal.total_response_time_rata_rata.push(rawData[i].avg_durasi_response)
|
||||
grandTotal.total_response_time_max.push(rawData[i].max_durasi_response)
|
||||
grandTotal.total_response_time_min.push(rawData[i].min_durasi_response)
|
||||
grandTotal.total_response_time_lebih_sla += rawData[i].total_diatas_sla_response
|
||||
grandTotal.total_response_time_kurang_sla += rawData[i].total_dibawah_sla_response
|
||||
grandTotal.total_recovery_time_total += rawData[i].total
|
||||
grandTotal.total_recovery_time_rata_rata.push(rawData[i].avg_durasi_recovery)
|
||||
grandTotal.total_recovery_time_max.push(rawData[i].max_durasi_recovery)
|
||||
grandTotal.total_recovery_time_min.push(rawData[i].min_durasi_recovery)
|
||||
grandTotal.total_recovery_time_lebih_sla += rawData[i].total_diatas_sla_recovery
|
||||
grandTotal.total_recovery_time_kurang_sla += rawData[i].total_dibawah_sla_recovery
|
||||
}
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
formatNumber(grandTotal.total_laporan),
|
||||
formatNumber(grandTotal.total_laporan_sudah_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_laporan_belum_selesai),
|
||||
formatPercentage(
|
||||
!grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
|
||||
? '0%'
|
||||
: (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
|
||||
),
|
||||
formatNumber(grandTotal.total_response_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_response_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_response_time_min)),
|
||||
formatNumber(grandTotal.total_response_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_response_time_kurang_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_total),
|
||||
formatNumber(
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
|
||||
grandTotal.total_recovery_time_rata_rata.length
|
||||
: 0
|
||||
),
|
||||
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
|
||||
formatWaktu(Math.min(...grandTotal.total_recovery_time_min)),
|
||||
formatNumber(grandTotal.total_recovery_time_lebih_sla),
|
||||
formatNumber(grandTotal.total_recovery_time_kurang_sla)
|
||||
])
|
||||
|
||||
return formattedData
|
||||
}
|
||||
|
||||
const formatMetaData = (reportMeta: any) => {
|
||||
const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
|
||||
if (periode != '') {
|
||||
const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
|
||||
const dateTo = new Date(periode[1].split('-').reverse().join('-'))
|
||||
|
||||
dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('id-ID', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('id-ID', { weekday: 'long' })
|
||||
}
|
||||
|
||||
return { dateFromFormat, dateToFormat, dayTo }
|
||||
}
|
||||
|
||||
const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
|
||||
const data = formatData(rawData, reportMeta.groupBy)
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 40 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 23
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'No',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Fungsi Bidang',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 5
|
||||
},
|
||||
{
|
||||
content: 'Response Time',
|
||||
colSpan: 6
|
||||
},
|
||||
{
|
||||
content: 'Penyelesaian',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'Total',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Sudah Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Belum Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Hari',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
'Jml',
|
||||
'%',
|
||||
'Jml',
|
||||
'%',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla',
|
||||
'Total',
|
||||
'Rata-Rata',
|
||||
'Max',
|
||||
'Min',
|
||||
'>Sla',
|
||||
'<Sla'
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
|
||||
if (data.cell.text[0] === 'GRAND TOTAL') {
|
||||
for (const key in data.row.cells) {
|
||||
data.row.cells[key].styles.fillColor = [192, 192, 192]
|
||||
data.row.cells[key].styles.fontStyle = 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
startY: 30
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
doc.setProperties({
|
||||
title: `${reportName}`
|
||||
})
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const exportDetailToPDF = (reportMeta: any, rawData: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [['PT. PLN(Persero)']],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`Daftar Detail ${reportName}`.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Dalam Proses Bidang',
|
||||
'Selesai Bidang Unit',
|
||||
'Durasi Response Time',
|
||||
'Durasi Recovery Time',
|
||||
'Status',
|
||||
'IDPEL/NO METER',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
'No Telp Pelapor',
|
||||
'Keterangan Pelapor',
|
||||
'Rayon',
|
||||
'Uraian',
|
||||
'Response Pelanggan'
|
||||
]
|
||||
],
|
||||
body: rawData.map((item: any, i: any) => [
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
'',
|
||||
'',
|
||||
item.durasi_response_time,
|
||||
item.durasi_recovery_time,
|
||||
'',
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
item.no_telp_pelapor,
|
||||
item.keterangan_pelapor,
|
||||
'',
|
||||
'',
|
||||
''
|
||||
]),
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 1,
|
||||
lineColor: [0, 0, 0],
|
||||
lineWidth: 0.1,
|
||||
cellWidth: 'auto'
|
||||
},
|
||||
rowPageBreak: 'auto',
|
||||
headStyles: {
|
||||
fillColor: [192, 192, 192],
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
cellWidth: 'wrap',
|
||||
halign: 'center',
|
||||
valign: 'middle'
|
||||
},
|
||||
bodyStyles: {
|
||||
textColor: [0, 0, 0]
|
||||
},
|
||||
didParseCell: function (data) {
|
||||
if (data.row.section === 'head') {
|
||||
data.cell.text = data.cell.text.map(function (word: any) {
|
||||
return word.toUpperCase()
|
||||
})
|
||||
}
|
||||
},
|
||||
startY: 24,
|
||||
margin: 5
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: detailFontSize,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
|
||||
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
2,
|
||||
1,
|
||||
`UNIT INDUK : ${
|
||||
reportMeta.uid
|
||||
? reportMeta.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
3,
|
||||
1,
|
||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
||||
reportMeta.up3
|
||||
? reportMeta.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`UNIT LAYANAN PELANGGAN : ${
|
||||
reportMeta.ulp
|
||||
? reportMeta.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
}`
|
||||
)
|
||||
|
||||
setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
7,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:S1')
|
||||
worksheet.mergeCells('A2:S2')
|
||||
worksheet.mergeCells('A3:S3')
|
||||
worksheet.mergeCells('A4:S4')
|
||||
worksheet.mergeCells('A6:S6')
|
||||
worksheet.mergeCells('A7:S7')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 9, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
||||
const meta = formatMetaData(reportMeta)
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
|
||||
|
||||
setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
|
||||
setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
|
||||
setHeaderStyle(
|
||||
worksheet,
|
||||
4,
|
||||
1,
|
||||
`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
|
||||
true
|
||||
)
|
||||
|
||||
worksheet.mergeCells('A1:P1')
|
||||
worksheet.mergeCells('A3:P3')
|
||||
worksheet.mergeCells('A4:P4')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
topLeftCell: { row: 6, column: 1 },
|
||||
loadPanel: {
|
||||
enabled: false
|
||||
}
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(
|
||||
new Blob([buffer], { type: 'application/octet-stream' }),
|
||||
`Laporan Detail ${reportName}.xlsx`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
|
||||
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user