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

Merge branch 'dev-defuj' of https://github.com/defuj/eis into dev-eko

Browse Source
This commit is contained in:
Eko Haryadi 2024-04-04 21:33:37 +07:00
commit 75735cff71
131 changed files with 23571 additions and 1911 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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",

4
src/assets/css/style.css
View File

@ -5545,10 +5545,6 @@ body {
grid-column-start: 2;
}
.sm\:m-8 {
margin: 2rem;
}
.sm\:mx-0 {
margin-left: 0px;
margin-right: 0px;

48
src/components/DatePicker.vue
View File

@ -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()]

40
src/components/Form/FiltersType/Type7.vue
View File

@ -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>

14
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
View File

@ -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,

817
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
View File

@ -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 cursor-pointer">
<p
class="text-left"
@click="
setParameterRequest({
media: null
})
"
>
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="!text-right">
<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>
{{ 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
}
const closeDialog = () => {
dialogDetail.value = false
dataSub.value = []
dataSubSelected.value = null
if (agreeToShowDialog.value) {
getDetail()
}
}
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()
}
showDetail()
}
const onExportingDetail = (e: any) => {}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
}
</script>

139
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
View File

@ -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
}
}

11
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
View File

@ -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)

37
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
View File

@ -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
}
}

114
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
View File

@ -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
}
}

2
src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
View File

@ -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">

36
src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
View File

@ -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!

37
src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
View File

@ -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
}
}

63
src/components/Pages/Cico/LaporanCICO.vue
View File

@ -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)

930
src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
View File

File diff suppressed because it is too large Load Diff

14
src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
View File

@ -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"

2
src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
View File

@ -6,7 +6,7 @@
{
id: 1,
name: 'Dibawah / Sesuai SLA (<= 3 Jam)',
min: '1',
min: '0',
max: '180'
},
{

846
src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
View File

@ -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 = []

54
src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
View File

@ -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,8 +598,9 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
// dialogDetail.value = true
getDetail()
if (poskoSelected.value != '') {
getDetail()
}
}
const closeDialog = () => {

2
src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
View File

@ -562,7 +562,7 @@ const showDetail = () => {
dataSub.value = []
dataSubSelected.value = null
if (date.value != '') {
// getDetail()
getDetail()
}
}

2
src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
View File

@ -544,7 +544,7 @@ const showDetail = () => {
clearSelection()
dataSubSelected.value = null
if (monthSelected.value != null) {
// getDetail()
getDetail()
}
}

160
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
View File

@ -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) {

38
src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
View File

@ -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

7
src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
View File

@ -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)

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

@ -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 = [

52
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
View File

@ -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
src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
View File

@ -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
src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
View File

@ -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}`
}
]"

13
src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
View File

@ -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 {
}
}

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

@ -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 {
}
}

66
src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
View File

@ -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 {
}
}

59
src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
View File

@ -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 {
}
}

65
src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
View File

@ -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 {
}
}

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

@ -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 {
}
}

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

@ -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 {
}
}

196
src/components/Pages/Material/Daftar/Material_DGMYG.vue
View File

@ -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>

150
src/components/Pages/Material/Rekap/Material_RPM.vue
View File

@ -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>

192
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
View File

@ -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,7 +949,9 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
getDetail()
if (dataType.value == 'yoy' || dataType.value == 'mom') {
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
@ -877,8 +965,6 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = data
}
const onExportingDetail = (e: any) => {}
const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {

63
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
View File

@ -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
}
}

70
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
View File

@ -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

57
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
View File

@ -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 () => {

61
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
View File

@ -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 () => {

66
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
View File

@ -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)

63
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
View File

@ -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 () => {

67
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
View File

@ -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 () => {

67
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
View File

@ -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 () => {

57
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
View File

@ -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)

68
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
View File

@ -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)

70
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
View File

@ -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

402
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
View File

@ -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)

67
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
View File

@ -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)

67
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
View File

@ -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)

66
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
View File

@ -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)

92
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
View File

@ -1,5 +1,6 @@
<template>
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
@ -79,7 +80,7 @@
alignment="center"
:min-width="170"
data-type="text"
data-field="na ma_ulp"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
@ -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)

57
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
View File

@ -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)

63
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
View File

@ -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)

75
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
View File

@ -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)

77
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
View File

@ -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)

56
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
View File

@ -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)

62
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
View File

@ -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)

62
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
View File

@ -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)

107
src/components/Pages/Transaksi/Transaksi.vue
View File

@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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 }

6
src/report/Gangguan/Daftar/DGangguan_BM.ts
View File

@ -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 }

6
src/report/Gangguan/Daftar/DGangguan_DKPL.ts
View File

@ -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 }

6
src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
View File

@ -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 }

6
src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
View File

@ -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 }

6
src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
View File

@ -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 {

6
src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
View File

@ -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 {

6
src/report/Gangguan/Daftar/DGangguan_STIDP.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_ALL.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_CTTM.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
View File

@ -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 }

7
src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
View File

@ -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'

6
src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_KTI.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
View File

@ -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 }

35
src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
View File

@ -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,

6
src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
View File

@ -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 }

6
src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
View File

@ -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 }

6
src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
View File

@ -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 }

6
src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
View File

@ -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 }

6
src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
View File

@ -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 }

6
src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
View File

@ -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 }

6
src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
View File

@ -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 }

6
src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
View File

@ -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 }

6
src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
View File

@ -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 }

49
src/report/Keluhan/Rekap/RKeluhan_ALL.ts
View File

@ -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
View 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
View 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