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-25 09:29:05 +07:00
commit 2236c9d9d3
35 changed files with 2395 additions and 4829 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@ -5,4 +5,5 @@ VITE_APP_NAME='Executive Information System'
# VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql # VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql
# VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180 # VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
# VITE_APP_GRAPHQL_ENDPOINT=http://192.168.137.46:32169/graphql
VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181 VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181

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

@ -339,22 +339,22 @@
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)"
/> />
<!-- <DxGroupItem <DxGroupItem
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
column="persen_selesai" column="persen_selesai"
summary-type="avg" summary-type="avg"
css-class="!text-right" css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)" :customize-text="(e: any) => formatPercentage(e.value)"
/> --> />
<DxGroupItem <!-- <DxGroupItem
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
column="persen_selesai" column="persen_selesai"
name="persenSelesai" name="persenSelesai"
summary-type="custom" summary-type="custom"
css-class="!text-right" css-class="!text-right"
/> /> -->
<DxGroupItem <DxGroupItem
:show-in-group-footer="false" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true"
@ -1070,7 +1070,6 @@ import {
DxGrouping DxGrouping
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { onMounted, ref, watch } from 'vue' import { onMounted, ref, watch } from 'vue'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'

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

@ -51,10 +51,8 @@
css-class="custom-table-column" css-class="custom-table-column"
:width="50" :width="50"
alignment="center" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-field="number"
data-type="number"
caption="No" caption="No"
name="number"
cell-template="formatNumber" cell-template="formatNumber"
/> />
<DxColumn <DxColumn
@ -556,7 +554,7 @@ const getDetail = () => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan dataSub.value = queryResult.data.detailGangguanAlihPosko
} }
}) })
@ -618,15 +616,14 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0] dataSubSelected.value = selectedRowsData[0]
} }
console.log(data)
} }
const filterData = (params: any) => { const filterData = (params: any) => {
@ -650,9 +647,17 @@ const filterData = (params: any) => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanAlihPosko const refs = [...queryResult.data.rekapitulasiGangguanAlihPosko].sort((a: any, b: any) =>
a.nama_uid.localeCompare(b.nama_uid)
)
data.value = refs.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} }
console.log(queryResult.data)
}) })
onError((error) => { onError((error) => {
@ -667,9 +672,16 @@ const filterData = (params: any) => {
const filters = ref() const filters = ref()
onMounted(() => { onMounted(() => {
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a, b) => const refs = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a: any, b: any) =>
a.nama_uid.localeCompare(b.nama_uid) a.nama_uid.localeCompare(b.nama_uid)
) )
data.value = refs.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} }
}) })
</script> </script>

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

@ -605,15 +605,14 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0] dataSubSelected.value = selectedRowsData[0]
} }
console.log(data)
} }
const filterData = (params: any) => { const filterData = (params: any) => {
@ -639,7 +638,6 @@ const filterData = (params: any) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
} }
console.log(queryResult.data)
}) })
onError((error) => { onError((error) => {

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

@ -797,6 +797,7 @@ const loadingSubData = ref(false)
const getDetail = () => { const getDetail = () => {
loadingSubData.value = true loadingSubData.value = true
const dateValue = filters.value.periode.split(' s/d ') const dateValue = filters.value.periode.split(' s/d ')
const { posko, uid, up3 } = filters.value
const ref = dataSelected.value const ref = dataSelected.value
const query = { const query = {
@ -806,19 +807,22 @@ const getDetail = () => {
dateTo: dateValue[1] dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-') ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
posko: ref.id_posko, posko: posko ? posko.id : 0,
idUid: ref.id_uid, idUid: uid ? uid.id : 0,
idUp3: ref.id_up3 idUp3: up3 ? up3.id : 0,
idRegu: ref.id_regu
} }
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail, queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail,
query query
) )
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan console.log(queryResult.data.detailGangguanDiselesaikanMobileApkt)
dataSub.value = queryResult.data.detailGangguanDiselesaikanMobileApkt
} }
}) })
@ -880,15 +884,14 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0] dataSubSelected.value = selectedRowsData[0]
} }
console.log(data)
} }
const filterData = (params: any) => { const filterData = (params: any) => {

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

@ -50,7 +50,13 @@
/> />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="60" alignment="center" caption="No" /> <!-- <DxColumn
css-class="custom-table-column"
:width="60"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="No"
/> -->
<DxColumn <DxColumn
:width="120" :width="120"
alignment="center" alignment="center"
@ -276,7 +282,7 @@
<DxSummary> <DxSummary>
<DxGroupItem <DxGroupItem
:show-in-group-footer="true" :show-in-group-footer="true"
column="No" column="Kode"
display-format="Total" display-format="Total"
css-class="!text-left" css-class="!text-left"
/> />
@ -858,7 +864,6 @@ const filterData = (params: any) => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiJenisGangguanSE004 data.value = queryResult.data.rekapitulasiJenisGangguanSE004
console.log(queryResult.data.rekapitulasiJenisGangguanSE004)
} }
reportMeta.value = filters.value reportMeta.value = filters.value
@ -928,8 +933,8 @@ const showDetail = () => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

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

@ -365,7 +365,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="no_laporan"
caption="No Laporan" caption="No Laporan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -373,7 +373,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_lapor"
caption="Tgl Lapor" caption="Tgl Lapor"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -381,7 +381,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_lapor_sblm"
caption="Tgl Lapor Sebelum" caption="Tgl Lapor Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -389,7 +389,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_lapor_sdh"
caption="Tgl Lapor Koreksi" caption="Tgl Lapor Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -397,7 +397,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_penugasan_sblm"
caption="Tgl Penugasan Sebelum" caption="Tgl Penugasan Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -405,7 +405,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_penugasan_sdh"
caption="Tgl Penugasan Koreksi" caption="Tgl Penugasan Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -413,7 +413,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_perjalanan_sblm"
caption="Tgl Perjalanan Sebelum" caption="Tgl Perjalanan Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -421,7 +421,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_perjalanan_sdh"
caption="Tgl Perjalanan Koreksi" caption="Tgl Perjalanan Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -429,7 +429,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_pengerjaan_sblm"
caption="Tgl Pengerjaan Sebelum" caption="Tgl Pengerjaan Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -437,7 +437,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_pengerjaan_sdh"
caption="Tgl Pengerjaan Koreksi" caption="Tgl Pengerjaan Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -445,7 +445,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_nyala_sementara_sblm"
caption="Tgl Nyala Sementara Sebelum" caption="Tgl Nyala Sementara Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -453,7 +453,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_nyala_sementara_sdh"
caption="Tgl Nyala Sementara Koreksi" caption="Tgl Nyala Sementara Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -461,7 +461,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_nyala_sblm"
caption="Tgl Nyala Sebelum" caption="Tgl Nyala Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -469,7 +469,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_nyala_sdh"
caption="Tgl Nyala Koreksi" caption="Tgl Nyala Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -477,7 +477,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_selesai_sblm"
caption="Tgl Selesai Sebelum" caption="Tgl Selesai Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -485,7 +485,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_selesai_sdh"
caption="Tgl Selesai Koreksi" caption="Tgl Selesai Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -493,31 +493,31 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tgl_selesai_sdh"
caption="Durasi Respon Time Sebelum" caption="Durasi Respon Time Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatTime"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_response_time_sdh"
caption="Durasi Respon Time Koreksi" caption="Durasi Respon Time Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatTime"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="durasi_recovery_time_sdh"
caption="Durasi Recovery Time Koreksi" caption="Durasi Recovery Time Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatTime"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="kelompok_sblm"
caption="Kelompok ID Sebelum" caption="Kelompok ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -525,7 +525,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="kelompok_sdh"
caption="Kelompok ID Koreksi" caption="Kelompok ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -533,7 +533,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="sub_kelompok_sblm"
caption="Sub Kelompok ID Sebelum" caption="Sub Kelompok ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -541,7 +541,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="sub_kelompok_sdh"
caption="Sub Kelopok ID Koreksi" caption="Sub Kelopok ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -549,7 +549,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="fasilitas_id_sblm"
caption="Fasilitas ID Sebelum" caption="Fasilitas ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -557,7 +557,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="fasilitas_id_sdh"
caption="Fasilitas ID Koreksi" caption="Fasilitas ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -565,7 +565,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="sub_fasilitas_id_sblm"
caption="Sub Fasilitas ID Sebelum" caption="Sub Fasilitas ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -573,7 +573,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="sub_fasilitas_id_sdh"
caption="Sub Fasilitas ID Koreksi" caption="Sub Fasilitas ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -581,7 +581,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="equipment_id_sblm"
caption="Equipment ID Sebelum" caption="Equipment ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -589,7 +589,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="equipment_id_sdh"
caption="Equipment ID Koreksi" caption="Equipment ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -597,7 +597,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="event_damage_sblm"
caption="Event Damage ID Sebelum" caption="Event Damage ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -605,7 +605,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="event_damage_sdh"
caption="Event Damage ID Koreksi" caption="Event Damage ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -613,7 +613,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="cause_id_sblm"
caption="Cause ID Sebelum" caption="Cause ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -621,7 +621,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="cause_id_sdh"
caption="Cause ID Koreksi" caption="Cause ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -629,7 +629,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="cause_group_id_sblm"
caption="Cause Group ID Sebelum" caption="Cause Group ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -637,7 +637,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="cause_group_id_sdh"
caption="Cause Group ID Koreksi" caption="Cause Group ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -645,7 +645,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="weather_id_sblm"
caption="Weather ID Sebelum" caption="Weather ID Sebelum"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -653,7 +653,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="weather_id_sdh"
caption="Weather ID Koreksi" caption="Weather ID Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -661,7 +661,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="grup_koreksi"
caption="Group Koreksi" caption="Group Koreksi"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -669,7 +669,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="alasan"
caption="ALASAN" caption="ALASAN"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -677,7 +677,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="idpel_nometer"
caption="IDPEL/NO METER" caption="IDPEL/NO METER"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -685,7 +685,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -693,7 +693,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="nama_posko"
caption="Posko" caption="Posko"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -701,7 +701,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="tindakan"
caption="Tindakan" caption="Tindakan"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -709,7 +709,7 @@
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
data-field="" data-field="penyebab"
caption="Penyebab" caption="Penyebab"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatText" cell-template="formatText"
@ -739,222 +739,346 @@
<div class="p-4 space-y-2 bg-white rounded-xl"> <div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.tgl_lapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_lapor_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.tgl_lapor_sdh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_penugasan_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_penugasan_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Perjalanan Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Perjalanan Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_perjalanan_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Perjalanan Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Perjalanan Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_perjalanan_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_pengerjaan_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_pengerjaan_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_nyala_sementara_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_nyala_sementara_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_nyala_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.tgl_nyala_sdh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_selesai_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.tgl_selesai_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Respon Time Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Respon Time Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="
parseInt(dataSelected?.durasi_response_time_sblm)
? formatWaktu(dataSelected?.durasi_response_time_sblm)
: '-'
"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Respon Time Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Respon Time Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="
parseInt(dataSelected?.durasi_response_time_sdh)
? formatWaktu(dataSelected?.durasi_response_time_sdh)
: '-'
"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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 Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="
parseInt(dataSelected?.durasi_recovery_time_sdh)
? formatWaktu(dataSelected?.durasi_recovery_time_sdh)
: '-'
"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.kelompok_sblm" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.kelompok_sdh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Kelompok ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Kelompok ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.sub_kelompok_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Kelopok ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Kelopok ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.sub_kelompok_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.fasilitas_id_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.fasilitas_id_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.sub_fasilitas_id_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.sub_fasilitas_id_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Equipment ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Equipment ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.equipment_id_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Equipment ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Equipment ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.equipment_id_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Event Damage ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Event Damage ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.event_damage_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Event Damage ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Event Damage ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.event_damage_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Cause ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.cause_id_sblm" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Cause ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.cause_id_sdh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Cause Group ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause Group ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.cause_group_id_sblm" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Cause Group ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause Group ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.cause_group_id_sdh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Weather ID Sebelum:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Weather ID Sebelum:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.weather_id_sblm"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Weather ID Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Weather ID Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.weather_id_sdh"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Group Koreksi:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Group Koreksi:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.grup_koreksi" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">ALASAN:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">ALASAN:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.alasan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText
:readonly="true"
:value="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" value="" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div> </div>
</div> </div>
</div> </div>
@ -1022,21 +1146,17 @@ const getDetail = () => {
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
posko: ref?.id_posko ? ref?.id_posko : 0, posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0, idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0, idUp3: ref?.id_up3 ? ref?.id_up3 : 0
idRegu: ref?.id_regu ? ref?.id_regu : 0,
idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
media: ref?.media ? ref?.media : ''
} }
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail, queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail,
query query
) )
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan dataSub.value = queryResult.data.detailGangguanKoreksiTransaksiIndividu
} }
}) })
@ -1098,8 +1218,8 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@ -1131,7 +1251,6 @@ const filterData = (params: any) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
} }
console.log(queryResult.data)
}) })
onError((error) => { onError((error) => {

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

@ -983,15 +983,14 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSubSelected.value = selectedRowsData[0] dataSubSelected.value = selectedRowsData[0]
} }
console.log(data)
} }
const filterData = (params: any) => { const filterData = (params: any) => {
@ -1015,11 +1014,10 @@ const filterData = (params: any) => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerPosko.sort((a: any, b: any) => const result: any[] = [...queryResult.data.rekapitulasiGangguanPerPosko]
a.nama_up3 > b.nama_up3 ? 1 : -1 console.table(result)
) data.value = result.sort((a: any, b: any) => a?.nama_up3.localeCompare(b?.nama_up3))
} }
console.log(queryResult.data)
}) })
onError((error) => { onError((error) => {

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

@ -19,7 +19,7 @@
:show-borders="true" :show-borders="true"
:row-alternation-enabled="true" :row-alternation-enabled="true"
:hover-state-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @selection-changed="onDataSelectionChanged"
:column-width="100" :column-width="100"
@exporting="onExporting" @exporting="onExporting"
:allow-column-resizing="true" :allow-column-resizing="true"
@ -35,8 +35,7 @@
:show-indicator="showIndicator" :show-indicator="showIndicator"
:show-pane="showPane" :show-pane="showPane"
:shading="shading" :shading="shading"
v-if="loading" v-model:visible="loadingData"
v-model:visible="loading"
:enabled="true" :enabled="true"
/> />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -522,19 +521,352 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan Per Regu"
@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
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]"
:data-source="dataSub"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="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="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
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="dataSubSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div>
</div>
</div>
</DetailDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue' import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue' import { onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPager,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
@ -550,13 +882,82 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
const client = apolloClient()
provideApolloClient(client)
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataSub = ref<any[]>([])
const dataSelected = ref<any>()
const dataSubSelected = ref<any>()
const dialogDetail = ref(false)
const loadingData = ref(false)
const loadingSubData = ref(false)
const getDetail = () => {
loadingSubData.value = true
const dateValue = filters.value?.periode.split(' s/d ')
const ref = dataSelected.value
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: ref?.id_posko ? ref?.id_posko : 0,
idUid: ref?.id_uid ? ref?.id_uid : 0,
idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
idRegu: ref?.id_regu ? ref?.id_regu : 0,
idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
media: ref?.media ? ref?.media : ''
}
const { onResult, onError, loading, refetch } = useQuery(
queries.gangguan.rekap.gangguanAllDetail,
query
)
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dataSub.value = []
dataSubSelected.value = null
dialogDetail.value = true
getDetail()
}
const closeDialog = () => {
dialogDetail.value = false
}
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -585,28 +986,25 @@ const onExporting = (e: any) => {
e.cancel = true e.cancel = true
} }
} }
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
const dataGrid = dataGridRef.value!.instance! if (selectedRowsData[0] != undefined) {
dataGrid.clearSelection() dataSelected.value = selectedRowsData[0]
} showDetail()
const onSelectionChanged = ({ selectedRowsData }: any) => { }
const data = selectedRowsData[0]
clearSelection()
} }
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), if (selectedRowsData[0] != undefined) {
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), dataSubSelected.value = selectedRowsData[0]
posko: 0, }
idUid: 0, }
idUp3: 0
})
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
refetch({
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
@ -617,18 +1015,27 @@ const filterData = (params: any) => {
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerRegu data.value = queryResult.data.rekapitulasiGangguanPerRegu
} }
console.log(queryResult.data)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
watch(loading, (value) => {
loadingData.value = value
})
} }
const filters = ref({ const filters = ref({
uid: 0,
up3: 0,
posko: 0,
periode: '',
groupBy: false groupBy: false
}) })

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

@ -743,8 +743,8 @@ const onExporting = (e: any) => {
const onDataSelectionChanged = ({ selectedRowsData }: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@ -754,6 +754,7 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
} }
const filterData = (params: any) => { const filterData = (params: any) => {
loadingData.value = true
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
@ -776,15 +777,24 @@ const filterData = (params: any) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal data.value = queryResult.data.rekapitulasiGangguanPerTanggal
} }
console.log(queryResult.data)
if (queryResult.networkStatus == 7) {
loadingData.value = false
}
console.log('loading', queryResult.loading)
console.log('networkStatus', queryResult.networkStatus)
console.log('stale', queryResult.stale)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
// loadingData.value = false
}) })
loadingData.value = loading.value
watch(loading, (value) => { watch(loading, (value) => {
loadingData.value = value // loadingData.value = value
}) })
} }

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

@ -44,8 +44,8 @@
<DxColumn <DxColumn
:width="50" :width="50"
alignment="center" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" caption="NO"
data-field="number"
data-type="number" data-type="number"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
@ -447,7 +447,7 @@
</template> </template>
<template #formatRating="{ data }"> <template #formatRating="{ data }">
<p class="cursor-pointer"> <div class="flex justify-center cursor-pointer">
<vue3starRatings <vue3starRatings
v-model="data.text" v-model="data.text"
:starSize="20" :starSize="20"
@ -456,7 +456,7 @@
:numberOfStars="5" :numberOfStars="5"
:disableClick="true" :disableClick="true"
/> />
</p> </div>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -780,9 +780,16 @@ const filterData = (params: any) => {
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko const refs = [...queryResult.data.rekapitulasiGangguanRatingPerPosko].sort((a: any, b: any) =>
a.nama_up3.localeCompare(b.nama_up3)
)
data.value = refs.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} }
console.log(queryResult.data)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
@ -1201,6 +1208,13 @@ onMounted(() => {
persen_nonrating: 5.88235294117647 persen_nonrating: 5.88235294117647
} }
] ]
.sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} }
}) })
</script> </script>

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

@ -42,12 +42,21 @@
<DxColumn <DxColumn
:width="50" :width="50"
alignment="center" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" caption="NO"
data-field="number"
data-type="number" data-type="number"
css-class="custom-table-column" css-class="custom-table-column"
cell-template="formatNumber" cell-template="formatNumber"
/> />
<DxColumn
:width="150"
alignment="center"
data-field="nama_up3"
caption="UP3"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn <DxColumn
:width="150" :width="150"
alignment="center" alignment="center"
@ -438,7 +447,7 @@
</template> </template>
<template #formatRating="{ data }"> <template #formatRating="{ data }">
<p class="cursor-pointer"> <div class="flex justify-center cursor-pointer">
<vue3starRatings <vue3starRatings
v-model="data.text" v-model="data.text"
:starSize="20" :starSize="20"
@ -447,7 +456,7 @@
:numberOfStars="5" :numberOfStars="5"
:disableClick="true" :disableClick="true"
/> />
</p> </div>
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -765,7 +774,15 @@ const filterData = (params: any) => {
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu const refs = [...queryResult.data.rekapitulasiGangguanRatingPerRegu].sort((a: any, b: any) =>
a.nama_up3.localeCompare(b.nama_up3)
)
data.value = refs.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} }
console.log(queryResult.data) console.log(queryResult.data)
}) })
@ -1183,6 +1200,13 @@ onMounted(() => {
persen_nonrating: 0 persen_nonrating: 0
} }
] ]
.sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
.map((ref: any, index: number) => {
return {
...ref,
number: index + 1
}
})
} }
}) })
</script> </script>

2
src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
View File

@ -364,8 +364,8 @@ const showDetail = () => {
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) { if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0] dataSelected.value = selectedRowsData[0]
showDetail()
} }
showDetail()
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {

140
src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
View File

@ -19,7 +19,7 @@
@exporting="onExporting" @exporting="onExporting"
:allow-column-resizing="true" :allow-column-resizing="true"
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="true" :word-wrap-enabled="false"
> >
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
@ -194,9 +194,106 @@
</template> </template>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog
:open="dialogDetail"
title="Detail Daftar Keluhan Selesai di Contact Center"
@on-close="closeDialog"
>
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Contact Center:</h3>
<InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Induk Distribusi:</h3>
<InputText :readonly="true" :value="dataSelected?.nama_uid" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Unit Pelaksana Pelayanan Pelanggan:
</h3>
<InputText :readonly="true" :value="dataSelected?.nama_up3" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.alamat_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSelected?.keterangan_pelapor"
class-name="flex-1"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Create By:</h3>
<InputText :readonly="true" :value="dataSelected?.pembuat_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah Lapor Ulang:</h3>
<InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
</div>
</div>
</DetailDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue' import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
@ -218,12 +315,37 @@ import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { dummyData } from '@/utils/dummy' import { dummyData } from '@/utils/dummy'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import autoTable from 'jspdf-autotable' import autoTable from 'jspdf-autotable'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataSelected = ref<any>()
const dialogDetail = ref(false)
const closeDialog = () => {
dialogDetail.value = false
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
showDetail()
}
}
const onExporting = (e: any) => { const onExporting = (e: any) => {
const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : '' const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
@ -419,15 +541,6 @@ const onExporting = (e: any) => {
e.cancel = true e.cancel = true
} }
} }
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
clearSelection()
}
const data = ref<any[]>([]) const data = ref<any[]>([])
@ -438,7 +551,8 @@ const { onResult, onError, loading, refetch } = useQuery(
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0, idUlp: 0,
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0,
media: ''
} }
) )
const filters = ref() const filters = ref()
@ -462,7 +576,8 @@ const filterData = (params: any) => {
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
idUlp: ulp ? ulp.id : 0, idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0,
media: ''
}) })
onResult((queryResult) => { onResult((queryResult) => {
@ -471,7 +586,6 @@ const filterData = (params: any) => {
} }
reportMeta.value = filters.value reportMeta.value = filters.value
console.log(queryResult.data)
}) })
onError((error) => { onError((error) => {

211
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
View File

@ -1,50 +1,21 @@
<template> <template>
<Filters <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<!-- <DxColumn <!-- <DxColumn
@ -57,140 +28,57 @@
:group-index="0" :group-index="0"
name="namaUlp" name="namaUlp"
/> --> /> -->
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" cell-template="formatText" />
:min-width="170" <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah Dispatching Time Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
<DxTotalItem :customize-text="(e: any) => formatPercentage(e.value)" />
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -231,6 +119,8 @@ import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -283,6 +173,9 @@ const { onResult, onError, loading, refetch } = useQuery(
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

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

@ -1,127 +1,55 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
alignment="center" cell-template="formatText" />
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="ENS Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -132,55 +60,21 @@
</template> </template>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
column="yoy_tahun_ini" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatPercentage(e.value)" />
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -212,7 +106,8 @@ import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts' import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -237,6 +132,8 @@ const { onResult, onError, loading, refetch } = useQuery(
) )
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

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

@ -1,95 +1,40 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
alignment="center" cell-template="formatText" />
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 alignment="center" caption="Tahun" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="jumlah_gangguan" data-type="number" caption="Gangguan"
:width="150" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="jumlah_informasi" data-type="number" caption="Informasi"
data-field="jumlah_gangguan" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
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> </DxColumn>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -100,228 +45,67 @@
</template> </template>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="jumlah_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
show-in-column="nama_ulp" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="jumlah_informasi" summary-type="sum" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
column="jumlah_gangguan" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="jumlah_informasi"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog <DetailDialog :open="dialogDetail" title="Detail Gangguan Belum Selesai" @on-close="closeDialog" :full-width="true">
:open="dialogDetail"
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="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
:allow-column-reordering="true" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
class="max-h-[calc(100vh-140px)]" :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
:data-source="dataSub" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
: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" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:visible="true" :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
:allowed-page-sizes="[20, 50, 100]" <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
display-mode="full" :show-pane="showPane" :shading="shading" v-model:visible="loadingSubData" :enabled="true" />
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
:width="50" cell-template="formatNumber" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" cell-template="formatText" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" css-class="custom-table-column"
caption="No" cell-template="formatText" />
cell-template="formatNumber" <DxColumn :width="150" alignment="center" data-field="" caption="UP3" :allow-resizing="false"
/> css-class="custom-table-column" cell-template="formatText" />
<DxColumn <DxColumn :width="150" alignment="center" data-field="" caption="ULP" :allow-resizing="false"
:width="150" css-class="custom-table-column" cell-template="formatText" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" caption="ID Pelanggan" :allow-resizing="false"
data-field="" css-class="custom-table-column" cell-template="formatText" />
caption="No Laporan" <DxColumn :width="200" alignment="center" data-field="" caption="Nama Pelapor" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column" cell-template="formatText" />
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 <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" :allow-resizing="false"
:width="150" css-class="custom-table-column" cell-template="formatText" />
alignment="center" <DxColumn :width="200" alignment="center" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
data-field="" css-class="custom-table-column" cell-template="formatText" />
caption="UID/UIW" <DxColumn :width="200" alignment="center" data-field="" caption="Penyebab" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column" cell-template="formatText" />
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 <DxColumn :width="200" alignment="center" data-field="" caption="Jenis Gangguan" :allow-resizing="false"
:width="150" css-class="custom-table-column" cell-template="formatText" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Response Time" :allow-resizing="false"
data-field="" css-class="custom-table-column" cell-template="formatTime" />
caption="UP3" <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Recoery Time:" :allow-resizing="false"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" :allow-resizing="false"
cell-template="formatText" 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 }"> <template #formatText="{ data }">
<p class="text-left cursor-pointer"> <p class="text-left cursor-pointer">
@ -459,7 +243,6 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)

299
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
View File

@ -1,89 +1,31 @@
<template> <template>
<Filters <Filters :report-button="true" @reset-form="data = []" @run-search="filterData(filters)" class="mb-4">
:report-button="true"
@reset-form="data = []"
@run-search="filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible.sync="loading" :enabled="true" />
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible.sync="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" name="namaULP" cell-template="formatText" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
data-type="text" css-class="custom-table-column" :group-index="0" />
data-field="nama_ulp" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="UID"
caption="Nama Unit" css-class="custom-table-column" :group-index="1" />
css-class="custom-table-column" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="UP3"
name="namaULP" css-class="custom-table-column" :group-index="2" />
cell-template="formatText"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="2"
/>
<!-- <DxColumn <!-- <DxColumn
alignment="center" alignment="center"
:min-width="170" :min-width="170"
@ -95,174 +37,66 @@
/> --> /> -->
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxGroupItem <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_kemarin" <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
css-class="!text-right" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
/> css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_ini" <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="namaULP"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="namaULP" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
<DxTotalItem :customize-text="(e: any) => formatPercentage(e.value)" />
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -338,7 +172,8 @@ const onExporting = (e: any) => {
e.cancel = true e.cancel = true
} }
} }
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -357,6 +192,8 @@ const { onResult, onError, loading, refetch } = useQuery(
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

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

@ -1,137 +1,59 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping :context-menu-enabled="true" expand-mode="rowClick" /> <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
alignment="center" cell-template="formatText" />
data-field="nama_ulp" <DxColumn alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
caption="Nama Unit" cell-template="formatText" :group-index="0" />
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -142,110 +64,39 @@
</template> </template>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
column="yoy_tahun_ini" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatPercentage(e.value)" />
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
:show-in-group-footer="false" show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right" />
:align-by-column="true" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
summary-type="sum" show-in-column="mom_bulan_ini" column="mom_bulan_ini" css-class="!text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="mom_bulan_kemarin" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
column="mom_bulan_kemarin" show-in-column="persen_mom" column="persen_mom" css-class="!text-right"
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
/> <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
<DxGroupItem show-in-column="yoy_tahun_kemarin" column="yoy_tahun_kemarin" css-class="!text-right"
:show-in-group-footer="false" :customize-text="(e: any) => formatNumber(e.value)" />
:align-by-column="true" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
summary-type="sum" show-in-column="yoy_tahun_ini" column="yoy_tahun_ini" css-class="!text-right"
show-in-column="mom_bulan_ini" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_ini" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
css-class="!text-right" show-in-column="persen_yoy" column="persen_yoy" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatPercentage(e.value)" />
/>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
</DxSummary> </DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -279,7 +130,8 @@ import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts' import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -303,6 +155,8 @@ const { onResult, onError, loading, refetch } = useQuery(
) )
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

211
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
View File

@ -1,50 +1,21 @@
<template> <template>
<Filters <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<!-- <DxColumn <!-- <DxColumn
@ -57,140 +28,57 @@
:group-index="0" :group-index="0"
name="namaUlp" name="namaUlp"
/> --> /> -->
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" cell-template="formatText" />
:min-width="170" <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah RCT Kali Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
<DxTotalItem :customize-text="(e: any) => formatPercentage(e.value)" />
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -230,7 +118,8 @@ import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts' import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -254,6 +143,8 @@ const { onResult, onError, loading, refetch } = useQuery(
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

211
src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
View File

@ -1,50 +1,21 @@
<template> <template>
<Filters <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<!-- <DxColumn <!-- <DxColumn
@ -57,140 +28,57 @@
:group-index="0" :group-index="0"
name="namaUlp" name="namaUlp"
/> --> /> -->
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" cell-template="formatText" />
:min-width="170" <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah RPT Kali Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
<DxTotalItem :customize-text="(e: any) => formatPercentage(e.value)" />
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -230,7 +118,8 @@ import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts' import { getMonthName } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -254,6 +143,8 @@ const { onResult, onError, loading, refetch } = useQuery(
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

288
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
View File

@ -1,250 +1,91 @@
<template> <template>
<Filters <Filters @run-search="() => filterData(filters)" :report-button="true" @reset-form="data = []" class="mb-4">
@run-search="() => filterData(filters)"
:report-button="true"
@reset-form="data = []"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
alignment="center" css-class="custom-table-column" name="namaULP" cell-template="formatText" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-type="text" css-class="custom-table-column" :group-index="0" />
data-field="nama_ulp" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
caption="Nama Unit" css-class="custom-table-column" :group-index="1" />
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxGroupItem <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_kemarin" <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
css-class="!text-right" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
/> css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_ini" <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="namaULP"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="namaULP" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
<DxTotalItem :customize-text="(e: any) => formatPercentage(e.value)" />
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -291,6 +132,8 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -337,7 +180,8 @@ const { onResult, onError, loading, refetch } = useQuery(
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

284
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
View File

@ -1,244 +1,95 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
alignment="center" cell-template="formatText" />
data-field="nama_ulp" <DxColumn alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
caption="Nama Unit" cell-template="formatText" :group-index="0" />
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
cell-template="formatText"
:group-index="0"
/>
<DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
column="mom_bulan_kemarin" :customize-text="(e: any) => formatPercentage(e.value)" />
summary-type="sum" <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
column="yoy_tahun_ini" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatPercentage(e.value)" />
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
:show-in-group-footer="false" show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right" />
:align-by-column="true" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
summary-type="sum" show-in-column="mom_bulan_ini" column="mom_bulan_ini" css-class="!text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="mom_bulan_kemarin" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
column="mom_bulan_kemarin" show-in-column="persen_mom" column="persen_mom" css-class="!text-right"
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
/> <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
<DxGroupItem show-in-column="yoy_tahun_kemarin" column="yoy_tahun_kemarin" css-class="!text-right"
:show-in-group-footer="false" :customize-text="(e: any) => formatNumber(e.value)" />
:align-by-column="true" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
summary-type="sum" show-in-column="yoy_tahun_ini" column="yoy_tahun_ini" css-class="!text-right"
show-in-column="mom_bulan_ini" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_ini" <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
css-class="!text-right" show-in-column="persen_yoy" column="persen_yoy" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatPercentage(e.value)" />
/>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -284,6 +135,8 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -370,7 +223,8 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

311
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
View File

@ -1,269 +1,93 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-type="text" css-class="custom-table-column" :group-index="1" />
data-field="nama_regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
caption="Nama Regional" css-class="custom-table-column" :group-index="2" />
css-class="custom-table-column" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
:group-index="0" css-class="custom-table-column" name="namaULP" cell-template="formatText" />
/> <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah RCT Kali Keluhan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxGroupItem <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_kemarin" <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
css-class="!text-right" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
/> css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_ini" <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="RATA-RATA" show-in-column="namaULP"
summary-type="sum" css-class="text-white !text-left" />
display-format="RATA-RATA" <DxTotalItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="namaULP" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
:align-by-column="true" css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
column="mom_bulan_kemarin" <DxTotalItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
summary-type="sum" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxTotalItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxTotalItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxTotalItem
:align-by-column="true"
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -310,6 +134,8 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -357,7 +183,8 @@ const { onResult, onError, loading, refetch } = useQuery(
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

311
src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
View File

@ -1,269 +1,93 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-type="text" css-class="custom-table-column" :group-index="1" />
data-field="nama_regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
caption="Nama Regional" css-class="custom-table-column" :group-index="2" />
css-class="custom-table-column" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
:group-index="0" css-class="custom-table-column" name="namaULP" cell-template="formatText" />
/> <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Jumlah RPT Kali Keluhan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
:width="150" :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="mom_bulan_kemarin" <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
data-type="number" :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
cell-template="formatNumber" 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>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
:width="150" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="yoy_tahun_kemarin" <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
data-type="number" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" cell-template="formatNumber" />
css-class="custom-table-column" <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
cell-template="formatNumber" 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>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxGroupItem <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_kemarin" <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
css-class="!text-right" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
/> css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
:align-by-column="true" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="mom_bulan_ini" <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:align-by-column="true"
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="RATA-RATA" show-in-column="namaULP"
summary-type="sum" css-class="text-white !text-left" />
display-format="RATA-RATA" <DxTotalItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
show-in-column="namaULP" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
:align-by-column="true" css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
column="mom_bulan_kemarin" <DxTotalItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
summary-type="sum" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxTotalItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxTotalItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxTotalItem
:align-by-column="true"
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="persen_mom"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
:align-by-column="true"
column="persen_yoy"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right"> <p class="text-right">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -310,6 +134,8 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
const currentYear = ref(new Date().getFullYear()) const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth()) const currentMonth = ref(new Date().getMonth())
const lastYear = ref(currentYear.value - 1) const lastYear = ref(currentYear.value - 1)
@ -388,7 +214,8 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, ulp, uid, up3, bulan, tahun } = params const { regional, ulp, uid, up3, bulan, tahun } = params
lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
currentMonth.value = bulan.id currentMonth.value = bulan.id
currentYear.value = tahun.id currentYear.value = tahun.id
lastYear.value = tahun.id - 1 lastYear.value = tahun.id - 1

624
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
View File

@ -1,320 +1,114 @@
<template> <template>
<Filters <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
<DxColumn css-class="custom-table-column">
alignment="center" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
:min-width="170" caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
data-type="text" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-field="nama_regional" css-class="custom-table-column" :group-index="1" />
caption="Nama Regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
css-class="custom-table-column" css-class="custom-table-column" :group-index="2" />
:group-index="0" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="na ma_ulp" caption="Nama Unit"
/> css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
caption="Rata-Rata RCT Gangguan" :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`" css-class="custom-table-column"
css-class="custom-table-column" cell-template="formatNumber" />
> <DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
<DxColumn css-class="custom-table-column" cell-template="formatNumber" />
:width="150"
alignment="center"
data-field="avg_durasi_recovery_gangguan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="sla_gangguan"
data-type="number"
caption="SLA (Menit)"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
caption="Rata-Rata RCT Keluhan" :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`" css-class="custom-table-column"
css-class="custom-table-column" cell-template="formatNumber" />
> <DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
<DxColumn css-class="custom-table-column" cell-template="formatNumber" />
:width="150"
alignment="center"
data-field="avg_durasi_recovery_keluhan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="sla_keluhan"
data-type="number"
caption="SLA (Jam)"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="aging_complaint_gangguan" data-type="number" caption="G"
:width="150" css-class="custom-table-column" cell-template="formatPercentage" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
data-field="aging_complaint_gangguan" css-class="custom-table-column" cell-template="formatPercentage" />
data-type="number"
caption="G"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn
:width="150"
alignment="center"
data-field="aging_complaint_keluhan"
data-type="number"
caption="K"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
:min-width="170" caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="formatPercentage" />
alignment="center"
data-field="avg_aging_complaint"
data-type="number"
caption="% Rata-Rata Aging Complains"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="RATA-RATA NASIONAL" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="RATA-RATA NASIONAL" <DxTotalItem column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="sla_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
column="avg_durasi_recovery_gangguan" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="sla_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
/> " />
<DxTotalItem <DxTotalItem column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
column="sla_gangguan" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
summary-type="sum" " />
display-format="{0}" <DxTotalItem column="avg_aging_complaint" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
:customize-text="(e: any) => formatNumber(e.value)" " />
/>
<DxTotalItem
column="avg_durasi_recovery_keluhan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="sla_keluhan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="aging_complaint_gangguan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="aging_complaint_keluhan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="avg_aging_complaint"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_gangguan" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
show-in-column="avg_durasi_recovery_gangguan" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="sla_gangguan" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true" column="sla_gangguan" summary-type="sum" display-format="{0}"
column="avg_durasi_recovery_gangguan" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_keluhan" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="sla_keluhan" :show-in-group-footer="false"
<DxGroupItem :align-by-column="true" column="sla_keluhan" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="sla_gangguan" <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_gangguan" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
:align-by-column="true" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
column="sla_gangguan" " />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_keluhan" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
/> " />
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="avg_aging_complaint" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="avg_aging_complaint" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
show-in-column="avg_durasi_recovery_keluhan" " />
:show-in-group-footer="false"
:align-by-column="true"
column="avg_durasi_recovery_keluhan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="sla_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="sla_keluhan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="aging_complaint_gangguan"
:show-in-group-footer="false"
:align-by-column="true"
column="aging_complaint_gangguan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="aging_complaint_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="aging_complaint_keluhan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="avg_aging_complaint"
:show-in-group-footer="false"
:align-by-column="true"
column="avg_aging_complaint"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -332,212 +126,68 @@
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog <DetailDialog :open="dialogDetail" title="Detail (Monalisa) Aging Complaint" @on-close="closedialogDetail"
:open="dialogDetail" :full-width="true">
title="Detail (Monalisa) Aging Complaint"
@on-close="closedialogDetail"
:full-width="true"
>
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
:allow-column-reordering="true" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
class="max-h-[calc(100vh-140px)]" :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
:data-source="dataSub" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
: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" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:visible="true" :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
:allowed-page-sizes="[20, 50, 100]" <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
display-mode="full" :show-pane="showPane" :shading="shading" v-model:visible="loadingSubData" :enabled="true" />
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-model:visible="loadingSubData"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn <DxColumn css-class="custom-table-column" :width="50" alignment="center"
css-class="custom-table-column" :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
:width="50" cell-template="formatNumber" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" :allow-resizing="false"
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" css-class="custom-table-column" cell-template="formatText" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" :allow-resizing="false"
caption="No" css-class="custom-table-column" cell-template="formatText" />
cell-template="formatNumber" <DxColumn :width="150" alignment="center" data-field="" caption="UP3" :allow-resizing="false"
/> css-class="custom-table-column" cell-template="formatText" />
<DxColumn <DxColumn :width="150" alignment="center" data-field="" caption="ULP" :allow-resizing="false"
:width="150" css-class="custom-table-column" cell-template="formatText" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" caption="ID Pelanggan" :allow-resizing="false"
data-field="no_laporan" css-class="custom-table-column" cell-template="formatNumber" />
caption="No Laporan" <DxColumn :width="150" data-field="" caption="Nama Pelanggan" :allow-resizing="false"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
css-class="custom-table-column" <DxColumn :width="150" data-field="" caption="Nama Pelapor" :allow-resizing="false"
cell-template="formatText" css-class="custom-table-column" cell-template="formatText" />
/> <DxColumn :width="150" data-field="" caption="Alamat Pelapor" :allow-resizing="false"
<DxColumn css-class="custom-table-column" cell-template="formatText" />
:width="150" <DxColumn :width="150" data-field="" caption="No Telp Pelapor" :allow-resizing="false"
alignment="center" css-class="custom-table-column" cell-template="formatText" />
data-field="" <DxColumn :width="150" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
caption="UID/UIW" css-class="custom-table-column" cell-template="formatText" />
:allow-resizing="false" <DxColumn :width="150" data-field="" caption="Penyebab" :allow-resizing="false"
css-class="custom-table-column" css-class="custom-table-column" cell-template="formatText" />
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 <DxColumn :width="150" alignment="center" data-field="" caption="Jenis Gangguan" :allow-resizing="false"
:width="150" css-class="custom-table-column" cell-template="formatText" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Response Time" :allow-resizing="false"
data-field="" css-class="custom-table-column" cell-template="formatText" />
caption="UP3" <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Recovery Time" :allow-resizing="false"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" :allow-resizing="false"
cell-template="formatText" 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="formatNumber"
/>
<DxColumn
:width="150"
data-field=""
caption="Nama Pelanggan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
data-field=""
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
data-field=""
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
data-field=""
caption="No Telp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
data-field=""
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
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="150"
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="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Tgl Lapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -667,7 +317,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { getMonthName } from '@/utils/texts' import { getMonthName, getMonthNameShort } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'

278
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
View File

@ -1,243 +1,87 @@
<template> <template>
<Filters <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
<DxColumn css-class="custom-table-column">
alignment="center" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
:min-width="170" caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
data-type="text" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-field="nama_regional" css-class="custom-table-column" :group-index="1" />
caption="Nama Regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
css-class="custom-table-column" css-class="custom-table-column" :group-index="2" />
:group-index="0" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
/> css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column"> <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
:width="150" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
data-field="terencana" caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
caption="Terencana" css-class="custom-table-column" cell-template="formatNumber" />
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tidak_terencana"
data-type="number"
caption="Tidak Terencana"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="bencana_alam"
data-type="number"
caption="Bencana Alam"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
:width="170" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
data-field="total" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:min-width="170"
alignment="center"
data-field="kpi_ens"
data-type="number"
caption="KPI ENS"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
show-in-column="nama_ulp" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
column="terencana" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/>
<DxTotalItem
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="bencana_alam"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="kpi_ens"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
show-in-column="terencana" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
column="terencana" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
<DxGroupItem :align-by-column="true" column="total" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="tidak_terencana" <DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
:align-by-column="true" :customize-text="(e: any) => formatNumber(e.value)" />
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="bencana_alam"
:show-in-group-footer="false"
:align-by-column="true"
column="bencana_alam"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total"
:show-in-group-footer="false"
:align-by-column="true"
column="total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="kpi_ens"
:show-in-group-footer="false"
:align-by-column="true"
column="kpi_ens"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>

292
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
View File

@ -1,253 +1,91 @@
<template> <template>
<Filters <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-type="text" css-class="custom-table-column" :group-index="1" />
data-field="nama_regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
caption="Nama Regional" css-class="custom-table-column" :group-index="2" />
css-class="custom-table-column" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
:group-index="0" css-class="custom-table-column" name="namaULP" cell-template="formatText" />
/> <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Kepatuhan dan Akurasi APKT"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
:width="150" :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="gangguan_berulang" <DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
data-type="number" caption="Total Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
caption="Jan 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="gangguan_total"
data-type="number"
caption="Total Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
:width="150" :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="keluhan_berulang" <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
data-type="number" caption="Total Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
caption="Jan 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="keluhan_total"
data-type="number"
caption="Total Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
:min-width="150" caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
alignment="center"
data-field="komplain_pelanggan"
data-type="number"
caption="Komplain Pelanggan %"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="gangguan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="keluhan_berulang" summary-type="sum" display-format="{0}"
column="gangguan_berulang" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="keluhan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="komplain_pelanggan" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
/> " />
<DxTotalItem
column="gangguan_total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="keluhan_berulang"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="keluhan_total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="komplain_pelanggan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
show-in-column="gangguan_berulang" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true" column="gangguan_total" summary-type="sum" display-format="{0}"
column="gangguan_berulang" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="keluhan_berulang" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="keluhan_berulang" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="keluhan_total" :show-in-group-footer="false"
<DxGroupItem :align-by-column="true" column="keluhan_total" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="gangguan_total" <DxGroupItem css-class="!text-right" show-in-column="komplain_pelanggan" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="komplain_pelanggan" summary-type="sum" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
:align-by-column="true" " />
column="gangguan_total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="keluhan_berulang"
:show-in-group-footer="false"
:align-by-column="true"
column="keluhan_berulang"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="keluhan_total"
:show-in-group-footer="false"
:align-by-column="true"
column="keluhan_total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="komplain_pelanggan"
:show-in-group-footer="false"
:align-by-column="true"
column="komplain_pelanggan"
summary-type="sum"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -292,7 +130,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { getMonthName } from '@/utils/texts' import { getMonthNameShort } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const position = { of: '#data' } const position = { of: '#data' }
@ -388,7 +226,7 @@ const filterData = (params: any) => {
onMounted(() => { onMounted(() => {
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
getMonthName(filters.value.bulan.id) getMonthNameShort(filters.value.bulan.id)
data.value = [ data.value = [
{ {

8
src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
View File

@ -87,7 +87,7 @@
<DxColumn <DxColumn
alignment="center" alignment="center"
:caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`" :caption="`${getMonthNameShort(currentMonth)} ${lastYear}`"
css-class="custom-table-column" css-class="custom-table-column"
> >
<DxColumn <DxColumn
@ -150,7 +150,7 @@
<DxColumn <DxColumn
alignment="center" alignment="center"
:caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`" :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`"
css-class="custom-table-column" css-class="custom-table-column"
> >
<DxColumn <DxColumn
@ -988,7 +988,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { getMonthName } from '@/utils/texts' import { getMonthNameShort } from '@/utils/texts'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@ -1136,7 +1136,7 @@ const filterData = (params: any) => {
onMounted(() => { onMounted(() => {
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
getMonthName(filters.value.bulan.id) getMonthNameShort(filters.value.bulan.id)
data.value = [ data.value = [
{ {

377
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
View File

@ -1,321 +1,114 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
<DxColumn css-class="custom-table-column">
alignment="center" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
:min-width="170" caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
data-type="text" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-field="nama_regional" css-class="custom-table-column" :group-index="1" />
caption="Nama Regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
css-class="custom-table-column" css-class="custom-table-column" :group-index="2" />
:group-index="0" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
/> css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
caption="Rata-Rata RCT Gangguan" :caption="`Periode: ${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
css-class="custom-table-column" cell-template="formatNumber" />
> <DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
<DxColumn css-class="custom-table-column" cell-template="formatNumber" />
:width="150"
alignment="center"
data-field="avg_durasi_recovery_gangguan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="sla_gangguan"
data-type="number"
caption="SLA (Menit)"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
caption="Rata-Rata RCT Keluhan" :caption="`Periode: ${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
css-class="custom-table-column" cell-template="formatNumber" />
> <DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
<DxColumn css-class="custom-table-column" cell-template="formatNumber" />
:width="150"
alignment="center"
data-field="avg_durasi_recovery_keluhan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="sla_keluhan"
data-type="number"
caption="SLA (Jam)"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="aging_complaint_gangguan" data-type="number" caption="G"
:width="150" css-class="custom-table-column" cell-template="formatPercentage" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
data-field="aging_complaint_gangguan" css-class="custom-table-column" cell-template="formatPercentage" />
data-type="number"
caption="G"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn
:width="150"
alignment="center"
data-field="aging_complaint_keluhan"
data-type="number"
caption="K"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
:min-width="170" caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="formatPercentage" />
alignment="center"
data-field="avg_aging_complaint"
data-type="number"
caption="% Rata-Rata Aging Complains"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="RATA-RATA NASIONAL" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="RATA-RATA NASIONAL" <DxTotalItem column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="sla_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
column="avg_durasi_recovery_gangguan" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="sla_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
/> " />
<DxTotalItem <DxTotalItem column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
column="sla_gangguan" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
summary-type="sum" " />
display-format="{0}" <DxTotalItem column="avg_aging_complaint" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
:customize-text="(e: any) => formatNumber(e.value)" " />
/>
<DxTotalItem
column="avg_durasi_recovery_keluhan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="sla_keluhan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="aging_complaint_gangguan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="aging_complaint_keluhan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="avg_aging_complaint"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_gangguan" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
show-in-column="avg_durasi_recovery_gangguan" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="sla_gangguan" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true" column="sla_gangguan" summary-type="sum" display-format="{0}"
column="avg_durasi_recovery_gangguan" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_keluhan" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="sla_keluhan" :show-in-group-footer="false"
<DxGroupItem :align-by-column="true" column="sla_keluhan" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="sla_gangguan" <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_gangguan" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
:align-by-column="true" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
column="sla_gangguan" " />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_keluhan" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
/> " />
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="avg_aging_complaint" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="avg_aging_complaint" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
show-in-column="avg_durasi_recovery_keluhan" " />
:show-in-group-footer="false"
:align-by-column="true"
column="avg_durasi_recovery_keluhan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="sla_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="sla_keluhan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="aging_complaint_gangguan"
:show-in-group-footer="false"
:align-by-column="true"
column="aging_complaint_gangguan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="aging_complaint_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="aging_complaint_keluhan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="avg_aging_complaint"
:show-in-group-footer="false"
:align-by-column="true"
column="avg_aging_complaint"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -360,7 +153,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { getMonthName } from '@/utils/texts' import { getMonthName, getMonthNameShort } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const position = { of: '#data' } const position = { of: '#data' }

278
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
View File

@ -1,243 +1,87 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
<DxColumn css-class="custom-table-column">
alignment="center" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
:min-width="170" caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
data-type="text" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-field="nama_regional" css-class="custom-table-column" :group-index="1" />
caption="Nama Regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
css-class="custom-table-column" css-class="custom-table-column" :group-index="2" />
:group-index="0" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
/> css-class="custom-table-column" name="namaULP" cell-template="formatText" />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column"> <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
:width="150" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
data-field="terencana" caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
caption="Terencana" css-class="custom-table-column" cell-template="formatNumber" />
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tidak_terencana"
data-type="number"
caption="Tidak Terencana"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="bencana_alam"
data-type="number"
caption="Bencana Alam"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
:width="170" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
data-field="total" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:min-width="170"
alignment="center"
data-field="kpi_ens"
data-type="number"
caption="KPI ENS"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
show-in-column="nama_ulp" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
column="terencana" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/>
<DxTotalItem
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="bencana_alam"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="kpi_ens"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
show-in-column="terencana" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
column="terencana" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
<DxGroupItem :align-by-column="true" column="total" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="tidak_terencana" <DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
:align-by-column="true" :customize-text="(e: any) => formatNumber(e.value)" />
column="tidak_terencana"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="bencana_alam"
:show-in-group-footer="false"
:align-by-column="true"
column="bencana_alam"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total"
:show-in-group-footer="false"
:align-by-column="true"
column="total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="kpi_ens"
:show-in-group-footer="false"
:align-by-column="true"
column="kpi_ens"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>

292
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
View File

@ -1,253 +1,91 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
: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"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-type="text" css-class="custom-table-column" :group-index="1" />
data-field="nama_regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
caption="Nama Regional" css-class="custom-table-column" :group-index="2" />
css-class="custom-table-column" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
:group-index="0" css-class="custom-table-column" name="namaULP" cell-template="formatText" />
/> <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn
alignment="center"
caption="Kepatuhan dan Akurasi APKT"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
:width="150" :caption="`s.d ${getMonthNameShort(currentMonth)} ${lastYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="gangguan_berulang" <DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
data-type="number" caption="Total Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
caption="Jan 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="gangguan_total"
data-type="number"
caption="Total Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
:width="150" :caption="` s.d ${getMonthNameShort(currentMonth)} ${currentYear}`" css-class="custom-table-column"
alignment="center" cell-template="formatNumber" />
data-field="keluhan_berulang" <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
data-type="number" caption="Total Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
caption="Jan 2020"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="keluhan_total"
data-type="number"
caption="Total Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
:min-width="150" caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
alignment="center"
data-field="komplain_pelanggan"
data-type="number"
caption="Komplain Pelanggan %"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="gangguan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
/> :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="keluhan_berulang" summary-type="sum" display-format="{0}"
column="gangguan_berulang" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="keluhan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="komplain_pelanggan" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
/> " />
<DxTotalItem
column="gangguan_total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="keluhan_berulang"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="keluhan_total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="komplain_pelanggan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
show-in-column="gangguan_berulang" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true" column="gangguan_total" summary-type="sum" display-format="{0}"
column="gangguan_berulang" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="keluhan_berulang" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="keluhan_berulang" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="keluhan_total" :show-in-group-footer="false"
<DxGroupItem :align-by-column="true" column="keluhan_total" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="gangguan_total" <DxGroupItem css-class="!text-right" show-in-column="komplain_pelanggan" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="komplain_pelanggan" summary-type="sum" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
:align-by-column="true" " />
column="gangguan_total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="keluhan_berulang"
:show-in-group-footer="false"
:align-by-column="true"
column="keluhan_berulang"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="keluhan_total"
:show-in-group-footer="false"
:align-by-column="true"
column="keluhan_total"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="komplain_pelanggan"
:show-in-group-footer="false"
:align-by-column="true"
column="komplain_pelanggan"
summary-type="sum"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>
@ -292,7 +130,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import { queries } from '@/utils/api/api.graphql' import { queries } from '@/utils/api/api.graphql'
import { getMonthName } from '@/utils/texts' import { getMonthNameShort } from '@/utils/texts'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
const position = { of: '#data' } const position = { of: '#data' }
@ -385,7 +223,7 @@ const filterData = (params: any) => {
onMounted(() => { onMounted(() => {
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
getMonthName(filters.value.bulan.id) getMonthNameShort(filters.value.bulan.id)
data.value = [ data.value = [
{ {

841
src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
View File

@ -1,700 +1,223 @@
<template> <template>
<Filters <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Type2 @update:filters="(value) => (filters = value)" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
ref="dataGridRef" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:allow-column-reordering="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
class="max-h-[calc(100vh-140px)] mb-10" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:data-source="data" :word-wrap-enabled="true">
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxGrouping expand-mode="rowClick" /> <DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
shading-color="rgba(0,0,0,0.4)" :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
: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" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
alignment="center" css-class="custom-table-column" :group-index="0" />
:min-width="170" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
data-type="text" css-class="custom-table-column" :group-index="1" />
data-field="nama_regional" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
caption="Nama Regional" css-class="custom-table-column" :group-index="2" />
css-class="custom-table-column" <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
:group-index="0" css-class="custom-table-column" name="namaULP" cell-template="formatText" />
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
name="namaULP"
cell-template="formatText"
/>
<DxColumn <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
alignment="center" css-class="custom-table-column">
:caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`" <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
css-class="custom-table-column" caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
> <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
<DxColumn caption="Gangguan" css-class="custom-table-column" />
:width="120"
alignment="center"
data-field="total_keluhan_tahun_sebelumnya"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
name="keluhanBulanLalu"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_tahun_sebelumnya"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
:width="120" data-type="number" caption="Keluhan" css-class="custom-table-column" />
alignment="center" <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
data-field="total_keluhan_informasi_tahun_sebelumnya" data-type="number" caption="Gangguan" css-class="custom-table-column" />
data-type="number" <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
caption="Keluhan" caption="Total" css-class="custom-table-column" />
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_informasi_tahun_sebelumnya"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_informasi_tahun_sebelumnya"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
alignment="center" data-field="total_tahun_sebelumnya" data-type="number" />
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_tahun_sebelumnya"
data-type="number"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
alignment="center" css-class="custom-table-column">
:caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`" <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
css-class="custom-table-column" caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" cell-template="formatNumber" />
> <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
<DxColumn caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
:width="120"
alignment="center"
data-field="total_keluhan_tahun_sebelumnya"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
name="keluhanBulanLalu"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_tahun_sebelumnya"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
:width="120" data-type="number" caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
data-field="total_keluhan_informasi_tahun_sebelumnya" data-type="number" caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number" <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
caption="Keluhan" caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_informasi_tahun_sebelumnya"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_informasi_tahun_sebelumnya"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
alignment="center" data-field="total_tahun_sebelumnya" data-type="number" cell-template="formatNumber" />
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_tahun_sebelumnya"
data-type="number"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
alignment="center" css-class="custom-table-column">
:caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`" <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
css-class="custom-table-column" caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
> <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_ini" data-type="number"
<DxColumn caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
:width="120"
alignment="center"
data-field="total_keluhan_tahun_ini"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_tahun_ini"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
:width="120" caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
data-field="total_keluhan_informasi_tahun_ini" caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number" <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
caption="Keluhan" caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_gangguan_informasi_tahun_ini"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_informasi_tahun_ini"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
alignment="center" data-field="total_tahun_ini" data-type="number" cell-template="formatNumber" />
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_tahun_ini"
data-type="number"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
:width="150" css-class="custom-table-column" cell-template="formatNumber" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
data-field="delta_keluhan" css-class="custom-table-column" cell-template="formatNumber" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
cell-template="formatNumber"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
:width="150" css-class="custom-table-column" cell-template="formatPercentage" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
data-field="persen_delta_keluhan" caption="Gangguan" css-class="custom-table-column" cell-template="formatPercentage" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
caption="Keluhan" caption="Informasi" css-class="custom-table-column" cell-template="formatPercentage" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
cell-template="formatPercentage" css-class="custom-table-column" cell-template="formatPercentage" />
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_delta_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_delta_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_delta_total"
data-type="number"
caption="% Total"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
</DxColumn> </DxColumn>
<DxSummary> <DxSummary>
<DxTotalItem <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
summary-type="sum" css-class="text-white !text-left" />
display-format="Total" <DxTotalItem column="total_keluhan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
show-in-column="nama_ulp" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-left" <DxTotalItem column="total_gangguan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="total_keluhan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
column="total_keluhan_tahun_sebelumnya" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="total_gangguan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="total_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxTotalItem column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
<DxTotalItem css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
column="total_gangguan_tahun_sebelumnya" <DxTotalItem column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
summary-type="sum" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxTotalItem column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxTotalItem column="total_keluhan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem <DxTotalItem column="total_gangguan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
column="total_keluhan_informasi_tahun_sebelumnya" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxTotalItem column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
css-class="text-white !text-right" <DxTotalItem column="total_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxTotalItem column="delta_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
<DxTotalItem :customize-text="(e: any) => formatNumber(e.value)" />
column="total_gangguan_informasi_tahun_sebelumnya" <DxTotalItem column="delta_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
summary-type="sum" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxTotalItem column="delta_informasi" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxTotalItem column="persen_delta_keluhan" summary-type="avg" display-format="{0}"
/> css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
<DxTotalItem " />
column="total_informasi_tahun_sebelumnya" <DxTotalItem column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
summary-type="sum" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
display-format="{0}" " />
css-class="text-white !text-right" <DxTotalItem column="persen_delta_informasi" summary-type="avg" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
/> " />
<DxTotalItem <DxTotalItem column="persen_delta_total" summary-type="avg" display-format="{0}"
column="total_tahun_sebelumnya" css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
summary-type="sum" " />
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_keluhan_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_gangguan_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_keluhan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_gangguan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="delta_keluhan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="delta_gangguan"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="delta_informasi"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_delta_keluhan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="persen_delta_gangguan"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="persen_delta_informasi"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxTotalItem
column="persen_delta_total"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_sebelumnya"
css-class="!text-right" :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_tahun_sebelumnya"
show-in-column="total_keluhan_tahun_sebelumnya" summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_sebelumnya"
:align-by-column="true" :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_tahun_sebelumnya"
column="total_keluhan_tahun_sebelumnya" summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_sebelumnya"
display-format="{0}" :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_sebelumnya"
:customize-text="(e: any) => formatNumber(e.value)" summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_sebelumnya"
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_sebelumnya"
css-class="!text-right" summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="total_gangguan_tahun_sebelumnya" <DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_sebelumnya"
:show-in-group-footer="false" :show-in-group-footer="false" :align-by-column="true" column="total_informasi_tahun_sebelumnya"
:align-by-column="true" summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
column="total_gangguan_tahun_sebelumnya" <DxGroupItem css-class="!text-right" show-in-column="total_tahun_sebelumnya" :show-in-group-footer="false"
summary-type="sum" :align-by-column="true" column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
:customize-text="(e: any) => formatNumber(e.value)" <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_ini" :show-in-group-footer="false"
/> :align-by-column="true" column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
<DxGroupItem :customize-text="(e: any) => formatNumber(e.value)" />
css-class="!text-right" <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_ini" :show-in-group-footer="false"
show-in-column="total_keluhan_informasi_tahun_sebelumnya" :align-by-column="true" column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
:show-in-group-footer="false" :customize-text="(e: any) => formatNumber(e.value)" />
:align-by-column="true" <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_ini"
column="total_keluhan_informasi_tahun_sebelumnya" :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_ini"
summary-type="sum" summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
display-format="{0}" <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_ini"
:customize-text="(e: any) => formatNumber(e.value)" :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_ini"
/> summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem <DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_ini" :show-in-group-footer="false"
css-class="!text-right" :align-by-column="true" column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
show-in-column="total_gangguan_informasi_tahun_sebelumnya" :customize-text="(e: any) => formatNumber(e.value)" />
:show-in-group-footer="false" <DxGroupItem css-class="!text-right" show-in-column="total_tahun_ini" :show-in-group-footer="false"
:align-by-column="true" :align-by-column="true" column="total_tahun_ini" summary-type="sum" display-format="{0}"
column="total_gangguan_informasi_tahun_sebelumnya" :customize-text="(e: any) => formatNumber(e.value)" />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="delta_keluhan" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="delta_keluhan" summary-type="sum" display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)" :customize-text="(e: any) => formatNumber(e.value)" />
/> <DxGroupItem css-class="!text-right" show-in-column="delta_gangguan" :show-in-group-footer="false"
<DxGroupItem :align-by-column="true" column="delta_gangguan" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
show-in-column="total_informasi_tahun_sebelumnya" <DxGroupItem css-class="!text-right" show-in-column="delta_informasi" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="delta_informasi" summary-type="sum" display-format="{0}"
:align-by-column="true" :customize-text="(e: any) => formatNumber(e.value)" />
column="total_informasi_tahun_sebelumnya" <DxGroupItem css-class="!text-right" show-in-column="persen_delta_keluhan" :show-in-group-footer="false"
summary-type="sum" :align-by-column="true" column="persen_delta_keluhan" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
display-format="{0}" " />
:customize-text="(e: any) => formatNumber(e.value)" <DxGroupItem css-class="!text-right" show-in-column="persen_delta_gangguan" :show-in-group-footer="false"
/> :align-by-column="true" column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
<DxGroupItem :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
css-class="!text-right" " />
show-in-column="total_tahun_sebelumnya" <DxGroupItem css-class="!text-right" show-in-column="persen_delta_informasi" :show-in-group-footer="false"
:show-in-group-footer="false" :align-by-column="true" column="persen_delta_informasi" summary-type="avg" display-format="{0}"
:align-by-column="true" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
column="total_tahun_sebelumnya" " />
summary-type="sum" <DxGroupItem css-class="!text-right" show-in-column="persen_delta_total" :show-in-group-footer="false"
display-format="{0}" :align-by-column="true" column="persen_delta_total" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
:customize-text="(e: any) => formatNumber(e.value)" " />
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_keluhan_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_keluhan_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_gangguan_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_gangguan_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_keluhan_informasi_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_keluhan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_gangguan_informasi_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_gangguan_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_informasi_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_informasi_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="total_tahun_ini"
:show-in-group-footer="false"
:align-by-column="true"
column="total_tahun_ini"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="delta_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="delta_keluhan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="delta_gangguan"
:show-in-group-footer="false"
:align-by-column="true"
column="delta_gangguan"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="delta_informasi"
:show-in-group-footer="false"
:align-by-column="true"
column="delta_informasi"
summary-type="sum"
display-format="{0}"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_keluhan"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_keluhan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_gangguan"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_gangguan"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_informasi"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_informasi"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
<DxGroupItem
css-class="!text-right"
show-in-column="persen_delta_total"
:show-in-group-footer="false"
:align-by-column="true"
column="persen_delta_total"
summary-type="avg"
display-format="{0}"
:customize-text="
(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
"
/>
</DxSummary> </DxSummary>
<template #formatNumber="{ data }"> <template #formatNumber="{ data }">
<p class="text-right cursor-pointer"> <p class="text-right cursor-pointer">
{{ {{
isNumber(data.text) isNumber(data.text)
? data.column.caption == '%' ? data.column.caption == '%'
? formatPercentage(data.text) ? formatPercentage(data.text)
: formatNumber(data.text) : formatNumber(data.text)
: data.text : data.text
}} }}
</p> </p>
</template> </template>

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

@ -143,6 +143,7 @@ export const queries = {
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
$media: String!
) { ) {
daftarKeluhanDiselesaikanCC123( daftarKeluhanDiselesaikanCC123(
dateFrom: $dateFrom dateFrom: $dateFrom
@ -150,22 +151,28 @@ export const queries = {
idUlp: $idUlp idUlp: $idUlp
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
media: $media
) { ) {
alamat_pelapor
idpel_nometer
jumlah_lapor
pembuat_laporan
keterangan_pelapor
media
nama_uid
nama_ulp
nama_pelapor
no_laporan no_laporan
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
status_akhir
pembuat_laporan
waktu_lapor
waktu_recovery
jumlah_lapor
media
nama_issuetype nama_issuetype
nama_subissuetype nama_subissuetype
no_telp_pelapor
status_akhir
waktu_recovery
} }
} }
`, `,
@ -973,6 +980,70 @@ export const queries = {
} }
} }
`, `,
gangguanKoreksiTransaksiIndividualDetail: gql`
query detailGangguanKoreksiTransaksiIndividu(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
detailGangguanKoreksiTransaksiIndividu(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
id
no_laporan
tgl_lapor
tgl_lapor_sblm
tgl_lapor_sdh
tgl_penugasan_sblm
tgl_penugasan_sdh
tgl_perjalanan_sblm
tgl_perjalanan_sdh
tgl_pengerjaan_sblm
tgl_pengerjaan_sdh
tgl_nyala_sementara_sblm
tgl_nyala_sementara_sdh
tgl_nyala_sblm
tgl_nyala_sdh
tgl_selesai_sblm
tgl_selesai_sdh
durasi_response_time_sblm
durasi_recovery_time_sblm
durasi_response_time_sdh
durasi_recovery_time_sdh
kelompok_sblm
kelompok_sdh
sub_kelompok_sblm
sub_kelompok_sdh
fasilitas_id_sblm
fasilitas_id_sdh
sub_fasilitas_id_sblm
sub_fasilitas_id_sdh
equipment_id_sblm
equipment_id_sdh
event_damage_sblm
event_damage_sdh
cause_id_sblm
cause_id_sdh
cause_group_id_sblm
cause_group_id_sdh
weather_id_sblm
weather_id_sdh
grup_koreksi
alasan
idpel_nometer
keterangan_pelapor
nama_posko
tindakan
penyebab
}
}
`,
jenisGangguanSE004: gql` jenisGangguanSE004: gql`
query rekapitulasiJenisGangguanSE004( query rekapitulasiJenisGangguanSE004(
$dateFrom: Date! $dateFrom: Date!
@ -1137,6 +1208,60 @@ export const queries = {
} }
} }
`, `,
gangguanDiselesaikanMobileAPKTDetail: gql`
query detailGangguanDiselesaikanMobileApkt(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
$idRegu: Int!
) {
detailGangguanDiselesaikanMobileApkt(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
idRegu: $idRegu
) {
id
nama_regional
id_uid
nama_uid
id_up3
nama_up3
id_ulp
nama_ulp
id_posko
nama_posko
no_laporan
pembuat_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_dispatch_time
durasi_response_time
durasi_recovery_time
status_akhir
is_marking
referensi_marking
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
jarak_closing
dispatch_oleh
diselesaikan_oleh
penyebab
tindakan
kode_gangguan
jenis_gangguan
}
}
`,
rekapGangguanAlihPosko: gql` rekapGangguanAlihPosko: gql`
query rekapitulasiGangguanCleansingTransaksiTM( query rekapitulasiGangguanCleansingTransaksiTM(
$dateFrom: Date! $dateFrom: Date!

45
src/utils/texts.ts
View File

@ -1,23 +1,32 @@
const splitRoutePath = (routePath: string): string[] => { const splitRoutePath = (routePath: string): string[] => {
const routeParts = routePath.split('/').filter((part) => part !== '') const routeParts = routePath.split('/').filter((part) => part !== '')
const routeArray: string[] = [] const routeArray: string[] = []
let currentRoute = '' let currentRoute = ''
for (const part of routeParts) { for (const part of routeParts) {
currentRoute += `/${part}` currentRoute += `/${part}`
routeArray.push(currentRoute) routeArray.push(currentRoute)
}
return routeArray
}
const getMonthName = (monthNumber :number)=> {
const months = [
'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];
return months[monthNumber - 1] || '';
} }
export {
splitRoutePath,getMonthName return routeArray
}
const getMonthName = (monthNumber: number) => {
const months = [
'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];
return months[monthNumber - 1] || '';
}
const getMonthNameShort = (monthNumber: number) => {
const months = [
'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
];
return months[monthNumber - 1] || '';
}
export {
splitRoutePath, getMonthName, getMonthNameShort
} }