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

This commit is contained in:
Dede Fuji Abdul 2024-03-25 09:40:20 +07:00
commit 3fb69f209a
5 changed files with 546 additions and 28 deletions

View File

@ -4,6 +4,7 @@
<Filters
@reset-form="data = []"
:report-button="true"
@run-report="() => exportToPDF(reportMeta, data, true)"
@run-search="() => filterData(filters)"
class="mb-4"
>
@ -794,6 +795,7 @@ import InputText from '@/components/InputText.vue'
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_JenisGangguanSE'
const client = apolloClient()
provideApolloClient(client)
@ -808,6 +810,12 @@ const dataSubSelected = ref<any>(null)
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 closeDialog = () => {
dialogDetail.value = false
@ -815,15 +823,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')
@ -865,6 +865,8 @@ const filterData = (params: any) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiJenisGangguanSE004
}
reportMeta.value = filters.value
})
onError((queryError) => {

View File

@ -56,6 +56,7 @@
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="170"
@ -87,6 +88,7 @@
data-field="nama_ulp"
caption="ULP"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"

View File

@ -25,7 +25,7 @@
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
<DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -56,7 +56,7 @@
/>
<DxColumn
:width="200"
:width="150"
alignment="center"
data-field=""
caption="Semua Unit"
@ -792,9 +792,12 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
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)
@ -808,19 +811,11 @@ const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanAll, {
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 { ulp, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanAll, {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -836,7 +831,6 @@ const filterData = (params: any) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanAll
}
console.log(queryResult.data)
})
onError((error) => {
@ -848,17 +842,52 @@ const filterData = (params: any) => {
})
}
const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
const getDetail = async () => {
loadingSubData.value = true
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),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
}
const result = useQuery(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
result.onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailRekapitulasiKeluhanAll
}
})
result.onError((error) => {
console.log(error)
})
watch(result.loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
try {
dataGridRef.value?.instance?.clearSelection()
} catch (error) {
console.log(error)
}
}
const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
@ -895,14 +924,13 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
const filters = ref()

View File

@ -0,0 +1,445 @@
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/Jenis Gangguan SE 004'
const groupingData = (data: any) => {
const groupedData: any = {}
data.forEach((item: any) => {
const { id_fasilitas } = item
if (!groupedData[id_fasilitas]) {
groupedData[id_fasilitas] = []
}
groupedData[id_fasilitas].push(item)
})
return groupedData
}
const formatData = (rawData: any) => {
const data = groupingData(rawData)
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
}
for (const id_fasilitas 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: id_fasilitas, colSpan: 20, styles: { fontStyle: 'bold' } }])
for (let i = 0; i < data[id_fasilitas].length; i++) {
formattedData.push([
{ content: i + 1, styles: { halign: 'right' } },
data[id_fasilitas][i].kode,
data[id_fasilitas][i].sub_kelompok,
formatNumber(data[id_fasilitas][i].total),
formatNumber(data[id_fasilitas][i].total_selesai),
formatPercentage((data[id_fasilitas][i].total_selesai / data[id_fasilitas][i].total) * 100),
formatNumber(data[id_fasilitas][i].total_inproses),
formatPercentage(
data[id_fasilitas][i].total_inproses == null || data[id_fasilitas][i].total == null
? '0%'
: (data[id_fasilitas][i].total_inproses / data[id_fasilitas][i].total) * 100
),
formatNumber(data[id_fasilitas][i].total_durasi_response),
formatNumber(data[id_fasilitas][i].avg_durasi_response),
formatWaktu(data[id_fasilitas][i].max_durasi_response),
formatWaktu(data[id_fasilitas][i].min_durasi_response),
formatNumber(data[id_fasilitas][i].total_diatas_sla_response),
formatNumber(data[id_fasilitas][i].total_dibawah_sla_response),
formatNumber(data[id_fasilitas][i].total_durasi_recovery),
formatNumber(data[id_fasilitas][i].avg_durasi_recovery),
formatWaktu(data[id_fasilitas][i].max_durasi_recovery),
formatWaktu(data[id_fasilitas][i].min_durasi_recovery),
formatNumber(data[id_fasilitas][i].total_diatas_sla_recovery),
formatNumber(data[id_fasilitas][i].total_dibawah_sla_recovery)
])
total.total_laporan += data[id_fasilitas][i].total
total.total_laporan_sudah_selesai += data[id_fasilitas][i].total_selesai
total.total_laporan_belum_selesai += data[id_fasilitas][i].total_inproses
total.total_response_time_total += data[id_fasilitas][i].total_durasi_response
total.total_response_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_response)
total.total_response_time_max.push(data[id_fasilitas][i].max_durasi_response)
total.total_response_time_min.push(data[id_fasilitas][i].min_durasi_response)
total.total_response_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_response
total.total_response_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_response
total.total_recovery_time_total += data[id_fasilitas][i].total_durasi_recovery
total.total_recovery_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_recovery)
total.total_recovery_time_max.push(data[id_fasilitas][i].max_durasi_recovery)
total.total_recovery_time_min.push(data[id_fasilitas][i].min_durasi_recovery)
total.total_recovery_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_recovery
total.total_recovery_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_recovery
grandTotal.total_laporan += data[id_fasilitas][i].total
grandTotal.total_laporan_sudah_selesai += data[id_fasilitas][i].total_selesai
grandTotal.total_laporan_belum_selesai += data[id_fasilitas][i].total_inproses
grandTotal.total_response_time_total += data[id_fasilitas][i].total_durasi_response
grandTotal.total_response_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_response)
grandTotal.total_response_time_max.push(data[id_fasilitas][i].max_durasi_response)
grandTotal.total_response_time_min.push(data[id_fasilitas][i].min_durasi_response)
grandTotal.total_response_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_response
grandTotal.total_response_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_response
grandTotal.total_recovery_time_total += data[id_fasilitas][i].total_durasi_recovery
grandTotal.total_recovery_time_rata_rata.push(data[id_fasilitas][i].avg_durasi_recovery)
grandTotal.total_recovery_time_max.push(data[id_fasilitas][i].max_durasi_recovery)
grandTotal.total_recovery_time_min.push(data[id_fasilitas][i].min_durasi_recovery)
grandTotal.total_recovery_time_lebih_sla += data[id_fasilitas][i].total_diatas_sla_recovery
grandTotal.total_recovery_time_kurang_sla += data[id_fasilitas][i].total_dibawah_sla_recovery
}
formattedData.push([
{ content: 'TOTAL', colSpan: 3, 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)
])
}
formattedData.push([
{ content: 'GRAND TOTAL', colSpan: 3, 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)
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: 'Kode',
rowSpan: 3
},
{
content: 'Sub Kelompok (Equipment)',
styles: { cellWidth: 25 },
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 }

View File

@ -680,6 +680,47 @@ export const queries = {
total_diatas_sla_recovery
}
}
`,
rekapKeluhanAllDetail: gql`
query detailRekapitulasiKeluhanAll(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
detailRekapitulasiKeluhanAll(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
no_laporan
pembuat_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_dispatch_time
durasi_response_time
durasi_recovery_time
status_akhir
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
jarak_closing
dispatch_oleh
diselesaikan_oleh
penyebab
tindakan
kode_gangguan
jenis_gangguan
}
}
`
}
},