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

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

Browse Source
This commit is contained in:
kur0nek-o 2024-03-18 09:25:38 +07:00
commit 6d0f562c60
24 changed files with 6276 additions and 743 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.env.development
View File

@ -2,5 +2,7 @@ VITE_BASE_URL=http://localhost:5173
VITE_BASE_DIRECTORY=/
VITE_APP_VERSION=0.0.1
VITE_APP_NAME='Executive Information System'
VITE_APP_GRAPHQL_ENDPOINT=http://192.168.191.163:32169/graphql
VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql
# VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
# VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181

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

@ -18,13 +18,13 @@
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxGrouping :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :page-size="40" :enabled="true" />
<!-- <DxPaging :page-size="40" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 40, 60]"
@ -32,7 +32,7 @@
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
/> -->
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
@ -65,6 +65,15 @@
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn
:width="150"
alignment="center"
@ -72,7 +81,7 @@
caption="Regional"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
:group-index="1"
/>
<DxColumn
:width="150"
@ -81,7 +90,7 @@
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
:group-index="1"
:group-index="2"
/>
<DxColumn
:width="150"
@ -90,7 +99,7 @@
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
:group-index="2"
:group-index="3"
/>
<!-- <DxColumn
:width="150"
@ -998,7 +1007,8 @@ import {
DxSearchPanel,
DxSelection,
DxSummary,
DxGroupItem
DxGroupItem,
DxGrouping
} from 'devextreme-vue/data-grid'
import { onMounted, ref, watch } from 'vue'
import { jsPDF } from 'jspdf'
@ -1020,7 +1030,7 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>(null)
const dataSubSelected = ref<any>()
const dataSubSelected = ref<any>(null)
const dialogDataSelected = ref(false)
const closeDialogDataSelected = () => (dialogDataSelected.value = false)
const loadingData = ref(false)
@ -1108,6 +1118,7 @@ const getDetail = () => {
const showDialogDataSelected = () => {
if (dataSelected.value != null) {
dataSub.value = []
dataSubSelected.value = null
dialogDataSelected.value = true
getDetail()
}

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

@ -17,7 +17,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@selection-changed="onDataSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
@ -65,11 +65,12 @@
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_up3"
caption="Nama UP3"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="180"
@ -118,20 +119,14 @@
/>
</DxSummary>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="showDetail()">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -143,6 +138,309 @@
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan Alih Posko"
@on-close="closeDialog"
: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
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"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
: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) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Petugas"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko Asal"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko Tujuan"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
<div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko Asal:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko Tujuan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
@ -160,7 +458,8 @@ import {
DxSearchPanel,
DxSelection,
DxSummary,
DxGroupItem
DxGroupItem,
DxPager
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -171,11 +470,29 @@ import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
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'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingSubData = ref(false)
const showDetail = () => {
dialogDetail.value = true
}
const closeDialog = () => {
dialogDetail.value = false
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -205,11 +522,15 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAlihPosko, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
@ -250,7 +571,9 @@ const filterData = (params: any) => {
const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a, b) =>
a.nama_uid.localeCompare(b.nama_uid)
)
}
})
</script>

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

@ -16,7 +16,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
@ -84,20 +84,14 @@
cell-template="formatNumber"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="showDetail()">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -116,7 +110,7 @@
<DxSummary>
<DxTotalItem
display-format="Call PLN 123"
display-format="Total"
show-in-column="media"
css-class="text-white !text-left"
/>
@ -138,6 +132,296 @@
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan Berdasarkan Media"
@on-close="closeDialog"
: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
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"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
: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) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
<div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
@ -150,6 +434,7 @@ import {
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -166,11 +451,29 @@ import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { dummyData } from '@/utils/dummy'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import InputText from '@/components/InputText.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingSubData = ref(false)
const showDetail = () => {
dialogDetail.value = true
}
const closeDialog = () => {
dialogDetail.value = false
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -200,12 +503,15 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
console.log(data)
}
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.berdasarkanMedia, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),

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

@ -41,7 +41,7 @@
<DxColumn
width="200"
alignment="center"
data-field="nama_uid"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"

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

@ -11,7 +11,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@selection-changed="onDataSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
@ -59,7 +59,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="regu"
data-field="nama_regu"
caption="b"
css-class="custom-table-column"
cell-template="formatText"
@ -151,7 +151,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_nonmarking"
data-field=""
caption="j=(i/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
@ -164,7 +164,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_mobile_nonmarking"
data-field="avg_durasi_response_time_mobile_nonmarking"
caption="k"
css-class="custom-table-column"
cell-template="formatNumber"
@ -174,7 +174,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_mobile_nonmarking"
data-field="avg_durasi_recovery_time_mobile_nonmarking"
caption="l"
css-class="custom-table-column"
cell-template="formatNumber"
@ -189,7 +189,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_mobile_marking"
data-field="total_mobile_marking"
caption="m"
css-class="custom-table-column"
cell-template="formatNumber"
@ -199,7 +199,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_marking"
data-field=""
caption="n=(m/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
@ -212,7 +212,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_mobile_marking"
data-field="avg_durasi_response_time_mobile_marking"
caption="o"
css-class="custom-table-column"
cell-template="formatNumber"
@ -222,7 +222,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_mobile_marking"
data-field="avg_durasi_recovery_time_mobile_marking"
caption="p"
css-class="custom-table-column"
cell-template="formatNumber"
@ -239,7 +239,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_nonmobile_nonmarking"
data-field="total_nonmobile_nonmarking"
caption="q"
css-class="custom-table-column"
cell-template="formatNumber"
@ -249,7 +249,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_nonmobile_nonmarking"
data-field=""
caption="r=(q/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
@ -262,7 +262,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_nonmarking"
data-field="avg_durasi_response_time_nonmobile_nonmarking"
caption="s"
css-class="custom-table-column"
cell-template="formatNumber"
@ -272,7 +272,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_nonmarking"
data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
caption="t"
css-class="custom-table-column"
cell-template="formatNumber"
@ -287,7 +287,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_nonmobile_marking"
data-field="total_nonmobile_marking"
caption="u"
css-class="custom-table-column"
cell-template="formatNumber"
@ -297,7 +297,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_nonmobile_marking"
data-field=""
caption="v=(u/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
@ -310,7 +310,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_marking"
data-field="avg_durasi_response_time_nonmobile_marking"
caption="w"
css-class="custom-table-column"
cell-template="formatNumber"
@ -320,7 +320,7 @@
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_marking"
data-field="avg_durasi_recovery_time_nonmobile_marking"
caption="x"
css-class="custom-table-column"
cell-template="formatNumber"
@ -332,13 +332,13 @@
</DxColumn>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="showDetail()">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -350,18 +350,358 @@
</template>
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
<p class="text-right cursor-pointer" @click="showDetail()">
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>
<template #formatTime="{ data }">
<p class="!text-right">
<p class="!text-right cursor-pointer" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
<DxSummary>
<DxTotalItem
display-format="TOTAL"
show-in-column="nama_regu"
css-class="text-white !text-right"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="total_selesai"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="total_mobile_marking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="total_mobile_nonmarking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="total_nonmobile_marking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="total_nonmobile_nonmarking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan Diselesaikan Mobile APKT"
@on-close="closeDialog"
: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
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"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
: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) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
<div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
@ -375,10 +715,13 @@ import {
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -389,11 +732,28 @@ import { useQuery } from '@vue/apollo-composable'
import { queries } 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'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingSubData = ref(false)
const showDetail = () => {
dialogDetail.value = true
}
const closeDialog = () => {
dialogDetail.value = false
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -423,11 +783,16 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
console.log(data)
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT,
{

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

@ -19,7 +19,7 @@
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
@ -61,16 +61,16 @@
data-field="kode"
caption="Kode"
css-class="custom-table-column"
cell-template="cellCenter"
cell-template="formatText"
/>
<DxColumn
:width="120"
alignment="center"
data-field="kode"
caption="Kode"
data-field="id_fasilitas"
caption=""
css-class="custom-table-column"
cell-template="cellCenter"
name="kodeGroup"
cell-template="formatText"
name="idFasilitasGroup"
:group-index="0"
/>
<DxColumn
@ -253,20 +253,14 @@
</DxColumn>
</DxColumn>
<template #cellCenter="{ data }">
<p class="cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
<p class="text-left cursor-pointer" @click="showDetail()">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
<p class="text-right cursor-pointer" @click="showDetail()">
{{
isNumber(data.text)
? data.column.caption == '%'
@ -278,7 +272,7 @@
</template>
<template #formatTime="{ data }">
<p class="!text-right">
<p class="!text-right cursor-pointer" @click="showDetail()">
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
@ -286,7 +280,7 @@
<DxSummary>
<DxGroupItem
:show-in-group-footer="true"
column="no"
column="No"
display-format="Total"
css-class="!text-left"
/>
@ -349,7 +343,7 @@
<DxGroupItem
:show-in-group-footer="true"
column="max_durasi_response"
summary-type="min"
summary-type="max"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
@ -357,7 +351,7 @@
<DxGroupItem
:show-in-group-footer="true"
column="min_durasi_response"
summary-type="max"
summary-type="min"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
@ -429,6 +423,296 @@
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan/Jenis Gangguan SE 004"
@on-close="closeDialog"
: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
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"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
: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) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
<div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
@ -447,7 +731,8 @@ import {
DxSearchPanel,
DxSelection,
DxSummary,
DxGroupItem
DxGroupItem,
DxPager
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -457,13 +742,27 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import InputText from '@/components/InputText.vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingSubData = ref(false)
const showDetail = () => {
dialogDetail.value = true
}
const closeDialog = () => {
dialogDetail.value = false
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -531,15 +830,396 @@ const filterData = (params: any) => {
})
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
console.log(data)
}
const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
data.value = [
{
id: '0',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kabel',
kode: '11232',
total: 1754,
total_selesai: 1754,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 248343,
avg_durasi_response: 2.360302677532014,
min_durasi_response: 0,
max_durasi_response: 7020,
total_dibawah_sla_response: 1714,
total_diatas_sla_response: 4,
total_durasi_recovery: 7444445,
avg_durasi_recovery: 70.67217787913341,
min_durasi_recovery: 0,
max_durasi_recovery: 199591,
total_dibawah_sla_recovery: 1660,
total_diatas_sla_recovery: 94,
total_response: 1718,
total_recovery: 1754
},
{
id: '1',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'MV Cell',
kode: '11511',
total: 56062,
total_selesai: 56061,
persen_selesai: 99.99821626056865,
total_inproses: 1,
persen_inproses: 0.0017837394313438694,
total_durasi_response: 80699092,
avg_durasi_response: 23.504602211915806,
min_durasi_response: 24,
max_durasi_response: 2592137,
total_dibawah_sla_response: 52700,
total_diatas_sla_response: 3360,
total_durasi_recovery: 1398860783,
avg_durasi_recovery: 415.39603995718875,
min_durasi_recovery: 101,
max_durasi_recovery: 2713062,
total_dibawah_sla_recovery: 49187,
total_diatas_sla_recovery: 6873,
total_response: 56060,
total_recovery: 56060
},
{
id: '2',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'JTR',
kode: '13400',
total: 6022,
total_selesai: 6022,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 8262056,
avg_durasi_response: 22.382392026578074,
min_durasi_response: -16519,
max_durasi_response: 76299,
total_dibawah_sla_response: 5655,
total_diatas_sla_response: 365,
total_durasi_recovery: 87345586,
avg_durasi_recovery: 241.25440053138493,
min_durasi_recovery: -16459,
max_durasi_recovery: 2499716,
total_dibawah_sla_recovery: 4802,
total_diatas_sla_recovery: 1220,
total_response: 6020,
total_recovery: 6022
},
{
id: '3',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Jointing',
kode: '11243',
total: 1,
total_selesai: 1,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 60,
avg_durasi_response: 1,
min_durasi_response: 60,
max_durasi_response: 60,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 0,
total_durasi_recovery: 240,
avg_durasi_recovery: 4,
min_durasi_recovery: 240,
max_durasi_recovery: 240,
total_dibawah_sla_recovery: 1,
total_diatas_sla_recovery: 0,
total_response: 1,
total_recovery: 1
},
{
id: '4',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: null,
kode: '',
total: 7153680,
total_selesai: 1144750,
persen_selesai: 16.00225338567003,
total_inproses: 6008930,
persen_inproses: 83.99774661432997,
total_durasi_response: 746069414,
avg_durasi_response: 29.719034788714257,
min_durasi_response: -16906,
max_durasi_response: 2563885,
total_dibawah_sla_response: 352502,
total_diatas_sla_response: 59097,
total_durasi_recovery: 1633920126,
avg_durasi_recovery: 65.89483875340065,
min_durasi_recovery: -86061,
max_durasi_recovery: 3373943,
total_dibawah_sla_recovery: 412256,
total_diatas_sla_recovery: 900,
total_response: 411599,
total_recovery: 413156
},
{
id: '5',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'AVR / Kapasitor',
kode: '11215',
total: 20,
total_selesai: 20,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 2682,
avg_durasi_response: 2.15,
min_durasi_response: 0,
max_durasi_response: 1477,
total_dibawah_sla_response: 20,
total_diatas_sla_response: 0,
total_durasi_recovery: 115132,
avg_durasi_recovery: 95.85,
min_durasi_recovery: 0,
max_durasi_recovery: 18660,
total_dibawah_sla_recovery: 15,
total_diatas_sla_recovery: 5,
total_response: 20,
total_recovery: 20
},
{
id: '6',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kelompok Terencana (Planned) ',
kode: '32000',
total: 1130,
total_selesai: 1127,
persen_selesai: 99.73451327433628,
total_inproses: 3,
persen_inproses: 0.2654867256637168,
total_durasi_response: 6837343,
avg_durasi_response: 100.54432624113475,
min_durasi_response: -2607074,
max_durasi_response: 2553583,
total_dibawah_sla_response: 1070,
total_diatas_sla_response: 58,
total_durasi_recovery: 9901876,
avg_durasi_recovery: 145.95297249334516,
min_durasi_recovery: -2605454,
max_durasi_recovery: 2553643,
total_dibawah_sla_recovery: 1022,
total_diatas_sla_recovery: 105,
total_response: 1128,
total_recovery: 1127
},
{
id: '7',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Arrester',
kode: '11219',
total: 764,
total_selesai: 764,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 103137,
avg_durasi_response: 2.1612057667103537,
min_durasi_response: 0,
max_durasi_response: 14436,
total_dibawah_sla_response: 755,
total_diatas_sla_response: 8,
total_durasi_recovery: 2758840,
avg_durasi_recovery: 59.97643979057592,
min_durasi_recovery: 0,
max_durasi_recovery: 62400,
total_dibawah_sla_recovery: 711,
total_diatas_sla_recovery: 53,
total_response: 763,
total_recovery: 764
},
{
id: '8',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Trafo',
kode: '11322',
total: 322,
total_selesai: 322,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 238159,
avg_durasi_response: 14.425454545454546,
min_durasi_response: 0,
max_durasi_response: 40320,
total_dibawah_sla_response: 255,
total_diatas_sla_response: 20,
total_durasi_recovery: 2275182,
avg_durasi_recovery: 117.67391304347827,
min_durasi_recovery: 59,
max_durasi_recovery: 105660,
total_dibawah_sla_recovery: 264,
total_diatas_sla_recovery: 58,
total_response: 275,
total_recovery: 322
},
{
id: '9',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kabel',
kode: '11242',
total: 2,
total_selesai: 2,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 377,
avg_durasi_response: 3,
min_durasi_response: 60,
max_durasi_response: 317,
total_dibawah_sla_response: 2,
total_diatas_sla_response: 0,
total_durasi_recovery: 9797,
avg_durasi_recovery: 81.5,
min_durasi_recovery: 1800,
max_durasi_recovery: 7997,
total_dibawah_sla_recovery: 2,
total_diatas_sla_recovery: 0,
total_response: 2,
total_recovery: 2
},
{
id: '10',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Kabel Opstyg / SKTR',
kode: '11411',
total: 91371,
total_selesai: 91371,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 117146730,
avg_durasi_response: 20.890635777395797,
min_durasi_response: 0,
max_durasi_response: 86580,
total_dibawah_sla_response: 85886,
total_diatas_sla_response: 5451,
total_durasi_recovery: 488901032,
avg_durasi_recovery: 88.69208711831017,
min_durasi_recovery: 0,
max_durasi_recovery: 4028013,
total_dibawah_sla_recovery: 88945,
total_diatas_sla_recovery: 2425,
total_response: 91337,
total_recovery: 91370
},
{
id: '11',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Gardu Distribusi',
kode: '13300',
total: 275,
total_selesai: 275,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 382161,
avg_durasi_response: 22.952727272727273,
min_durasi_response: -610712,
max_durasi_response: 638280,
total_dibawah_sla_response: 238,
total_diatas_sla_response: 37,
total_durasi_recovery: 14380135,
avg_durasi_recovery: 871.3163636363637,
min_durasi_recovery: -484681,
max_durasi_recovery: 7565219,
total_dibawah_sla_recovery: 195,
total_diatas_sla_recovery: 80,
total_response: 275,
total_recovery: 275
},
{
id: '12',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Konstruksi',
kode: '12101',
total: 13,
total_selesai: 13,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 444894,
avg_durasi_response: 570,
min_durasi_response: -17483,
max_durasi_response: 435093,
total_dibawah_sla_response: 11,
total_diatas_sla_response: 2,
total_durasi_recovery: 520794,
avg_durasi_recovery: 667.3076923076923,
min_durasi_recovery: -13763,
max_durasi_recovery: 445113,
total_dibawah_sla_recovery: 11,
total_diatas_sla_recovery: 2,
total_response: 13,
total_recovery: 13
},
{
id: '13',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'Operasi',
kode: '12503',
total: 747,
total_selesai: 747,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 1354769,
avg_durasi_response: 29.809395973154363,
min_durasi_response: -5325,
max_durasi_response: 349500,
total_dibawah_sla_response: 713,
total_diatas_sla_response: 32,
total_durasi_recovery: 4880492,
avg_durasi_recovery: 108.41097724230255,
min_durasi_recovery: -5325,
max_durasi_recovery: 494389,
total_dibawah_sla_recovery: 692,
total_diatas_sla_recovery: 55,
total_response: 745,
total_recovery: 747
},
{
id: '14',
id_fasilitas: '111 -> Distribusi -> Penyulang',
sub_kelompok: 'CO Branch',
kode: '11217',
total: 17364,
total_selesai: 17364,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 9434964,
avg_durasi_response: 9.046101538638853,
min_durasi_response: -175685,
max_durasi_response: 84720,
total_dibawah_sla_response: 16595,
total_diatas_sla_response: 758,
total_durasi_recovery: 72920963,
avg_durasi_recovery: 69.94573732718894,
min_durasi_recovery: -175565,
max_durasi_recovery: 136440,
total_dibawah_sla_recovery: 16387,
total_diatas_sla_recovery: 973,
total_response: 17353,
total_recovery: 17360
}
]
}
})
</script>

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

@ -16,6 +16,7 @@
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxGrouping :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -47,13 +48,31 @@
/>
<DxColumn
alignment="center"
data-field="nama_ulp"
caption="Nama Unit"
data-field=""
caption="Seluruh Unit"
css-class="custom-table-column"
cell-template="formatText"
name="NamaUnitGroup"
name="AllUnitGroup"
:group-index="0"
/>
<DxColumn
alignment="center"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
cell-template="formatText"
name="RegionalGroup"
:group-index="1"
/>
<DxColumn
alignment="center"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
name="UIDGroup"
:group-index="2"
/>
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn
alignment="center"
@ -948,6 +967,7 @@ import {
DxColumnFixing,
DxExport,
DxGroupItem,
DxGrouping,
DxLoadPanel,
DxPager,
DxPaging,

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

@ -549,6 +549,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)

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

@ -186,7 +186,7 @@
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
cell-template="formatPercentage"
/>
</DxColumn>
@ -198,7 +198,7 @@
<template #formatPercentage="{ data }">
<p class="text-right cursor-pointer" @click="showData()">
{{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
{{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
</p>
</template>

24
src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
View File

@ -123,6 +123,14 @@
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_unit_baru"
caption="Unit Tujuan"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="120"
alignment="center"
@ -170,6 +178,22 @@
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column !align-top"
cell-template="formatText"
/>
<template #cellCenter="{ data }">
<p class="cursor-pointer">

6
src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
View File

@ -81,7 +81,7 @@
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
data-field="waktu_selesai"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="formatText"
@ -226,7 +226,7 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.waktu_selesai" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -466,7 +466,7 @@ const onExporting = (e: any) => {
item.no_laporan,
item.waktu_lapor,
item.waktu_response,
item.waktu_recovery,
item.waktu_selesai,
item.jumlah_lapor,
parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',

435
src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
View File

@ -23,6 +23,7 @@
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping :auto-expand-all="false" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -44,13 +45,22 @@
<DxColumn
alignment="center"
:width="170"
:width="200"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn
:width="150"
alignment="center"
@ -58,7 +68,7 @@
caption="Regional"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
:group-index="1"
/>
<DxColumn
:width="150"
@ -67,7 +77,7 @@
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
:group-index="1"
:group-index="2"
/>
<DxColumn
:width="150"
@ -76,7 +86,7 @@
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
:group-index="2"
:group-index="3"
/>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
@ -419,7 +429,7 @@
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -460,9 +470,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -768,7 +776,8 @@ import {
DxSearchPanel,
DxSelection,
DxSummary,
DxGroupItem
DxGroupItem,
DxGrouping
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -890,7 +899,413 @@ const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
data.value = [
{
id: 0,
nama_regional: 'REGIONAL JMB',
id_uid: 101,
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
id_up3: 52150,
nama_up3: 'UP3 MAGELANG',
id_ulp: 52156,
nama_ulp: 'ULP PARAKAN',
total: 1,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 1,
persen_inproses: 100,
total_durasi_response: 6869,
avg_durasi_response: 6869,
min_durasi_response: 6869,
max_durasi_response: 6869,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 1,
total_durasi_recovery: 6918,
avg_durasi_recovery: 6918,
min_durasi_recovery: 6918,
max_durasi_recovery: 6918,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 1
},
{
id: 1,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 154,
nama_up3: 'UP3 SITUBONDO',
id_ulp: 51654,
nama_ulp: 'ULP WONOSARI',
total: 4,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 4,
persen_inproses: 100,
total_durasi_response: 12102,
avg_durasi_response: 4034,
min_durasi_response: 881,
max_durasi_response: 9125,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 2,
total_durasi_recovery: 169068,
avg_durasi_recovery: 42267,
min_durasi_recovery: 0,
max_durasi_recovery: 70663,
total_dibawah_sla_recovery: 1,
total_diatas_sla_recovery: 3
},
{
id: 2,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 110,
nama_uid: 'WILAYAH ACEH',
id_up3: 116,
nama_up3: 'UP3 SIGLI',
id_ulp: 11662,
nama_ulp: 'ULP MEUREUDU',
total: 1,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 1,
persen_inproses: 100,
total_durasi_response: 325,
avg_durasi_response: 325,
min_durasi_response: 325,
max_durasi_response: 325,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 0,
total_durasi_recovery: 368,
avg_durasi_recovery: 368,
min_durasi_recovery: 368,
max_durasi_recovery: 368,
total_dibawah_sla_recovery: 1,
total_diatas_sla_recovery: 0
},
{
id: 3,
nama_regional: 'REGIONAL JMB',
id_uid: 287,
nama_uid: 'DISTRIBUSI BALI',
id_up3: 329,
nama_up3: 'UP3 BALI UTARA',
id_ulp: 55340,
nama_ulp: 'ULP GILIMANUK',
total: 5,
total_selesai: 4,
persen_selesai: 80,
total_inproses: 1,
persen_inproses: 20,
total_durasi_response: 3548,
avg_durasi_response: 709.6,
min_durasi_response: 302,
max_durasi_response: 1586,
total_dibawah_sla_response: 4,
total_diatas_sla_response: 1,
total_durasi_recovery: 5705,
avg_durasi_recovery: 1141,
min_durasi_recovery: 775,
max_durasi_recovery: 2078,
total_dibawah_sla_recovery: 5,
total_diatas_sla_recovery: 0
},
{
id: 4,
nama_regional: null,
id_uid: 0,
nama_uid: '',
id_up3: 0,
nama_up3: '',
id_ulp: 22450,
nama_ulp: 'ULP PANGKALAN BUN',
total: 2,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 2,
persen_inproses: 100,
total_durasi_response: 1005,
avg_durasi_response: 1005,
min_durasi_response: 1005,
max_durasi_response: 1005,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 0,
total_durasi_recovery: 1815,
avg_durasi_recovery: 907.5,
min_durasi_recovery: 650,
max_durasi_recovery: 1165,
total_dibawah_sla_recovery: 2,
total_diatas_sla_recovery: 0
},
{
id: 5,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 221,
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
id_up3: 2220,
nama_up3: 'UP3 BARABAI',
id_ulp: 22230,
nama_ulp: 'ULP AMUNTAI',
total: 3,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 3,
persen_inproses: 100,
total_durasi_response: 1178,
avg_durasi_response: 392.6666666666667,
min_durasi_response: 155,
max_durasi_response: 580,
total_dibawah_sla_response: 3,
total_diatas_sla_response: 0,
total_durasi_recovery: 3042,
avg_durasi_recovery: 1014,
min_durasi_recovery: 295,
max_durasi_recovery: 2051,
total_dibawah_sla_recovery: 3,
total_diatas_sla_recovery: 0
},
{
id: 6,
nama_regional: 'REGIONAL JMB',
id_uid: 427,
nama_uid: 'DISTRIBUSI JAWA BARAT',
id_up3: 546,
nama_up3: 'UP3 TASIKMALAYA',
id_ulp: 53231,
nama_ulp: 'ULP CIAMIS',
total: 4,
total_selesai: 1,
persen_selesai: 25,
total_inproses: 3,
persen_inproses: 75,
total_durasi_response: 6122,
avg_durasi_response: 1530.5,
min_durasi_response: 46,
max_durasi_response: 3024,
total_dibawah_sla_response: 2,
total_diatas_sla_response: 2,
total_durasi_recovery: 6269,
avg_durasi_recovery: 1567.25,
min_durasi_recovery: 73,
max_durasi_recovery: 3076,
total_dibawah_sla_recovery: 4,
total_diatas_sla_recovery: 0
},
{
id: 7,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 157,
nama_up3: 'UP3 SURABAYA UTARA',
id_ulp: 51101,
nama_ulp: 'ULP INDRAPURA',
total: 7,
total_selesai: 6,
persen_selesai: 85.71428571428571,
total_inproses: 1,
persen_inproses: 14.285714285714285,
total_durasi_response: 34744,
avg_durasi_response: 5790.666666666667,
min_durasi_response: 55,
max_durasi_response: 11082,
total_dibawah_sla_response: 2,
total_diatas_sla_response: 4,
total_durasi_recovery: 36971,
avg_durasi_recovery: 5281.571428571428,
min_durasi_recovery: 149,
max_durasi_recovery: 11304,
total_dibawah_sla_recovery: 3,
total_diatas_sla_recovery: 4
},
{
id: 8,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13100,
nama_up3: 'UP3 PADANG',
id_ulp: 13105,
nama_ulp: 'ULP LUBUK ALUNG',
total: 1,
total_selesai: 1,
persen_selesai: 100,
total_inproses: 0,
persen_inproses: 0,
total_durasi_response: 459,
avg_durasi_response: 459,
min_durasi_response: 459,
max_durasi_response: 459,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 0,
total_durasi_recovery: 7494,
avg_durasi_recovery: 7494,
min_durasi_recovery: 7494,
max_durasi_recovery: 7494,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 1
},
{
id: 9,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 153,
nama_up3: 'UP3 SIDOARJO',
id_ulp: 51182,
nama_ulp: 'ULP PORONG',
total: 12,
total_selesai: 9,
persen_selesai: 75,
total_inproses: 3,
persen_inproses: 25,
total_durasi_response: 13677,
avg_durasi_response: 1139.75,
min_durasi_response: 42,
max_durasi_response: 4213,
total_dibawah_sla_response: 8,
total_diatas_sla_response: 4,
total_durasi_recovery: 74952,
avg_durasi_recovery: 6246,
min_durasi_recovery: 358,
max_durasi_recovery: 30185,
total_dibawah_sla_recovery: 6,
total_diatas_sla_recovery: 6
},
{
id: 10,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 110,
nama_uid: 'WILAYAH ACEH',
id_up3: 111,
nama_up3: 'UP3 BANDA ACEH',
id_ulp: 11110,
nama_ulp: 'ULP KOTA MERDUATI',
total: 2,
total_selesai: 1,
persen_selesai: 50,
total_inproses: 1,
persen_inproses: 50,
total_durasi_response: 866,
avg_durasi_response: 433,
min_durasi_response: 323,
max_durasi_response: 543,
total_dibawah_sla_response: 2,
total_diatas_sla_response: 0,
total_durasi_recovery: 3186,
avg_durasi_recovery: 1593,
min_durasi_recovery: 917,
max_durasi_recovery: 2269,
total_dibawah_sla_recovery: 2,
total_diatas_sla_recovery: 0
},
{
id: 11,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 110,
nama_uid: 'WILAYAH ACEH',
id_up3: 112,
nama_up3: 'UP3 LHOKSEUMAWE',
id_ulp: 11220,
nama_ulp: 'ULP LHOKSEUMAWE',
total: 3,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 3,
persen_inproses: 100,
total_durasi_response: 6020,
avg_durasi_response: 2006.6666666666667,
min_durasi_response: 270,
max_durasi_response: 3526,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 2,
total_durasi_recovery: 6125,
avg_durasi_recovery: 2041.6666666666667,
min_durasi_recovery: 321,
max_durasi_recovery: 3553,
total_dibawah_sla_recovery: 3,
total_diatas_sla_recovery: 0
},
{
id: 12,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 171,
nama_uid: 'DISTRIBUSI LAMPUNG',
id_up3: 17171,
nama_up3: 'UP3 TANJUNGKARANG',
id_ulp: 17180,
nama_ulp: 'ULP TELUK BETUNG',
total: 7,
total_selesai: 2,
persen_selesai: 28.57142857142857,
total_inproses: 5,
persen_inproses: 71.42857142857143,
total_durasi_response: 2328,
avg_durasi_response: 388,
min_durasi_response: 92,
max_durasi_response: 866,
total_dibawah_sla_response: 6,
total_diatas_sla_response: 0,
total_durasi_recovery: 3159,
avg_durasi_recovery: 451.2857142857143,
min_durasi_recovery: 169,
max_durasi_recovery: 917,
total_dibawah_sla_recovery: 7,
total_diatas_sla_recovery: 0
},
{
id: 13,
nama_regional: 'REGIONAL JMB',
id_uid: 427,
nama_uid: 'DISTRIBUSI JAWA BARAT',
id_up3: 540,
nama_up3: 'UP3 GARUT',
id_ulp: 53293,
nama_ulp: 'ULP LELES',
total: 2,
total_selesai: 1,
persen_selesai: 50,
total_inproses: 1,
persen_inproses: 50,
total_durasi_response: 1870,
avg_durasi_response: 935,
min_durasi_response: 310,
max_durasi_response: 1560,
total_dibawah_sla_response: 1,
total_diatas_sla_response: 1,
total_durasi_recovery: 5002,
avg_durasi_recovery: 2501,
min_durasi_recovery: 1592,
max_durasi_recovery: 3410,
total_dibawah_sla_recovery: 2,
total_diatas_sla_recovery: 0
},
{
id: 14,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 32,
nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
id_up3: 32200,
nama_up3: 'UP3 WATAMPONE',
id_ulp: 32260,
nama_ulp: 'ULP ULOE',
total: 1,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 1,
persen_inproses: 100,
total_durasi_response: 2074,
avg_durasi_response: 2074,
min_durasi_response: 2074,
max_durasi_response: 2074,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 1,
total_durasi_recovery: 3031,
avg_durasi_recovery: 3031,
min_durasi_recovery: 3031,
max_durasi_recovery: 3031,
total_dibawah_sla_recovery: 1,
total_diatas_sla_recovery: 0
}
]
}
})
</script>

10
src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
View File

@ -510,7 +510,8 @@ const { onResult, onError, loading, refetch } = useQuery(
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
idUp3: 0,
media: ''
}
)
@ -527,7 +528,8 @@ const filterData = (params: any) => {
: new Date().toISOString().slice(0, 10),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
idUp3: up3 ? up3.id : 0,
media: ''
})
onResult((queryResult) => {
@ -548,9 +550,7 @@ const filterData = (params: any) => {
})
}
const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
}
const getDetail = () => {}
const showDialogDataSelected = () => {
dialogDataSelected.value = true

267
src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
View File

@ -53,7 +53,7 @@
caption="No"
cell-template="formatNumber"
/>
<!-- <DxColumn
<DxColumn
:width="120"
alignment="center"
data-field="nama_uid"
@ -62,7 +62,7 @@
:group-index="0"
name="NamaUID"
v-if="filters.groupBy"
/> -->
/>
<DxColumn
:width="170"
alignment="center"
@ -874,7 +874,268 @@ const filters = ref({ groupBy: false })
onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
data.value = [
{
"id": 0,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13105,
"nama_ulp": "ULP LUBUK ALUNG",
"fungsi_bidang": "Proses PD/TD, belum ada realisasinya ",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 983,
"min_durasi_response": 983,
"max_durasi_response": 983,
"total_dibawah_sla_response": 1,
"total_diatas_sla_response": 0,
"avg_durasi_recovery": 1373,
"min_durasi_recovery": 1373,
"max_durasi_recovery": 1373,
"total_dibawah_sla_recovery": 1,
"total_diatas_sla_recovery": 0
},
{
"id": 1,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13107,
"nama_ulp": "ULP PAINAN",
"fungsi_bidang": "Drop Tegangan ",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 2228,
"min_durasi_response": 2228,
"max_durasi_response": 2228,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 1,
"avg_durasi_recovery": 2347,
"min_durasi_recovery": 2347,
"max_durasi_recovery": 2347,
"total_dibawah_sla_recovery": 1,
"total_diatas_sla_recovery": 0
},
{
"id": 2,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13104,
"nama_ulp": "ULP PARIAMAN",
"fungsi_bidang": "Kondisi Jaringan Listrik ",
"total": 4,
"total_selesai": 3,
"persen_selesai": 75,
"total_inproses": 1,
"persen_inproses": 25,
"avg_durasi_response": 772.6666666666666,
"min_durasi_response": 171,
"max_durasi_response": 1701,
"total_dibawah_sla_response": 2,
"total_diatas_sla_response": 1,
"avg_durasi_recovery": 3476,
"min_durasi_recovery": 2824,
"max_durasi_recovery": 3968,
"total_dibawah_sla_recovery": 4,
"total_diatas_sla_recovery": 0
},
{
"id": 3,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13103,
"nama_ulp": "ULP INDARUNG",
"fungsi_bidang": "Alat Pembatas tidak berfungsi ",
"total": 25,
"total_selesai": 15,
"persen_selesai": 60,
"total_inproses": 10,
"persen_inproses": 40,
"avg_durasi_response": 1419,
"min_durasi_response": 109,
"max_durasi_response": 4384,
"total_dibawah_sla_response": 10,
"total_diatas_sla_response": 5,
"avg_durasi_recovery": 4791.6,
"min_durasi_recovery": 10,
"max_durasi_recovery": 21118,
"total_dibawah_sla_recovery": 17,
"total_diatas_sla_recovery": 8
},
{
"id": 4,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13105,
"nama_ulp": "ULP LUBUK ALUNG",
"fungsi_bidang": "PD",
"total": 2,
"total_selesai": 2,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 8920.5,
"min_durasi_response": 790,
"max_durasi_response": 17051,
"total_dibawah_sla_response": 1,
"total_diatas_sla_response": 1,
"avg_durasi_recovery": 13781.5,
"min_durasi_recovery": 6068,
"max_durasi_recovery": 21495,
"total_dibawah_sla_recovery": 0,
"total_diatas_sla_recovery": 2
},
{
"id": 5,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13106,
"nama_ulp": "ULP SICINCIN",
"fungsi_bidang": "Alat Pembatas tidak berfungsi ",
"total": 11,
"total_selesai": 0,
"persen_selesai": 0,
"total_inproses": 11,
"persen_inproses": 100,
"avg_durasi_response": 828.25,
"min_durasi_response": 387,
"max_durasi_response": 1237,
"total_dibawah_sla_response": 4,
"total_diatas_sla_response": 0,
"avg_durasi_recovery": 2622.181818181818,
"min_durasi_recovery": 480,
"max_durasi_recovery": 15205,
"total_dibawah_sla_recovery": 10,
"total_diatas_sla_recovery": 1
},
{
"id": 6,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13103,
"nama_ulp": "ULP INDARUNG",
"fungsi_bidang": "Tidak bisa beli Token ",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 5442,
"min_durasi_response": 5442,
"max_durasi_response": 5442,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 1,
"avg_durasi_recovery": 9759,
"min_durasi_recovery": 9759,
"max_durasi_recovery": 9759,
"total_dibawah_sla_recovery": 0,
"total_diatas_sla_recovery": 1
},
{
"id": 7,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13102,
"nama_ulp": "ULP TABING",
"fungsi_bidang": "Kondisi Jaringan Listrik ",
"total": 13,
"total_selesai": 4,
"persen_selesai": 30.76923076923077,
"total_inproses": 9,
"persen_inproses": 69.23076923076923,
"avg_durasi_response": 5249.461538461538,
"min_durasi_response": 300,
"max_durasi_response": 22739,
"total_dibawah_sla_response": 5,
"total_diatas_sla_response": 8,
"avg_durasi_recovery": 7872.384615384615,
"min_durasi_recovery": 594,
"max_durasi_recovery": 32933,
"total_dibawah_sla_recovery": 7,
"total_diatas_sla_recovery": 6
},
{
"id": 8,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13102,
"nama_ulp": "ULP TABING",
"fungsi_bidang": "PTL Sering Padam ",
"total": 1,
"total_selesai": 0,
"persen_selesai": 0,
"total_inproses": 1,
"persen_inproses": 100,
"avg_durasi_response": 28613,
"min_durasi_response": 28613,
"max_durasi_response": 28613,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 1,
"avg_durasi_recovery": 37937,
"min_durasi_recovery": 37937,
"max_durasi_recovery": 37937,
"total_dibawah_sla_recovery": 0,
"total_diatas_sla_recovery": 1
},
{
"id": 9,
"nama_regional": "REGIONAL SUMKAL",
"id_uid": 131,
"nama_uid": "WILAYAH SUMATERA BARAT",
"id_up3": 13100,
"nama_up3": "UP3 PADANG",
"id_ulp": 13112,
"nama_ulp": "ULP KURANJI",
"fungsi_bidang": "Alat Ukur Paskabayar tidak berfungsi ",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 2264,
"min_durasi_response": 2264,
"max_durasi_response": 2264,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 1,
"avg_durasi_recovery": 3300,
"min_durasi_recovery": 3300,
"max_durasi_recovery": 3300,
"total_dibawah_sla_recovery": 1,
"total_diatas_sla_recovery": 0
},
]
}
})
</script>

40
src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
View File

@ -61,7 +61,7 @@
css-class="custom-table-column"
cell-template="formatText"
/>
<!-- <DxColumn
<DxColumn
:width="170"
alignment="center"
data-field="tipe_keluhan"
@ -69,7 +69,7 @@
name="tipeKeluhan"
css-class="custom-table-column"
:group-index="0"
/> -->
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
@ -249,7 +249,6 @@
show-in-column="no"
css-class="text-white !text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
@ -300,7 +299,7 @@
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white !text-right"
@ -308,7 +307,7 @@
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_response"
css-class="text-white !text-right"
@ -316,7 +315,7 @@
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_response"
css-class="text-white !text-right"
@ -348,7 +347,7 @@
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white !text-right"
@ -356,7 +355,7 @@
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white !text-right"
@ -364,7 +363,7 @@
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white !text-right"
@ -393,7 +392,6 @@
display-format="Total"
show-in-column="no"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
@ -438,21 +436,21 @@
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_response"
css-class="text-white !text-right"
@ -480,21 +478,21 @@
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="avg"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
summary-type="sum"
summary-type="min"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
summary-type="max"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white !text-right"
@ -552,7 +550,7 @@
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -593,9 +591,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -974,7 +970,7 @@ const filterData = (params: any) => {
}
const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
}
const showDialogDataSelected = () => {
@ -1029,5 +1025,5 @@ onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
}
})
})
</script>

459
src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
View File

@ -53,14 +53,14 @@
cell-template="formatNumber"
/>
<!-- <DxColumn
<DxColumn
:width="120"
alignment="center"
data-field="nama_up3"
caption="Nama UP3"
caption="UP3"
css-class="custom-table-column"
:group-index="0"
/> -->
/>
<DxColumn
:width="170"
@ -246,14 +246,14 @@
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white !text-left"
css-class="!text-left"
:show-in-group-footer="true"
/>
<DxGroupItem
summary-type="sum"
display-format="{0}"
column="total"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -261,7 +261,7 @@
summary-type="sum"
display-format="{0}"
column="total_selesai"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -269,7 +269,7 @@
summary-type="avg"
display-format="{0}"
column="persen_selesai"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
@ -277,7 +277,7 @@
summary-type="sum"
display-format="{0}"
column="total_inproses"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -285,7 +285,7 @@
summary-type="avg"
display-format="{0}"
column="persen_inproses"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
@ -293,7 +293,7 @@
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -301,7 +301,7 @@
summary-type="avg"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -309,7 +309,7 @@
summary-type="min"
display-format="{0}"
column="min_durasi_response"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
@ -317,7 +317,7 @@
summary-type="max"
display-format="{0}"
column="max_durasi_response"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
@ -325,7 +325,7 @@
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -333,7 +333,7 @@
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -341,7 +341,7 @@
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -349,7 +349,7 @@
summary-type="avg"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -357,7 +357,7 @@
summary-type="min"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
@ -365,7 +365,7 @@
summary-type="max"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
@ -373,7 +373,7 @@
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -381,7 +381,7 @@
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white !text-right"
css-class="!text-right"
:show-in-group-footer="true"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
@ -549,7 +549,7 @@
<div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -590,9 +590,7 @@
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
@ -909,7 +907,6 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const position = { of: '#data' }
@ -968,7 +965,7 @@ const filterData = (params: any) => {
}
const getDetail = () => {
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
}
const showDialogDataSelected = () => {
@ -1022,7 +1019,413 @@ const filters = ref()
onMounted(() => {
if (import.meta.env.DEV) {
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
data.value = [
{
id: 0,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 120,
nama_uid: 'WILAYAH SUMATERA UTARA',
id_up3: 12100,
nama_up3: 'UP3 PEMATANG SIANTAR',
id_ulp: 12102,
nama_ulp: 'ULP LIMA PULUH',
total: 11,
total_selesai: 1,
persen_selesai: 9.090909090909092,
total_inproses: 10,
persen_inproses: 90.9090909090909,
total_durasi_response: 10193,
avg_durasi_response: 1019.3,
min_durasi_response: 379,
max_durasi_response: 1782,
total_dibawah_sla_response: 7,
total_diatas_sla_response: 3,
total_durasi_recovery: 13701,
avg_durasi_recovery: 1245.5454545454545,
min_durasi_recovery: 388,
max_durasi_recovery: 2501,
total_dibawah_sla_recovery: 11,
total_diatas_sla_recovery: 0
},
{
id: 1,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 41,
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
id_up3: 412,
nama_up3: 'UP3 TERNATE',
id_ulp: 41230,
nama_ulp: 'ULP BACAN',
total: 6,
total_selesai: 4,
persen_selesai: 66.66666666666666,
total_inproses: 2,
persen_inproses: 33.33333333333333,
total_durasi_response: 7291,
avg_durasi_response: 1458.2,
min_durasi_response: 308,
max_durasi_response: 2736,
total_dibawah_sla_response: 2,
total_diatas_sla_response: 3,
total_durasi_recovery: 19860,
avg_durasi_recovery: 3310,
min_durasi_recovery: 2152,
max_durasi_recovery: 6176,
total_dibawah_sla_recovery: 5,
total_diatas_sla_recovery: 1
},
{
id: 2,
nama_regional: 'REGIONAL JMB',
id_uid: 101,
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
id_up3: 52150,
nama_up3: 'UP3 MAGELANG',
id_ulp: 52156,
nama_ulp: 'ULP PARAKAN',
total: 56,
total_selesai: 15,
persen_selesai: 26.785714285714285,
total_inproses: 41,
persen_inproses: 73.21428571428571,
total_durasi_response: 145058,
avg_durasi_response: 3086.340425531915,
min_durasi_response: 459,
max_durasi_response: 8933,
total_dibawah_sla_response: 11,
total_diatas_sla_response: 36,
total_durasi_recovery: 204948,
avg_durasi_recovery: 3659.785714285714,
min_durasi_recovery: 1,
max_durasi_recovery: 15497,
total_dibawah_sla_recovery: 43,
total_diatas_sla_recovery: 13
},
{
id: 3,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31500,
nama_up3: 'UP3 TOLITOLI',
id_ulp: 31530,
nama_ulp: 'ULP BANGKIR',
total: 56,
total_selesai: 23,
persen_selesai: 41.07142857142857,
total_inproses: 33,
persen_inproses: 58.92857142857143,
total_durasi_response: 14809,
avg_durasi_response: 643.8695652173913,
min_durasi_response: 63,
max_durasi_response: 6694,
total_dibawah_sla_response: 22,
total_diatas_sla_response: 1,
total_durasi_recovery: 63412,
avg_durasi_recovery: 1132.357142857143,
min_durasi_recovery: 76,
max_durasi_recovery: 6815,
total_dibawah_sla_recovery: 52,
total_diatas_sla_recovery: 4
},
{
id: 4,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 154,
nama_up3: 'UP3 SITUBONDO',
id_ulp: 51654,
nama_ulp: 'ULP WONOSARI',
total: 92,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 92,
persen_inproses: 100,
total_durasi_response: 201431,
avg_durasi_response: 2426.879518072289,
min_durasi_response: 14,
max_durasi_response: 22160,
total_dibawah_sla_response: 54,
total_diatas_sla_response: 29,
total_durasi_recovery: 856596,
avg_durasi_recovery: 9310.826086956522,
min_durasi_recovery: 0,
max_durasi_recovery: 74239,
total_dibawah_sla_recovery: 49,
total_diatas_sla_recovery: 43
},
{
id: 5,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 110,
nama_uid: 'WILAYAH ACEH',
id_up3: 116,
nama_up3: 'UP3 SIGLI',
id_ulp: 11662,
nama_ulp: 'ULP MEUREUDU',
total: 8,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 8,
persen_inproses: 100,
total_durasi_response: 3766,
avg_durasi_response: 470.75,
min_durasi_response: 99,
max_durasi_response: 1322,
total_dibawah_sla_response: 8,
total_diatas_sla_response: 0,
total_durasi_recovery: 4463,
avg_durasi_recovery: 557.875,
min_durasi_recovery: 132,
max_durasi_recovery: 1390,
total_dibawah_sla_recovery: 8,
total_diatas_sla_recovery: 0
},
{
id: 6,
nama_regional: 'REGIONAL JMB',
id_uid: 287,
nama_uid: 'DISTRIBUSI BALI',
id_up3: 329,
nama_up3: 'UP3 BALI UTARA',
id_ulp: 55340,
nama_ulp: 'ULP GILIMANUK',
total: 47,
total_selesai: 19,
persen_selesai: 40.42553191489361,
total_inproses: 28,
persen_inproses: 59.57446808510638,
total_durasi_response: 47015,
avg_durasi_response: 1000.3191489361702,
min_durasi_response: 22,
max_durasi_response: 14684,
total_dibawah_sla_response: 42,
total_diatas_sla_response: 5,
total_durasi_recovery: 74421,
avg_durasi_recovery: 1583.4255319148936,
min_durasi_recovery: 257,
max_durasi_recovery: 14769,
total_dibawah_sla_recovery: 44,
total_diatas_sla_recovery: 3
},
{
id: 7,
nama_regional: null,
id_uid: 0,
nama_uid: '',
id_up3: 0,
nama_up3: '',
id_ulp: 22450,
nama_ulp: 'ULP PANGKALAN BUN',
total: 167,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 167,
persen_inproses: 100,
total_durasi_response: 118469,
avg_durasi_response: 789.7933333333333,
min_durasi_response: 52,
max_durasi_response: 3752,
total_dibawah_sla_response: 135,
total_diatas_sla_response: 15,
total_durasi_recovery: 173448,
avg_durasi_recovery: 1038.6107784431138,
min_durasi_recovery: 0,
max_durasi_recovery: 3793,
total_dibawah_sla_recovery: 167,
total_diatas_sla_recovery: 0
},
{
id: 8,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13300,
nama_up3: 'UP3 SOLOK',
id_ulp: 13334,
nama_ulp: 'ULP SILUNGKANG',
total: 1,
total_selesai: 0,
persen_selesai: 0,
total_inproses: 1,
persen_inproses: 100,
total_durasi_response: 5118,
avg_durasi_response: 5118,
min_durasi_response: 5118,
max_durasi_response: 5118,
total_dibawah_sla_response: 0,
total_diatas_sla_response: 1,
total_durasi_recovery: 5696,
avg_durasi_recovery: 5696,
min_durasi_recovery: 5696,
max_durasi_recovery: 5696,
total_dibawah_sla_recovery: 0,
total_diatas_sla_recovery: 1
},
{
id: 9,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 221,
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
id_up3: 2220,
nama_up3: 'UP3 BARABAI',
id_ulp: 22230,
nama_ulp: 'ULP AMUNTAI',
total: 48,
total_selesai: 4,
persen_selesai: 8.333333333333332,
total_inproses: 44,
persen_inproses: 91.66666666666666,
total_durasi_response: 25050,
avg_durasi_response: 532.9787234042553,
min_durasi_response: 58,
max_durasi_response: 2352,
total_dibawah_sla_response: 44,
total_diatas_sla_response: 3,
total_durasi_recovery: 49151,
avg_durasi_recovery: 1023.9791666666666,
min_durasi_recovery: 129,
max_durasi_recovery: 2853,
total_dibawah_sla_recovery: 48,
total_diatas_sla_recovery: 0
},
{
id: 10,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31700,
nama_up3: 'UP3 KOTAMOBAGU',
id_ulp: 31730,
nama_ulp: 'ULP MODAYAG',
total: 21,
total_selesai: 11,
persen_selesai: 52.38095238095239,
total_inproses: 10,
persen_inproses: 47.61904761904761,
total_durasi_response: 11456,
avg_durasi_response: 716,
min_durasi_response: 126,
max_durasi_response: 2376,
total_dibawah_sla_response: 13,
total_diatas_sla_response: 3,
total_durasi_recovery: 30489,
avg_durasi_recovery: 1451.857142857143,
min_durasi_recovery: 0,
max_durasi_recovery: 3482,
total_dibawah_sla_recovery: 21,
total_diatas_sla_recovery: 0
},
{
id: 11,
nama_regional: 'REGIONAL JMB',
id_uid: 427,
nama_uid: 'DISTRIBUSI JAWA BARAT',
id_up3: 546,
nama_up3: 'UP3 TASIKMALAYA',
id_ulp: 53231,
nama_ulp: 'ULP CIAMIS',
total: 123,
total_selesai: 16,
persen_selesai: 13.008130081300814,
total_inproses: 107,
persen_inproses: 86.99186991869918,
total_durasi_response: 476405,
avg_durasi_response: 5881.543209876543,
min_durasi_response: 46,
max_durasi_response: 41257,
total_dibawah_sla_response: 21,
total_diatas_sla_response: 60,
total_durasi_recovery: 1177396,
avg_durasi_recovery: 9572.325203252032,
min_durasi_recovery: 0,
max_durasi_recovery: 45912,
total_dibawah_sla_recovery: 57,
total_diatas_sla_recovery: 66
},
{
id: 12,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 157,
nama_up3: 'UP3 SURABAYA UTARA',
id_ulp: 51101,
nama_ulp: 'ULP INDRAPURA',
total: 139,
total_selesai: 131,
persen_selesai: 94.24460431654677,
total_inproses: 8,
persen_inproses: 5.755395683453238,
total_durasi_response: 491177,
avg_durasi_response: 3749.442748091603,
min_durasi_response: 18,
max_durasi_response: 20546,
total_dibawah_sla_response: 51,
total_diatas_sla_response: 80,
total_durasi_recovery: 775066,
avg_durasi_recovery: 5576.014388489209,
min_durasi_recovery: 1,
max_durasi_recovery: 49206,
total_dibawah_sla_recovery: 78,
total_diatas_sla_recovery: 61
},
{
id: 13,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 41,
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
id_up3: 414,
nama_up3: 'UP3 MASOHI',
id_ulp: 41430,
nama_ulp: 'ULP MASOHI',
total: 19,
total_selesai: 17,
persen_selesai: 89.47368421052632,
total_inproses: 2,
persen_inproses: 10.526315789473683,
total_durasi_response: 18570,
avg_durasi_response: 1092.3529411764705,
min_durasi_response: 480,
max_durasi_response: 2337,
total_dibawah_sla_response: 13,
total_diatas_sla_response: 4,
total_durasi_recovery: 41850,
avg_durasi_recovery: 2202.6315789473683,
min_durasi_recovery: 22,
max_durasi_recovery: 4386,
total_dibawah_sla_recovery: 18,
total_diatas_sla_recovery: 1
},
{
id: 14,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13100,
nama_up3: 'UP3 PADANG',
id_ulp: 13105,
nama_ulp: 'ULP LUBUK ALUNG',
total: 67,
total_selesai: 56,
persen_selesai: 83.5820895522388,
total_inproses: 11,
persen_inproses: 16.417910447761194,
total_durasi_response: 67996,
avg_durasi_response: 1214.2142857142858,
min_durasi_response: 45,
max_durasi_response: 17051,
total_dibawah_sla_response: 48,
total_diatas_sla_response: 8,
total_durasi_recovery: 546970,
avg_durasi_recovery: 8163.731343283582,
min_durasi_recovery: 0,
max_durasi_recovery: 221267,
total_dibawah_sla_recovery: 40,
total_diatas_sla_recovery: 27
}
]
}
})
</script>

455
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
View File

@ -1,43 +1,178 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid 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="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
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="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn
alignment="center"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
css-class="custom-table-column" cell-template="percent" />
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_kemarin"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="mom_bulan_ini"
data-type="number"
:caption="`${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_mom"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
<DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
css-class="custom-table-column" cell-template="percent" />
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_kemarin"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="yoy_tahun_ini"
data-type="number"
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_yoy"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
</DxColumn>
<template #percent="{ data }">
{{ data.text }}%
<template #formatNumber="{ data }">
<p class="text-right">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
<p class="!text-left">
{{ data.text }}
</p>
</template>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
@ -45,7 +180,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -55,7 +190,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -65,6 +202,7 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())
@ -77,14 +215,17 @@ const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
idUlp: 0,
idUid: 0,
idUp3: 0
})
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
{
bulan: 10,
tahun: 2023,
regional: '',
idUlp: 0,
idUid: 0,
idUp3: 0
}
)
const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params
currentMonth.value = bulan.id
@ -145,4 +286,250 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
const filters = ref()
</script>
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
id: 0,
nama_regional: null,
id_uid: 0,
nama_uid: '',
id_up3: 0,
nama_up3: '',
id_ulp: 0,
nama_ulp: '',
mom_bulan_ini: 11020739,
mom_bulan_kemarin: 6831980,
persen_mom: -61.31105477475051,
yoy_tahun_ini: 139773892,
yoy_tahun_kemarin: 168209007,
persen_yoy: 16.904632817908496
},
{
id: 1,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 120,
nama_uid: 'WILAYAH SUMATERA UTARA',
id_up3: 12100,
nama_up3: 'UP3 PEMATANG SIANTAR',
id_ulp: 12102,
nama_ulp: 'ULP LIMA PULUH',
mom_bulan_ini: 14813,
mom_bulan_kemarin: 47696,
persen_mom: 68.94288829251929,
yoy_tahun_ini: 354676,
yoy_tahun_kemarin: 624303,
persen_yoy: 43.18848379713056
},
{
id: 2,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 41,
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
id_up3: 412,
nama_up3: 'UP3 TERNATE',
id_ulp: 41230,
nama_ulp: 'ULP BACAN',
mom_bulan_ini: 462651,
mom_bulan_kemarin: 6730,
persen_mom: -6774.45765230312,
yoy_tahun_ini: 1643180,
yoy_tahun_kemarin: 492691,
persen_yoy: -233.51126771140534
},
{
id: 3,
nama_regional: 'REGIONAL JMB',
id_uid: 101,
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
id_up3: 52150,
nama_up3: 'UP3 MAGELANG',
id_ulp: 52156,
nama_ulp: 'ULP PARAKAN',
mom_bulan_ini: 855320,
mom_bulan_kemarin: 837741,
persen_mom: -2.0983812419351566,
yoy_tahun_ini: 8072389,
yoy_tahun_kemarin: 11055796,
persen_yoy: 26.985004064836215
},
{
id: 4,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31500,
nama_up3: 'UP3 TOLITOLI',
id_ulp: 31530,
nama_ulp: 'ULP BANGKIR',
mom_bulan_ini: 56259,
mom_bulan_kemarin: 76807,
persen_mom: 26.752769929824105,
yoy_tahun_ini: 1098120,
yoy_tahun_kemarin: 2481724,
persen_yoy: 55.751727428191046
},
{
id: 5,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 154,
nama_up3: 'UP3 SITUBONDO',
id_ulp: 51654,
nama_ulp: 'ULP WONOSARI',
mom_bulan_ini: 478439,
mom_bulan_kemarin: 1078502,
persen_mom: 55.6385616345635,
yoy_tahun_ini: 6845897,
yoy_tahun_kemarin: 7566389,
persen_yoy: 9.522270134406254
},
{
id: 6,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 110,
nama_uid: 'WILAYAH ACEH',
id_up3: 116,
nama_up3: 'UP3 SIGLI',
id_ulp: 11662,
nama_ulp: 'ULP MEUREUDU',
mom_bulan_ini: 559072,
mom_bulan_kemarin: 182563,
persen_mom: -206.23510788056728,
yoy_tahun_ini: 7747710,
yoy_tahun_kemarin: 7916066,
persen_yoy: 2.12676347064312
},
{
id: 7,
nama_regional: 'REGIONAL JMB',
id_uid: 287,
nama_uid: 'DISTRIBUSI BALI',
id_up3: 329,
nama_up3: 'UP3 BALI UTARA',
id_ulp: 55340,
nama_ulp: 'ULP GILIMANUK',
mom_bulan_ini: 643731,
mom_bulan_kemarin: 578381,
persen_mom: -11.298780561602127,
yoy_tahun_ini: 7155021,
yoy_tahun_kemarin: 5869321,
persen_yoy: -21.905429946666743
},
{
id: 8,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13300,
nama_up3: 'UP3 SOLOK',
id_ulp: 13334,
nama_ulp: 'ULP SILUNGKANG',
mom_bulan_ini: 289082,
mom_bulan_kemarin: 416662,
persen_mom: 30.61954293888092,
yoy_tahun_ini: 1509396,
yoy_tahun_kemarin: 3844624,
persen_yoy: 60.740087977393884
},
{
id: 9,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 221,
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
id_up3: 2220,
nama_up3: 'UP3 BARABAI',
id_ulp: 22230,
nama_ulp: 'ULP AMUNTAI',
mom_bulan_ini: 183310,
mom_bulan_kemarin: 356299,
persen_mom: 48.55163780981703,
yoy_tahun_ini: 2039104,
yoy_tahun_kemarin: 5170462,
persen_yoy: 60.56244103524985
},
{
id: 10,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31700,
nama_up3: 'UP3 KOTAMOBAGU',
id_ulp: 31730,
nama_ulp: 'ULP MODAYAG',
mom_bulan_ini: 86982,
mom_bulan_kemarin: 39871,
persen_mom: -118.15856136038725,
yoy_tahun_ini: 1111887,
yoy_tahun_kemarin: 2440181,
persen_yoy: 54.4342407386993
},
{
id: 11,
nama_regional: 'REGIONAL JMB',
id_uid: 427,
nama_uid: 'DISTRIBUSI JAWA BARAT',
id_up3: 546,
nama_up3: 'UP3 TASIKMALAYA',
id_ulp: 53231,
nama_ulp: 'ULP CIAMIS',
mom_bulan_ini: 1042643,
mom_bulan_kemarin: 2168988,
persen_mom: 51.92951736016981,
yoy_tahun_ini: 8579030,
yoy_tahun_kemarin: 16227325,
persen_yoy: 47.13219831364689
},
{
id: 12,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 157,
nama_up3: 'UP3 SURABAYA UTARA',
id_ulp: 51101,
nama_ulp: 'ULP INDRAPURA',
mom_bulan_ini: 469350,
mom_bulan_kemarin: 575194,
persen_mom: 18.401443686825665,
yoy_tahun_ini: 4905051,
yoy_tahun_kemarin: 4976204,
persen_yoy: 1.4298650135725948
},
{
id: 13,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 41,
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
id_up3: 414,
nama_up3: 'UP3 MASOHI',
id_ulp: 41430,
nama_ulp: 'ULP MASOHI',
mom_bulan_ini: 163662,
mom_bulan_kemarin: 83017,
persen_mom: -97.14275389378079,
yoy_tahun_ini: 1842074,
yoy_tahun_kemarin: 686794,
persen_yoy: -168.21346721142
},
{
id: 14,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13100,
nama_up3: 'UP3 PADANG',
id_ulp: 13105,
nama_ulp: 'ULP LUBUK ALUNG',
mom_bulan_ini: 549380,
mom_bulan_kemarin: 802333,
persen_mom: 31.527183850097156,
yoy_tahun_ini: 5168384,
yoy_tahun_kemarin: 8611936,
persen_yoy: 39.98580574681465
}
]
}
})
</script>

612
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
View File

@ -1,48 +1,442 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
<Type2 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid 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="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxDataGrid
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"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn
alignment="center"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="showDialog()">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatText="{ data }">
<p class="!text-left cursor-pointer" @click="showDialog()">
{{ data.text }}
</p>
</template>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="jumlah_gangguan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="jumlah_informasi"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="showDetail"
title="Detail Gangguan Belum Selesai"
@on-close="closeDialog"
: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
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"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
: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) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="UID/UIW"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="UP3"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="ULP"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="ID Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="No Telp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Penyebab"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Kode Gangguan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field=""
caption="Jenis Gangguan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Response Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Recoery Time:"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Lapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #formatTime="{ data }">
<p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p>
</template>
</DxDataGrid>
</div>
</div>
<div class="w-full mb-4 lg:w-[30%] lg:float-right">
<div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
<InputText :readonly="true" value="" 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">UP3:</h3>
<InputText :readonly="true" value="" 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">ULP:</h3>
<InputText :readonly="true" value="" 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">ID Pelanggan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
<InputText :readonly="true" value="" 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">Jenis Gangguan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recoery Time:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai:</h3>
<InputText :readonly="true" value="" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -51,6 +445,10 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())
@ -60,16 +458,31 @@ const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const showDetail = ref(false)
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.gangguanBelumSelesai, {
regional: '',
idUlp: 0,
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const loadingSubData = ref(false)
const showDialog = () => {
showDetail.value = true
}
const closeDialog = () => {
showDetail.value = false
}
const { onResult, onError, loading, refetch } = useQuery(
queries.monalisa.gangguan.rekap.gangguanBelumSelesai,
{
regional: '',
idUlp: 0,
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
}
)
const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params
currentMonth.value = bulan.id
@ -124,10 +537,151 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(data)
}
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dataSubSelected.value = selectedRowsData[0]
console.log(data)
}
const filters = ref()
</script>
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
id: 0,
nama_regional: null,
id_uid: 0,
nama_uid: '',
id_up3: 0,
nama_up3: '',
id_ulp: 0,
nama_ulp: '',
jumlah_gangguan: 19286,
jumlah_informasi: 0,
total: 19286
},
{
id: 1,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 120,
nama_uid: 'WILAYAH SUMATERA UTARA',
id_up3: 12100,
nama_up3: 'UP3 PEMATANG SIANTAR',
id_ulp: 12102,
nama_ulp: 'ULP LIMA PULUH',
jumlah_gangguan: 41,
jumlah_informasi: 0,
total: 41
},
{
id: 2,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 41,
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
id_up3: 412,
nama_up3: 'UP3 TERNATE',
id_ulp: 41230,
nama_ulp: 'ULP BACAN',
jumlah_gangguan: 511,
jumlah_informasi: 0,
total: 511
},
{
id: 3,
nama_regional: 'REGIONAL JMB',
id_uid: 101,
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
id_up3: 52150,
nama_up3: 'UP3 MAGELANG',
id_ulp: 52156,
nama_ulp: 'ULP PARAKAN',
jumlah_gangguan: 1072,
jumlah_informasi: 0,
total: 1072
},
{
id: 4,
nama_regional: 'REGIONAL SULMAPANA',
id_uid: 31,
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
id_up3: 31500,
nama_up3: 'UP3 TOLITOLI',
id_ulp: 31530,
nama_ulp: 'ULP BANGKIR',
jumlah_gangguan: 70,
jumlah_informasi: 0,
total: 70
},
{
id: 5,
nama_regional: 'REGIONAL JMB',
id_uid: 103,
nama_uid: 'DISTRIBUSI JAWA TIMUR',
id_up3: 154,
nama_up3: 'UP3 SITUBONDO',
id_ulp: 51654,
nama_ulp: 'ULP WONOSARI',
jumlah_gangguan: 1401,
jumlah_informasi: 0,
total: 1401
},
{
id: 6,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 110,
nama_uid: 'WILAYAH ACEH',
id_up3: 116,
nama_up3: 'UP3 SIGLI',
id_ulp: 11662,
nama_ulp: 'ULP MEUREUDU',
jumlah_gangguan: 608,
jumlah_informasi: 0,
total: 608
},
{
id: 7,
nama_regional: 'REGIONAL JMB',
id_uid: 287,
nama_uid: 'DISTRIBUSI BALI',
id_up3: 329,
nama_up3: 'UP3 BALI UTARA',
id_ulp: 55340,
nama_ulp: 'ULP GILIMANUK',
jumlah_gangguan: 858,
jumlah_informasi: 0,
total: 858
},
{
id: 8,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 131,
nama_uid: 'WILAYAH SUMATERA BARAT',
id_up3: 13300,
nama_up3: 'UP3 SOLOK',
id_ulp: 13334,
nama_ulp: 'ULP SILUNGKANG',
jumlah_gangguan: 305,
jumlah_informasi: 0,
total: 305
},
{
id: 9,
nama_regional: 'REGIONAL SUMKAL',
id_uid: 221,
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
id_up3: 2220,
nama_up3: 'UP3 BARABAI',
id_ulp: 22230,
nama_ulp: 'ULP AMUNTAI',
jumlah_gangguan: 323,
jumlah_informasi: 0,
total: 323
}
]
}
})
</script>

208
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
View File

@ -17,6 +17,7 @@
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -113,105 +114,6 @@
</DxColumn>
</DxColumn>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="mom_bulan_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="mom_bulan_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_mom"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_yoy"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
</DxSummary>
<template #formatNumber="{ data }">
<p class="text-right">
{{
@ -229,6 +131,113 @@
{{ data.text }}
</p>
</template>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white !text-left"
/>
<DxTotalItem
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
display-format="{0}"
show-in-column="mom_bulan_kemarin"
column="mom_bulan_kemarin"
css-class="!text-right"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="mom_bulan_ini"
column="mom_bulan_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_mom"
column="persen_mom"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_kemarin"
column="yoy_tahun_kemarin"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="yoy_tahun_ini"
column="yoy_tahun_ini"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
summary-type="sum"
show-in-column="persen_yoy"
column="persen_yoy"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
@ -243,6 +252,7 @@ import {
DxColumnFixing,
DxExport,
DxGroupItem,
DxGrouping,
DxLoadPanel,
DxPaging,
DxScrolling,

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

@ -181,21 +181,21 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
no_laporan
waktu_lapor
waktu_response
waktu_recovery
jumlah_lapor
durasi_response_time
durasi_recovery_time
status_akhir
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
nama_pelapor
nama_ulp
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}
`,
@ -321,6 +321,12 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
total
@ -329,12 +335,12 @@ export const queries = {
total_inproses
persen_inproses
total_durasi_response
total_durasi_recovery
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
total_durasi_recovery
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
@ -441,8 +447,6 @@ export const queries = {
avg_durasi_response
min_durasi_response
max_durasi_response
total_durasi_response
total_durasi_recovery
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
@ -468,10 +472,16 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
fungsi_bidang
total
total_durasi_response
total_durasi_recovery
total_selesai
persen_selesai
total_inproses
@ -496,6 +506,7 @@ export const queries = {
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$media: String!
) {
rekapitulasiKeluhanBerdasarkanMedia(
dateFrom: $dateFrom
@ -503,9 +514,18 @@ export const queries = {
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
media: $media
) {
media
tgl1
tgl2
tgl3
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
tgl10
tgl11
tgl12
@ -516,7 +536,6 @@ export const queries = {
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
@ -527,15 +546,9 @@ export const queries = {
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
total
}
}
`,
@ -554,6 +567,12 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
total
@ -561,11 +580,13 @@ export const queries = {
persen_selesai
total_inproses
persen_inproses
total_durasi_response
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
total_durasi_recovery
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
@ -755,26 +776,37 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
id
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
id_posko
nama_posko
id_regu
kode_regu
nama_regu
avg_durasi_recovery
avg_durasi_response
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
nama_posko
total
total_durasi_recovery
total_durasi_response
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
persen_selesai
total_inproses
persen_inproses
total_durasi_response
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
total_durasi_recovery
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
total_response
total_recovery
}
}
`,
@ -793,25 +825,33 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_recovery
avg_durasi_response
id
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
id_posko
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
nama_posko
persen_inproses
persen_selesai
total
total_durasi_recovery
total_durasi_response
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
persen_selesai
total_inproses
persen_inproses
total_durasi_response
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
total_response
total_recovery
}
}
`,
@ -830,6 +870,7 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
nama_regional
id
id_uid
nama_uid
@ -867,8 +908,10 @@ export const queries = {
idUid: $idUid
idUp3: $idUp3
) {
kode
id
id_fasilitas
sub_kelompok
kode
total
total_selesai
persen_selesai
@ -886,6 +929,8 @@ export const queries = {
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
total_response
total_recovery
}
}
`,
@ -1471,6 +1516,7 @@ export const queries = {
bulan: $bulan
tahun: $tahun
) {
id
nama_regional
id_uid
nama_uid

327
src/utils/dummy.ts
View File

@ -586131,60 +586131,279 @@ export const dummyData = {
}
],
rekapitulasiKeluhanPerJenisKeluhan: [
{
"tipe_keluhan": "ULP BATURAJA",
"total": 83,
"total_selesai": 83,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 25800.21686746988,
"min_durasi_response": 64,
"max_durasi_response": 173218,
"total_dibawah_sla_response": 38,
"total_diatas_sla_response": 45,
"avg_durasi_recovery": 3379854.0361445784,
"min_durasi_recovery": 1064,
"max_durasi_recovery": 5099979,
"total_dibawah_sla_recovery": 7,
"total_diatas_sla_recovery": 76
},
{
"tipe_keluhan": "ULP KIJANG",
"total": 42,
"total_selesai": 42,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 1056.1904761904761,
"min_durasi_response": 118,
"max_durasi_response": 3920,
"total_dibawah_sla_response": 42,
"total_diatas_sla_response": 0,
"avg_durasi_recovery": 226031.88095238095,
"min_durasi_recovery": 74,
"max_durasi_recovery": 4995551,
"total_dibawah_sla_recovery": 40,
"total_diatas_sla_recovery": 2
},
{
"tipe_keluhan": "ULP BARABAI",
"total": 40,
"total_selesai": 40,
"persen_selesai": 100,
"total_inproses": 0,
"persen_inproses": 0,
"avg_durasi_response": 858.9,
"min_durasi_response": 62,
"max_durasi_response": 2169,
"total_dibawah_sla_response": 40,
"total_diatas_sla_response": 0,
"avg_durasi_recovery": 2238019.725,
"min_durasi_recovery": 117,
"max_durasi_recovery": 5099482,
"total_dibawah_sla_recovery": 17,
"total_diatas_sla_recovery": 23
}
{
"tipe_keluhan": "Umum",
"nama_uid": "WILAYAH NUSA TENGGARA TIMUR",
"total": 1,
"total_selesai": 0,
"persen_selesai": 0.0,
"total_inproses": 1,
"persen_inproses": 100.0,
"total_durasi_response": null,
"avg_durasi_response": null,
"min_durasi_response": null,
"max_durasi_response": null,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 0,
"total_durasi_recovery": 1064,
"avg_durasi_recovery": 1064.0,
"min_durasi_recovery": 1064,
"max_durasi_recovery": 1064,
"total_dibawah_sla_recovery": 1,
"total_diatas_sla_recovery": 0
},
{
"tipe_keluhan": "Alat Pembatas tidak berfungsi ",
"nama_uid": "DISTRIBUSI JAWA TIMUR",
"total": 10,
"total_selesai": 0,
"persen_selesai": 0.0,
"total_inproses": 10,
"persen_inproses": 100.0,
"total_durasi_response": 143356,
"avg_durasi_response": 14335.6,
"min_durasi_response": 185,
"max_durasi_response": 42599,
"total_dibawah_sla_response": 2,
"total_diatas_sla_response": 8,
"total_durasi_recovery": 149627,
"avg_durasi_recovery": 14962.7,
"min_durasi_recovery": 227,
"max_durasi_recovery": 42778,
"total_dibawah_sla_recovery": 3,
"total_diatas_sla_recovery": 7
},
{
"tipe_keluhan": "Gagal Input Token",
"nama_uid": "DISTRIBUSI LAMPUNG",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100.0,
"total_inproses": 0,
"persen_inproses": 0.0,
"total_durasi_response": 323,
"avg_durasi_response": 323.0,
"min_durasi_response": 323,
"max_durasi_response": 323,
"total_dibawah_sla_response": 1,
"total_diatas_sla_response": 0,
"total_durasi_recovery": 1319,
"avg_durasi_recovery": 1319.0,
"min_durasi_recovery": 1319,
"max_durasi_recovery": 1319,
"total_dibawah_sla_recovery": 1,
"total_diatas_sla_recovery": 0
},
{
"tipe_keluhan": "Alat Pembatas tidak berfungsi ",
"nama_uid": "DISTRIBUSI JAWA BARAT",
"total": 4,
"total_selesai": 0,
"persen_selesai": 0.0,
"total_inproses": 4,
"persen_inproses": 100.0,
"total_durasi_response": null,
"avg_durasi_response": null,
"min_durasi_response": null,
"max_durasi_response": null,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 0,
"total_durasi_recovery": 114174,
"avg_durasi_recovery": 28543.5,
"min_durasi_recovery": 2506,
"max_durasi_recovery": 46094,
"total_dibawah_sla_recovery": 1,
"total_diatas_sla_recovery": 3
},
{
"tipe_keluhan": "Alat Pembatas tidak berfungsi ",
"nama_uid": "WILAYAH KALIMANTAN SELATAN DAN TENGAH",
"total": 2,
"total_selesai": 0,
"persen_selesai": 0.0,
"total_inproses": 2,
"persen_inproses": 100.0,
"total_durasi_response": 417,
"avg_durasi_response": 417.0,
"min_durasi_response": 417,
"max_durasi_response": 417,
"total_dibawah_sla_response": 1,
"total_diatas_sla_response": 0,
"total_durasi_recovery": 1661,
"avg_durasi_recovery": 830.5,
"min_durasi_recovery": 482,
"max_durasi_recovery": 1179,
"total_dibawah_sla_recovery": 2,
"total_diatas_sla_recovery": 0
},
{
"tipe_keluhan": "PD",
"nama_uid": "DISTRIBUSI JAWA TIMUR",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100.0,
"total_inproses": 0,
"persen_inproses": 0.0,
"total_durasi_response": 8693,
"avg_durasi_response": 8693.0,
"min_durasi_response": 8693,
"max_durasi_response": 8693,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 1,
"total_durasi_recovery": 9510,
"avg_durasi_recovery": 9510.0,
"min_durasi_recovery": 9510,
"max_durasi_recovery": 9510,
"total_dibawah_sla_recovery": 0,
"total_diatas_sla_recovery": 1
},
{
"tipe_keluhan": "Alat Pembatas tidak berfungsi ",
"nama_uid": "DISTRIBUSI JAWA TENGAH & DIY",
"total": 2,
"total_selesai": 0,
"persen_selesai": 0.0,
"total_inproses": 2,
"persen_inproses": 100.0,
"total_durasi_response": null,
"avg_durasi_response": null,
"min_durasi_response": null,
"max_durasi_response": null,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 0,
"total_durasi_recovery": 2226,
"avg_durasi_recovery": 1113.0,
"min_durasi_recovery": 13,
"max_durasi_recovery": 2213,
"total_dibawah_sla_recovery": 2,
"total_diatas_sla_recovery": 0
},
{
"tipe_keluhan": "Alat Ukur Prabayar tidak berfungsi ",
"nama_uid": "DISTRIBUSI JAWA BARAT",
"total": 2,
"total_selesai": 2,
"persen_selesai": 100.0,
"total_inproses": 0,
"persen_inproses": 0.0,
"total_durasi_response": 9595,
"avg_durasi_response": 4797.5,
"min_durasi_response": 4752,
"max_durasi_response": 4843,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 2,
"total_durasi_recovery": 9868,
"avg_durasi_recovery": 4934.0,
"min_durasi_recovery": 4892,
"max_durasi_recovery": 4976,
"total_dibawah_sla_recovery": 0,
"total_diatas_sla_recovery": 2
},
{
"tipe_keluhan": "Gagal Input Token",
"nama_uid": "DISTRIBUSI JAWA TIMUR",
"total": 7,
"total_selesai": 7,
"persen_selesai": 100.0,
"total_inproses": 0,
"persen_inproses": 0.0,
"total_durasi_response": 6715,
"avg_durasi_response": 959.2857142857143,
"min_durasi_response": 16,
"max_durasi_response": 5516,
"total_dibawah_sla_response": 6,
"total_diatas_sla_response": 1,
"total_durasi_recovery": 18280,
"avg_durasi_recovery": 2611.4285714285716,
"min_durasi_recovery": 451,
"max_durasi_recovery": 6701,
"total_dibawah_sla_recovery": 5,
"total_diatas_sla_recovery": 2
},
{
"tipe_keluhan": "Gagal Input Token",
"nama_uid": "WILAYAH SUMATERA UTARA",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100.0,
"total_inproses": 0,
"persen_inproses": 0.0,
"total_durasi_response": 24723,
"avg_durasi_response": 24723.0,
"min_durasi_response": 24723,
"max_durasi_response": 24723,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 1,
"total_durasi_recovery": 25761,
"avg_durasi_recovery": 25761.0,
"min_durasi_recovery": 25761,
"max_durasi_recovery": 25761,
"total_dibawah_sla_recovery": 0,
"total_diatas_sla_recovery": 1
},
{
"tipe_keluhan": "Instalasi / Wiring tidak berfungsi",
"nama_uid": "DISTRIBUSI JAWA BARAT",
"total": 1,
"total_selesai": 1,
"persen_selesai": 100.0,
"total_inproses": 0,
"persen_inproses": 0.0,
"total_durasi_response": 1925,
"avg_durasi_response": 1925.0,
"min_durasi_response": 1925,
"max_durasi_response": 1925,
"total_dibawah_sla_response": 0,
"total_diatas_sla_response": 1,
"total_durasi_recovery": 5959,
"avg_durasi_recovery": 5959.0,
"min_durasi_recovery": 5959,
"max_durasi_recovery": 5959,
"total_dibawah_sla_recovery": 0,
"total_diatas_sla_recovery": 1
},
{
"tipe_keluhan": "Sudah Bayar Belum Disambung",
"nama_uid": "DISTRIBUSI JAWA BARAT",
"total": 4,
"total_selesai": 3,
"persen_selesai": 75.0,
"total_inproses": 1,
"persen_inproses": 25.0,
"total_durasi_response": 6977,
"avg_durasi_response": 1744.25,
"min_durasi_response": 108,
"max_durasi_response": 5649,
"total_dibawah_sla_response": 3,
"total_diatas_sla_response": 1,
"total_durasi_recovery": 36752,
"avg_durasi_recovery": 9188.0,
"min_durasi_recovery": 1076,
"max_durasi_recovery": 16320,
"total_dibawah_sla_recovery": 1,
"total_diatas_sla_recovery": 3
},
{
"tipe_keluhan": "Umum",
"nama_uid": "DISTRIBUSI BALI",
"total": 2,
"total_selesai": 1,
"persen_selesai": 50.0,
"total_inproses": 1,
"persen_inproses": 50.0,
"total_durasi_response": 3497,
"avg_durasi_response": 1748.5,
"min_durasi_response": 653,
"max_durasi_response": 2844,
"total_dibawah_sla_response": 1,
"total_diatas_sla_response": 1,
"total_durasi_recovery": 3796,
"avg_durasi_recovery": 1898.0,
"min_durasi_recovery": 685,
"max_durasi_recovery": 3111,
"total_dibawah_sla_recovery": 2,
"total_diatas_sla_recovery": 0
}
],
rekapitulasiKeluhanPerKelompokKeluhan: [
{