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
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) => {