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

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

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
</div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -140,7 +141,7 @@
</DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -152,18 +153,18 @@
</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 #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }" @click="showDetail()">
<template #formatTime="{ data }">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -198,7 +199,13 @@ const dataSub = ref([])
const dataSelected = ref({})
const dataSubSelected = ref({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const closeDialog = () => {
@ -235,7 +242,9 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const dataSelected = selectedRowsData[0]
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
</script>

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

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
</div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true"
@ -214,7 +215,7 @@
</DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -226,18 +227,18 @@
</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 #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }" @click="showDetail()">
<template #formatTime="{ data }">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -392,7 +393,13 @@ const dataSub = ref<any[]>([])
const dataSelected = ref<any>({})
const dataSubSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const closeDialog = () => {
@ -429,10 +436,10 @@ const onExporting = (e: any) => {
}
}
const currentDataSelected = ref<any>(null)
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
console.log(data)
}
showDetail()
}
</script>

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

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
</div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -78,7 +79,7 @@
</DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -90,18 +91,18 @@
</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 #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }" @click="showDetail()">
<template #formatTime="{ data }">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -136,7 +137,13 @@ const dataSub = ref<any[]>([])
const dataSelected = ref<any>({})
const dataSubSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const closeDialog = () => {
@ -173,7 +180,9 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const dataSelected = selectedRowsData[0]
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
</script>

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

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
</div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -262,7 +263,7 @@
</DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -274,18 +275,18 @@
</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 #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }" @click="showDetail()">
<template #formatTime="{ data }">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -505,7 +506,9 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const dataSelected = selectedRowsData[0]
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
</script>

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

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
</div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true"
@ -141,8 +142,13 @@ const onExporting = (e: any) => {
}
}
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()
}
</script>

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

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
</div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true"

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

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -112,13 +113,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 == '%'
@ -190,6 +191,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"
@ -873,15 +875,19 @@ const getDetail = () => {
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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -913,13 +919,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
dataSubSelected.value = data
console.log(data)
}

16
src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.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"
:show-column-lines="true"
@ -162,7 +163,7 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const data = ref<any[]>([])
const dialogDetail = ref(false)
@ -264,11 +265,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_laporanCttKwhPeriks
})
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const filters = ref()

54
src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -168,13 +169,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</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>
@ -189,22 +190,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -212,8 +213,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -226,8 +227,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -235,37 +236,37 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -273,7 +274,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.waktu_media"
:value="dataSelected?.waktu_media"
class-name="flex-1"
/>
</div>
@ -283,7 +284,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
:value="dataSelected?.keterangan_media"
class-name="flex-1"
/>
</div>
@ -318,12 +319,19 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)

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

@ -5,6 +5,7 @@
<div id="dataTable">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:remote-operations="true"
@ -202,19 +203,19 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showDetail()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -229,32 +230,32 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.pembuat_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_dialihkan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -262,8 +263,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -276,8 +277,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -285,27 +286,27 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_posko_lama" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_posko_baru" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -313,29 +314,29 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
:value="dataSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_posko_lama" class-name="flex-1" />
</div>
</div>
</DetailDialog>
@ -368,7 +369,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => (dialogDetail.value = false)
@ -411,11 +412,21 @@ const { onResult, onError, loading, refetch } = useQuery(
idUp3: 0
}
)
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const showDetail = () => {
dialogDetail.value = true
clearSelection()
}
const showDetail = () => (dialogDetail.value = true)
const filters = ref()
const reportMeta = ref({

56
src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -168,13 +169,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</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>
@ -189,22 +190,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -212,8 +213,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -226,8 +227,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -235,37 +236,37 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -273,7 +274,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@ -283,7 +284,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
@ -293,7 +294,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
@ -328,12 +329,19 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)

58
src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -174,25 +175,25 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showDetail()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<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) ? formatNumber(data.text) : data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -207,27 +208,27 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -235,8 +236,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -249,8 +250,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -258,37 +259,37 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -296,7 +297,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@ -332,7 +333,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const filters = ref()
const reportMeta = ref({
@ -343,10 +344,17 @@ const reportMeta = ref({
minJmlLapor: 1,
maxJmlLapor: 1
})
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)

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

@ -21,6 +21,7 @@
<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 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showDetail()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -215,22 +216,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -238,8 +239,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -252,8 +253,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -261,37 +262,37 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -299,7 +300,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@ -309,7 +310,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
@ -319,7 +320,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
@ -358,12 +359,19 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)

58
src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -169,19 +170,19 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showDetail()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -192,22 +193,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -215,8 +216,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -229,8 +230,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -238,37 +239,37 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -276,7 +277,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@ -286,7 +287,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
@ -296,7 +297,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
@ -335,12 +336,19 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)

56
src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -168,13 +169,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</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>
@ -189,22 +190,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -212,8 +213,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -226,8 +227,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -235,37 +236,37 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -273,7 +274,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@ -283,7 +284,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
@ -293,7 +294,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
@ -328,12 +329,19 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)

25
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,15 +1148,19 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -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) => {

20
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,15 +570,18 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -612,13 +617,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}

20
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,15 +557,18 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -599,13 +604,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
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[]>([])

24
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,15 +832,18 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -874,13 +879,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
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) => {

701
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,404 +920,425 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filters = ref()
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
}
]
}

22
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,15 +1050,18 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -1092,14 +1097,17 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')

22
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,15 +935,18 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -977,13 +982,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
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, {

22
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,15 +695,18 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -737,14 +742,17 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')

22
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,15 +690,18 @@ 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) {
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) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}

24
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,15 +680,18 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -722,13 +727,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}

51
src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -172,13 +173,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -189,17 +190,17 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -207,7 +208,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
:value="dataSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
@ -217,29 +218,29 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
:value="dataSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -247,8 +248,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -260,8 +261,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
@ -270,12 +271,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Media:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -283,7 +284,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
:value="dataSelected?.keterangan_media"
class-name="flex-1"
/>
</div>
@ -322,20 +323,28 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onExporting = (e: any) => {

54
src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -201,13 +202,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 == '%'
@ -219,7 +220,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>
@ -234,22 +235,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -257,8 +258,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -271,8 +272,8 @@
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
@ -280,37 +281,37 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -318,7 +319,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@ -359,7 +360,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const showDetail = () => (dialogDetail.value = true)
@ -558,10 +559,17 @@ 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]
dataDetail.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const { onResult, onError, loading, refetch } = useQuery(

57
src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -178,19 +179,19 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showDetail()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<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 == '%'
@ -202,7 +203,7 @@
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -213,27 +214,27 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_selesai" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_selesai" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -241,8 +242,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -254,8 +255,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
@ -264,17 +265,17 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -282,14 +283,14 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
:value="dataSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -297,19 +298,19 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
:value="dataSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
@ -347,20 +348,28 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onExporting = (e: any) => {

51
src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
View File

@ -21,6 +21,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -179,13 +180,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -196,22 +197,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -219,8 +220,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -232,8 +233,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
@ -242,17 +243,17 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -260,14 +261,14 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
:value="dataSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -275,19 +276,19 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
:value="dataSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
@ -324,20 +325,28 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onExporting = (e: any) => {

55
src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
View File

@ -21,6 +21,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -179,19 +180,19 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showDetail()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<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 == '%'
@ -203,7 +204,7 @@
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -214,22 +215,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -237,8 +238,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -250,8 +251,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
@ -260,17 +261,17 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -278,14 +279,14 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
:value="dataSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -293,19 +294,19 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
:value="dataSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
@ -343,20 +344,28 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onExporting = (e: any) => {

51
src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -170,13 +171,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -187,22 +188,22 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -210,8 +211,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_response_time)
? formatWaktu(dataDetail?.durasi_response_time)
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
@ -223,8 +224,8 @@
<InputText
:readonly="true"
:value="
parseInt(dataDetail?.durasi_recovery_time)
? formatWaktu(dataDetail?.durasi_recovery_time)
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
@ -233,17 +234,17 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -251,14 +252,14 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
:value="dataSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -266,19 +267,19 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
:value="dataSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
@ -315,20 +316,28 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onExporting = (e: any) => {

9
src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
View File

@ -5,6 +5,7 @@
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -418,10 +419,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[]>([])

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

@ -9,6 +9,7 @@
</Filters>
<div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -396,13 +397,13 @@
</DxSummary>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(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 == '%'
@ -414,7 +415,7 @@
</template>
<template #formatText="{ data }">
<p class="cursor-pointer !text-left" @click="showDetail()">
<p class="cursor-pointer !text-left">
{{ data.text }}
</p>
</template>
@ -430,6 +431,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"
@ -853,8 +855,13 @@ const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
getDetail()
}
@ -889,9 +896,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

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

@ -10,6 +10,7 @@
<div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -101,7 +102,7 @@
</DxSummary>
<template #formatNumber="{ data }">
<p class="!text-right cursor-pointer" @click="showDetail()">
<p class="!text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -113,7 +114,7 @@
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
@ -129,6 +130,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="data"
@ -556,8 +558,13 @@ const filterData = (params: any) => {
const getDetail = () => {}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
console.log(dataSelected.value)
getDetail()
@ -593,9 +600,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

22
src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.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"
@ -364,12 +365,12 @@
</DxSummary>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(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 == '%'
@ -381,7 +382,7 @@
</template>
<template #formatText="{ data }">
<p class="cursor-pointer !text-left" @click="showDetail()">
<p class="cursor-pointer !text-left">
{{ data.text }}
</p>
</template>
@ -397,6 +398,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="data"
@ -830,8 +832,13 @@ const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
getDetail()
}
@ -866,9 +873,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

22
src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.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"
@ -518,13 +519,13 @@
</DxSummary>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(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 == '%'
@ -536,7 +537,7 @@
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
@ -552,6 +553,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"
@ -979,8 +981,13 @@ const getDetail = () => {
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
getDetail()
}
@ -1015,9 +1022,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

22
src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.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"
@ -375,13 +376,13 @@
</DxSummary>
<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>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -393,7 +394,7 @@
</template>
<template #formatText="{ data }">
<p class="!text-left cursor-pointer" @click="showDetail()">
<p class="!text-left cursor-pointer">
{{ data.text }}
</p>
</template>
@ -409,6 +410,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="data"
@ -837,8 +839,13 @@ const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
getDetail()
}
@ -873,9 +880,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

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

@ -10,6 +10,7 @@
<div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true"
@ -374,17 +375,17 @@
</DxSummary>
<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>
<template #percent="{ data }">
<p class="cursor-pointer" @click="showDetail()">{{ data.text }}%</p>
<p class="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 == '%'
@ -396,7 +397,7 @@
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
@ -412,6 +413,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="data"
@ -837,8 +839,13 @@ const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
getDetail()
}
@ -873,9 +880,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

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

@ -10,6 +10,7 @@
<div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -517,13 +518,13 @@
</DxSummary>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(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 == '%'
@ -535,7 +536,7 @@
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
@ -551,6 +552,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"
@ -974,8 +976,13 @@ const getDetail = () => {
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
}
const currentDataSelected = ref<any>(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
console.log(dataSelected.value)
getDetail()
@ -1011,9 +1018,10 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

9
src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.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"
@ -252,10 +253,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[]>([])

1
src/components/Pages/Material/Daftar/Material_DGMYG.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"
:show-column-lines="true"

1
src/components/Pages/Material/Rekap/Material_RPM.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"
:show-column-lines="true"

8
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.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"
@ -305,9 +306,14 @@ const filterData = (params: any) => {
console.log(error)
})
}
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 filters = ref()

11
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.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"
@ -220,7 +221,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
@ -287,10 +288,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 filters = ref()

20
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.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"
@ -81,7 +82,7 @@
/>
</DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDialog()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -93,7 +94,7 @@
</template>
<template #formatText="{ data }">
<p class="!text-left cursor-pointer" @click="showDialog()">
<p class="!text-left cursor-pointer">
{{ data.text }}
</p>
</template>
@ -139,6 +140,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"
@ -473,7 +475,13 @@ const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingSubData = ref(false)
const showDialog = () => {
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
@ -546,15 +554,17 @@ const onExporting = (e: any) => {
}
}
const currentDataSelected = ref<any>(null)
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
}
console.log(data)
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}

11
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.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"
@ -175,7 +176,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
@ -241,10 +242,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 filters = ref()

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

@ -9,6 +9,7 @@
</Filters>
<div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
@ -383,7 +384,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
@ -457,10 +458,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 filters = ref<any>({

30
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.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"
@ -60,8 +61,8 @@
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
:group-index="0"
/>
@ -69,8 +70,8 @@
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
/>
@ -78,11 +79,20 @@
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama ULP"
data-field="nama_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="2"
/>
<!-- <DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
:group-index="3"
/> -->
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn
@ -370,10 +380,14 @@ const filterData = (params: any) => {
console.log(error)
})
}
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 filters = ref()

11
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.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"
@ -287,7 +288,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.laporUlangGangguan,
@ -353,10 +354,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 filters = ref()

9
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.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"
@ -305,10 +306,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 filters = ref()

9
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.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"
@ -305,10 +306,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 filters = ref()

9
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.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"
@ -191,10 +192,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 monalisaGangguanPerJenisKeluhan = gql`
query DaftarmonalisaGangguanPerJenisKeluhan(

9
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.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"
@ -415,10 +416,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 monalisaJumlahDurasiRptRctKeluhan = gql`
query DaftarmonalisaJumlahDurasiRptRctKeluhan(

8
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.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"
@ -363,9 +364,14 @@ const filterData = (params: any) => {
console.log(error)
})
}
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 filters = ref()

9
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.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"
@ -213,10 +214,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 monalisaRekapitulasiKeluhanBelumSelesai = gql`

9
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.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"
@ -316,10 +317,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 monalisaRekapitulasiLaporUlangKeluhan = gql`
query DaftarmonalisaRekapitulasiLaporUlangKeluhan(

9
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.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"
@ -383,10 +384,14 @@ const filterData = (params: any) => {
console.log(error)
})
}
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 filters = ref()

9
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.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"
@ -414,10 +415,14 @@ const filterData = (params: any) => {
console.log(error)
})
}
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 filters = ref()

18
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.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"
@ -358,6 +359,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"
@ -764,21 +766,23 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}

9
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.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"
@ -316,10 +317,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(

9
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.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"
@ -338,10 +339,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(

24
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.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"
@ -652,7 +653,7 @@
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDetail()">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -664,13 +665,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 #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showDetail()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
@ -686,6 +687,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"
@ -1092,21 +1094,23 @@ 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) {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}

9
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.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"
@ -416,10 +417,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(

9
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.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"
@ -316,10 +317,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(

9
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.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"
@ -338,10 +339,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(

9
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.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"
@ -803,10 +804,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(

39
src/components/Pages/PencarianData/PencarianData.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"
:show-column-lines="true"
@ -152,13 +153,13 @@
/>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showDetail()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(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 == '%'
@ -170,7 +171,7 @@
</template>
<template #formatText="{ data }">
<p class="cursor-pointer !text-left" @click="showDetail()">
<p class="cursor-pointer !text-left">
{{ data.text }}
</p>
</template>
@ -181,47 +182,47 @@
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">UI Dist:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_uid" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_uid" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">UP3:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_up3" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_up3" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko/ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
<InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -257,7 +258,7 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const filters = ref({
type: '',
@ -270,13 +271,21 @@ const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const { onResult, onError, loading, refetch } = useQuery(

11
src/components/Pages/Transaksi/Transaksi.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"
:show-column-lines="true"
@ -152,7 +153,7 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const loading = ref(false)
const onExporting = (e: any) => {
@ -183,10 +184,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 onRowPrepared = (e: any) => {

199
src/utils/api/api.graphql.ts
View File

@ -1670,7 +1670,7 @@ export const queries = {
gangguan: {
rekap: {
dispatchingTimeGangguan: gql`
query DaftarmonalisaDispatchingTimeGangguan(
query monalisaDispatchingTimeGangguan(
#$regional: String
$idUid: Int
$idUp3: Int
@ -1697,7 +1697,7 @@ export const queries = {
}
`,
rekapitulasiEnsGangguan: gql`
query DaftarmonalisaRekapitulasiEnsGangguan(
query monalisaRekapitulasiEnsGangguan(
#$regional: String
$idUlp: Int
$idUid: Int
@ -1731,7 +1731,7 @@ export const queries = {
}
`,
gangguanBelumSelesai: gql`
query DaftarmonalisaGangguanBelumSelesai(
query monalisaGangguanBelumSelesai(
#$regional: String
$idUlp: Int
$idUid: Int
@ -1761,7 +1761,7 @@ export const queries = {
}
`,
gangguanPerJenisGangguan: gql`
query DaftarmonalisaGangguanPerJenisGangguan(
query monalisaGangguanPerJenisGangguan(
#$nama_regional: String
$idUid: Int
$idUp3: Int
@ -1785,7 +1785,7 @@ export const queries = {
}
`,
jumlahDurasiRptRctGangguan: gql`
query DaftarmonalisaJumlahDurasiRptRctGangguan(
query monalisaJumlahDurasiRptRctGangguan(
#$regional: String
$idUlp: Int
$idUid: Int
@ -1839,6 +1839,7 @@ export const queries = {
bulan: $bulan
tahun: $tahun
) {
nama_regional
nama_uid
nama_up3
nama_ulp
@ -1852,7 +1853,7 @@ export const queries = {
}
`,
laporUlangGangguan: gql`
query DaftarmonalisaRekapitulasiLaporUlangGangguan(
query monalisaRekapitulasiLaporUlangGangguan(
#$regional: String
$idUlp: Int
$idUid: Int
@ -1885,7 +1886,7 @@ export const queries = {
}
`,
recoveryTimeGangguan: gql`
query DaftarmonalisaRecoveryTimeGangguan(
query monalisaRecoveryTimeGangguan(
#$regional: regional
$idUid: Int
$idUp3: Int
@ -1912,7 +1913,7 @@ export const queries = {
}
`,
responseTimeGangguan: gql`
query DaftarmonalisaResponseTimeGangguan(
query monalisaResponseTimeGangguan(
#regional: String
$idUid: Int
$idUp3: Int
@ -1943,7 +1944,7 @@ export const queries = {
keluhan: {
rekap: {
jumlahKaliKeluhan: gql`
query DaftarMonalisaJumlahKaliKeluhan(
query monalisaJumlahKaliKeluhan(
#$regional: String
$idUlp: Int
$idUid: Int
@ -1976,7 +1977,7 @@ export const queries = {
}
`,
recoveryTimeKeluhan: gql`
query DaftarmonalisaRecoveryTimeKeluhan(
query monalisaRecoveryTimeKeluhan(
#$regional: String
$idUlp: Int
$idUid: Int
@ -2007,13 +2008,175 @@ export const queries = {
persen_yoy
}
}
`,
responseTimeKeluhan: gql`
query monalisaResponseTimeKeluhan(
$bulan: Int!
$tahun: Int!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
monalisaResponseTimeKeluhan(
bulan: $bulan
tahun: $tahun
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
mom_bulan_ini
mom_bulan_kemarin
persen_mom
yoy_tahun_ini
yoy_tahun_kemarin
persen_yoy
}
}
`,
jumlahDurasiRptRctKeluhan: gql`
query monalisaJumlahDurasiRptRctKeluhan(
$bulan: Int!
$tahun: Int!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
monalisaJumlahDurasiRptRctKeluhan(
bulan: $bulan
tahun: $tahun
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
total_durasi_response_time_bulan_ini
count_durasi_response_time_bulan_ini
avg_durasi_response_time_bulan_ini
total_durasi_recovery_time_bulan_ini
count_durasi_recovery_time_bulan_ini
avg_durasi_recovery_time_bulan_ini
total_durasi_response_time_tahun_ini
count_durasi_response_time_tahun_ini
avg_durasi_response_time_tahun_ini
total_durasi_recovery_time_tahun_ini
count_durasi_recovery_time_tahun_ini
avg_durasi_recovery_time_tahun_ini
}
}
`,
gangguanPerJenisKeluhan: gql`
query monalisaGangguanPerJenisKeluhan(
$bulan: Int!
$tahun: Int!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
monalisaGangguanPerJenisKeluhan(
bulan: $bulan
tahun: $tahun
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
id_jenis_keluhan
nama_jenis_keluhan
jumlah
persen
}
}
`,
laporUlangKeluhan: gql`
query monalisaRekapitulasiLaporUlangKeluhan(
$bulan: Int!
$tahun: Int!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
monalisaRekapitulasiLaporUlangKeluhan(
bulan: $bulan
tahun: $tahun
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
mom_bulan_ini
mom_bulan_kemarin
persen_mom
yoy_tahun_ini
yoy_tahun_kemarin
persen_yoy
}
}
`,
keluhanBelumSelesai: gql`
query monalisaRekapitulasiKeluhanBelumSelesai(
$bulan: Int!
$tahun: Int!
$namaRegional: String!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
monalisaRekapitulasiKeluhanBelumSelesai(
bulan: $bulan
tahun: $tahun
namaRegional: $namaRegional
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
jumlah_keluhan
jumlah_informasi
total
}
}
`
}
},
laporan: {
bulanan: {
penurunanJumlahKomplainBulanan: gql`
query DaftarPenurunanJumlahKomplainBulanan(
query penurunanJumlahKomplainBulanan(
#$regional: String
$idUid: Int
$idUp3: Int
@ -2059,7 +2222,7 @@ export const queries = {
}
`,
agingComplaintBulanan: gql`
query DaftarAgingComplaintBulanan(
query agingComplaintBulanan(
#$regional: String
$idUid: Int
$idUp3: Int
@ -2093,7 +2256,7 @@ export const queries = {
}
`,
energyNotSalesBulanan: gql`
query DaftarEnergyNotSalesBulanan(
query energyNotSalesBulanan(
#$regional: String
$idUid: Int
$idUp3: Int
@ -2125,7 +2288,7 @@ export const queries = {
}
`,
kepatuhandanAkurasiDalamPelaporanBulanan: gql`
query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
query kepatuhandanAkurasiDalamPelaporanBulanan(
#$regional: String
$idUid: Int
$idUp3: Int
@ -2159,7 +2322,7 @@ export const queries = {
},
kumulatif: {
penurunanJumlahKomplainKumulatif: gql`
query DaftarPenurunanJumlahKomplainKumulatif(
query penurunanJumlahKomplainKumulatif(
#$regional: String
$idUid: Int
$idUp3: Int
@ -2205,7 +2368,7 @@ export const queries = {
}
`,
agingComplaintKumulatif: gql`
query DaftarAgingComplaintKumulatif(
query agingComplaintKumulatif(
#$regional: String
$idUid: Int
$idUp3: Int
@ -2239,7 +2402,7 @@ export const queries = {
}
`,
energyNotSalesKumulatif: gql`
query DaftarEnergyNotSalesKumulatif(
query energyNotSalesKumulatif(
#$regional: String
$idUid: Int
$idUp3: Int
@ -2271,7 +2434,7 @@ export const queries = {
}
`,
kepatuhandanAkurasiDalamPelaporanKumulatif: gql`
query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
query kepatuhandanAkurasiDalamPelaporanKumulatif(
#$regional: String
$idUid: Int
$idUp3: Int