Merge branch 'dev-defuj' of https://github.com/defuj/eis into dev-randy
This commit is contained in:
rpurnama1409
@ -337,6 +337,27 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.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' })
|
||||
}
|
||||
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
@ -344,7 +365,59 @@ const onExporting = (e: any) => {
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.value.uid
|
||||
? reportMeta.value.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.up3
|
||||
? reportMeta.value.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.ulp
|
||||
? reportMeta.value.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['Daftar Keluhan Berdasarkan Media'.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Nama Pelapor',
|
||||
'Alamat Pelapor',
|
||||
@ -361,7 +434,8 @@ const onExporting = (e: any) => {
|
||||
'Keterangan Media'
|
||||
]
|
||||
],
|
||||
body: data.value.map((item) => [
|
||||
body: data.value.map((item: any, i: any) => [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.nama_pelapor,
|
||||
item.alamat_pelapor,
|
||||
@ -378,11 +452,58 @@ const onExporting = (e: any) => {
|
||||
item.keterangan_media
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 4
|
||||
}
|
||||
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'
|
||||
},
|
||||
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: 23
|
||||
})
|
||||
|
||||
doc.save('Daftar Keluhan Berdasarkan Media.pdf')
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${dayTo}, ${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 }
|
||||
})
|
||||
|
||||
doc.save('Laporan Daftar Keluhan Berdasarkan Media.pdf', { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Keluhan Berdasarkan Media')
|
||||
@ -420,6 +541,7 @@ const { onResult, onError, loading, refetch } = useQuery(
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
@ -436,16 +558,26 @@ const filterData = (params: any) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
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: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanBerdasarkanMedia
|
||||
|
||||
@ -236,6 +236,27 @@ const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.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' })
|
||||
}
|
||||
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
@ -243,7 +264,59 @@ const onExporting = (e: any) => {
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.value.uid
|
||||
? reportMeta.value.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.up3
|
||||
? reportMeta.value.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.ulp
|
||||
? reportMeta.value.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['Daftar Keluhan Dialihkan Ke Unit Lain'.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Pembuat Laporan',
|
||||
'Tgl Lapor',
|
||||
@ -261,15 +334,16 @@ const onExporting = (e: any) => {
|
||||
'Keterangan Pelapor'
|
||||
]
|
||||
],
|
||||
body: data.value.map((item: any) => [
|
||||
body: data.value.map((item: any, i: any) => [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.pembuat_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_dialihkan,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
item.durasi_recovery_time,
|
||||
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
|
||||
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
|
||||
item.nama_unit_lama,
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
@ -279,11 +353,60 @@ const onExporting = (e: any) => {
|
||||
item.keterangan_pelapor
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 4
|
||||
}
|
||||
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'
|
||||
},
|
||||
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: 23
|
||||
})
|
||||
|
||||
doc.save('Daftar Keluhan Dialihkan Ke Unit Lain.pdf')
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${dayTo}, ${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 }
|
||||
})
|
||||
|
||||
doc
|
||||
.save('Laporan Daftar Keluhan Dialihkan Ke Unit Lain.pdf', { returnPromise: true })
|
||||
.then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Keluhan Dialihkan Ke Unit Lain')
|
||||
@ -342,6 +465,8 @@ const filterData = (params: any) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
@ -353,6 +478,13 @@ const filterData = (params: any) => {
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
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: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
|
||||
|
||||
@ -362,6 +362,27 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.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' })
|
||||
}
|
||||
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
@ -369,7 +390,60 @@ const onExporting = (e: any) => {
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.value.uid
|
||||
? reportMeta.value.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.up3
|
||||
? reportMeta.value.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.ulp
|
||||
? reportMeta.value.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['Daftar Keluhan Pelanggan Lebih Dari 1 Kali'.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Response',
|
||||
@ -387,14 +461,15 @@ const onExporting = (e: any) => {
|
||||
'Nama ULP'
|
||||
]
|
||||
],
|
||||
body: data.value.map((item: any) => [
|
||||
body: data.value.map((item: any, i: any) => [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_selesai,
|
||||
item.jumlah_lapor,
|
||||
item.durasi_response_time,
|
||||
item.durasi_recovery_time,
|
||||
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
|
||||
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
@ -405,11 +480,60 @@ const onExporting = (e: any) => {
|
||||
item.nama_ulp
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 4
|
||||
}
|
||||
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'
|
||||
},
|
||||
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: 23
|
||||
})
|
||||
|
||||
doc.save('Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf')
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${dayTo}, ${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 }
|
||||
})
|
||||
|
||||
doc
|
||||
.save('Laporan Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf', { returnPromise: true })
|
||||
.then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Keluhan Pelanggan Lebih Dari 1 Kali')
|
||||
@ -451,6 +575,7 @@ const filterData = (params: any) => {
|
||||
const { ulp, uid, up3 } = params
|
||||
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
|
||||
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
|
||||
|
||||
refetch({
|
||||
minJmlLapor: minJmlLapor,
|
||||
maxJmlLapor: maxJmlLapor,
|
||||
@ -464,20 +589,33 @@ const filterData = (params: any) => {
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
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' },
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 1,
|
||||
periode: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
|
||||
|
||||
@ -1,6 +1,22 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => (filters = value)" />
|
||||
<Type11
|
||||
@update:filters="(value) => (filters = value)"
|
||||
:sla-options="[
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 3 hari)',
|
||||
min: '1',
|
||||
max: '4381'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 3 hari)',
|
||||
min: '4382',
|
||||
max: `${99999 * 60 * 24}`
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
@ -323,6 +339,38 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
|
||||
const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
|
||||
const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
let durasi = ''
|
||||
|
||||
if (minTime == '4382' && maxTime != '143998560') {
|
||||
durasi = 'Melebihi SLA (>3 hari)'
|
||||
} else if (minTime == '1' && maxTime == '4381') {
|
||||
durasi = 'Dibawah / Sesuai SLA (<=3 hari)'
|
||||
} else {
|
||||
durasi = 'Durasi Menit'
|
||||
}
|
||||
|
||||
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' })
|
||||
}
|
||||
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
@ -330,7 +378,60 @@ const onExporting = (e: any) => {
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.value.uid
|
||||
? reportMeta.value.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.up3
|
||||
? reportMeta.value.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.ulp
|
||||
? reportMeta.value.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['Daftar Keluhan Recovery Time'.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Response',
|
||||
@ -346,27 +447,75 @@ const onExporting = (e: any) => {
|
||||
'Nama ULP'
|
||||
]
|
||||
],
|
||||
body: data.value.map((i) => [
|
||||
i.no_laporan,
|
||||
i.waktu_lapor,
|
||||
i.waktu_response,
|
||||
i.waktu_recovery,
|
||||
parseInt(i.durasi_response_time) ? formatWaktu(i.durasi_response_time) : '-',
|
||||
parseInt(i.durasi_recovery_time) ? formatWaktu(i.durasi_recovery_time) : '-',
|
||||
i.status_akhir,
|
||||
i.idpel_nometer,
|
||||
i.nama_pelapor,
|
||||
i.alamat_pelapor,
|
||||
i.no_telp_pelapor,
|
||||
i.keterangan_pelapor,
|
||||
i.nama_ulp
|
||||
body: data.value.map((item: any, i: any) => [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
|
||||
parseInt(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
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 4
|
||||
}
|
||||
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'
|
||||
},
|
||||
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: 23
|
||||
})
|
||||
|
||||
doc.save('Daftar Keluhan Recovery Time.pdf')
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${dayTo}, ${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 }
|
||||
})
|
||||
|
||||
doc.save('Laporan Daftar Keluhan Recovery Time.pdf', { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Keluhan Recovery Time')
|
||||
@ -406,6 +555,7 @@ const { onResult, onError, loading, refetch } = useQuery(
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3, minTime, maxTime } = params
|
||||
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
@ -419,20 +569,33 @@ const filterData = (params: any) => {
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanRecoveryTime
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
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: '',
|
||||
minTime: '',
|
||||
maxTime: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
|
||||
|
||||
@ -1,6 +1,22 @@
|
||||
<template>
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => (filters = value)" />
|
||||
<Type11
|
||||
@update:filters="(value) => (filters = value)"
|
||||
:sla-options="[
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 1 hari)',
|
||||
min: '1',
|
||||
max: '1501'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 1 hari)',
|
||||
min: '1502',
|
||||
max: `${99999 * 60 * 24}`
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</Filters>
|
||||
|
||||
<div id="data">
|
||||
@ -342,6 +358,38 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
|
||||
const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
|
||||
const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
|
||||
|
||||
let dateFromFormat = ''
|
||||
let dateToFormat = ''
|
||||
let dayTo = ''
|
||||
let durasi = ''
|
||||
|
||||
if (minTime == '1502' && maxTime != '143998560') {
|
||||
durasi = 'Melebihi SLA (>1 hari)'
|
||||
} else if (minTime == '1' && maxTime == '1501') {
|
||||
durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
|
||||
} else {
|
||||
durasi = 'Durasi Menit'
|
||||
}
|
||||
|
||||
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' })
|
||||
}
|
||||
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
@ -349,7 +397,60 @@ const onExporting = (e: any) => {
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.value.uid
|
||||
? reportMeta.value.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.up3
|
||||
? reportMeta.value.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.ulp
|
||||
? reportMeta.value.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['Daftar Keluhan Response Time'.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Response',
|
||||
@ -365,13 +466,14 @@ const onExporting = (e: any) => {
|
||||
'Nama ULP'
|
||||
]
|
||||
],
|
||||
body: data.value.map((item: any) => [
|
||||
body: data.value.map((item: any, i: any) => [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
item.waktu_recovery,
|
||||
item.durasi_response_time,
|
||||
item.durasi_recovery_time,
|
||||
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
|
||||
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
|
||||
item.status_akhir,
|
||||
item.idpel_nometer,
|
||||
item.nama_pelapor,
|
||||
@ -381,11 +483,58 @@ const onExporting = (e: any) => {
|
||||
item.nama_ulp
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 4
|
||||
}
|
||||
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'
|
||||
},
|
||||
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: 23
|
||||
})
|
||||
|
||||
doc.save('Daftar Keluhan Response Time.pdf')
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${dayTo}, ${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 }
|
||||
})
|
||||
|
||||
doc.save('Laporan Daftar Keluhan Response Time.pdf', { returnPromise: true }).then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Keluhan Response Time')
|
||||
@ -425,6 +574,7 @@ const { onResult, onError, loading, refetch } = useQuery(
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3, maxTime, minTime } = params
|
||||
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
@ -443,16 +593,28 @@ const filterData = (params: any) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanResponseTime
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
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: '',
|
||||
minTime: '',
|
||||
maxTime: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
|
||||
|
||||
@ -330,6 +330,27 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.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' })
|
||||
}
|
||||
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
@ -337,7 +358,59 @@ const onExporting = (e: any) => {
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.value.uid
|
||||
? reportMeta.value.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.up3
|
||||
? reportMeta.value.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.ulp
|
||||
? reportMeta.value.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['Daftar Keluhan Selesai Tanpa ID Pelanggan'.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Tgl Lapor',
|
||||
'Tgl Response',
|
||||
@ -354,7 +427,8 @@ const onExporting = (e: any) => {
|
||||
'Nama ULP'
|
||||
]
|
||||
],
|
||||
body: data.value.map((item: any) => [
|
||||
body: data.value.map((item: any, i: any) => [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.waktu_lapor,
|
||||
item.waktu_response,
|
||||
@ -371,11 +445,60 @@ const onExporting = (e: any) => {
|
||||
item.nama_ulp
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 4
|
||||
}
|
||||
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'
|
||||
},
|
||||
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: 23
|
||||
})
|
||||
|
||||
doc.save('Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf')
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${dayTo}, ${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 }
|
||||
})
|
||||
|
||||
doc
|
||||
.save('Laporan Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf', { returnPromise: true })
|
||||
.then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai Tanpa ID Pelanggan')
|
||||
@ -413,6 +536,7 @@ const { onResult, onError, loading, refetch } = useQuery(
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
@ -429,16 +553,26 @@ const filterData = (params: any) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
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: ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.daftar.daftarKeluhanSelesaiTanpaIdPelanggan
|
||||
|
||||
@ -223,6 +223,27 @@ const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
const periode = reportMeta.value.periode ? reportMeta.value.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' })
|
||||
}
|
||||
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF({
|
||||
orientation: 'landscape'
|
||||
@ -230,7 +251,59 @@ const onExporting = (e: any) => {
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['PT. PLN(Persero)', '', ''],
|
||||
[
|
||||
{ content: 'UNIT INDUK', styles: { cellWidth: 25 } },
|
||||
{ content: ':', styles: { cellWidth: 1 } },
|
||||
reportMeta.value.uid
|
||||
? reportMeta.value.uid.name.toUpperCase()
|
||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT PELAKSANA PELAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.up3
|
||||
? reportMeta.value.up3.name.toUpperCase()
|
||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||
],
|
||||
[
|
||||
'UNIT LAYANAN PELANGGAN',
|
||||
':',
|
||||
reportMeta.value.ulp
|
||||
? reportMeta.value.ulp.name.toUpperCase()
|
||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||
]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 10
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
['Daftar Keluhan Selesai di Contact Center'.toUpperCase()],
|
||||
[`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
|
||||
],
|
||||
styles: {
|
||||
fontSize: 3,
|
||||
cellPadding: 0.1,
|
||||
textColor: [0, 0, 0],
|
||||
fontStyle: 'bold',
|
||||
halign: 'center'
|
||||
},
|
||||
theme: 'plain',
|
||||
startY: 18
|
||||
})
|
||||
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[
|
||||
'No',
|
||||
'No Laporan',
|
||||
'Contact Center',
|
||||
'UI Dist.',
|
||||
@ -249,7 +322,8 @@ const onExporting = (e: any) => {
|
||||
'Sub Issue Type'
|
||||
]
|
||||
],
|
||||
body: data.value.map((item: any) => [
|
||||
body: data.value.map((item: any, i: any) => [
|
||||
{ content: ++i, styles: { halign: 'right' } },
|
||||
item.no_laporan,
|
||||
item.nama_ulp,
|
||||
item.nama_uid,
|
||||
@ -268,11 +342,60 @@ const onExporting = (e: any) => {
|
||||
item.nama_subissuetype
|
||||
]),
|
||||
styles: {
|
||||
fontSize: 4
|
||||
}
|
||||
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'
|
||||
},
|
||||
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: 23
|
||||
})
|
||||
|
||||
doc.save('Daftar Keluhan Selesai di Contact Center.pdf')
|
||||
autoTable(doc, {
|
||||
head: [
|
||||
[`${dayTo}, ${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 }
|
||||
})
|
||||
|
||||
doc
|
||||
.save('Laporan Daftar Keluhan Selesai di Contact Center.pdf', { returnPromise: true })
|
||||
.then(() => {
|
||||
console.log('pdf berhasil disimpan')
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai di Contact Center')
|
||||
@ -312,11 +435,17 @@ const { onResult, onError, loading, refetch } = useQuery(
|
||||
}
|
||||
)
|
||||
const filters = ref()
|
||||
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 filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
const media = params.media ? params.media.id : ''
|
||||
|
||||
refetch({
|
||||
dateFrom: dateValue[0]
|
||||
? dateValue[0].split('-').reverse().join('-')
|
||||
@ -333,10 +462,13 @@ const filterData = (params: any) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
|
||||
}
|
||||
|
||||
reportMeta.value = filters.value
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxGrouping :auto-expand-all="false" />
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
@ -44,17 +45,50 @@
|
||||
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
:width="170"
|
||||
:width="200"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="unitName"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<template #unitName="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Semua Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
:group-index="0"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_regional"
|
||||
caption="Regional"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
:group-index="1"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
caption="UID"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
:group-index="2"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_up3"
|
||||
caption="UP3"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
:group-index="3"
|
||||
/>
|
||||
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -195,6 +229,170 @@
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
<DxSummary>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="total"
|
||||
summary-type="sum"
|
||||
css-class="!text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="max_durasi_dispatch"
|
||||
summary-type="max"
|
||||
css-class="!text-right"
|
||||
: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-right"
|
||||
: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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="max_durasi_response"
|
||||
summary-type="max"
|
||||
css-class="!text-right"
|
||||
: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-right"
|
||||
: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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
:show-in-group-footer="false"
|
||||
:align-by-column="true"
|
||||
column="max_durasi_recovery"
|
||||
summary-type="max"
|
||||
css-class="!text-right"
|
||||
: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-right"
|
||||
: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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<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(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
@ -231,7 +429,7 @@
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
@ -272,9 +470,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="
|
||||
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
|
||||
"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -578,7 +774,10 @@ import {
|
||||
DxPager,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxSelection,
|
||||
DxSummary,
|
||||
DxGroupItem,
|
||||
DxGrouping
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -604,15 +803,15 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
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 { 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 ')
|
||||
|
||||
@ -700,7 +899,413 @@ const filters = ref()
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
|
||||
data.value = [
|
||||
{
|
||||
id: 0,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 101,
|
||||
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
|
||||
id_up3: 52150,
|
||||
nama_up3: 'UP3 MAGELANG',
|
||||
id_ulp: 52156,
|
||||
nama_ulp: 'ULP PARAKAN',
|
||||
total: 1,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 6869,
|
||||
avg_durasi_response: 6869,
|
||||
min_durasi_response: 6869,
|
||||
max_durasi_response: 6869,
|
||||
total_dibawah_sla_response: 0,
|
||||
total_diatas_sla_response: 1,
|
||||
total_durasi_recovery: 6918,
|
||||
avg_durasi_recovery: 6918,
|
||||
min_durasi_recovery: 6918,
|
||||
max_durasi_recovery: 6918,
|
||||
total_dibawah_sla_recovery: 0,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 154,
|
||||
nama_up3: 'UP3 SITUBONDO',
|
||||
id_ulp: 51654,
|
||||
nama_ulp: 'ULP WONOSARI',
|
||||
total: 4,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 4,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 12102,
|
||||
avg_durasi_response: 4034,
|
||||
min_durasi_response: 881,
|
||||
max_durasi_response: 9125,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 2,
|
||||
total_durasi_recovery: 169068,
|
||||
avg_durasi_recovery: 42267,
|
||||
min_durasi_recovery: 0,
|
||||
max_durasi_recovery: 70663,
|
||||
total_dibawah_sla_recovery: 1,
|
||||
total_diatas_sla_recovery: 3
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 110,
|
||||
nama_uid: 'WILAYAH ACEH',
|
||||
id_up3: 116,
|
||||
nama_up3: 'UP3 SIGLI',
|
||||
id_ulp: 11662,
|
||||
nama_ulp: 'ULP MEUREUDU',
|
||||
total: 1,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 325,
|
||||
avg_durasi_response: 325,
|
||||
min_durasi_response: 325,
|
||||
max_durasi_response: 325,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 0,
|
||||
total_durasi_recovery: 368,
|
||||
avg_durasi_recovery: 368,
|
||||
min_durasi_recovery: 368,
|
||||
max_durasi_recovery: 368,
|
||||
total_dibawah_sla_recovery: 1,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 287,
|
||||
nama_uid: 'DISTRIBUSI BALI',
|
||||
id_up3: 329,
|
||||
nama_up3: 'UP3 BALI UTARA',
|
||||
id_ulp: 55340,
|
||||
nama_ulp: 'ULP GILIMANUK',
|
||||
total: 5,
|
||||
total_selesai: 4,
|
||||
persen_selesai: 80,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 20,
|
||||
total_durasi_response: 3548,
|
||||
avg_durasi_response: 709.6,
|
||||
min_durasi_response: 302,
|
||||
max_durasi_response: 1586,
|
||||
total_dibawah_sla_response: 4,
|
||||
total_diatas_sla_response: 1,
|
||||
total_durasi_recovery: 5705,
|
||||
avg_durasi_recovery: 1141,
|
||||
min_durasi_recovery: 775,
|
||||
max_durasi_recovery: 2078,
|
||||
total_dibawah_sla_recovery: 5,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nama_regional: null,
|
||||
id_uid: 0,
|
||||
nama_uid: '',
|
||||
id_up3: 0,
|
||||
nama_up3: '',
|
||||
id_ulp: 22450,
|
||||
nama_ulp: 'ULP PANGKALAN BUN',
|
||||
total: 2,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 2,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 1005,
|
||||
avg_durasi_response: 1005,
|
||||
min_durasi_response: 1005,
|
||||
max_durasi_response: 1005,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 0,
|
||||
total_durasi_recovery: 1815,
|
||||
avg_durasi_recovery: 907.5,
|
||||
min_durasi_recovery: 650,
|
||||
max_durasi_recovery: 1165,
|
||||
total_dibawah_sla_recovery: 2,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 221,
|
||||
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
|
||||
id_up3: 2220,
|
||||
nama_up3: 'UP3 BARABAI',
|
||||
id_ulp: 22230,
|
||||
nama_ulp: 'ULP AMUNTAI',
|
||||
total: 3,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 3,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 1178,
|
||||
avg_durasi_response: 392.6666666666667,
|
||||
min_durasi_response: 155,
|
||||
max_durasi_response: 580,
|
||||
total_dibawah_sla_response: 3,
|
||||
total_diatas_sla_response: 0,
|
||||
total_durasi_recovery: 3042,
|
||||
avg_durasi_recovery: 1014,
|
||||
min_durasi_recovery: 295,
|
||||
max_durasi_recovery: 2051,
|
||||
total_dibawah_sla_recovery: 3,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 427,
|
||||
nama_uid: 'DISTRIBUSI JAWA BARAT',
|
||||
id_up3: 546,
|
||||
nama_up3: 'UP3 TASIKMALAYA',
|
||||
id_ulp: 53231,
|
||||
nama_ulp: 'ULP CIAMIS',
|
||||
total: 4,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 25,
|
||||
total_inproses: 3,
|
||||
persen_inproses: 75,
|
||||
total_durasi_response: 6122,
|
||||
avg_durasi_response: 1530.5,
|
||||
min_durasi_response: 46,
|
||||
max_durasi_response: 3024,
|
||||
total_dibawah_sla_response: 2,
|
||||
total_diatas_sla_response: 2,
|
||||
total_durasi_recovery: 6269,
|
||||
avg_durasi_recovery: 1567.25,
|
||||
min_durasi_recovery: 73,
|
||||
max_durasi_recovery: 3076,
|
||||
total_dibawah_sla_recovery: 4,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 157,
|
||||
nama_up3: 'UP3 SURABAYA UTARA',
|
||||
id_ulp: 51101,
|
||||
nama_ulp: 'ULP INDRAPURA',
|
||||
total: 7,
|
||||
total_selesai: 6,
|
||||
persen_selesai: 85.71428571428571,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 14.285714285714285,
|
||||
total_durasi_response: 34744,
|
||||
avg_durasi_response: 5790.666666666667,
|
||||
min_durasi_response: 55,
|
||||
max_durasi_response: 11082,
|
||||
total_dibawah_sla_response: 2,
|
||||
total_diatas_sla_response: 4,
|
||||
total_durasi_recovery: 36971,
|
||||
avg_durasi_recovery: 5281.571428571428,
|
||||
min_durasi_recovery: 149,
|
||||
max_durasi_recovery: 11304,
|
||||
total_dibawah_sla_recovery: 3,
|
||||
total_diatas_sla_recovery: 4
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13105,
|
||||
nama_ulp: 'ULP LUBUK ALUNG',
|
||||
total: 1,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
total_durasi_response: 459,
|
||||
avg_durasi_response: 459,
|
||||
min_durasi_response: 459,
|
||||
max_durasi_response: 459,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 0,
|
||||
total_durasi_recovery: 7494,
|
||||
avg_durasi_recovery: 7494,
|
||||
min_durasi_recovery: 7494,
|
||||
max_durasi_recovery: 7494,
|
||||
total_dibawah_sla_recovery: 0,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 153,
|
||||
nama_up3: 'UP3 SIDOARJO',
|
||||
id_ulp: 51182,
|
||||
nama_ulp: 'ULP PORONG',
|
||||
total: 12,
|
||||
total_selesai: 9,
|
||||
persen_selesai: 75,
|
||||
total_inproses: 3,
|
||||
persen_inproses: 25,
|
||||
total_durasi_response: 13677,
|
||||
avg_durasi_response: 1139.75,
|
||||
min_durasi_response: 42,
|
||||
max_durasi_response: 4213,
|
||||
total_dibawah_sla_response: 8,
|
||||
total_diatas_sla_response: 4,
|
||||
total_durasi_recovery: 74952,
|
||||
avg_durasi_recovery: 6246,
|
||||
min_durasi_recovery: 358,
|
||||
max_durasi_recovery: 30185,
|
||||
total_dibawah_sla_recovery: 6,
|
||||
total_diatas_sla_recovery: 6
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 110,
|
||||
nama_uid: 'WILAYAH ACEH',
|
||||
id_up3: 111,
|
||||
nama_up3: 'UP3 BANDA ACEH',
|
||||
id_ulp: 11110,
|
||||
nama_ulp: 'ULP KOTA MERDUATI',
|
||||
total: 2,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 50,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 50,
|
||||
total_durasi_response: 866,
|
||||
avg_durasi_response: 433,
|
||||
min_durasi_response: 323,
|
||||
max_durasi_response: 543,
|
||||
total_dibawah_sla_response: 2,
|
||||
total_diatas_sla_response: 0,
|
||||
total_durasi_recovery: 3186,
|
||||
avg_durasi_recovery: 1593,
|
||||
min_durasi_recovery: 917,
|
||||
max_durasi_recovery: 2269,
|
||||
total_dibawah_sla_recovery: 2,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 110,
|
||||
nama_uid: 'WILAYAH ACEH',
|
||||
id_up3: 112,
|
||||
nama_up3: 'UP3 LHOKSEUMAWE',
|
||||
id_ulp: 11220,
|
||||
nama_ulp: 'ULP LHOKSEUMAWE',
|
||||
total: 3,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 3,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 6020,
|
||||
avg_durasi_response: 2006.6666666666667,
|
||||
min_durasi_response: 270,
|
||||
max_durasi_response: 3526,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 2,
|
||||
total_durasi_recovery: 6125,
|
||||
avg_durasi_recovery: 2041.6666666666667,
|
||||
min_durasi_recovery: 321,
|
||||
max_durasi_recovery: 3553,
|
||||
total_dibawah_sla_recovery: 3,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 171,
|
||||
nama_uid: 'DISTRIBUSI LAMPUNG',
|
||||
id_up3: 17171,
|
||||
nama_up3: 'UP3 TANJUNGKARANG',
|
||||
id_ulp: 17180,
|
||||
nama_ulp: 'ULP TELUK BETUNG',
|
||||
total: 7,
|
||||
total_selesai: 2,
|
||||
persen_selesai: 28.57142857142857,
|
||||
total_inproses: 5,
|
||||
persen_inproses: 71.42857142857143,
|
||||
total_durasi_response: 2328,
|
||||
avg_durasi_response: 388,
|
||||
min_durasi_response: 92,
|
||||
max_durasi_response: 866,
|
||||
total_dibawah_sla_response: 6,
|
||||
total_diatas_sla_response: 0,
|
||||
total_durasi_recovery: 3159,
|
||||
avg_durasi_recovery: 451.2857142857143,
|
||||
min_durasi_recovery: 169,
|
||||
max_durasi_recovery: 917,
|
||||
total_dibawah_sla_recovery: 7,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 427,
|
||||
nama_uid: 'DISTRIBUSI JAWA BARAT',
|
||||
id_up3: 540,
|
||||
nama_up3: 'UP3 GARUT',
|
||||
id_ulp: 53293,
|
||||
nama_ulp: 'ULP LELES',
|
||||
total: 2,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 50,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 50,
|
||||
total_durasi_response: 1870,
|
||||
avg_durasi_response: 935,
|
||||
min_durasi_response: 310,
|
||||
max_durasi_response: 1560,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 1,
|
||||
total_durasi_recovery: 5002,
|
||||
avg_durasi_recovery: 2501,
|
||||
min_durasi_recovery: 1592,
|
||||
max_durasi_recovery: 3410,
|
||||
total_dibawah_sla_recovery: 2,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 32,
|
||||
nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
|
||||
id_up3: 32200,
|
||||
nama_up3: 'UP3 WATAMPONE',
|
||||
id_ulp: 32260,
|
||||
nama_ulp: 'ULP ULOE',
|
||||
total: 1,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 2074,
|
||||
avg_durasi_response: 2074,
|
||||
min_durasi_response: 2074,
|
||||
max_durasi_response: 2074,
|
||||
total_dibawah_sla_response: 0,
|
||||
total_diatas_sla_response: 1,
|
||||
total_durasi_recovery: 3031,
|
||||
avg_durasi_recovery: 3031,
|
||||
min_durasi_recovery: 3031,
|
||||
max_durasi_recovery: 3031,
|
||||
total_dibawah_sla_recovery: 1,
|
||||
total_diatas_sla_recovery: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
css-class="custom-table-column"
|
||||
data-field="no"
|
||||
data-type="number"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
@ -62,13 +63,14 @@
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="100"
|
||||
v-for="i in 31"
|
||||
:width="150"
|
||||
alignment="center"
|
||||
:data-field="`tgl${i}`"
|
||||
data-type="number"
|
||||
:caption="i"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
|
||||
@ -77,23 +79,37 @@
|
||||
summary-type="sum"
|
||||
display-format="Call PLN 123"
|
||||
show-in-column="no"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
v-for="i in 31"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
:column="`tgl${i}`"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
@ -472,6 +488,7 @@ 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'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@ -486,18 +503,19 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
|
||||
{
|
||||
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 { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
|
||||
{
|
||||
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,
|
||||
media: ''
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
@ -510,7 +528,8 @@ const filterData = (params: any) => {
|
||||
: new Date().toISOString().slice(0, 10),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
idUp3: up3 ? up3.id : 0,
|
||||
media: ''
|
||||
})
|
||||
|
||||
onResult((queryResult) => {
|
||||
@ -531,9 +550,7 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
|
||||
}
|
||||
const getDetail = () => {}
|
||||
|
||||
const showDialogDataSelected = () => {
|
||||
dialogDataSelected.value = true
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<!-- <DxColumn
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="nama_uid"
|
||||
@ -62,7 +62,7 @@
|
||||
:group-index="0"
|
||||
name="NamaUID"
|
||||
v-if="filters.groupBy"
|
||||
/> -->
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
@ -776,18 +776,18 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
|
||||
{
|
||||
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 { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
|
||||
{
|
||||
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 { ulp, uid, up3 } = params
|
||||
refetch({
|
||||
@ -874,7 +874,268 @@ const filters = ref({ groupBy: false })
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
|
||||
data.value = [
|
||||
{
|
||||
"id": 0,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13105,
|
||||
"nama_ulp": "ULP LUBUK ALUNG",
|
||||
"fungsi_bidang": "Proses PD/TD, belum ada realisasinya ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 983,
|
||||
"min_durasi_response": 983,
|
||||
"max_durasi_response": 983,
|
||||
"total_dibawah_sla_response": 1,
|
||||
"total_diatas_sla_response": 0,
|
||||
"avg_durasi_recovery": 1373,
|
||||
"min_durasi_recovery": 1373,
|
||||
"max_durasi_recovery": 1373,
|
||||
"total_dibawah_sla_recovery": 1,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13107,
|
||||
"nama_ulp": "ULP PAINAN",
|
||||
"fungsi_bidang": "Drop Tegangan ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 2228,
|
||||
"min_durasi_response": 2228,
|
||||
"max_durasi_response": 2228,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 2347,
|
||||
"min_durasi_recovery": 2347,
|
||||
"max_durasi_recovery": 2347,
|
||||
"total_dibawah_sla_recovery": 1,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13104,
|
||||
"nama_ulp": "ULP PARIAMAN",
|
||||
"fungsi_bidang": "Kondisi Jaringan Listrik ",
|
||||
"total": 4,
|
||||
"total_selesai": 3,
|
||||
"persen_selesai": 75,
|
||||
"total_inproses": 1,
|
||||
"persen_inproses": 25,
|
||||
"avg_durasi_response": 772.6666666666666,
|
||||
"min_durasi_response": 171,
|
||||
"max_durasi_response": 1701,
|
||||
"total_dibawah_sla_response": 2,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 3476,
|
||||
"min_durasi_recovery": 2824,
|
||||
"max_durasi_recovery": 3968,
|
||||
"total_dibawah_sla_recovery": 4,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13103,
|
||||
"nama_ulp": "ULP INDARUNG",
|
||||
"fungsi_bidang": "Alat Pembatas tidak berfungsi ",
|
||||
"total": 25,
|
||||
"total_selesai": 15,
|
||||
"persen_selesai": 60,
|
||||
"total_inproses": 10,
|
||||
"persen_inproses": 40,
|
||||
"avg_durasi_response": 1419,
|
||||
"min_durasi_response": 109,
|
||||
"max_durasi_response": 4384,
|
||||
"total_dibawah_sla_response": 10,
|
||||
"total_diatas_sla_response": 5,
|
||||
"avg_durasi_recovery": 4791.6,
|
||||
"min_durasi_recovery": 10,
|
||||
"max_durasi_recovery": 21118,
|
||||
"total_dibawah_sla_recovery": 17,
|
||||
"total_diatas_sla_recovery": 8
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13105,
|
||||
"nama_ulp": "ULP LUBUK ALUNG",
|
||||
"fungsi_bidang": "PD",
|
||||
"total": 2,
|
||||
"total_selesai": 2,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 8920.5,
|
||||
"min_durasi_response": 790,
|
||||
"max_durasi_response": 17051,
|
||||
"total_dibawah_sla_response": 1,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 13781.5,
|
||||
"min_durasi_recovery": 6068,
|
||||
"max_durasi_recovery": 21495,
|
||||
"total_dibawah_sla_recovery": 0,
|
||||
"total_diatas_sla_recovery": 2
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13106,
|
||||
"nama_ulp": "ULP SICINCIN",
|
||||
"fungsi_bidang": "Alat Pembatas tidak berfungsi ",
|
||||
"total": 11,
|
||||
"total_selesai": 0,
|
||||
"persen_selesai": 0,
|
||||
"total_inproses": 11,
|
||||
"persen_inproses": 100,
|
||||
"avg_durasi_response": 828.25,
|
||||
"min_durasi_response": 387,
|
||||
"max_durasi_response": 1237,
|
||||
"total_dibawah_sla_response": 4,
|
||||
"total_diatas_sla_response": 0,
|
||||
"avg_durasi_recovery": 2622.181818181818,
|
||||
"min_durasi_recovery": 480,
|
||||
"max_durasi_recovery": 15205,
|
||||
"total_dibawah_sla_recovery": 10,
|
||||
"total_diatas_sla_recovery": 1
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13103,
|
||||
"nama_ulp": "ULP INDARUNG",
|
||||
"fungsi_bidang": "Tidak bisa beli Token ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 5442,
|
||||
"min_durasi_response": 5442,
|
||||
"max_durasi_response": 5442,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 9759,
|
||||
"min_durasi_recovery": 9759,
|
||||
"max_durasi_recovery": 9759,
|
||||
"total_dibawah_sla_recovery": 0,
|
||||
"total_diatas_sla_recovery": 1
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13102,
|
||||
"nama_ulp": "ULP TABING",
|
||||
"fungsi_bidang": "Kondisi Jaringan Listrik ",
|
||||
"total": 13,
|
||||
"total_selesai": 4,
|
||||
"persen_selesai": 30.76923076923077,
|
||||
"total_inproses": 9,
|
||||
"persen_inproses": 69.23076923076923,
|
||||
"avg_durasi_response": 5249.461538461538,
|
||||
"min_durasi_response": 300,
|
||||
"max_durasi_response": 22739,
|
||||
"total_dibawah_sla_response": 5,
|
||||
"total_diatas_sla_response": 8,
|
||||
"avg_durasi_recovery": 7872.384615384615,
|
||||
"min_durasi_recovery": 594,
|
||||
"max_durasi_recovery": 32933,
|
||||
"total_dibawah_sla_recovery": 7,
|
||||
"total_diatas_sla_recovery": 6
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13102,
|
||||
"nama_ulp": "ULP TABING",
|
||||
"fungsi_bidang": "PTL Sering Padam ",
|
||||
"total": 1,
|
||||
"total_selesai": 0,
|
||||
"persen_selesai": 0,
|
||||
"total_inproses": 1,
|
||||
"persen_inproses": 100,
|
||||
"avg_durasi_response": 28613,
|
||||
"min_durasi_response": 28613,
|
||||
"max_durasi_response": 28613,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 37937,
|
||||
"min_durasi_recovery": 37937,
|
||||
"max_durasi_recovery": 37937,
|
||||
"total_dibawah_sla_recovery": 0,
|
||||
"total_diatas_sla_recovery": 1
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13112,
|
||||
"nama_ulp": "ULP KURANJI",
|
||||
"fungsi_bidang": "Alat Ukur Paskabayar tidak berfungsi ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 2264,
|
||||
"min_durasi_response": 2264,
|
||||
"max_durasi_response": 2264,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 3300,
|
||||
"min_durasi_recovery": 3300,
|
||||
"max_durasi_recovery": 3300,
|
||||
"total_dibawah_sla_recovery": 1,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -249,7 +249,6 @@
|
||||
show-in-column="no"
|
||||
css-class="text-white !text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
@ -300,7 +299,7 @@
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
@ -308,7 +307,7 @@
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
@ -316,7 +315,7 @@
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
@ -348,7 +347,7 @@
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
@ -356,7 +355,7 @@
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
@ -364,7 +363,7 @@
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
@ -393,7 +392,6 @@
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
@ -438,21 +436,21 @@
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white !text-right"
|
||||
@ -480,21 +478,21 @@
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white !text-right"
|
||||
@ -552,7 +550,7 @@
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
@ -593,9 +591,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="
|
||||
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
|
||||
"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -928,18 +924,18 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerJenisKeluhan,
|
||||
{
|
||||
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 { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerJenisKeluhan,
|
||||
{
|
||||
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 { ulp, uid, up3 } = params
|
||||
|
||||
@ -974,7 +970,7 @@ const filterData = (params: any) => {
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
|
||||
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
|
||||
}
|
||||
|
||||
const showDialogDataSelected = () => {
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
data-type="number"
|
||||
data-field="no"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<!-- <DxColumn
|
||||
:width="120"
|
||||
@ -78,6 +79,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -87,6 +89,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -95,7 +98,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
@ -106,6 +109,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -114,7 +118,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -127,6 +131,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -135,6 +140,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -163,6 +169,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -171,6 +178,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -183,6 +191,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -191,6 +200,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -219,6 +229,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -227,6 +238,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -236,124 +248,149 @@
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
<p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
<p class="!text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
@ -730,6 +767,7 @@ 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'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@ -744,18 +782,18 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerKelompokKeluhan,
|
||||
{
|
||||
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 { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerKelompokKeluhan,
|
||||
{
|
||||
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 { ulp, uid, up3 } = params
|
||||
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
css-class="custom-table-column"
|
||||
data-type="number"
|
||||
data-field="no"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
@ -77,6 +78,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -86,6 +88,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -94,7 +97,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
@ -105,6 +108,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -113,7 +117,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -126,6 +130,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -134,6 +139,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -162,6 +168,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -170,6 +177,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -182,6 +190,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -190,6 +199,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -218,6 +228,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -226,6 +237,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -235,114 +247,131 @@
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
<template #formatTime="{ data }">
|
||||
<p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
|
||||
<p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||
</p>
|
||||
</template>
|
||||
@ -351,6 +380,18 @@
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
</template>
|
||||
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{ data.text }}
|
||||
@ -729,6 +770,7 @@ 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'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@ -743,18 +785,15 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerTanggal,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerTanggal, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onDataSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
@ -51,16 +50,17 @@
|
||||
css-class="custom-table-column"
|
||||
data-type="number"
|
||||
data-field="no"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
|
||||
<!-- <DxColumn
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="nama_up3"
|
||||
caption="Nama UP3"
|
||||
caption="UP3"
|
||||
css-class="custom-table-column"
|
||||
:group-index="0"
|
||||
/> -->
|
||||
/>
|
||||
|
||||
<DxColumn
|
||||
:width="170"
|
||||
@ -78,6 +78,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
@ -87,6 +88,7 @@
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
@ -95,7 +97,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-templete="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
@ -114,7 +116,7 @@
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-templete="percent"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -127,6 +129,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -135,6 +138,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -143,7 +147,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-templete="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -152,7 +156,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-templete="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -163,6 +167,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -171,6 +176,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -183,6 +189,7 @@
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -191,6 +198,7 @@
|
||||
data-type="number"
|
||||
caption="Rata-Rata"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -199,7 +207,7 @@
|
||||
data-type="number"
|
||||
caption="Max"
|
||||
css-class="custom-table-column"
|
||||
cell-templete="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -208,7 +216,7 @@
|
||||
data-type="number"
|
||||
caption="Min"
|
||||
css-class="custom-table-column"
|
||||
cell-templete="data-waktu"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
@ -219,6 +227,7 @@
|
||||
data-type="number"
|
||||
caption=">SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
@ -227,6 +236,7 @@
|
||||
data-type="number"
|
||||
caption="≤SLA"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -236,236 +246,270 @@
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white"
|
||||
css-class="!text-left"
|
||||
:show-in-group-footer="true"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_selesai"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_selesai"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_inproses"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_inproses"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxGroupItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="!text-right"
|
||||
:show-in-group-footer="true"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="no"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_selesai"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}%"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="persen_inproses"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_response"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
column="avg_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="min"
|
||||
display-format="{0}"
|
||||
column="min_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
summary-type="max"
|
||||
display-format="{0}"
|
||||
column="max_durasi_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_diatas_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
column="total_dibawah_sla_recovery"
|
||||
css-class="text-white"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
|
||||
@ -475,8 +519,16 @@
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #percent="{ data }">
|
||||
<p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
@ -497,7 +549,7 @@
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
@ -538,9 +590,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="
|
||||
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
|
||||
"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
@ -857,7 +907,7 @@ 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'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
@ -872,15 +922,15 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
|
||||
const loadingData = ref(false)
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
|
||||
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 { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
|
||||
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 { ulp, uid, up3 } = params
|
||||
|
||||
@ -915,7 +965,7 @@ const filterData = (params: any) => {
|
||||
}
|
||||
|
||||
const getDetail = () => {
|
||||
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
|
||||
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
|
||||
}
|
||||
|
||||
const showDialogDataSelected = () => {
|
||||
@ -969,7 +1019,413 @@ const filters = ref()
|
||||
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
|
||||
data.value = [
|
||||
{
|
||||
id: 0,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 120,
|
||||
nama_uid: 'WILAYAH SUMATERA UTARA',
|
||||
id_up3: 12100,
|
||||
nama_up3: 'UP3 PEMATANG SIANTAR',
|
||||
id_ulp: 12102,
|
||||
nama_ulp: 'ULP LIMA PULUH',
|
||||
total: 11,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 9.090909090909092,
|
||||
total_inproses: 10,
|
||||
persen_inproses: 90.9090909090909,
|
||||
total_durasi_response: 10193,
|
||||
avg_durasi_response: 1019.3,
|
||||
min_durasi_response: 379,
|
||||
max_durasi_response: 1782,
|
||||
total_dibawah_sla_response: 7,
|
||||
total_diatas_sla_response: 3,
|
||||
total_durasi_recovery: 13701,
|
||||
avg_durasi_recovery: 1245.5454545454545,
|
||||
min_durasi_recovery: 388,
|
||||
max_durasi_recovery: 2501,
|
||||
total_dibawah_sla_recovery: 11,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 41,
|
||||
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
|
||||
id_up3: 412,
|
||||
nama_up3: 'UP3 TERNATE',
|
||||
id_ulp: 41230,
|
||||
nama_ulp: 'ULP BACAN',
|
||||
total: 6,
|
||||
total_selesai: 4,
|
||||
persen_selesai: 66.66666666666666,
|
||||
total_inproses: 2,
|
||||
persen_inproses: 33.33333333333333,
|
||||
total_durasi_response: 7291,
|
||||
avg_durasi_response: 1458.2,
|
||||
min_durasi_response: 308,
|
||||
max_durasi_response: 2736,
|
||||
total_dibawah_sla_response: 2,
|
||||
total_diatas_sla_response: 3,
|
||||
total_durasi_recovery: 19860,
|
||||
avg_durasi_recovery: 3310,
|
||||
min_durasi_recovery: 2152,
|
||||
max_durasi_recovery: 6176,
|
||||
total_dibawah_sla_recovery: 5,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 101,
|
||||
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
|
||||
id_up3: 52150,
|
||||
nama_up3: 'UP3 MAGELANG',
|
||||
id_ulp: 52156,
|
||||
nama_ulp: 'ULP PARAKAN',
|
||||
total: 56,
|
||||
total_selesai: 15,
|
||||
persen_selesai: 26.785714285714285,
|
||||
total_inproses: 41,
|
||||
persen_inproses: 73.21428571428571,
|
||||
total_durasi_response: 145058,
|
||||
avg_durasi_response: 3086.340425531915,
|
||||
min_durasi_response: 459,
|
||||
max_durasi_response: 8933,
|
||||
total_dibawah_sla_response: 11,
|
||||
total_diatas_sla_response: 36,
|
||||
total_durasi_recovery: 204948,
|
||||
avg_durasi_recovery: 3659.785714285714,
|
||||
min_durasi_recovery: 1,
|
||||
max_durasi_recovery: 15497,
|
||||
total_dibawah_sla_recovery: 43,
|
||||
total_diatas_sla_recovery: 13
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 31,
|
||||
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
|
||||
id_up3: 31500,
|
||||
nama_up3: 'UP3 TOLITOLI',
|
||||
id_ulp: 31530,
|
||||
nama_ulp: 'ULP BANGKIR',
|
||||
total: 56,
|
||||
total_selesai: 23,
|
||||
persen_selesai: 41.07142857142857,
|
||||
total_inproses: 33,
|
||||
persen_inproses: 58.92857142857143,
|
||||
total_durasi_response: 14809,
|
||||
avg_durasi_response: 643.8695652173913,
|
||||
min_durasi_response: 63,
|
||||
max_durasi_response: 6694,
|
||||
total_dibawah_sla_response: 22,
|
||||
total_diatas_sla_response: 1,
|
||||
total_durasi_recovery: 63412,
|
||||
avg_durasi_recovery: 1132.357142857143,
|
||||
min_durasi_recovery: 76,
|
||||
max_durasi_recovery: 6815,
|
||||
total_dibawah_sla_recovery: 52,
|
||||
total_diatas_sla_recovery: 4
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 154,
|
||||
nama_up3: 'UP3 SITUBONDO',
|
||||
id_ulp: 51654,
|
||||
nama_ulp: 'ULP WONOSARI',
|
||||
total: 92,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 92,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 201431,
|
||||
avg_durasi_response: 2426.879518072289,
|
||||
min_durasi_response: 14,
|
||||
max_durasi_response: 22160,
|
||||
total_dibawah_sla_response: 54,
|
||||
total_diatas_sla_response: 29,
|
||||
total_durasi_recovery: 856596,
|
||||
avg_durasi_recovery: 9310.826086956522,
|
||||
min_durasi_recovery: 0,
|
||||
max_durasi_recovery: 74239,
|
||||
total_dibawah_sla_recovery: 49,
|
||||
total_diatas_sla_recovery: 43
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 110,
|
||||
nama_uid: 'WILAYAH ACEH',
|
||||
id_up3: 116,
|
||||
nama_up3: 'UP3 SIGLI',
|
||||
id_ulp: 11662,
|
||||
nama_ulp: 'ULP MEUREUDU',
|
||||
total: 8,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 8,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 3766,
|
||||
avg_durasi_response: 470.75,
|
||||
min_durasi_response: 99,
|
||||
max_durasi_response: 1322,
|
||||
total_dibawah_sla_response: 8,
|
||||
total_diatas_sla_response: 0,
|
||||
total_durasi_recovery: 4463,
|
||||
avg_durasi_recovery: 557.875,
|
||||
min_durasi_recovery: 132,
|
||||
max_durasi_recovery: 1390,
|
||||
total_dibawah_sla_recovery: 8,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 287,
|
||||
nama_uid: 'DISTRIBUSI BALI',
|
||||
id_up3: 329,
|
||||
nama_up3: 'UP3 BALI UTARA',
|
||||
id_ulp: 55340,
|
||||
nama_ulp: 'ULP GILIMANUK',
|
||||
total: 47,
|
||||
total_selesai: 19,
|
||||
persen_selesai: 40.42553191489361,
|
||||
total_inproses: 28,
|
||||
persen_inproses: 59.57446808510638,
|
||||
total_durasi_response: 47015,
|
||||
avg_durasi_response: 1000.3191489361702,
|
||||
min_durasi_response: 22,
|
||||
max_durasi_response: 14684,
|
||||
total_dibawah_sla_response: 42,
|
||||
total_diatas_sla_response: 5,
|
||||
total_durasi_recovery: 74421,
|
||||
avg_durasi_recovery: 1583.4255319148936,
|
||||
min_durasi_recovery: 257,
|
||||
max_durasi_recovery: 14769,
|
||||
total_dibawah_sla_recovery: 44,
|
||||
total_diatas_sla_recovery: 3
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nama_regional: null,
|
||||
id_uid: 0,
|
||||
nama_uid: '',
|
||||
id_up3: 0,
|
||||
nama_up3: '',
|
||||
id_ulp: 22450,
|
||||
nama_ulp: 'ULP PANGKALAN BUN',
|
||||
total: 167,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 167,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 118469,
|
||||
avg_durasi_response: 789.7933333333333,
|
||||
min_durasi_response: 52,
|
||||
max_durasi_response: 3752,
|
||||
total_dibawah_sla_response: 135,
|
||||
total_diatas_sla_response: 15,
|
||||
total_durasi_recovery: 173448,
|
||||
avg_durasi_recovery: 1038.6107784431138,
|
||||
min_durasi_recovery: 0,
|
||||
max_durasi_recovery: 3793,
|
||||
total_dibawah_sla_recovery: 167,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13300,
|
||||
nama_up3: 'UP3 SOLOK',
|
||||
id_ulp: 13334,
|
||||
nama_ulp: 'ULP SILUNGKANG',
|
||||
total: 1,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 100,
|
||||
total_durasi_response: 5118,
|
||||
avg_durasi_response: 5118,
|
||||
min_durasi_response: 5118,
|
||||
max_durasi_response: 5118,
|
||||
total_dibawah_sla_response: 0,
|
||||
total_diatas_sla_response: 1,
|
||||
total_durasi_recovery: 5696,
|
||||
avg_durasi_recovery: 5696,
|
||||
min_durasi_recovery: 5696,
|
||||
max_durasi_recovery: 5696,
|
||||
total_dibawah_sla_recovery: 0,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 221,
|
||||
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
|
||||
id_up3: 2220,
|
||||
nama_up3: 'UP3 BARABAI',
|
||||
id_ulp: 22230,
|
||||
nama_ulp: 'ULP AMUNTAI',
|
||||
total: 48,
|
||||
total_selesai: 4,
|
||||
persen_selesai: 8.333333333333332,
|
||||
total_inproses: 44,
|
||||
persen_inproses: 91.66666666666666,
|
||||
total_durasi_response: 25050,
|
||||
avg_durasi_response: 532.9787234042553,
|
||||
min_durasi_response: 58,
|
||||
max_durasi_response: 2352,
|
||||
total_dibawah_sla_response: 44,
|
||||
total_diatas_sla_response: 3,
|
||||
total_durasi_recovery: 49151,
|
||||
avg_durasi_recovery: 1023.9791666666666,
|
||||
min_durasi_recovery: 129,
|
||||
max_durasi_recovery: 2853,
|
||||
total_dibawah_sla_recovery: 48,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 31,
|
||||
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
|
||||
id_up3: 31700,
|
||||
nama_up3: 'UP3 KOTAMOBAGU',
|
||||
id_ulp: 31730,
|
||||
nama_ulp: 'ULP MODAYAG',
|
||||
total: 21,
|
||||
total_selesai: 11,
|
||||
persen_selesai: 52.38095238095239,
|
||||
total_inproses: 10,
|
||||
persen_inproses: 47.61904761904761,
|
||||
total_durasi_response: 11456,
|
||||
avg_durasi_response: 716,
|
||||
min_durasi_response: 126,
|
||||
max_durasi_response: 2376,
|
||||
total_dibawah_sla_response: 13,
|
||||
total_diatas_sla_response: 3,
|
||||
total_durasi_recovery: 30489,
|
||||
avg_durasi_recovery: 1451.857142857143,
|
||||
min_durasi_recovery: 0,
|
||||
max_durasi_recovery: 3482,
|
||||
total_dibawah_sla_recovery: 21,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 427,
|
||||
nama_uid: 'DISTRIBUSI JAWA BARAT',
|
||||
id_up3: 546,
|
||||
nama_up3: 'UP3 TASIKMALAYA',
|
||||
id_ulp: 53231,
|
||||
nama_ulp: 'ULP CIAMIS',
|
||||
total: 123,
|
||||
total_selesai: 16,
|
||||
persen_selesai: 13.008130081300814,
|
||||
total_inproses: 107,
|
||||
persen_inproses: 86.99186991869918,
|
||||
total_durasi_response: 476405,
|
||||
avg_durasi_response: 5881.543209876543,
|
||||
min_durasi_response: 46,
|
||||
max_durasi_response: 41257,
|
||||
total_dibawah_sla_response: 21,
|
||||
total_diatas_sla_response: 60,
|
||||
total_durasi_recovery: 1177396,
|
||||
avg_durasi_recovery: 9572.325203252032,
|
||||
min_durasi_recovery: 0,
|
||||
max_durasi_recovery: 45912,
|
||||
total_dibawah_sla_recovery: 57,
|
||||
total_diatas_sla_recovery: 66
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 157,
|
||||
nama_up3: 'UP3 SURABAYA UTARA',
|
||||
id_ulp: 51101,
|
||||
nama_ulp: 'ULP INDRAPURA',
|
||||
total: 139,
|
||||
total_selesai: 131,
|
||||
persen_selesai: 94.24460431654677,
|
||||
total_inproses: 8,
|
||||
persen_inproses: 5.755395683453238,
|
||||
total_durasi_response: 491177,
|
||||
avg_durasi_response: 3749.442748091603,
|
||||
min_durasi_response: 18,
|
||||
max_durasi_response: 20546,
|
||||
total_dibawah_sla_response: 51,
|
||||
total_diatas_sla_response: 80,
|
||||
total_durasi_recovery: 775066,
|
||||
avg_durasi_recovery: 5576.014388489209,
|
||||
min_durasi_recovery: 1,
|
||||
max_durasi_recovery: 49206,
|
||||
total_dibawah_sla_recovery: 78,
|
||||
total_diatas_sla_recovery: 61
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 41,
|
||||
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
|
||||
id_up3: 414,
|
||||
nama_up3: 'UP3 MASOHI',
|
||||
id_ulp: 41430,
|
||||
nama_ulp: 'ULP MASOHI',
|
||||
total: 19,
|
||||
total_selesai: 17,
|
||||
persen_selesai: 89.47368421052632,
|
||||
total_inproses: 2,
|
||||
persen_inproses: 10.526315789473683,
|
||||
total_durasi_response: 18570,
|
||||
avg_durasi_response: 1092.3529411764705,
|
||||
min_durasi_response: 480,
|
||||
max_durasi_response: 2337,
|
||||
total_dibawah_sla_response: 13,
|
||||
total_diatas_sla_response: 4,
|
||||
total_durasi_recovery: 41850,
|
||||
avg_durasi_recovery: 2202.6315789473683,
|
||||
min_durasi_recovery: 22,
|
||||
max_durasi_recovery: 4386,
|
||||
total_dibawah_sla_recovery: 18,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13105,
|
||||
nama_ulp: 'ULP LUBUK ALUNG',
|
||||
total: 67,
|
||||
total_selesai: 56,
|
||||
persen_selesai: 83.5820895522388,
|
||||
total_inproses: 11,
|
||||
persen_inproses: 16.417910447761194,
|
||||
total_durasi_response: 67996,
|
||||
avg_durasi_response: 1214.2142857142858,
|
||||
min_durasi_response: 45,
|
||||
max_durasi_response: 17051,
|
||||
total_dibawah_sla_response: 48,
|
||||
total_diatas_sla_response: 8,
|
||||
total_durasi_recovery: 546970,
|
||||
avg_durasi_recovery: 8163.731343283582,
|
||||
min_durasi_recovery: 0,
|
||||
max_durasi_recovery: 221267,
|
||||
total_dibawah_sla_recovery: 40,
|
||||
total_diatas_sla_recovery: 27
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,67 +1,196 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type8 @update:filters="(value) => filters = value" />
|
||||
<Type8 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid 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="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
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="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="regu"
|
||||
caption="Kode Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_idUlp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="in_process"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_in_process"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="selesai"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_selesai"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_rating" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_rating"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_rating"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rating_1"
|
||||
data-type="number"
|
||||
caption="1"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rating_2"
|
||||
data-type="number"
|
||||
caption="2"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rating_3"
|
||||
data-type="number"
|
||||
caption="3"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rating_4"
|
||||
data-type="number"
|
||||
caption="4"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rating_5"
|
||||
data-type="number"
|
||||
caption="5"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="indeks_rating"
|
||||
data-type="number"
|
||||
caption="Indeks"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_non_rating"
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_non_rating"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
@ -128,13 +257,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const data = ref<any[]>([])
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerRatingUnit, {
|
||||
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 { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.keluhan.rekap.keluhanPerRatingUnit,
|
||||
{
|
||||
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 filters = ref()
|
||||
|
||||
const filterData = (params: any) => {
|
||||
@ -164,4 +296,4 @@ const filterData = (params: any) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user