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

Refactor code and fix loading issue

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-18 11:48:59 +07:00
parent 97d50a13a3
commit 2ac6c703cc
6 changed files with 670 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,8 +27,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -217,8 +216,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -787,7 +785,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -815,6 +813,12 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -824,8 +828,57 @@ const dataSubSelected = ref<any>()
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dialogDataSelected = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const closeDialogDataSelected = () => (dialogDataSelected.value = false)
const showDialogDataSelected = () => (dialogDataSelected.value = true)
const getDetail = () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref.id_posko,
idUid: ref.id_uid,
idUp3: ref.id_up3
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
refetch(query)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const showDialogDataSelected = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDataSelected.value = true
getDetail()
}
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -857,13 +910,12 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
console.log(data)
dataSelected.value = selectedRowsData[0]
showDialogDataSelected()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSubSelected.value = selectedRowsData[0]
dataSubSelected.value = data
console.log(data)
}
@ -871,7 +923,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -882,6 +935,7 @@ const filterData = (params: any) => {
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.laporanCheckInCheckOut
@ -893,14 +947,10 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
}
const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
idPosko: 0,
idUid: 0,
idUp3: 0
})
const filters = ref()

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

@ -1022,7 +1022,11 @@ import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -1036,13 +1040,6 @@ const closeDialogDataSelected = () => (dialogDataSelected.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
@ -1154,8 +1151,7 @@ const onExporting = (e: any) => {
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataSelected.value = data
dataSelected.value = selectedRowsData[0]
showDialogDataSelected()
}

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

@ -25,8 +25,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingData"
:enabled="true"
/>
@ -472,7 +471,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
@ -480,7 +479,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
@ -488,7 +487,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
@ -496,7 +495,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
@ -504,7 +503,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -512,7 +511,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -520,7 +519,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
@ -528,7 +527,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
@ -536,7 +535,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
@ -544,7 +543,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -552,7 +551,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -560,7 +559,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -568,7 +567,7 @@
<DxColumn
:width="200"
alignment="center"
data-field=""
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -576,7 +575,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
@ -584,7 +583,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
@ -592,7 +591,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
@ -622,82 +621,122 @@
<div class="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-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.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-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</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>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
</div>
@ -707,8 +746,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -734,7 +772,11 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import InputText from '@/components/InputText.vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -744,10 +786,55 @@ const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const getDetail = () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref.id_posko,
idUid: ref.id_uid,
idUp3: ref.id_up3
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
refetch(query)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const showDetail = () => {
dialogDetail.value = true
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -785,7 +872,7 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@ -793,31 +880,24 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const filters = useFiltersStore()
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT,
{
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
@ -827,9 +907,14 @@ const filterData = (params: any) => {
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
}
const filters = ref()
onMounted(() => {

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

@ -34,8 +34,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -483,7 +482,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
@ -491,7 +490,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
@ -499,7 +498,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
@ -507,7 +506,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
@ -515,7 +514,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -523,7 +522,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -531,7 +530,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
@ -539,7 +538,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
@ -547,7 +546,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
@ -555,7 +554,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -563,7 +562,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -571,7 +570,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -579,7 +578,7 @@
<DxColumn
:width="200"
alignment="center"
data-field=""
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -587,7 +586,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
@ -595,7 +594,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
@ -603,7 +602,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
@ -633,82 +632,122 @@
<div class="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-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.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-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</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>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
</div>
@ -718,7 +757,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { DxDataGrid } from 'devextreme-vue'
import {
@ -739,27 +778,28 @@ 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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import InputText from '@/components/InputText.vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dataSelected = ref<any>(null)
const dataSubSelected = ref<any>(null)
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const showDetail = () => {
dialogDetail.value = true
}
const closeDialog = () => {
dialogDetail.value = false
}
@ -793,31 +833,25 @@ const onExporting = (e: any) => {
}
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.jenisGangguanSE004,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.jenisGangguanSE004,
{
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiJenisGangguanSE004
@ -825,19 +859,71 @@ const filterData = (params: any) => {
console.log(queryResult.networkStatus)
}
})
onError((queryError) => {
console.log(queryError)
})
watch(loading, (value) => {
loadingData.value = value
})
}
const getDetail = () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref.id_posko,
idUid: ref.id_uid,
idUp3: ref.id_up3
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
refetch(query)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
console.log(data)
}
const filters = ref()

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

@ -25,8 +25,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingData"
:enabled="true"
/>
@ -199,19 +198,19 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
<p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
<p class="text-right cursor-pointer" @click="showDetail()">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
<p class="text-right cursor-pointer" @click="showDetail()">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -231,7 +230,7 @@
</div>
<DetailDialog
:open="showDetail"
:open="dialogDetail"
title="Detail Rating Per Posko"
@on-close="closeDetail"
:full-width="true"
@ -289,7 +288,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
@ -297,7 +296,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="rating"
caption="Rating"
css-class="custom-table-column"
cell-template="formatRating"
@ -305,7 +304,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
@ -313,7 +312,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
@ -321,7 +320,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
@ -329,7 +328,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -337,7 +336,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -345,7 +344,15 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
@ -353,7 +360,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
@ -361,7 +368,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -369,7 +376,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -377,15 +384,15 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Tlp Pelapor"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
:width="200"
alignment="center"
data-field=""
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -393,7 +400,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
@ -401,15 +408,15 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tindakan"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
@ -439,82 +446,127 @@
<div class="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-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Rating:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.rating" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.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-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" class-name="flex-1" value="" />
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" type="textarea" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
</div>
@ -548,30 +600,72 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const loading = ref(false)
const loadingSubData = ref(false)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref()
const dataSubSelected = ref()
const showDetail = ref(false)
const showData = () => {
showDetail.value = true
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const getDetail = () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref.id_posko,
idUid: ref.id_uid,
idUp3: ref.id_up3
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
refetch(query)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDetail = () => {
showDetail.value = false
dialogDetail.value = false
}
const onExporting = (e: any) => {
@ -605,7 +699,7 @@ const onExporting = (e: any) => {
const onSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@ -655,7 +749,7 @@ const filterData = (params: any) => {
console.log(error)
})
watch(loading, (value) => {
loading.value = value
loadingData.value = value
})
}
const filters = ref()

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

@ -24,8 +24,7 @@
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
v-model:visible="loadingData"
:enabled="true"
/>
@ -191,19 +190,19 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="showData()">
<p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
<p class="text-right cursor-pointer" @click="showDetail()">
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
<p class="text-right cursor-pointer" @click="showDetail()">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -215,7 +214,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -223,7 +222,7 @@
</div>
<DetailDialog
:open="showDetail"
:open="dialogDetail"
title="Detail Rating Per Regu"
@on-close="closeDetail"
:full-width="true"
@ -281,7 +280,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
@ -289,7 +288,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="rating"
caption="Rating"
css-class="custom-table-column"
cell-template="formatRating"
@ -297,7 +296,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
@ -305,7 +304,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
@ -313,7 +312,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
@ -321,7 +320,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -329,7 +328,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
@ -337,7 +336,15 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
@ -345,7 +352,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
@ -353,7 +360,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -361,7 +368,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -369,15 +376,15 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Tlp Pelapor"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
:width="200"
alignment="center"
data-field=""
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
@ -385,7 +392,7 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
@ -393,15 +400,15 @@
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tindakan"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
@ -431,82 +438,127 @@
<div class="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-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Rating:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.rating" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.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-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" class-name="flex-1" value="" />
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText
:readonly="true"
:value="dataSubSelected?.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-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" type="textarea" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
</div>
@ -516,7 +568,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -540,7 +592,11 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -549,15 +605,60 @@ const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref()
const dataSubSelected = ref()
const showDetail = ref(false)
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const showData = () => {
showDetail.value = true
const getDetail = () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref.id_posko,
idUid: ref.id_uid,
idUp3: ref.id_up3
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
refetch(query)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const showDetail = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const closeDetail = () => {
showDetail.value = false
dialogDetail.value = false
}
const onExporting = (e: any) => {
@ -591,7 +692,7 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {