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

Refactor data grid components

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-03-21 10:52:11 +07:00
parent f314367e76
commit 3e1c2ea137
72 changed files with 1639 additions and 991 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -321,13 +322,13 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -339,7 +340,7 @@
</template>
<template #formatTime="{ data }">
<p @click="showDetail()">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -519,6 +520,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -1146,14 +1148,18 @@ const getDetail = async () => {
// loadingSubData.value = value
// })
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const onExporting = (e: any) => {
@ -1290,13 +1296,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != dataSelected.value) {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
console.log('new data selected')
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

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

@ -10,6 +10,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -122,13 +123,13 @@
</DxSummary>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -150,6 +151,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -568,14 +570,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@ -612,13 +617,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}

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

@ -9,6 +9,7 @@
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -86,13 +87,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -143,6 +144,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -555,14 +557,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@ -599,13 +604,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}

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

@ -4,6 +4,7 @@
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -237,10 +238,14 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
clearSelection()
}
const data = ref<any[]>([])

36
src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
View File

@ -4,6 +4,7 @@
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -333,13 +334,13 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -351,13 +352,13 @@
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer" @click="showDetail()">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -423,6 +424,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -830,14 +832,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@ -874,13 +879,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}

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

@ -12,6 +12,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -497,10 +498,14 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
clearSelection()
}
const filterData = (params: any) => {

713
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
View File

@ -12,6 +12,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -256,13 +257,13 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -274,7 +275,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer" @click="showDetail()">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -435,6 +436,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -895,7 +897,7 @@ const getDetail = () => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
idEquipment: ref.kode ? ref.kode : 0
idEquipment: ref?.kode ? ref.kode : 0
}
const { onResult, onError, loading, refetch } = useQuery(
@ -918,24 +920,30 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filters = ref()
@ -943,379 +951,394 @@ onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
id: '0',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kabel',
kode: '11232',
total: 1754,
total_selesai: 1754,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 248343,
avg_durasi_response: 2.360302677532014,
min_durasi_response: 0,
max_durasi_response: 7020,
total_dibawah_sla_response: 1714,
total_diatas_sla_response: 4,
total_durasi_recovery: 7444445,
avg_durasi_recovery: 70.67217787913341,
min_durasi_recovery: 0,
max_durasi_recovery: 199591,
total_dibawah_sla_recovery: 1660,
total_diatas_sla_recovery: 94,
total_response: 1718,
total_recovery: 1754
},
{
id: '1',
id_fasilitas: '111 -> Distribusi -> Penyulang',
id: 42,
id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'MV Cell',
kode: '11511',
total: 56062,
total_selesai: 56061,
persen_selesai: 99.99821626056865,
total_inproses: 1,
persen_inproses: 0.0017837394313438694,
total_durasi_response: 80699092,
avg_durasi_response: 23.504602211915806,
min_durasi_response: 24,
max_durasi_response: 2592137,
total_dibawah_sla_response: 52700,
total_diatas_sla_response: 3360,
total_durasi_recovery: 1398860783,
avg_durasi_recovery: 415.39603995718875,
min_durasi_recovery: 101,
max_durasi_recovery: 2713062,
total_dibawah_sla_recovery: 49187,
total_diatas_sla_recovery: 6873,
total_response: 56060,
total_recovery: 56060
},
{
id: '2',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'JTR',
kode: '13400',
total: 6022,
total_selesai: 6022,
kode: '11111',
equipment_id: '11111',
total: 345,
total_selesai: 345,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 8262056,
avg_durasi_response: 22.382392026578074,
min_durasi_response: -16519,
max_durasi_response: 76299,
total_dibawah_sla_response: 5655,
total_diatas_sla_response: 365,
total_durasi_recovery: 87345586,
avg_durasi_recovery: 241.25440053138493,
min_durasi_recovery: -16459,
max_durasi_recovery: 2499716,
total_dibawah_sla_recovery: 4802,
total_diatas_sla_recovery: 1220,
total_response: 6020,
total_recovery: 6022
total_durasi_response: 82457,
avg_durasi_response: 3.773913043478261,
min_durasi_response: 0,
max_durasi_response: 30960,
total_dibawah_sla_response: 338,
total_diatas_sla_response: 7,
total_durasi_recovery: 853232,
avg_durasi_recovery: 41.00869565217391,
min_durasi_recovery: 15,
max_durasi_recovery: 90060,
total_dibawah_sla_recovery: 338,
total_diatas_sla_recovery: 7,
total_response: 345,
total_recovery: 345
},
{
id: '3',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Jointing',
kode: '11243',
total: 1,
total_selesai: 1,
id: 40,
id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Kabel Outgoing s/d Pole Pertama',
kode: '11112',
equipment_id: '11112',
total: 47,
total_selesai: 47,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 60,
avg_durasi_response: 1,
min_durasi_response: 60,
max_durasi_response: 60,
total_dibawah_sla_response: 1,
total_durasi_response: 2138,
avg_durasi_response: 0.7142857142857143,
min_durasi_response: 0,
max_durasi_response: 156,
total_dibawah_sla_response: 42,
total_diatas_sla_response: 0,
total_durasi_recovery: 240,
avg_durasi_recovery: 4,
min_durasi_recovery: 240,
max_durasi_recovery: 240,
total_dibawah_sla_recovery: 1,
total_diatas_sla_recovery: 0,
total_response: 1,
total_recovery: 1
total_durasi_recovery: 151494,
avg_durasi_recovery: 53.46808510638298,
min_durasi_recovery: 62,
max_durasi_recovery: 28740,
total_dibawah_sla_recovery: 44,
total_diatas_sla_recovery: 3,
total_response: 42,
total_recovery: 47
},
{
id: '4',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: null,
kode: '',
total: 7153680,
total_selesai: 1144750,
persen_selesai: 16.00225338567003,
total_inproses: 6008930,
persen_inproses: 83.99774661432997,
total_durasi_response: 746069414,
avg_durasi_response: 29.719034788714257,
min_durasi_response: -16906,
max_durasi_response: 2563885,
total_dibawah_sla_response: 352502,
total_diatas_sla_response: 59097,
total_durasi_recovery: 1633920126,
avg_durasi_recovery: 65.89483875340065,
min_durasi_recovery: -86061,
max_durasi_recovery: 3373943,
total_dibawah_sla_recovery: 412256,
total_diatas_sla_recovery: 900,
total_response: 411599,
total_recovery: 413156
},
{
id: '5',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'AVR / Kapasitor',
kode: '11215',
id: 46,
id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Kapasitor',
kode: '11113',
equipment_id: '11113',
total: 20,
total_selesai: 20,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 2682,
avg_durasi_response: 2.15,
total_durasi_response: 88566,
avg_durasi_response: 73.75,
min_durasi_response: 0,
max_durasi_response: 1477,
total_dibawah_sla_response: 20,
total_diatas_sla_response: 0,
total_durasi_recovery: 115132,
avg_durasi_recovery: 95.85,
min_durasi_recovery: 0,
max_durasi_recovery: 18660,
max_durasi_response: 41400,
total_dibawah_sla_response: 17,
total_diatas_sla_response: 3,
total_durasi_recovery: 156009,
avg_durasi_recovery: 129.95,
min_durasi_recovery: 63,
max_durasi_recovery: 41520,
total_dibawah_sla_recovery: 15,
total_diatas_sla_recovery: 5,
total_response: 20,
total_recovery: 20
},
{
id: '6',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kelompok Terencana (Planned) ',
kode: '32000',
total: 1130,
total_selesai: 1127,
persen_selesai: 99.73451327433628,
total_inproses: 3,
persen_inproses: 0.2654867256637168,
total_durasi_response: 6837343,
avg_durasi_response: 100.54432624113475,
min_durasi_response: -2607074,
max_durasi_response: 2553583,
total_dibawah_sla_response: 1070,
total_diatas_sla_response: 58,
total_durasi_recovery: 9901876,
avg_durasi_recovery: 145.95297249334516,
min_durasi_recovery: -2605454,
max_durasi_recovery: 2553643,
total_dibawah_sla_recovery: 1022,
total_diatas_sla_recovery: 105,
total_response: 1128,
total_recovery: 1127
},
{
id: '7',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Arrester',
kode: '11219',
total: 764,
total_selesai: 764,
id: 9,
id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Relay Outgoing Feeder',
kode: '11114',
equipment_id: '11114',
total: 24,
total_selesai: 24,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 103137,
avg_durasi_response: 2.1612057667103537,
total_durasi_response: 117230,
avg_durasi_response: 81.375,
min_durasi_response: 0,
max_durasi_response: 14436,
total_dibawah_sla_response: 755,
total_diatas_sla_response: 8,
total_durasi_recovery: 2758840,
avg_durasi_recovery: 59.97643979057592,
max_durasi_response: 62100,
total_dibawah_sla_response: 20,
total_diatas_sla_response: 4,
total_durasi_recovery: 135470,
avg_durasi_recovery: 94.04166666666667,
min_durasi_recovery: 0,
max_durasi_recovery: 62400,
total_dibawah_sla_recovery: 711,
total_diatas_sla_recovery: 53,
total_response: 763,
total_recovery: 764
},
{
id: '8',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Trafo',
kode: '11322',
total: 322,
total_selesai: 322,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 238159,
avg_durasi_response: 14.425454545454546,
min_durasi_response: 0,
max_durasi_response: 40320,
total_dibawah_sla_response: 255,
total_diatas_sla_response: 20,
total_durasi_recovery: 2275182,
avg_durasi_recovery: 117.67391304347827,
min_durasi_recovery: 59,
max_durasi_recovery: 105660,
total_dibawah_sla_recovery: 264,
total_diatas_sla_recovery: 58,
total_response: 275,
total_recovery: 322
},
{
id: '9',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kabel',
kode: '11242',
total: 2,
total_selesai: 2,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 377,
avg_durasi_response: 3,
min_durasi_response: 60,
max_durasi_response: 317,
total_dibawah_sla_response: 2,
total_diatas_sla_response: 0,
total_durasi_recovery: 9797,
avg_durasi_recovery: 81.5,
min_durasi_recovery: 1800,
max_durasi_recovery: 7997,
total_dibawah_sla_recovery: 2,
total_diatas_sla_recovery: 0,
total_response: 2,
total_recovery: 2
},
{
id: '10',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kabel Opstyg / SKTR',
kode: '11411',
total: 91371,
total_selesai: 91371,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 117146730,
avg_durasi_response: 20.890635777395797,
min_durasi_response: 0,
max_durasi_response: 86580,
total_dibawah_sla_response: 85886,
total_diatas_sla_response: 5451,
total_durasi_recovery: 488901032,
avg_durasi_recovery: 88.69208711831017,
min_durasi_recovery: 0,
max_durasi_recovery: 4028013,
total_dibawah_sla_recovery: 88945,
total_diatas_sla_recovery: 2425,
total_response: 91337,
total_recovery: 91370
},
{
id: '11',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Gardu Distribusi',
kode: '13300',
total: 275,
total_selesai: 275,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 382161,
avg_durasi_response: 22.952727272727273,
min_durasi_response: -610712,
max_durasi_response: 638280,
total_dibawah_sla_response: 238,
total_diatas_sla_response: 37,
total_durasi_recovery: 14380135,
avg_durasi_recovery: 871.3163636363637,
min_durasi_recovery: -484681,
max_durasi_recovery: 7565219,
total_dibawah_sla_recovery: 195,
total_diatas_sla_recovery: 80,
total_response: 275,
total_recovery: 275
},
{
id: '12',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Konstruksi',
kode: '12101',
total: 13,
total_selesai: 13,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 444894,
avg_durasi_response: 570,
min_durasi_response: -17483,
max_durasi_response: 435093,
total_dibawah_sla_response: 11,
total_diatas_sla_response: 2,
total_durasi_recovery: 520794,
avg_durasi_recovery: 667.3076923076923,
min_durasi_recovery: -13763,
max_durasi_recovery: 445113,
total_dibawah_sla_recovery: 11,
max_durasi_recovery: 62340,
total_dibawah_sla_recovery: 22,
total_diatas_sla_recovery: 2,
total_response: 13,
total_recovery: 13
total_response: 24,
total_recovery: 24
},
{
id: '13',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Operasi',
kode: '12503',
total: 747,
total_selesai: 747,
id: 20,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Konduktor',
kode: '11211',
equipment_id: '11211',
total: 158808,
total_selesai: 158808,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 1354769,
avg_durasi_response: 29.809395973154363,
min_durasi_response: -5325,
max_durasi_response: 349500,
total_dibawah_sla_response: 713,
total_diatas_sla_response: 32,
total_durasi_recovery: 4880492,
avg_durasi_recovery: 108.41097724230255,
min_durasi_recovery: -5325,
max_durasi_recovery: 494389,
total_dibawah_sla_recovery: 692,
total_diatas_sla_recovery: 55,
total_response: 745,
total_recovery: 747
total_durasi_response: 11431434,
avg_durasi_response: 1.119197613777534,
min_durasi_response: -3540,
max_durasi_response: 86460,
total_dibawah_sla_response: 158156,
total_diatas_sla_response: 421,
total_durasi_recovery: 292882474,
avg_durasi_recovery: 30.54788714654575,
min_durasi_recovery: -2339,
max_durasi_recovery: 608400,
total_dibawah_sla_recovery: 155028,
total_diatas_sla_recovery: 3762,
total_response: 158577,
total_recovery: 158790
},
{
id: '14',
id_fasilitas: '111 -> Distribusi -> Penyulang',
id: 37,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Tiang',
kode: '11212',
equipment_id: '11212',
total: 918,
total_selesai: 918,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 88530,
avg_durasi_response: 1.5366120218579236,
min_durasi_response: 0,
max_durasi_response: 4020,
total_dibawah_sla_response: 912,
total_diatas_sla_response: 3,
total_durasi_recovery: 5577516,
avg_durasi_recovery: 101.0958605664488,
min_durasi_recovery: 0,
max_durasi_recovery: 70860,
total_dibawah_sla_recovery: 783,
total_diatas_sla_recovery: 135,
total_response: 915,
total_recovery: 918
},
{
id: 35,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'DS / LBS',
kode: '11213',
equipment_id: '11213',
total: 2045,
total_selesai: 2045,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 236249,
avg_durasi_response: 1.8654598825831703,
min_durasi_response: -360,
max_durasi_response: 4440,
total_dibawah_sla_response: 2037,
total_diatas_sla_response: 7,
total_durasi_recovery: 4596907,
avg_durasi_recovery: 37.23471882640587,
min_durasi_recovery: -360,
max_durasi_recovery: 29160,
total_dibawah_sla_recovery: 2011,
total_diatas_sla_recovery: 34,
total_response: 2044,
total_recovery: 2045
},
{
id: 45,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Recloser / PMCB',
kode: '11214',
equipment_id: '11214',
total: 22204,
total_selesai: 22204,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 1353096,
avg_durasi_response: 0.9791385059024962,
min_durasi_response: -2100,
max_durasi_response: 8640,
total_dibawah_sla_response: 22141,
total_diatas_sla_response: 53,
total_durasi_recovery: 24861109,
avg_durasi_recovery: 18.581929555895865,
min_durasi_recovery: 0,
max_durasi_recovery: 1905240,
total_dibawah_sla_recovery: 22069,
total_diatas_sla_recovery: 133,
total_response: 22194,
total_recovery: 22202
},
{
id: 13,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'AVR / Kapasitor',
kode: '11215',
equipment_id: '11215',
total: 18,
total_selesai: 18,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 2502,
avg_durasi_response: 2.2222222222222223,
min_durasi_response: 0,
max_durasi_response: 1477,
total_dibawah_sla_response: 18,
total_diatas_sla_response: 0,
total_durasi_recovery: 91492,
avg_durasi_recovery: 84.61111111111111,
min_durasi_recovery: 0,
max_durasi_recovery: 18660,
total_dibawah_sla_recovery: 14,
total_diatas_sla_recovery: 4,
total_response: 18,
total_recovery: 18
},
{
id: 52,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'CT / PT kWh Meter Exim',
kode: '11216',
equipment_id: '11216',
total: 74,
total_selesai: 74,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 4681,
avg_durasi_response: 1.0405405405405406,
min_durasi_response: 0,
max_durasi_response: 660,
total_dibawah_sla_response: 74,
total_diatas_sla_response: 0,
total_durasi_recovery: 193882,
avg_durasi_recovery: 43.472972972972975,
min_durasi_recovery: 0,
max_durasi_recovery: 13560,
total_dibawah_sla_recovery: 73,
total_diatas_sla_recovery: 1,
total_response: 74,
total_recovery: 74
},
{
id: 38,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'CO Branch',
kode: '11217',
total: 17364,
total_selesai: 17364,
equipment_id: '11217',
total: 15367,
total_selesai: 15367,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 9434964,
avg_durasi_response: 9.046101538638853,
min_durasi_response: -175685,
max_durasi_response: 84720,
total_dibawah_sla_response: 16595,
total_diatas_sla_response: 758,
total_durasi_recovery: 72920963,
avg_durasi_recovery: 69.94573732718894,
min_durasi_recovery: -175565,
max_durasi_recovery: 136440,
total_dibawah_sla_recovery: 16387,
total_diatas_sla_recovery: 973,
total_response: 17353,
total_recovery: 17360
total_durasi_response: 7776055,
avg_durasi_response: 8.424654858035947,
min_durasi_response: -2100,
max_durasi_response: 67080,
total_dibawah_sla_response: 14779,
total_diatas_sla_response: 577,
total_durasi_recovery: 64284976,
avg_durasi_recovery: 69.67408709236477,
min_durasi_recovery: 0,
max_durasi_recovery: 93780,
total_dibawah_sla_recovery: 14579,
total_diatas_sla_recovery: 784,
total_response: 15356,
total_recovery: 15363
},
{
id: 55,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Hardware Mounting Assembly',
kode: '11218',
equipment_id: '11218',
total: 3124,
total_selesai: 3124,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 205544,
avg_durasi_response: 0.9055697823303457,
min_durasi_response: -1860,
max_durasi_response: 6000,
total_dibawah_sla_response: 3121,
total_diatas_sla_response: 3,
total_durasi_recovery: 5701877,
avg_durasi_recovery: 30.17573623559539,
min_durasi_recovery: -300,
max_durasi_recovery: 73860,
total_dibawah_sla_recovery: 3037,
total_diatas_sla_recovery: 87,
total_response: 3124,
total_recovery: 3124
},
{
id: 66,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Arrester',
kode: '11219',
equipment_id: '11219',
total: 698,
total_selesai: 698,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 78507,
avg_durasi_response: 1.787661406025825,
min_durasi_response: 0,
max_durasi_response: 14436,
total_dibawah_sla_response: 693,
total_diatas_sla_response: 4,
total_durasi_recovery: 2552611,
avg_durasi_recovery: 60.74785100286533,
min_durasi_recovery: 0,
max_durasi_recovery: 62400,
total_dibawah_sla_recovery: 650,
total_diatas_sla_recovery: 48,
total_response: 697,
total_recovery: 698
},
{
id: 56,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Terminasi',
kode: '11221',
equipment_id: '11221',
total: 105,
total_selesai: 105,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 9731,
avg_durasi_response: 1.4666666666666666,
min_durasi_response: 0,
max_durasi_response: 2100,
total_dibawah_sla_response: 105,
total_diatas_sla_response: 0,
total_durasi_recovery: 469408,
avg_durasi_recovery: 74.33333333333333,
min_durasi_recovery: 0,
max_durasi_recovery: 53580,
total_dibawah_sla_recovery: 96,
total_diatas_sla_recovery: 9,
total_response: 105,
total_recovery: 105
},
{
id: 15,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Kabel',
kode: '11222',
equipment_id: '11222',
total: 179,
total_selesai: 179,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 37371,
avg_durasi_response: 3.441340782122905,
min_durasi_response: 0,
max_durasi_response: 11760,
total_dibawah_sla_response: 175,
total_diatas_sla_response: 4,
total_durasi_recovery: 798464,
avg_durasi_recovery: 74.17877094972067,
min_durasi_recovery: 13,
max_durasi_recovery: 42263,
total_dibawah_sla_recovery: 162,
total_diatas_sla_recovery: 17,
total_response: 179,
total_recovery: 179
}
]
}

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

@ -4,6 +4,7 @@
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -272,19 +273,19 @@
</DxSummary>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -312,6 +313,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -1048,14 +1050,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@ -1092,13 +1097,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filterData = (params: any) => {

34
src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
View File

@ -12,6 +12,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -486,13 +487,13 @@
</DxSummary>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -504,7 +505,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer" @click="showDetail()">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -520,6 +521,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -933,14 +935,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@ -977,13 +982,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}

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

@ -10,6 +10,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -584,10 +585,14 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
clearSelection()
}
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {

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

@ -10,6 +10,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -244,13 +245,13 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -262,7 +263,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer" @click="showDetail()">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -278,6 +279,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -693,14 +695,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@ -737,13 +742,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filterData = (params: any) => {

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

@ -4,6 +4,7 @@
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -201,19 +202,19 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -241,6 +242,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -688,14 +690,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
dialogDetail.value = false
@ -731,13 +736,16 @@ const onExporting = (e: any) => {
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}

36
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
View File

@ -4,6 +4,7 @@
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -192,19 +193,19 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -216,7 +217,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer" @click="showDetail()">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -232,6 +233,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
@ -678,14 +680,17 @@ const getDetail = () => {
})
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (currentDataSelected.value === dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@ -722,13 +727,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}