Merge branch 'dev-bagus' of https://github.com/defuj/eis into dev-defuj
This commit is contained in:
@ -3,6 +3,7 @@
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type1 @update:filters="(value) => (filters = value)" />
|
||||
@ -515,6 +516,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -529,6 +531,12 @@ const dataSubSelected = 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 getDetail = () => {
|
||||
loadingSubData.value = true
|
||||
@ -586,15 +594,7 @@ 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 {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
@ -658,6 +658,8 @@ const filterData = (params: any) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
|
@ -3,6 +3,7 @@
|
||||
@reset-form="data = []"
|
||||
:report-button="true"
|
||||
@run-search="() => filterData(filters)"
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type1 @update:filters="(value) => (filters = value)" />
|
||||
@ -500,6 +501,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -514,6 +516,12 @@ const dataSubSelected = 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 getDetail = () => {
|
||||
loadingSubData.value = true
|
||||
@ -575,15 +583,7 @@ 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 {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
@ -638,6 +638,8 @@ const filterData = (params: any) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
|
@ -13,7 +13,7 @@
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
@selection-changed="onDataSelectionChanged"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
@ -28,8 +28,7 @@
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
v-model:visible="loadingData"
|
||||
:enabled="true"
|
||||
/>
|
||||
|
||||
@ -179,12 +178,255 @@
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog
|
||||
:open="dialogDetail"
|
||||
title="Data Detail Cleansing Transaksi TM"
|
||||
@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="onExporting"
|
||||
: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"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
shading-color="rgba(0,0,0,0.4)"
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-model:visible="loadingSubData"
|
||||
:enabled="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"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<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="tgl_catat"
|
||||
caption="Tgl Catat"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tgl_pekerjaan"
|
||||
caption="Tgl Pekerjaan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tgl_nyala"
|
||||
caption="Tgl Nyala"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_pencatatan"
|
||||
caption="Durasi Pencatatan"
|
||||
: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="keterangan_cleansing"
|
||||
caption="Keterangan Cleansing"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Posko"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="tindakan"
|
||||
caption="Tindakan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="penyebab"
|
||||
caption="Penyebab"
|
||||
: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="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">Tgl Catat:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.tgl_catat" 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 Pekerjaan:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.tgl_pekerjaan" 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 Nyala:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.tgl_nyala" 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 Pencatatan:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="
|
||||
parseInt(dataSubSelected?.durasi_pencatatan)
|
||||
? formatWaktu(dataSubSelected?.durasi_pencatatan)
|
||||
: '-'
|
||||
"
|
||||
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">Keterangan CLeansing:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
:value="dataSubSelected?.keterangan_cleansing"
|
||||
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">Posko:</h3>
|
||||
<InputText :readonly="true" :value="dataSubSelected?.nama_posko" 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 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>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -205,11 +447,118 @@ import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
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 closedialogDetail = () => (dialogDetail.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { posko, uid, up3 } = params
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.rekap.gangguanCleansingTransaksiTM,
|
||||
{
|
||||
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: posko ? posko.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
}
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingData.value = value
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
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),
|
||||
posko: selected?.id_ulp ? selected?.id_ulp : 0,
|
||||
idUid: selected?.id_uid ? selected?.id_uid : 0,
|
||||
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
|
||||
}
|
||||
|
||||
const { onResult, onError, loading } = useQuery(
|
||||
queries.gangguan.rekap.gangguanCleansingTransaksiTMDetail,
|
||||
query
|
||||
)
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
dataSub.value = queryResult.data.detailGangguanCleansingTransaksiTM
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
watch(loading, (value) => {
|
||||
loadingSubData.value = value
|
||||
})
|
||||
}
|
||||
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const clearSelection = () => {
|
||||
const dataGrid = dataGridRef.value!.instance!
|
||||
dataGrid.clearSelection()
|
||||
}
|
||||
const showDetail = () => {
|
||||
clearSelection()
|
||||
dataSubSelected.value = null
|
||||
dialogDetail.value = true
|
||||
getDetail()
|
||||
}
|
||||
|
||||
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
if (selectedRowsData[0] != undefined) {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
showDetail()
|
||||
}
|
||||
}
|
||||
|
||||
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataSubSelected.value = data
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
@ -238,51 +587,7 @@ const onExporting = (e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||
const clearSelection = () => {
|
||||
const dataGrid = dataGridRef.value!.instance!
|
||||
dataGrid.clearSelection()
|
||||
}
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
clearSelection()
|
||||
}
|
||||
|
||||
const data = ref<any[]>([])
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.gangguan.rekap.gangguanCleansingTransaksiTM,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { posko, uid, up3 } = params
|
||||
refetch({
|
||||
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: posko ? posko.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
|
@ -2,10 +2,11 @@
|
||||
<Filters
|
||||
@reset-form="data = []"
|
||||
@run-search="() => filterData(filters)"
|
||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
||||
:report-button="true"
|
||||
class="mb-4"
|
||||
>
|
||||
<Type9 @update:filters="(value) => (filters = value)" />
|
||||
<Type9 @update:filters="(value) => updateFilters(value)" />
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
@ -624,8 +625,6 @@ 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'
|
||||
@ -637,6 +636,7 @@ import { apolloClient } from '@/utils/api/api.graphql'
|
||||
import { provideApolloClient } from '@vue/apollo-composable'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
|
||||
|
||||
const client = apolloClient()
|
||||
provideApolloClient(client)
|
||||
@ -652,6 +652,13 @@ const dialogDetail = ref(false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
const filters = ref<any>({ groupBy: 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: '',
|
||||
groupBy: false
|
||||
})
|
||||
|
||||
const getDetail = () => {
|
||||
loadingSubData.value = true
|
||||
@ -713,15 +720,7 @@ 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 {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
@ -740,6 +739,11 @@ const onExporting = (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]
|
||||
@ -781,6 +785,17 @@ const filterData = (params: any) => {
|
||||
if (queryResult.networkStatus == 7) {
|
||||
loadingData.value = false
|
||||
}
|
||||
|
||||
reportMeta.value = {
|
||||
uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
|
||||
up3: {
|
||||
id: up3 ? up3.id : 0,
|
||||
name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
},
|
||||
posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
|
||||
periode: params.periode,
|
||||
groupBy: params.groupBy
|
||||
}
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
|
250
src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
Normal file
250
src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
Normal file
@ -0,0 +1,250 @@
|
||||
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 } from '@/utils/numbers'
|
||||
|
||||
const reportName = 'Rekapitulasi Gangguan Alih Posko'
|
||||
|
||||
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) => {
|
||||
const data = groupingData(rawData)
|
||||
const formattedData: any = []
|
||||
const grandTotal: any = {
|
||||
posko_in: 0,
|
||||
posko_out: 0
|
||||
}
|
||||
|
||||
for (const nama_uid in data) {
|
||||
const total: any = {
|
||||
posko_in: 0,
|
||||
posko_out: 0
|
||||
}
|
||||
|
||||
formattedData.push([{ content: nama_uid, colSpan: 5, 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].nama_up3,
|
||||
data[nama_uid][i].nama_posko,
|
||||
formatNumber(data[nama_uid][i].posko_in),
|
||||
formatNumber(data[nama_uid][i].posko_out)
|
||||
])
|
||||
|
||||
total.posko_in += data[nama_uid][i].posko_in
|
||||
total.posko_out += data[nama_uid][i].posko_out
|
||||
|
||||
grandTotal.posko_in += data[nama_uid][i].posko_in
|
||||
grandTotal.posko_out += data[nama_uid][i].posko_out
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
'',
|
||||
formatNumber(total.posko_in),
|
||||
formatNumber(total.posko_out)
|
||||
])
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
'',
|
||||
formatNumber(grandTotal.posko_in),
|
||||
formatNumber(grandTotal.posko_out)
|
||||
])
|
||||
|
||||
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('default', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { 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'
|
||||
})
|
||||
const fontSize = 5
|
||||
|
||||
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: [['No', 'Nama UP3', 'Nama Posko', 'Posko In', 'Posko Out']],
|
||||
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) {
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export { exportToPDF }
|
254
src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
Normal file
254
src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
Normal file
@ -0,0 +1,254 @@
|
||||
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 Gangguan Berdasarkan Media'
|
||||
|
||||
const formatData = (rawData: any) => {
|
||||
const formattedData: any = []
|
||||
const grandTotal: any = {
|
||||
...Array(31)
|
||||
.fill(0)
|
||||
.reduce((acc, _, i) => {
|
||||
acc[`tgl${i + 1}`] = 0
|
||||
return acc
|
||||
}, {}),
|
||||
total: 0
|
||||
}
|
||||
|
||||
for (let i = 0; i < rawData.length; i++) {
|
||||
formattedData.push([
|
||||
{ content: i + 1, styles: { halign: 'right' } },
|
||||
rawData[i].media,
|
||||
...Array(31)
|
||||
.fill(0)
|
||||
.map((_, j) => {
|
||||
const key = `tgl${j + 1}`
|
||||
const value = rawData[i][key] || 0
|
||||
grandTotal[key] = (grandTotal[key] || 0) + value
|
||||
return formatNumber(value)
|
||||
}),
|
||||
formatNumber(rawData[i].total)
|
||||
])
|
||||
|
||||
grandTotal.total += rawData[i].total
|
||||
}
|
||||
|
||||
formattedData.push([
|
||||
{ content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
|
||||
...Array(31)
|
||||
.fill(0)
|
||||
.map((_, i) => {
|
||||
const key = `tgl${i + 1}`
|
||||
return formatNumber(grandTotal[key])
|
||||
}),
|
||||
formatNumber(grandTotal.total)
|
||||
])
|
||||
|
||||
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('default', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { 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: 25 } },
|
||||
{ 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: 3,
|
||||
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: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
{
|
||||
content: 'No',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Nama Media',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Tanggal',
|
||||
colSpan: 31
|
||||
},
|
||||
{
|
||||
content: 'Total',
|
||||
rowSpan: 2
|
||||
}
|
||||
],
|
||||
[
|
||||
...Array(31)
|
||||
.fill(0)
|
||||
.map((_, i) => i + 1)
|
||||
.map((item) => ({
|
||||
content: item
|
||||
}))
|
||||
]
|
||||
],
|
||||
body: data,
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
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: 23
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${meta.dayTo}, ${meta.dateToFormat}`],
|
||||
[
|
||||
{
|
||||
content: '(.........................................)',
|
||||
styles: { minCellHeight: 8, valign: 'bottom' }
|
||||
}
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
tableWidth: 50,
|
||||
margin: { left: 230 }
|
||||
})
|
||||
|
||||
if (preview) {
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export { exportToPDF }
|
486
src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
Normal file
486
src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
Normal file
@ -0,0 +1,486 @@
|
||||
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 Gangguan Per Tanggal'
|
||||
|
||||
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].tanggal,
|
||||
formatNumber(data[nama_uid][i].total),
|
||||
formatNumber(data[nama_uid][i].total_selesai),
|
||||
formatPercentage((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 == null || data[nama_uid][i].total == null
|
||||
? '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_sudah_selesai / total.total_laporan) * 100),
|
||||
formatNumber(total.total_laporan_belum_selesai),
|
||||
formatPercentage((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].tanggal,
|
||||
formatNumber(rawData[i].total),
|
||||
formatNumber(rawData[i].total_selesai),
|
||||
formatPercentage((rawData[i].total_selesai / rawData[i].total) * 100),
|
||||
formatNumber(rawData[i].total_inproses),
|
||||
formatPercentage(
|
||||
rawData[i].total_inproses == null || rawData[i].total == null
|
||||
? '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_sudah_selesai / grandTotal.total_laporan) * 100),
|
||||
formatNumber(grandTotal.total_laporan_belum_selesai),
|
||||
formatPercentage((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('default', {
|
||||
month: 'long'
|
||||
})}-${dateFrom.getFullYear()}`
|
||||
|
||||
dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
|
||||
month: 'long'
|
||||
})}-${dateTo.getFullYear()}`
|
||||
|
||||
dayTo = dateTo.toLocaleString('default', { 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'
|
||||
})
|
||||
const fontSize = 5
|
||||
|
||||
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: [
|
||||
[
|
||||
{
|
||||
content: 'No',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Tanggal Lapor',
|
||||
rowSpan: 3
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 5
|
||||
},
|
||||
{
|
||||
content: 'Response Time',
|
||||
colSpan: 6
|
||||
},
|
||||
{
|
||||
content: 'Recovery Time',
|
||||
colSpan: 6
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
content: 'Total',
|
||||
rowSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Sudah Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Belum Selesai',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Menit',
|
||||
colSpan: 4
|
||||
},
|
||||
{
|
||||
content: 'Laporan',
|
||||
colSpan: 2
|
||||
},
|
||||
{
|
||||
content: 'Menit',
|
||||
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) {
|
||||
window.open(doc.output('bloburl'))
|
||||
} else {
|
||||
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export { exportToPDF }
|
@ -726,6 +726,35 @@ export const queries = {
|
||||
},
|
||||
gangguan: {
|
||||
rekap: {
|
||||
gangguanCleansingTransaksiTMDetail: gql`
|
||||
query detailGangguanCleansingTransaksiTM(
|
||||
$bulan: Int!
|
||||
$tahun: Int!
|
||||
$posko: Int!
|
||||
$idUid: Int!
|
||||
$idUp3: Int!
|
||||
) {
|
||||
detailGangguanCleansingTransaksiTM(
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
posko: $posko
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
id
|
||||
no_laporan
|
||||
tgl_catat
|
||||
tgl_pekerjaan
|
||||
tgl_nyala
|
||||
durasi_pencatatan
|
||||
durasi_recovery_time
|
||||
keterangan_cleansing
|
||||
nama_posko
|
||||
tindakan
|
||||
penyebab
|
||||
}
|
||||
}
|
||||
`,
|
||||
gangguanCleansingTransaksiTM: gql`
|
||||
query rekapitulasiGangguanCleansingTransaksiTM(
|
||||
$dateFrom: Date!
|
||||
|
Reference in New Issue
Block a user