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

Refactor RGangguan_BerdasarMedia.vue and api.graphql.ts

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-28 13:15:33 +07:00
parent 0922277624
commit f478e63a19
3 changed files with 132 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
<DxSelection mode="single" />
<!-- <DxPaging :page-size="40" :enabled="true" />
<DxPager
@ -495,13 +495,13 @@
</DxSummary>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(data.column.caption)">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -513,7 +513,7 @@
</template>
<template #formatTime="{ data }">
<p class="cursor-pointer">
<p class="cursor-pointer" @click="setAgreementDialog(data.column.caption)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -522,6 +522,7 @@
<p
class="text-right cursor-pointer"
:class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
@click="setAgreementDialog(data.column.caption)"
>
{{
isNumber(data.text)
@ -537,6 +538,7 @@
<p
class="text-right cursor-pointer"
:class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
@click="setAgreementDialog(data.column.caption)"
>
{{
isNumber(data.text)
@ -552,6 +554,7 @@
<p
class="text-right cursor-pointer"
:class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
@click="setAgreementDialog(data.column.caption)"
>
{{
isNumber(data.text)
@ -1074,7 +1077,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { getGangguanDetail, queries } from '@/utils/api/api.graphql'
import { requestGraphQl, queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
@ -1096,6 +1099,8 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@ -1103,6 +1108,23 @@ const reportMeta = ref({
periode: ''
})
const setAgreementDialog = (column: string) => {
console.log('column', column)
if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
agreeToShowDialog.value = true
if (column == 'Total') {
progressSelected.value = 0
} else if (column == 'Selesai') {
progressSelected.value = 1
} else {
progressSelected.value = 2
}
} else {
agreeToShowDialog.value = false
}
}
const calculateCustomSummary = (options: any) => {
if (options.name == 'persenSelesai') {
console.log(options.component.persen_selesai)
@ -1150,7 +1172,6 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiAllGangguan
loadingData.value = false
}
reportMeta.value = filters.value
@ -1158,11 +1179,10 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
loadingData.value = false
})
watch(loading, (value) => {
// loadingData.value = value
loadingData.value = value
})
}
@ -1184,12 +1204,13 @@ const getDetail = async () => {
idRegu: selected?.id_regu ? selected?.id_regu : 0,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
media: selected?.media ? selected?.media : ''
media: selected?.media ? selected?.media : '',
isSelesai: progressSelected.value,
tanggal: ''
}
await getGangguanDetail(query)
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
.then((result) => {
// console.table(result.data.data.detailGangguan)
dataSub.value = result.data.data.detailGangguan
})
.catch((err) => {
@ -1199,28 +1220,25 @@ const getDetail = async () => {
loadingSubData.value = false
})
// const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
// fetchPolicy: 'network-only'
// })
// const { onResult, onError, refetch, loading } = useQuery(
// queries.gangguan.rekap.gangguanAllDetail,
// query,
// {
// fetchPolicy: 'network-only'
// }
// )
// result.onResult((queryResult) => {
// onResult((queryResult) => {
// if (queryResult.data != undefined) {
// dataSub.value = queryResult.data.detailGangguan
// console.table(queryResult.data.detailGangguan)
// }
// })
// watch(result, (value) => {
// if (dataSub.value != value.detailGangguan) {
// console.table(value.detailGangguan)
// }
// })
// result.onError((error) => {
// onError((error) => {
// console.log(error)
// })
// watch(result.loading, (value) => {
// watch(loading, (value) => {
// loadingSubData.value = value
// })
}
@ -1234,10 +1252,12 @@ const clearSelection = () => {
}
const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
}
const onExporting = (e: any) => {

38
src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
View File

@ -88,13 +88,13 @@
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
<p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
{{ data.text == null || data.text == '' ? '-' : data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setDate(data.column.caption)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -515,6 +515,7 @@ const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const date = ref('2023-02-04')
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@ -522,35 +523,39 @@ const reportMeta = ref({
periode: ''
})
const setDate = (value: any) => {
if (isNumber(value)) {
const tanggal = value < 10 ? `0${value}` : value
const dateValue = filters.value.periode.split(' s/d ')
const dateYear = dateValue[0].split('-').reverse().join('-').slice(0, -2) + tanggal
console.log('date', dateYear)
date.value = dateYear
} else {
date.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),
tanggal: date.value,
posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
idRegu: ref?.id_regu ? ref?.id_regu : 0,
idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
media: ref?.media ? ref?.media : ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
queries.gangguan.rekap.berdasarkanMediaDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
dataSub.value = queryResult.data.detailRekapitulasiGangguanBerdasarkanMedia
}
})
@ -604,7 +609,10 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
if (date.value != '') {
showDetail()
}
}
}

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

@ -13,69 +13,9 @@ const instance = axios.create({
signal: controller.signal
})
export const getGangguanDetail = async (data: any) => {
// controller.abort()
export const requestGraphQl = async (query: string, data: any) => {
return await instance.post('', {
query: `query detailGangguan(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
$idRegu: Int!
$media: String!
$idUlp: Int!
$namaRegional: String!
) {
detailGangguan(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
idRegu: $idRegu
idUlp: $idUlp
namaRegional: $namaRegional
media: $media
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
id_posko
nama_posko
no_laporan
pembuat_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_dispatch_time
durasi_response_time
durasi_recovery_time
status_akhir
is_marking
referensi_marking
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
nama_posko
jarak_closing
dispatch_oleh
diselesaikan_oleh
penyebab
tindakan
kode_gangguan
jenis_gangguan
nilai_rating
}
}`,
query: query,
variables: data
})
}
@ -1365,6 +1305,61 @@ export const queries = {
}
}
`,
berdasarkanMediaDetail: gql`
query detailRekapitulasiGangguanBerdasarkanMedia(
$tanggal: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
$namaRegional: String!
$media: String!
) {
detailRekapitulasiGangguanBerdasarkanMedia(
tanggal: $tanggal
posko: $posko
idUid: $idUid
idUp3: $idUp3
namaRegional: $namaRegional
media: $media
) {
alamat_pelapor
diselesaikan_oleh
dispatch_oleh
durasi_dispatch_time
durasi_recovery_time
durasi_response_time
id
id_posko
id_uid
id_ulp
id_up3
idpel_nometer
is_marking
jarak_closing
jenis_gangguan
keterangan_pelapor
kode_gangguan
media
nama_pelapor
nama_posko
nama_regional
nama_uid
nama_ulp
nama_up3
nilai_rating
no_laporan
no_telp_pelapor
pembuat_laporan
penyebab
referensi_marking
status_akhir
tindakan
waktu_lapor
waktu_recovery
waktu_response
}
}
`,
berdasarkanMedia: gql`
query rekapitulasiGangguanBerdasarkanMedia(
$dateFrom: Date!
@ -1475,6 +1470,8 @@ export const queries = {
$media: String!
$idUlp: Int!
$namaRegional: String!
$isSelesai: Int!
$tanggal: String
) {
detailGangguan(
dateFrom: $dateFrom
@ -1486,6 +1483,8 @@ export const queries = {
idUlp: $idUlp
namaRegional: $namaRegional
media: $media
isSelesai: $isSelesai
tanggal: $tanggal
) {
id
nama_regional