Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus
This commit is contained in:
kur0nek-o
@ -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) => {
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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()
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
Reference in New Issue
Block a user