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

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

Browse Source
This commit is contained in:
kur0nek-o
2024-03-21 14:56:42 +07:00
parent ddd40b6e80 e5a65422a7
commit 7e7e4f6314
77 changed files with 2848 additions and 1842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
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"
@@ -13,7 +14,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed=""
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
@@ -30,6 +31,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -166,12 +168,6 @@
cell-template="formatText"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
@@ -179,15 +175,126 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Berdasarkan Media"
@on-close="closeDialog"
>
<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="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="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="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="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">Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
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">Recovery Time:</h3>
<InputText
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
</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="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="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="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="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="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="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="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"
type="textarea"
:value="dataSelected?.waktu_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">Keterangan Media:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.keterangan_media"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type16 from '@/components/Form/FiltersType/Type16.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -212,6 +319,24 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = 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) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
dateFrom: new Date().toISOString().slice(0, 10),
@@ -246,8 +371,6 @@ const filterData = (params: any) => {
reportMeta.value = filters.value
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

78
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"
@@ -33,6 +34,7 @@
<DxSelection mode="single" />
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -201,19 +203,19 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@@ -221,39 +223,39 @@
</div>
<DetailDialog
:open="showDetail"
:open="dialogDetail"
title="Daftar Gangguan Dialihkan ke Posko Lain"
@on-close="closeDetail"
@on-close="closeDialog"
>
<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">
@@ -261,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"
@@ -275,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)
: '-'
"
/>
@@ -284,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">
@@ -312,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>
@@ -367,9 +369,9 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const closeDetail = () => (showDetail.value = false)
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => {
const { posko, uid, up3 } = params
@@ -393,8 +395,6 @@ const filterData = (params: any) => {
reportMeta.value = filters.value
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
@@ -410,11 +410,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 showData = () => (showDetail.value = true)
const filters = ref()
const reportMeta = ref({

169
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"
@@ -13,7 +14,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed=""
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
@@ -30,6 +31,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -59,7 +61,7 @@
alignment="center"
data-field="no_laporan"
caption="No Laporan"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -67,7 +69,7 @@
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -75,7 +77,7 @@
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -83,7 +85,7 @@
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -107,7 +109,7 @@
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -115,7 +117,7 @@
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -139,7 +141,7 @@
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -155,7 +157,7 @@
alignment="center"
data-field="media"
caption="Sumber Lapor"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -166,12 +168,6 @@
cell-template="formatText"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
@@ -179,15 +175,136 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Diselesaikan Mobile APKT"
@on-close="closeDialog"
>
<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="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="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="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="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">Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
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">Recovery Time:</h3>
<InputText
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
</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="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="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="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="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="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="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="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"
type="textarea"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.penyebab"
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">Tindakan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -212,6 +329,24 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = 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) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.diselesaikanMobileAPKT,
@@ -247,8 +382,6 @@ const filterData = (params: any) => {
reportMeta.value = filters.value
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

71
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"
@@ -30,6 +31,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -173,25 +175,25 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
<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="showData()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@@ -199,34 +201,34 @@
</div>
<DetailDialog
:open="showDetail"
:open="dialogDetail"
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
@on-close="closeDetail"
@on-close="closeDialog"
>
<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">
@@ -234,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"
@@ -248,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)
: '-'
"
/>
@@ -257,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">
@@ -295,7 +297,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@@ -331,8 +333,8 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const showDetail = ref(false)
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const filters = ref()
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -342,15 +344,22 @@ 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 showData = () => (showDetail.value = true)
const showDetail = () => (dialogDetail.value = true)
const closeDetail = () => (showDetail.value = false)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.melaporLebihDariSatuKali,
@@ -388,8 +397,6 @@ const filterData = (params: any) => {
reportMeta.value = filters.value
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)

69
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"
@@ -46,6 +47,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -191,45 +193,45 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDetail">
<DetailDialog :open="dialogDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDialog">
<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">
@@ -237,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"
@@ -251,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)
: '-'
"
/>
@@ -260,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">
@@ -298,7 +300,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@@ -308,7 +310,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
@@ -318,7 +320,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
@@ -357,17 +359,24 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const showDetail = ref(false)
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 showData = () => (showDetail.value = true)
const showDetail = () => (dialogDetail.value = true)
const closeDetail = () => (showDetail.value = false)
const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => {
const { minTime, maxTime, posko, uid, up3 } = params
@@ -393,8 +402,6 @@ const filterData = (params: any) => {
}
reportMeta.value = filters.value
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

69
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"
@@ -30,6 +31,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -168,45 +170,45 @@
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer" @click="showData()">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer !text-right" @click="showData()">
<p class="cursor-pointer !text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @on-close="closeDetail">
<DetailDialog :open="dialogDetail" title="Daftar Gangguan Response Time" @on-close="closeDialog">
<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">
@@ -214,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"
@@ -228,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)
: '-'
"
/>
@@ -237,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">
@@ -275,7 +277,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
@@ -285,7 +287,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
@@ -295,7 +297,7 @@
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
@@ -334,17 +336,24 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>({})
const showDetail = ref(false)
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 showData = () => (showDetail.value = true)
const showDetail = () => (dialogDetail.value = true)
const closeDetail = () => (showDetail.value = false)
const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => {
const { minTime, maxTime, posko, uid, up3 } = params
@@ -370,8 +379,6 @@ const filterData = (params: any) => {
}
reportMeta.value = filters.value
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

169
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"
@@ -13,7 +14,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed=""
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
@@ -30,6 +31,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -59,7 +61,7 @@
alignment="center"
data-field="no_laporan"
caption="No Laporan"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -67,7 +69,7 @@
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -75,7 +77,7 @@
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -83,7 +85,7 @@
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -107,7 +109,7 @@
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -115,7 +117,7 @@
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -139,7 +141,7 @@
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -155,7 +157,7 @@
alignment="center"
data-field="media"
caption="Sumber Lapor"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
css-class="custom-table-column"
@@ -166,12 +168,6 @@
cell-template="formatText"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
@@ -179,15 +175,136 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right">
<p class="!text-right cursor-pointer">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Diselesaikan Tanpa ID Pelanggan"
@on-close="closeDialog"
>
<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="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="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="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="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">Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSelected?.durasi_response_time)
? formatWaktu(dataSelected?.durasi_response_time)
: '-'
"
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">Recovery Time:</h3>
<InputText
:readonly="true"
class-name="flex-1"
:value="
parseInt(dataSelected?.durasi_recovery_time)
? formatWaktu(dataSelected?.durasi_recovery_time)
: '-'
"
/>
</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="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="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="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="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="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="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="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">Unit Layanan Pelanggan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.nama_posko"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.penyebab"
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">Tindakan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -212,6 +329,24 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = 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) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.selesaiTanpaIDPelanggan,
@@ -247,8 +382,6 @@ const filterData = (params: any) => {
reportMeta.value = filters.value
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

176
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"
@@ -35,6 +36,7 @@
:show-navigation-buttons="true"
/> -->
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -320,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 == '%'
@@ -338,19 +340,19 @@
</template>
<template #formatTime="{ data }">
<p @click="showDetail()">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<DxSummary>
<DxSummary :calculate-custom-summary="calculateCustomSummary">
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -358,15 +360,23 @@
column="total_selesai"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
<!-- <DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="persen_selesai"
summary-type="avg"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/> -->
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="persen_selesai"
name="persenSelesai"
summary-type="custom"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -374,7 +384,7 @@
column="total_inproses"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -382,7 +392,7 @@
column="persen_inproses"
summary-type="avg"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -390,7 +400,7 @@
column="avg_durasi_dispatch"
summary-type="avg"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
@@ -415,7 +425,7 @@
column="total_diatas_sla_dispatch"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -423,7 +433,7 @@
column="total_dibawah_sla_dispatch"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -431,7 +441,7 @@
column="avg_durasi_response"
summary-type="avg"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -455,7 +465,7 @@
column="total_diatas_sla_response"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -463,7 +473,7 @@
column="total_dibawah_sla_response"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -471,7 +481,7 @@
column="avg_durasi_recovery"
summary-type="avg"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -495,7 +505,7 @@
column="total_diatas_sla_recovery"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -503,7 +513,7 @@
column="total_dibawah_sla_recovery"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
</DxDataGrid>
@@ -543,6 +553,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -1014,12 +1025,11 @@ import {
} from 'devextreme-vue/data-grid'
import { onMounted, ref, watch } from 'vue'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { getGangguanDetail, queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1050,7 +1060,34 @@ const reportMeta = ref({
periode: ''
})
const calculateCustomSummary = (options: any) => {
if (options.name == 'persenSelesai') {
console.log(options.component.persen_selesai)
switch (options.summaryProcess) {
case 'start':
// Initializing "totalValue" here
options.totalValue = 1
break
case 'calculate':
// Modifying "totalValue" here
break
case 'finalize':
// Assigning the final value to "totalValue" here
break
}
}
}
const resetData = () => {
data.value = []
dataSub.value = []
dataSelected.value = null
dataSubSelected.value = null
}
const filterData = (params: any) => {
resetData()
loadingData.value = true
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
@@ -1070,24 +1107,24 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiAllGangguan
loadingData.value = false
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
loadingData.value = false
})
watch(loading, (value) => {
loadingData.value = value
// loadingData.value = value
})
}
const getDetail = () => {
const getDetail = async () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const selected = dataSelected.value
const query = {
dateFrom: dateValue[0]
@@ -1096,45 +1133,67 @@ const getDetail = () => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
idRegu: ref?.id_regu ? ref?.id_regu : 0,
idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
media: ref?.media ? ref?.media : ''
posko: selected?.id_posko ? selected?.id_posko : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
idRegu: selected?.id_regu ? selected?.id_regu : 0,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
media: selected?.media ? selected?.media : ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
await getGangguanDetail(query)
.then((result) => {
// console.table(result.data.data.detailGangguan)
dataSub.value = result.data.data.detailGangguan
})
.catch((err) => {
console.log(err)
})
.finally(() => {
loadingSubData.value = false
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
// const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
// fetchPolicy: 'network-only'
// })
onError((error) => {
console.log(error)
})
// result.onResult((queryResult) => {
// if (queryResult.data != undefined) {
// dataSub.value = queryResult.data.detailGangguan
// console.table(queryResult.data.detailGangguan)
// }
// })
watch(loading, (value) => {
loadingSubData.value = value
})
// watch(result, (value) => {
// if (dataSub.value != value.detailGangguan) {
// console.table(value.detailGangguan)
// }
// })
// result.onError((error) => {
// console.log(error)
// })
// watch(result.loading, (value) => {
// loadingSubData.value = value
// })
}
const currentDataSelected = ref<any>(null)
const showDetail = () => {
if (dataSelected.value != null) {
if (currentDataSelected.value == dataSelected.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
try {
dataGridRef.value?.instance?.clearSelection()
} catch (error) {
console.log(error)
}
}
const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@@ -1158,9 +1217,8 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (dataSelected.value != selectedRowsData[0]) {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
currentDataSelected.value = selectedRowsData[0]
showDetail()
}
}

33
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"
@@ -29,6 +30,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -121,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 == '%'
@@ -174,6 +176,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -566,13 +569,17 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@@ -609,12 +616,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}
@@ -642,8 +653,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanAlihPosko
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

39
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"
@@ -28,6 +29,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -85,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 == '%'
@@ -120,14 +122,14 @@
display-format="{0}"
:column="`tgl${i}`"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
</DxDataGrid>
@@ -167,6 +169,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -457,7 +460,7 @@
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
@@ -553,13 +556,17 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@@ -596,12 +603,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}
@@ -629,8 +640,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

12
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"
@@ -22,6 +23,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -236,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[]>([])
@@ -272,8 +278,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)

51
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"
@@ -22,6 +23,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -332,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 == '%'
@@ -350,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>
@@ -372,42 +374,42 @@
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_selesai"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_mobile_marking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_mobile_nonmarking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_nonmobile_marking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_nonmobile_nonmarking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
</DxDataGrid>
@@ -447,6 +449,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -737,7 +740,7 @@
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
@@ -828,13 +831,17 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@@ -871,12 +878,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}
@@ -904,8 +915,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

38
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"
@@ -29,6 +30,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -265,7 +267,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -273,7 +275,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -281,7 +283,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -289,7 +291,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -297,7 +299,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -305,7 +307,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -313,7 +315,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -337,7 +339,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -345,7 +347,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -353,7 +355,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -361,7 +363,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -385,7 +387,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -393,7 +395,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
@@ -496,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) => {
@@ -563,8 +569,6 @@ const filterData = (params: any) => {
}
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((queryError) => {
console.log(queryError)

668
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"
@@ -32,6 +33,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -47,15 +49,7 @@
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="60"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn css-class="custom-table-column" :width="60" alignment="center" caption="No" />
<DxColumn
:width="120"
alignment="center"
@@ -255,13 +249,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 == '%'
@@ -273,7 +267,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>
@@ -291,7 +285,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -299,7 +293,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -307,7 +301,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -315,7 +309,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -323,7 +317,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -331,7 +325,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -339,7 +333,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -363,7 +357,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -371,7 +365,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -379,7 +373,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -387,7 +381,7 @@
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -411,7 +405,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
@@ -419,7 +413,7 @@
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
</DxDataGrid>
@@ -459,6 +453,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -753,7 +748,7 @@
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
@@ -863,8 +858,7 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiJenisGangguanSE004
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
console.log(queryResult.data.rekapitulasiJenisGangguanSE004)
}
})
@@ -881,6 +875,7 @@ const getDetail = () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const { posko, uid, up3 } = filters.value
const query = {
dateFrom: dateValue[0]
@@ -889,10 +884,10 @@ const getDetail = () => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: filters.value?.id_posko ? filters.value.id_posko : 0,
idUid: filters.value?.id_uid ? filters.value.id_uid : 0,
idUp3: filters.value?.id_up3 ? filters.value.id_up3 : 0,
idEquipment: ref?.kode ? ref.kode : 0
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
idEquipment: ref?.kode ? parseInt(ref.kode) : 0
}
const { onResult, onError, loading, refetch } = useQuery(
@@ -902,7 +897,7 @@ const getDetail = () => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
dataSub.value = queryResult.data.detailGangguanJenisGangguanSE004
}
})
@@ -915,22 +910,30 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filters = ref()
@@ -938,379 +941,264 @@ 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
kode: '11111',
equipment_id: null,
total: 0,
total_selesai: 0,
persen_selesai: 0.0,
total_inproses: 0,
persen_inproses: 0.0,
total_durasi_response: null,
avg_durasi_response: null,
min_durasi_response: null,
max_durasi_response: null,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
total_durasi_recovery: null,
avg_durasi_recovery: null,
min_durasi_recovery: null,
max_durasi_recovery: null,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0,
total_response: 0,
total_recovery: 0
},
{
id: '2',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'JTR',
kode: '13400',
total: 6022,
total_selesai: 6022,
persen_selesai: 100,
id: 40,
id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Kabel Outgoing s/d Pole Pertama',
kode: '11112',
equipment_id: null,
total: 0,
total_selesai: 0,
persen_selesai: 0.0,
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
persen_inproses: 0.0,
total_durasi_response: null,
avg_durasi_response: null,
min_durasi_response: null,
max_durasi_response: null,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
total_durasi_recovery: null,
avg_durasi_recovery: null,
min_durasi_recovery: null,
max_durasi_recovery: null,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0,
total_response: 0,
total_recovery: 0
},
{
id: '3',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Jointing',
kode: '11243',
total: 1,
total_selesai: 1,
persen_selesai: 100,
id: 46,
id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Kapasitor',
kode: '11113',
equipment_id: null,
total: 0,
total_selesai: 0,
persen_selesai: 0.0,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 60,
avg_durasi_response: 1,
persen_inproses: 0.0,
total_durasi_response: null,
avg_durasi_response: null,
min_durasi_response: null,
max_durasi_response: null,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
total_durasi_recovery: null,
avg_durasi_recovery: null,
min_durasi_recovery: null,
max_durasi_recovery: null,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0,
total_response: 0,
total_recovery: 0
},
{
id: 9,
id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Relay Outgoing Feeder',
kode: '11114',
equipment_id: null,
total: 0,
total_selesai: 0,
persen_selesai: 0.0,
total_inproses: 0,
persen_inproses: 0.0,
total_durasi_response: null,
avg_durasi_response: null,
min_durasi_response: null,
max_durasi_response: null,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
total_durasi_recovery: null,
avg_durasi_recovery: null,
min_durasi_recovery: null,
max_durasi_recovery: null,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0,
total_response: 0,
total_recovery: 0
},
{
id: 20,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Konduktor',
kode: '11211',
equipment_id: '11211',
total: 571,
total_selesai: 571,
persen_selesai: 100.0,
total_inproses: 0,
persen_inproses: 0.0,
total_durasi_response: 2317727,
avg_durasi_response: 68.16254416961131,
min_durasi_response: 0,
max_durasi_response: 2277180,
total_dibawah_sla_response: 563,
total_diatas_sla_response: 3,
total_durasi_recovery: 3167860,
avg_durasi_recovery: 92.45964912280702,
min_durasi_recovery: 0,
max_durasi_recovery: 2277240,
total_dibawah_sla_recovery: 555,
total_diatas_sla_recovery: 15,
total_response: 566,
total_recovery: 570
},
{
id: 37,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Tiang',
kode: '11212',
equipment_id: '11212',
total: 5,
total_selesai: 5,
persen_selesai: 100.0,
total_inproses: 0,
persen_inproses: 0.0,
total_durasi_response: 300,
avg_durasi_response: 1.0,
min_durasi_response: 60,
max_durasi_response: 60,
total_dibawah_sla_response: 1,
total_dibawah_sla_response: 5,
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_durasi_recovery: 14040,
avg_durasi_recovery: 46.8,
min_durasi_recovery: 120,
max_durasi_recovery: 9300,
total_dibawah_sla_recovery: 5,
total_diatas_sla_recovery: 0,
total_response: 1,
total_recovery: 1
total_response: 5,
total_recovery: 5
},
{
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',
total: 20,
total_selesai: 20,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 2682,
avg_durasi_response: 2.15,
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,
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,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 103137,
avg_durasi_response: 2.1612057667103537,
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,
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',
id: 35,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'DS / LBS',
kode: '11213',
equipment_id: '11213',
total: 13,
total_selesai: 13,
persen_selesai: 100,
persen_selesai: 100.0,
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,
total_diatas_sla_recovery: 2,
persen_inproses: 0.0,
total_durasi_response: 1470,
avg_durasi_response: 1.8461538461538463,
min_durasi_response: 0,
max_durasi_response: 300,
total_dibawah_sla_response: 13,
total_diatas_sla_response: 0,
total_durasi_recovery: 9209,
avg_durasi_recovery: 11.692307692307692,
min_durasi_recovery: 120,
max_durasi_recovery: 4020,
total_dibawah_sla_recovery: 13,
total_diatas_sla_recovery: 0,
total_response: 13,
total_recovery: 13
},
{
id: '13',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Operasi',
kode: '12503',
total: 747,
total_selesai: 747,
persen_selesai: 100,
id: 45,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'Recloser / PMCB',
kode: '11214',
equipment_id: '11214',
total: 99,
total_selesai: 99,
persen_selesai: 100.0,
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
persen_inproses: 0.0,
total_durasi_response: 2433074,
avg_durasi_response: 409.5656565656566,
min_durasi_response: 0,
max_durasi_response: 2395440,
total_dibawah_sla_response: 93,
total_diatas_sla_response: 6,
total_durasi_recovery: 2525728,
avg_durasi_recovery: 425.1515151515151,
min_durasi_recovery: 1,
max_durasi_recovery: 2395500,
total_dibawah_sla_recovery: 98,
total_diatas_sla_recovery: 1,
total_response: 99,
total_recovery: 99
},
{
id: '14',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'CO Branch',
kode: '11217',
total: 17364,
total_selesai: 17364,
persen_selesai: 100,
id: 13,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'AVR / Kapasitor',
kode: '11215',
equipment_id: null,
total: 0,
total_selesai: 0,
persen_selesai: 0.0,
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
persen_inproses: 0.0,
total_durasi_response: null,
avg_durasi_response: null,
min_durasi_response: null,
max_durasi_response: null,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
total_durasi_recovery: null,
avg_durasi_recovery: null,
min_durasi_recovery: null,
max_durasi_recovery: null,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0,
total_response: 0,
total_recovery: 0
},
{
id: 52,
id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
sub_kelompok: 'CT / PT kWh Meter Exim',
kode: '11216',
equipment_id: '11216',
total: 1,
total_selesai: 1,
persen_selesai: 100.0,
total_inproses: 0,
persen_inproses: 0.0,
total_durasi_response: 35,
avg_durasi_response: 0.0,
min_durasi_response: 35,
max_durasi_response: 35,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 0,
total_durasi_recovery: 95,
avg_durasi_recovery: 1.0,
min_durasi_recovery: 95,
max_durasi_recovery: 95,
total_dibawah_sla_recovery: 1,
total_diatas_sla_recovery: 0,
total_response: 1,
total_recovery: 1
}
]
}

63
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"
@@ -22,6 +23,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -178,7 +180,7 @@
column="month1"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -186,7 +188,7 @@
column="month2"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -194,7 +196,7 @@
column="month3"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -202,7 +204,7 @@
column="month4"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -210,7 +212,7 @@
column="month5"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -218,7 +220,7 @@
column="month6"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -226,7 +228,7 @@
column="month7"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -234,7 +236,7 @@
column="month8"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -242,7 +244,7 @@
column="month9"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -250,7 +252,7 @@
column="month10"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -258,7 +260,7 @@
column="month11"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
@@ -266,24 +268,24 @@
column="month12"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</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 == '%'
@@ -305,7 +307,7 @@
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Koreksi Transaksi Individual"
@on-close="closeDetail"
@on-close="closeDialog"
:full-width="true"
>
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -336,6 +338,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -1046,16 +1049,20 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDetail = () => {
const closeDialog = () => {
dialogDetail.value = false
}
@@ -1089,12 +1096,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filterData = (params: any) => {
@@ -1121,8 +1132,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

89
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"
@@ -32,6 +33,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -257,49 +259,49 @@
:show-in-group-footer="true"
column="total"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_selesai"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_selesai"
summary-type="avg"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_inproses"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_inproses"
summary-type="avg"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_response"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_response"
summary-type="avg"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
@@ -320,28 +322,28 @@
:show-in-group-footer="true"
column="total_diatas_sla_response"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_response"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_recovery"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_recovery"
summary-type="avg"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
@@ -362,14 +364,14 @@
:show-in-group-footer="true"
column="total_diatas_sla_recovery"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_recovery"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
@@ -384,43 +386,43 @@
show-in-column="total"
column="total"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_selesai"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_selesai"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="total_inproses"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_inproses"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="total_durasi_response"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_response"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_response"
@@ -438,25 +440,25 @@
column="total_diatas_sla_response"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_response"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_durasi_recovery"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_recovery"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_recovery"
@@ -474,24 +476,24 @@
column="total_diatas_sla_recovery"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_recovery"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</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 == '%'
@@ -503,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>
@@ -544,6 +546,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -834,7 +837,7 @@
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
@@ -931,13 +934,17 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@@ -974,12 +981,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(data)
}
@@ -1009,8 +1020,6 @@ const filterData = (params: any) => {
)
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

64
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"
@@ -29,6 +30,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -262,49 +264,49 @@
:show-in-group-footer="true"
column="total"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_selesai"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_selesai"
summary-type="avg"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_inproses"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_inproses"
summary-type="avg"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_response"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_response"
summary-type="avg"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
@@ -325,28 +327,28 @@
:show-in-group-footer="true"
column="total_diatas_sla_response"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_response"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_recovery"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_recovery"
summary-type="avg"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
@@ -367,14 +369,14 @@
:show-in-group-footer="true"
column="total_diatas_sla_recovery"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_recovery"
summary-type="sum"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
css-class="!text-right"
/>
@@ -389,43 +391,43 @@
show-in-column="total"
column="total"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_selesai"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_selesai"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="total_inproses"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_inproses"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="total_durasi_response"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_response"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_response"
@@ -443,25 +445,25 @@
column="total_diatas_sla_response"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_response"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_durasi_recovery"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_recovery"
summary-type="avg"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_recovery"
@@ -479,13 +481,13 @@
column="total_diatas_sla_recovery"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_recovery"
summary-type="sum"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary>
@@ -583,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, {
@@ -616,8 +622,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanPerRegu
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)

37
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"
@@ -29,6 +30,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -243,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 == '%'
@@ -261,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>
@@ -302,6 +304,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -596,7 +599,7 @@
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
@@ -691,13 +694,17 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
@@ -734,12 +741,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
}
const filterData = (params: any) => {
@@ -766,8 +777,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {

43
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"
@@ -23,6 +24,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -200,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 == '%'
@@ -234,7 +236,7 @@
<DetailDialog
:open="dialogDetail"
title="Detail Rating Per Posko"
@on-close="closeDetail"
@on-close="closeDialog"
:full-width="true"
>
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -265,6 +267,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -591,7 +594,7 @@
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
@@ -686,15 +689,19 @@ const getDetail = () => {
})
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const closeDetail = () => {
const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
dialogDetail.value = false
}
@@ -728,12 +735,16 @@ const onExporting = (e: any) => {
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}
@@ -772,8 +783,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)

43
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"
@@ -21,6 +22,7 @@
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -191,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 == '%'
@@ -215,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>
@@ -225,7 +227,7 @@
<DetailDialog
:open="dialogDetail"
title="Detail Rating Per Regu"
@on-close="closeDetail"
@on-close="closeDialog"
:full-width="true"
>
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -256,6 +258,7 @@
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
@@ -582,7 +585,7 @@
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
@@ -676,16 +679,20 @@ const getDetail = () => {
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDetail = () => {
const closeDialog = () => {
dialogDetail.value = false
}
@@ -719,12 +726,16 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}
@@ -757,8 +768,6 @@ const filterData = (params: any) => {
data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)