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

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

Browse Source
This commit is contained in:
Eko Haryadi
2024-04-01 10:33:51 +07:00
parent 3d9c6c0844 3ff5e44a27
commit 8ec56818f3
111 changed files with 15049 additions and 6106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
View File

@ -50,7 +50,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
@ -182,17 +182,38 @@
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Berdasarkan Media"
@on-close="closeDialog"
>
<DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
@ -234,36 +255,6 @@
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
@ -310,7 +301,7 @@ import {
DxSelection
} from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
const position = { of: '#data' }
@ -321,6 +312,7 @@ const data = ref<any[]>([])
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const loading = ref(false)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
@ -337,20 +329,16 @@ const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
media: 'Twitter'
})
const resetData = () => {
data.value = []
}
const filterData = (params: any) => {
const filterData = async (params: any) => {
resetData()
const { posko, uid, up3, media } = params
const dateValue = params.periode.split(' s/d ')
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -361,20 +349,25 @@ const filterData = (params: any) => {
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media: media ? media.id : ''
})
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanBerdasarkanMedia
}
loading.value = true
await requestGraphQl(queries.gangguan.daftar.berdasarkanMedia, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanBerdasarkanMedia
} else {
data.value = []
}
reportMeta.value = filters.value
console.log(queryResult.data)
})
onError((error) => {
console.log(error)
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const onExporting = (e: any) => {

55
src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
View File

@ -53,7 +53,7 @@
css-class="custom-table-column !text-right"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
@ -360,7 +360,7 @@ import { onMounted, ref } from 'vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
const position = { of: '#dataTable' }
@ -370,13 +370,19 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const loading = ref(false)
const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => {
const resetData = () => {
data.value = []
}
const filterData = async (params: any) => {
resetData()
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -386,29 +392,26 @@ const filterData = (params: any) => {
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.daftarGangguanDialihkanKePoskoLain
}
reportMeta.value = filters.value
console.log(queryResult.data)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.dataDialihkanKePoskoLain,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
}
)
loading.value = true
await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanDialihkanKePoskoLain
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!

78
src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
View File

@ -50,7 +50,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
@ -182,11 +182,7 @@
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Daftar Gangguan Diselesaikan Mobile APKT"
@on-close="closeDialog"
>
<DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -278,26 +274,6 @@
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template>
@ -320,7 +296,7 @@ import {
DxSelection
} from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
const position = { of: '#data' }
@ -331,6 +307,7 @@ const data = ref<any[]>([])
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const loading = ref(false)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
@ -347,22 +324,16 @@ const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.diselesaikanMobileAPKT,
{
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 resetData = () => {
data.value = []
}
const filterData = (params: any) => {
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -372,20 +343,25 @@ const filterData = (params: any) => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3?.id ? up3.id : 0
})
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT
}
loading.value = true
await requestGraphQl(queries.gangguan.daftar.diselesaikanMobileAPKT, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanDiselesaikanMobileAPKT
} else {
data.value = []
}
reportMeta.value = filters.value
console.log(queryResult.data)
})
onError((error) => {
console.log(error)
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const onExporting = (e: any) => {

147
src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
View File

@ -49,7 +49,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
@ -343,7 +343,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -359,7 +359,7 @@
<DxColumn
:width="200"
alignment="center"
data-field=""
data-field="create_date"
caption="Create Date"
css-class="custom-table-column"
cell-template="formatText"
@ -367,7 +367,7 @@
<DxColumn
:width="200"
alignment="center"
data-field=""
data-field="create_by"
caption="User"
:allow-resizing="false"
css-class="custom-table-column"
@ -375,7 +375,7 @@
/>
<DxColumn
alignment="center"
data-field=""
data-field="keterangan"
caption="Keterangan"
:allow-resizing="false"
css-class="custom-table-column"
@ -406,17 +406,17 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Create Date:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.create_date" 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">User:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.create_by" 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:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
<InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
</div>
</div>
</div>
@ -441,7 +441,7 @@ import {
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
import { apolloClient } from '@/utils/api/api.graphql'
@ -474,8 +474,6 @@ const reportMeta = ref({
})
const setDetailType = (columnCaption: string) => {
console.log('Column Caption', columnCaption)
if (columnCaption == 'Jml Lapor') {
detailType.value = 'table'
} else {
@ -483,40 +481,30 @@ const setDetailType = (columnCaption: string) => {
}
}
const getDetail = () => {
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = 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),
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
noLaporan: selected?.no_laporan ? selected?.no_laporan : ''
}
loadingSubData.value = false
await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKaliDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguanLaporLebihDariSatuKali
} else {
dataSub.value = []
}
const { onResult, onError, loading } = useQuery(
queries.keluhan.rekap.rekapKeluhanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailKeluhanAll
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -533,19 +521,8 @@ const showDetail = () => {
}
}
const onDataSelectionChanged = ({
selectedRowsData,
selectedRowKeys,
currentSelectedRowKeys,
element,
component
}: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
// console.log(selectedRowKeys)
// console.log(currentSelectedRowKeys)
// console.log(element)
// console.log(component)
dataSelected.value = selectedRowsData[0]
showDetail()
}
@ -558,42 +535,46 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.melaporLebihDariSatuKali,
{
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
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 query = {
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
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
}
loadingData.value = true
await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKali, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanMelaporLebihDariSatuKali
} else {
data.value = []
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const onExporting = (e: any) => {

58
src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
View File

@ -66,7 +66,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
@ -265,6 +265,11 @@
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Referensi Marking :</h3>
<InputText :readonly="true" :value="dataSelected?.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-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
@ -346,7 +351,7 @@ import {
DxSelection
} from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import {
exportToPDF,
exportToXLSX,
@ -361,6 +366,7 @@ const data = ref<any[]>([])
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const loading = ref(false)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
@ -377,11 +383,16 @@ const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => {
const resetData = () => {
data.value = []
}
const filterData = async (params: any) => {
resetData()
const { minTime, maxTime, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -393,19 +404,24 @@ const filterData = (params: any) => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
}
loading.value = true
await requestGraphQl(queries.gangguan.daftar.recoveryTime, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanRecoveryTime
} else {
data.value = []
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanRecoveryTime
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const onExporting = (e: any) => {
@ -418,16 +434,6 @@ const onExporting = (e: any) => {
}
}
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: 1, //menit
maxDurasiRecoveryTime: 1, // menit
posko: 0,
idUid: 0,
idUp3: 0
})
const filters = ref()
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },

58
src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
View File

@ -50,7 +50,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="cellCenter"
@ -242,6 +242,11 @@
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Referensi Marking :</h3>
<InputText :readonly="true" :value="dataSelected?.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-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
@ -323,7 +328,7 @@ import {
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import {
exportToPDF,
exportToXLSX,
@ -338,6 +343,7 @@ const data = ref<any[]>([])
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const loading = ref(false)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
@ -354,11 +360,16 @@ const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const filterData = (params: any) => {
const resetData = () => {
data.value = []
}
const filterData = async (params: any) => {
resetData()
const { minTime, maxTime, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -370,31 +381,26 @@ const filterData = (params: any) => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
}
loading.value = true
await requestGraphQl(queries.gangguan.daftar.responseTime, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanResponseTime
} else {
data.value = []
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanResponseTime
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.responseTime, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiResponseTime: 1, //menit
maxDurasiResponseTime: 1, // menit
posko: 0,
idUid: 0,
idUp3: 0
})
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta, data)

73
src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
View File

@ -50,7 +50,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
@ -278,26 +278,6 @@
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.penyebab"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.tindakan"
class-name="flex-1"
/>
</div>
</div>
</DetailDialog>
</template>
@ -320,7 +300,7 @@ import {
DxSelection
} from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
const position = { of: '#data' }
@ -331,6 +311,7 @@ const data = ref<any[]>([])
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const dataGridRef = ref<DxDataGrid | null>(null)
const loading = ref(false)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
@ -347,22 +328,16 @@ const showDetail = () => (dialogDetail.value = true)
const closeDialog = () => (dialogDetail.value = false)
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.daftar.selesaiTanpaIDPelanggan,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
}
)
const resetData = () => {
data.value = []
}
const filterData = (params: any) => {
const filterData = async (params: any) => {
resetData()
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -372,20 +347,24 @@ const filterData = (params: any) => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
}
loading.value = true
await requestGraphQl(queries.gangguan.daftar.selesaiTanpaIDPelanggan, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanSelesaiTanpaIdPelanggan
} else {
data.value = []
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
}
reportMeta.value = filters.value
console.log(queryResult.data)
})
onError((error) => {
console.log(error)
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const onExporting = (e: any) => {

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

@ -5,31 +5,40 @@
</Filters>
<div id="data">
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @cell-click="handleCellClick"
@row-click="handleRowClick" @selection-changed="onDataSelectionChanged" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxDataGrid
@cell-click="onCellClicked"
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
<DxSelection mode="single" />
<!-- <DxPaging :page-size="40" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 40, 60]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/> -->
<DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
:show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<!-- <DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -232,10 +241,21 @@
<DetailDialog :open="dialogDetail" title="Detail Gangguan All" @on-close="closedialogDetail" :full-width="true">
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
@ -245,57 +265,228 @@
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i: any) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl/Jam Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl/Jam Datang"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl/Jam Nyala"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan Regu"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="jarak_closing" caption="Jarak Closing (m)"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="dispatch_oleh" caption="Dispatch Oleh"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Sumber Lapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="diselesaikan_oleh" caption="Diselesaikan Oleh"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="kode_gangguan" caption="Kode Gangguan"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="jenis_gangguan" caption="Jenis Gangguan"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl/Jam Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl/Jam Datang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl/Jam Nyala"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Penugasan Regu"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Perjalanan Regu"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jarak_closing"
caption="Jarak Closing (m)"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="dispatch_oleh"
caption="Dispatch Oleh"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="pembuat_laporan"
caption="Sumber Lapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="diselesaikan_oleh"
caption="Diselesaikan Oleh"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="kode_gangguan"
caption="Kode Gangguan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jenis_gangguan"
caption="Jenis Gangguan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tindakan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -483,7 +674,13 @@ 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'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_ALL'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_ALL'
import { getDataRowGroup } from '@/utils/data'
const client = apolloClient()
provideApolloClient(client)
@ -501,6 +698,9 @@ const loadingData = ref(false)
const loadingSubData = ref(false)
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const groupIndex = ref(0)
const groupDialog = ref(false)
const groupData = ref<any>(null)
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@ -508,9 +708,50 @@ const reportMeta = ref({
periode: ''
})
const setAgreementDialog = (column: string) => {
console.log('column', column)
const onCellClicked = (e: any) => {
if (e.rowType == 'group') {
groupDialog.value = true
groupIndex.value = e.row.groupIndex
setAgreementDialog(e.column.caption)
const data = getDataRowGroup(e.data)
console.table(data)
groupData.value = data
showDetail()
// if (e.row.groupIndex == 0) {
// //
// } else if (e.row.groupIndex == 1) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0].items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 2) {
// if (e.row.isExpanded) {
// const data = e.data.items[0].collapsedItems[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0].items[0]
// groupData.value = data
// }
// } else if (e.row.groupIndex == 3) {
// if (e.row.isExpanded) {
// const data = e.data.items[0]
// groupData.value = data
// } else {
// const data = e.data.collapsedItems[0]
// groupData.value = data
// }
// }
// showDetail()
} else {
groupDialog.value = false
}
}
const setAgreementDialog = (column: string) => {
if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
agreeToShowDialog.value = true
if (column == 'Total') {
@ -551,13 +792,12 @@ const resetData = () => {
dataSubSelected.value = null
}
const filterData = (params: any) => {
const filterData = async (params: any) => {
resetData()
loadingData.value = true
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -567,23 +807,25 @@ const filterData = (params: any) => {
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.rekapitulasiAllGangguan
}
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
.then((result) => {
if (result.data.data != null) {
data.value = result.data.data.rekapitulasiAllGangguan
} else {
data.value = []
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const getDetail = async () => {
@ -591,56 +833,99 @@ const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const query = {
var 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: selected?.id_posko ? selected?.id_posko : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
idRegu: selected?.id_regu ? selected?.id_regu : 0,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
media: selected?.media ? selected?.media : '',
posko: 0,
idUid: 0,
idUp3: 0,
idRegu: 0,
idUlp: 0,
namaRegional: '',
media: '',
isSelesai: progressSelected.value,
tanggal: ''
}
if (groupDialog.value) {
// if (groupColumnCaption.value != 'Semua Unit') {
// if (groupColumnCaption.value == 'Regional') {
// query = {
// ...query,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// } else if (groupColumnCaption.value == 'UID') {
// query = {
// ...query,
// idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// } else if (groupColumnCaption.value == 'UP3') {
// query = {
// ...query,
// idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
// idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
// namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
// }
// }
// }
if (groupIndex.value == 1) {
query = {
...query,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (groupIndex.value == 2) {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
} else if (groupIndex.value == 3) {
query = {
...query,
idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
}
}
} else {
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: selected?.id_posko ? selected?.id_posko : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
idRegu: selected?.id_regu ? selected?.id_regu : 0,
idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
media: selected?.media ? selected?.media : '',
isSelesai: progressSelected.value,
tanggal: ''
}
}
console.table(query)
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
.then((result) => {
dataSub.value = result.data.data.detailGangguan
if (result.data.data != null) {
dataSub.value = result.data.data.detailGangguan
} else {
dataSub.value = []
}
})
.catch((err) => {
console.log(err)
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
// const { onResult, onError, refetch, loading } = useQuery(
// queries.gangguan.rekap.gangguanAllDetail,
// query,
// {
// fetchPolicy: 'network-only'
// }
// )
// onResult((queryResult) => {
// if (queryResult.data != undefined) {
// dataSub.value = queryResult.data.detailGangguan
// }
// })
// onError((error) => {
// console.log(error)
// })
// watch(loading, (value) => {
// loadingSubData.value = value
// })
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
@ -679,21 +964,18 @@ const handleCellClick = (e: any) => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}

156
src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
View File

@ -160,7 +160,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -194,7 +194,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -502,20 +502,19 @@ import {
DxPager,
DxGrouping
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import InputText from '@/components/InputText.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
import {
exportToPDF,
exportToXLSX,
exportDetailToXLSX,
exportDetailToPDF
} from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
const client = apolloClient()
provideApolloClient(client)
@ -537,7 +536,7 @@ const reportMeta = ref({
periode: ''
})
const getDetail = () => {
const getDetail = async () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
@ -554,24 +553,20 @@ const getDetail = () => {
idUp3: ref.id_up3
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAlihPoskoDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguanAlihPosko
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguanAlihPosko
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -594,21 +589,18 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
@ -625,49 +617,53 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAlihPosko,
{
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 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: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
const refs = [...queryResult.data.rekapitulasiGangguanAlihPosko].sort((a: any, b: any) =>
a.nama_uid.localeCompare(b.nama_uid)
)
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanAlihPosko, query)
.then((result) => {
if (result.data.data != undefined) {
const refs = [...result.data.data.rekapitulasiGangguanAlihPosko].sort((a: any, b: any) =>
a.nama_uid.localeCompare(b.nama_uid)
)
data.value = refs.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} else {
data.value = []
}
data.value = refs.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()

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

@ -51,7 +51,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
data-field="no"
@ -155,7 +155,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -189,7 +189,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -487,20 +487,19 @@ import {
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
const client = apolloClient()
provideApolloClient(client)
@ -535,8 +534,7 @@ const setDate = (value: any) => {
}
}
const getDetail = () => {
loadingSubData.value = true
const getDetail = async () => {
const ref = dataSelected.value
const query = {
@ -548,24 +546,21 @@ const getDetail = () => {
media: ref?.media ? ref?.media : ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.berdasarkanMediaDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailRekapitulasiGangguanBerdasarkanMedia
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.berdasarkanMediaDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanMedia
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -577,8 +572,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (date.value != '') {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -588,31 +585,25 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
if (date.value != '') {
showDetail()
}
showDetail()
}
}
@ -622,40 +613,45 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.berdasarkanMedia,
{
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 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: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
}
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.berdasarkanMedia, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanBerdasarkanMedia
} else {
data.value = []
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()

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

@ -1,7 +1,14 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
@ -148,7 +155,7 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setMonth('')">
{{ data.text }}
</p>
</template>
@ -186,7 +193,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -220,7 +227,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -426,18 +433,18 @@ import {
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { formatWaktu, years } from '@/components/Form/FiltersType/reference'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { getMonthNumber } from '@/utils/texts'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_CTTM'
const client = apolloClient()
provideApolloClient(client)
@ -453,50 +460,33 @@ const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const monthSelected = ref(1)
const monthSelected = ref<any>(null)
const agreeToShowDialog = ref(false)
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
posko: { id: 0, name: 'Semua Posko' },
periode: ''
})
const setMonth = (month: any) => {
monthSelected.value = getMonthNumber(month)
if (month != '') {
monthSelected.value = getMonthNumber(month)
} else {
monthSelected.value = null
}
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanCleansingTransaksiTM,
{
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),
idUlp: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
}
const getDetail = () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
@ -504,29 +494,57 @@ const getDetail = () => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanCleansingTransaksiTM, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanCleansingTransaksiTM
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value
const compDate = dateValue[0].split('-').reverse().join('-').split('-')
const query = {
bulan: monthSelected.value,
tahun: parseInt(compDate[0]),
posko: selected?.id_ulp ? selected?.id_ulp : 0,
idUid: selected?.id_uid ? selected?.id_uid : 0,
idUp3: selected?.id_up3 ? selected?.id_up3 : 0
}
const { onResult, onError, loading } = useQuery(
queries.gangguan.rekap.gangguanCleansingTransaksiTMDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguanCleansingTransaksiTM
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanCleansingTransaksiTMDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguanCleansingTransaksiTM
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -537,19 +555,18 @@ const clearSelection = () => {
const showDetail = () => {
clearSelection()
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (monthSelected.value != null) {
dialogDetail.value = true
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
// wait for 2 seconds
setTimeout(() => {
if (selectedRowsData[0] != undefined) {
console.log('monthSelected', monthSelected.value)
dataSelected.value = selectedRowsData[0]
showDetail()
}
}, 2000)
if (selectedRowsData[0] != undefined) {
console.log('monthSelected', monthSelected.value)
dataSelected.value = selectedRowsData[0]
showDetail()
}
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@ -559,30 +576,19 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}

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

@ -58,7 +58,7 @@
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
caption="a"
css-class="custom-table-column"
cell-template="formatNumber"
@ -441,7 +441,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -475,7 +475,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -758,7 +758,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -773,20 +773,19 @@ import {
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
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'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
const client = apolloClient()
provideApolloClient(client)
@ -808,7 +807,7 @@ const reportMeta = ref({
periode: ''
})
const getDetail = () => {
const getDetail = async () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const { posko, uid, up3 } = filters.value
@ -827,26 +826,20 @@ const getDetail = () => {
idRegu: ref.id_regu
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
console.log(queryResult.data.detailGangguanDiselesaikanMobileApkt)
dataSub.value = queryResult.data.detailGangguanDiselesaikanMobileApkt
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
await requestGraphQl(queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguanDiselesaikanMobileApkt
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -869,21 +862,18 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
@ -900,41 +890,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
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) {
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
}
console.log(queryResult.data)
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = 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: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanDiselesaikanMobileAPKT
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()
onMounted(() => {

320
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
View File

@ -46,7 +46,6 @@
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxGroupPanel :visible="true" />
<DxGrouping :auto-expand-all="true" :context-menu-enabled="true" expand-mode="rowClick" />
<DxColumn
@ -69,10 +68,13 @@
:width="120"
alignment="center"
data-field="sub_kelompok"
caption="Kelompok"
css-class="custom-table-column"
group-index="0"
:group-index="0"
caption=""
cell-template="formatText"
:calculate-group-value="
(rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
"
/>
<DxColumn
:width="150"
@ -446,13 +448,9 @@ import {
DxSelection,
DxSummary
} from 'devextreme-vue/data-grid'
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 { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
@ -480,21 +478,9 @@ const reportMeta = ref({
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
@ -553,11 +539,17 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = data
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguan, {
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -567,67 +559,69 @@ const filterData = (params: any) => {
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.rekapitulasiPerJenisGangguan].map(
(item: any, index: number) => {
return {
no: ++index,
sub_kelompok: item.sub_kelompok,
kode: item.kode,
jenisGangguan: item.tipe_permasalahan,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.jenisGangguan, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = [...result.data.data.rekapitulasiPerJenisGangguan].map(
(item: any, index: number) => {
return {
no: ++index,
sub_kelompok: item.sub_kelompok,
nama_sub_kelompok: item.nama_sub_kelompok,
kode: item.kode,
jenisGangguan: item.tipe_permasalahan,
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
responseTime: {
menit: {
total: item.total_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.total_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
}
}
)
}
reportMeta.value = filters.value
})
onError((queryError) => {
console.log(queryError)
})
watch(loading, (value) => {
loadingData.value = value
})
)
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()
@ -635,119 +629,125 @@ onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
id: 0,
kode: '01a',
nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
sub_kelompok: '00',
avg_durasi_recovery: 0.0,
avg_durasi_response: 0.0,
max_durasi_recovery: 0,
max_durasi_response: 0,
min_durasi_recovery: 0,
min_durasi_response: 0,
persen_inproses: 0.0,
persen_selesai: 0.0,
tipe_permasalahan: 'Pelebur pembatas putus/rusak',
total: 0,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 0,
avg_durasi_response: 0,
min_durasi_response: 0,
max_durasi_response: 0,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
kode: '01a',
total_durasi_recovery: 0,
avg_durasi_recovery: 0,
min_durasi_recovery: 0,
max_durasi_recovery: 0,
total_durasi_response: 0,
total_diatas_sla_recovery: 0,
total_diatas_sla_response: 0,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0
total_dibawah_sla_response: 0,
total_inproses: 0,
total_selesai: 0
},
{
id: 1,
kode: '01b',
nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
sub_kelompok: '00',
avg_durasi_recovery: 0.0,
avg_durasi_response: 0.0,
max_durasi_recovery: 0,
max_durasi_response: 0,
min_durasi_recovery: 0,
min_durasi_response: 0,
persen_inproses: 0.0,
persen_selesai: 0.0,
tipe_permasalahan: 'MCB pembatas rusak',
total: 0,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 0,
avg_durasi_response: 0,
min_durasi_response: 0,
max_durasi_response: 0,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
kode: '01b',
total_durasi_recovery: 0,
avg_durasi_recovery: 0,
min_durasi_recovery: 0,
max_durasi_recovery: 0,
total_durasi_response: 0,
total_diatas_sla_recovery: 0,
total_diatas_sla_response: 0,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0
total_dibawah_sla_response: 0,
total_inproses: 0,
total_selesai: 0
},
{
id: 2,
kode: '01c',
nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
sub_kelompok: '00',
avg_durasi_recovery: 0.0,
avg_durasi_response: 0.0,
max_durasi_recovery: 0,
max_durasi_response: 0,
min_durasi_recovery: 0,
min_durasi_response: 0,
persen_inproses: 0.0,
persen_selesai: 0.0,
tipe_permasalahan: 'RELAY dan / atau CB rusak',
total: 0,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 0,
avg_durasi_response: 0,
min_durasi_response: 0,
max_durasi_response: 0,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
kode: '01c',
total_durasi_recovery: 0,
avg_durasi_recovery: 0,
min_durasi_recovery: 0,
max_durasi_recovery: 0,
total_durasi_response: 0,
total_diatas_sla_recovery: 0,
total_diatas_sla_response: 0,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0
total_dibawah_sla_response: 0,
total_inproses: 0,
total_selesai: 0
},
{
id: 3,
kode: '01d',
nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
sub_kelompok: '00',
avg_durasi_recovery: 0.0,
avg_durasi_response: 0.0,
max_durasi_recovery: 0,
max_durasi_response: 0,
min_durasi_recovery: 0,
min_durasi_response: 0,
persen_inproses: 0.0,
persen_selesai: 0.0,
tipe_permasalahan: 'Pelebur putus dan LBS jatuh atau rusak',
total: 0,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 0,
avg_durasi_response: 0,
min_durasi_response: 0,
max_durasi_response: 0,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
kode: '01d',
total_durasi_recovery: 0,
avg_durasi_recovery: 0,
min_durasi_recovery: 0,
max_durasi_recovery: 0,
total_durasi_response: 0,
total_diatas_sla_recovery: 0,
total_diatas_sla_response: 0,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0
total_dibawah_sla_response: 0,
total_inproses: 0,
total_selesai: 0
},
{
id: 4,
kode: '06a',
nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
sub_kelompok: '00',
avg_durasi_recovery: 0.0,
avg_durasi_response: 0.0,
max_durasi_recovery: 0,
max_durasi_response: 0,
min_durasi_recovery: 0,
min_durasi_response: 0,
persen_inproses: 0.0,
persen_selesai: 0.0,
tipe_permasalahan: 'Kubikel APP/komponennya rusak atau gagal bekerja',
total: 0,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 0,
avg_durasi_response: 0,
min_durasi_response: 0,
max_durasi_response: 0,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 0,
kode: '06a',
total_durasi_recovery: 0,
avg_durasi_recovery: 0,
min_durasi_recovery: 0,
max_durasi_recovery: 0,
total_durasi_response: 0,
total_diatas_sla_recovery: 0,
total_diatas_sla_response: 0,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 0
total_dibawah_sla_response: 0,
total_inproses: 0,
total_selesai: 0
}
].map((item: any, index: number) => {
return {
no: ++index,
sub_kelompok: item.sub_kelompok,
nama_sub_kelompok: item.nama_sub_kelompok,
kode: item.kode,
jenisGangguan: item.tipe_permasalahan,
laporan: {

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

@ -54,7 +54,7 @@
css-class="custom-table-column"
:width="60"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
caption="No"
/> -->
<DxColumn
@ -91,7 +91,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -101,7 +101,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -121,7 +121,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -256,13 +256,49 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -274,7 +310,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -445,7 +481,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -479,7 +515,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -783,19 +819,18 @@ import {
DxPager,
DxGrouping
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } 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'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
const client = apolloClient()
provideApolloClient(client)
@ -816,6 +851,13 @@ const reportMeta = ref({
posko: { id: 0, name: 'Semua Posko' },
periode: ''
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const closeDialog = () => {
dialogDetail.value = false
@ -824,61 +866,62 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const filterData = (params: any) => {
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
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
}
)
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: 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
}
reportMeta.value = filters.value
})
onError((queryError) => {
console.log(queryError)
})
watch(loading, (value) => {
loadingData.value = value
})
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.jenisGangguanSE004, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiJenisGangguanSE004
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const getDetail = () => {
const getDetail = async () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
@ -894,27 +937,26 @@ const getDetail = () => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
idEquipment: ref?.kode ? parseInt(ref.kode) : 0
idEquipment: ref?.kode ? parseInt(ref.kode) : 0,
isSelesai: progressSelected.value
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.jenisGangguanSE004Detail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguanJenisGangguanSE004
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.jenisGangguanSE004Detail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguanJenisGangguanSE004
} else {
dataSub.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -926,8 +968,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {

222
src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
View File

@ -11,6 +11,7 @@
<div id="data">
<DxDataGrid
@cell-click="onCellClicked"
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
@ -25,7 +26,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 :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -280,19 +281,19 @@
</DxSummary>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setMonth('')">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setMonth('')">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setMonth(data.column.caption)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -304,7 +305,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="setMonth('')">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -330,7 +331,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -364,7 +365,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -1119,21 +1120,21 @@ import {
DxSelection,
DxSummary
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
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'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_KTI'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_KTI'
import { getMonthNumber } from '@/utils/texts'
import { getDataRowGroup } from '@/utils/data'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
@ -1147,17 +1148,47 @@ const dataSubSelected = ref()
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const monthSelected = ref<any>(null)
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
posko: { id: 0, name: 'Semua Posko' },
periode: ''
})
const groupDialog = ref(false)
const groupData = ref<any>(null)
const getDetail = () => {
const onCellClicked = (e: any) => {
// if (e.rowType == 'group') {
// groupDialog.value = true
// if (e.row.groupIndex != 0) {
// const data = getDataRowGroup(e.data)
// console.table(data)
// groupData.value = data
// }
// showDetail()
// } else {
// groupDialog.value = false
// }
}
const setMonth = (month: any) => {
if (month != '') {
if (getMonthNumber(month) == 0) {
monthSelected.value = null
} else {
monthSelected.value = getMonthNumber(month)
}
} else {
monthSelected.value = null
}
}
const getDetail = async () => {
loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
const compDate = dateValue[0].split('-').reverse().join('-').split('-')
const query = {
dateFrom: dateValue[0]
@ -1168,27 +1199,27 @@ const getDetail = () => {
: new Date().toISOString().slice(0, 10),
posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
bulan: monthSelected.value,
tahun: parseInt(compDate[0])
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguanKoreksiTransaksiIndividu
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguanKoreksiTransaksiIndividu
} else {
dataSub.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -1200,8 +1231,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (monthSelected.value != null) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -1211,21 +1244,18 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
@ -1242,40 +1272,68 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const resetData = () => {
data.value = []
dataSub.value = []
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
{
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),
idPosko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
)
const filterData = async (params: any) => {
resetData()
const dateValue = filters.value.periode.split(' s/d ')
const { uid, up3, posko, jenisTransaksi } = params
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
}
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),
idPosko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
is_transaksi_individual:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Koreksi Transaksi Individual')
? 1
: 2,
is_cleansing_transaksi_tm:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Cleansing Traksaksi TM')
? 1
: 2,
is_koreksi_transaksi_tm:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Koreksi Transaksi TM')
? 1
: 2,
is_koreksi_gangguan_dan_anev:
jenisTransaksi.length == 4 || jenisTransaksi.length == 0
? 0
: jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev')
? 1
: 2
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanKoreksiTransaksiIndividual
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()

210
src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
View File

@ -56,7 +56,7 @@
data-field="no"
caption="NO"
css-class="custom-table-column"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
cell-template="formatNumber"
/>
<DxColumn
@ -85,7 +85,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -95,7 +95,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -115,7 +115,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -488,13 +488,49 @@
</DxSummary>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -506,7 +542,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -532,7 +568,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -566,7 +602,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -867,17 +903,18 @@ import {
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
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 { queries, requestGraphQl } 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'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
const client = apolloClient()
provideApolloClient(client)
@ -897,9 +934,15 @@ const reportMeta = ref({
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
periode: ''
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const getDetail = () => {
loadingSubData.value = true
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
@ -916,27 +959,26 @@ const getDetail = () => {
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 : ''
media: ref?.media ? ref?.media : '',
isSelesai: progressSelected.value,
tanggal: ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguan
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -948,8 +990,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -959,21 +1003,18 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
@ -990,41 +1031,46 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanPerPosko,
{
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 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: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
const result: any[] = [...queryResult.data.rekapitulasiGangguanPerPosko]
data.value = result.sort((a: any, b: any) => a?.nama_up3.localeCompare(b?.nama_up3))
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanPerPosko, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = [...result.data.data.rekapitulasiGangguanPerPosko].sort((a: any, b: any) =>
a?.nama_up3.localeCompare(b?.nama_up3)
)
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()

212
src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
View File

@ -54,7 +54,7 @@
caption="NO"
css-class="custom-table-column"
cell-template="formatNumber"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
/>
<DxColumn
:width="120"
@ -63,7 +63,7 @@
caption="UID"
css-class="custom-table-column"
group-index="0"
v-if="filters.groupBy"
v-if="isGroupBy"
/>
<DxColumn
:width="150"
@ -89,7 +89,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -99,7 +99,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -119,7 +119,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -498,13 +498,13 @@
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -515,7 +515,43 @@
</p>
</template>
<template #formatTime="{ data }">
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatTime="{ data }" @click="setAgreementDialog(false, 0)">
<p class="!text-right">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
@ -542,7 +578,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -576,7 +612,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -875,19 +911,18 @@ import {
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { queries, requestGraphQl } 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'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
const client = apolloClient()
provideApolloClient(client)
@ -909,9 +944,16 @@ const reportMeta = ref({
periode: '',
groupBy: false
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const isGroupBy = ref(false)
const getDetail = () => {
loadingSubData.value = true
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const getDetail = async () => {
const dateValue = filters.value?.periode.split(' s/d ')
const ref = dataSelected.value
@ -928,27 +970,26 @@ const getDetail = () => {
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 : ''
media: ref?.media ? ref?.media : '',
isSelesai: progressSelected.value,
tanggal: ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguan
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -960,8 +1001,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -976,21 +1019,18 @@ const updateFilters = (value: any) => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
@ -1007,11 +1047,17 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -1021,34 +1067,34 @@ const filterData = (params: any) => {
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.rekapitulasiGangguanPerRegu
}
const { posko, uid, up3 } = params
reportMeta.value = {
uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
up3: {
id: up3 ? up3.id : 0,
name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
},
posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
periode: params.periode,
groupBy: params.groupBy
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
.then((result) => {
isGroupBy.value = params.groupBy
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanPerRegu
} else {
data.value = []
}
reportMeta.value = {
uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
up3: {
id: up3 ? up3.id : 0,
name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
},
posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
periode: params.periode,
groupBy: params.groupBy
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref({

235
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
View File

@ -52,7 +52,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -64,7 +64,7 @@
caption="Nama UID"
css-class="custom-table-column"
group-index="0"
v-if="filters.groupBy"
v-if="isGroupBy"
/>
<DxColumn
:width="170"
@ -81,7 +81,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
@ -91,7 +91,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
@ -111,7 +111,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
@ -246,13 +246,49 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -264,7 +300,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -290,7 +326,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -324,7 +360,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -625,17 +661,18 @@ import {
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
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 { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
const client = apolloClient()
provideApolloClient(client)
@ -658,9 +695,16 @@ const reportMeta = ref({
periode: '',
groupBy: false
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const isGroupBy = ref(false)
const getDetail = () => {
loadingSubData.value = true
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const getDetail = async () => {
const dateValue = filters.value?.periode.split(' s/d ')
const ref = dataSelected.value
@ -677,27 +721,26 @@ const getDetail = () => {
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 : ''
media: ref?.media ? ref?.media : '',
isSelesai: progressSelected.value,
tanggal: ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguan
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -709,8 +752,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -720,21 +765,18 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
@ -756,57 +798,54 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
}
}
const filterData = (params: any) => {
loadingData.value = true
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanPerTanggal,
{
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 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: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal
}
if (queryResult.networkStatus == 7) {
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanPerTanggal, query)
.then((result) => {
isGroupBy.value = params.groupBy
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanPerTanggal
} else {
data.value = []
}
reportMeta.value = {
uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
up3: {
id: up3 ? up3.id : 0,
name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
},
posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
periode: params.periode,
groupBy: params.groupBy
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
}
reportMeta.value = {
uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
up3: {
id: up3 ? up3.id : 0,
name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
},
posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
periode: params.periode,
groupBy: params.groupBy
}
})
onError((error) => {
console.log(error)
// loadingData.value = false
})
loadingData.value = loading.value
watch(loading, (value) => {
// loadingData.value = value
})
})
}
onMounted(() => {

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

@ -89,7 +89,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
@ -98,7 +98,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
alignment="center"
@ -116,7 +116,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
alignment="center"
@ -209,19 +209,55 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -233,7 +269,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -259,7 +295,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -293,7 +329,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -625,14 +661,8 @@ import {
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { onMounted, ref, watch } from 'vue'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { onMounted, ref } from 'vue'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@ -640,7 +670,12 @@ import InputText from '@/components/InputText.vue'
import vue3starRatings from 'vue3-star-ratings'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
const client = apolloClient()
provideApolloClient(client)
@ -660,9 +695,15 @@ const reportMeta = ref({
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
periode: ''
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const getDetail = () => {
loadingSubData.value = true
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
@ -679,27 +720,28 @@ const getDetail = () => {
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 : ''
media: ref?.media ? ref?.media : '',
isSelesai: progressSelected.value,
tanggal: '',
namaIssuetype: '',
namaSubissuetype: ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguan
} else {
dataSub.value = []
}
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -711,8 +753,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
dialogDetail.value = false
@ -721,58 +765,45 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanRatingPerPosko,
{
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.id,
idUid: uid.id,
idUp3: up3.id
}
)
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -782,28 +813,32 @@ const filterData = (params: any) => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
const refs = [...queryResult.data.rekapitulasiGangguanRatingPerPosko].sort((a: any, b: any) =>
a.nama_up3.localeCompare(b.nama_up3)
)
data.value = refs.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
}
}
reportMeta.value = filters.value
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingData.value = value
})
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanRatingPerPosko, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = [...result.data.data.rekapitulasiGangguanRatingPerPosko]
.sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()
onMounted(() => {

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

@ -50,7 +50,7 @@
alignment="center"
caption="NO"
data-type="number"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
css-class="custom-table-column"
cell-template="formatNumber"
/>
@ -77,7 +77,7 @@
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
@ -86,7 +86,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
alignment="center"
@ -104,7 +104,7 @@
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
alignment="center"
@ -199,19 +199,55 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ data.text }}
</p>
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -223,7 +259,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right cursor-pointer">
<p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -249,7 +285,7 @@
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
@exporting="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
@ -283,7 +319,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -615,11 +651,7 @@ import {
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
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 { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import vue3starRatings from 'vue3-star-ratings'
@ -627,7 +659,12 @@ 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'
import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
const client = apolloClient()
provideApolloClient(client)
@ -649,9 +686,15 @@ const reportMeta = ref({
posko: { id: 0, name: 'Semua Posko' },
periode: ''
})
const agreeToShowDialog = ref(false)
const progressSelected = ref(0)
const getDetail = () => {
loadingSubData.value = true
const setAgreementDialog = (status: boolean, progress: number) => {
agreeToShowDialog.value = status
progressSelected.value = progress
}
const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const ref = dataSelected.value
@ -668,27 +711,30 @@ const getDetail = () => {
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 : ''
media: ref?.media ? ref?.media : '',
isSelesai: progressSelected.value,
tanggal: '',
namaIssuetype: '',
namaSubissuetype: ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
loadingSubData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
.then((result) => {
if (result.data.data != undefined) {
dataSub.value = result.data.data.detailGangguan
} else {
dataSub.value = []
}
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingSubData.value = false
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
@ -700,8 +746,10 @@ const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
if (agreeToShowDialog.value) {
dialogDetail.value = true
getDetail()
}
}
const closeDialog = () => {
@ -711,52 +759,45 @@ const closeDialog = () => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
}
}
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const onExportingDetail = (e: any) => {
if (e.format === 'pdf') {
exportDetailToPDF(reportMeta.value, dataSub.value)
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
}
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
showDetail()
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0]
}
console.log(dataSubSelected)
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanRatingPerRegu,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -766,27 +807,25 @@ const filterData = (params: any) => {
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
// const refs = [...queryResult.data.rekapitulasiGangguanRatingPerRegu].sort((a: any, b: any) =>
// a.nama_up3.localeCompare(b.nama_up3)
// )
// data.value = refs.map((ref: any, index: number) => {
// return {
// ...ref,
// number: index + 1
// }
// })
data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
}
}
reportMeta.value = filters.value
console.log(queryResult.data)
})
onError((error) => {
console.log(error)
})
loadingData.value = true
await requestGraphQl(queries.gangguan.rekap.gangguanRatingPerRegu, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.rekapitulasiGangguanRatingPerRegu
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
const filters = ref()
onMounted(() => {