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

Update table components in Monalisa and Keluhan pages

Browse Source
This commit is contained in:
probdg 2024-02-09 14:26:03 +07:00
parent a3fae16f95
commit c8337eb80c
33 changed files with 1387 additions and 600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Form/FiltersType/reference.ts
View File

@ -127,11 +127,9 @@ const fetchStatus = (data : any) => {
{"id": "2", "name": "Penugasan Regu"}, {"id": "2", "name": "Penugasan Regu"},
{"id": "1", "name": "lapor"} {"id": "1", "name": "lapor"}
] ]
return status.filter((item: any) => { const filteredStatus = status.find(item => item.id == data);
if (item.id == data) { const name = filteredStatus ? filteredStatus.name : null;
return item.name return name;
}
});
} }
const selectedUid = (value: any) => { const selectedUid = (value: any) => {
useRegionStore().setData(value.id); useRegionStore().setData(value.id);

30
src/components/Pages/Keluhan/Table_23.vue
View File

@ -17,32 +17,32 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>

32
src/components/Pages/Keluhan/Table_24.vue
View File

@ -17,33 +17,33 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>

137
src/components/Pages/Keluhan/Table_25.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@ -13,41 +13,42 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama ULP"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -56,7 +57,17 @@
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -72,7 +83,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -83,7 +94,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -101,55 +112,51 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query daftarKeluhanSelesaiTanpaIdPelanggan query daftarKeluhanSelesaiTanpaIdPelanggan(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
daftarKeluhanSelesaiTanpaIdPelanggan daftarKeluhanSelesaiTanpaIdPelanggan(
( dateFrom: $dateFrom
dateFrom: $dateFrom dateTo: $dateTo
dateTo: $dateTo posko: $posko
posko: $posko idUid: $idUid
idUid: $idUid idUp3: $idUp3
idUp3: $idUp3
) { ) {
in_process alamat_pelapor
indeks_rating durasi_recovery_time
jumlah_non_rating durasi_response_time
jumlah_rating id_keluhan
nama_posko idpel_nometer
persen_in_process keterangan_pelapor
persen_non_rating media
persen_rating nama_pelapor
persen_selesai no_laporan
rating_1 no_telp_pelapor
rating_2 posko
rating_3 status_akhir
rating_4 waktu_recovery
rating_5 waktu_response
regu }
selesai }
total `
}
}`;
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, { const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: "", posko: '',
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) })
onResult(queryResult => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan; data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

28
src/components/Pages/Keluhan/Table_26.vue
View File

@ -17,31 +17,31 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Response Time" <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Recovery Time" <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media" <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>

14
src/components/Pages/Keluhan/Table_27.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true"> :word-wrap-enabled="true">
@ -17,29 +17,29 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Contact Center" <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Tlp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian" <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Sumber Lapor" <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type" <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"

211
src/components/Pages/Keluhan/Table_33.vue
View File

@ -1,197 +1,70 @@
<template> <template>
<div> <div>
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
class="max-h-[calc(100vh-140px)]" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:show-column-lines="true" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:show-row-lines="false" :word-wrap-enabled="true">
: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"
>
<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 :enabled="true" /> <DxLoadPanel :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 :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:width="50" caption="NO" css-class="custom-table-column" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
data-field="" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
data-field="" css-class="custom-table-column" />
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
data-field="" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
data-field="" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
data-field="" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
/> css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
data-field="" css-class="custom-table-column" />
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>

2
src/components/Pages/Keluhan/Table_34.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true"> :word-wrap-enabled="true">

2
src/components/Pages/Keluhan/Table_35.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true"> :word-wrap-enabled="true">

135
src/components/Pages/Monalisa/Table_36.vue
View File

@ -1,33 +1,38 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :hover-state-enabled="true"
:word-wrap-enabled="true"> @selection-changed="onSelectionChanged" :column-width="100" @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 :enabled="true" /> <DxLoadPanel :position="position"
:show-indicator="showIndicator"
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,15 +41,40 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { fetchStatus } from '@/components/Form/FiltersType/reference'
import { useDateStore } from '@/stores/date'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -53,7 +83,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +94,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -74,7 +104,67 @@ const onExporting = (e: any) => {
e.cancel = true e.cancel = true
} }
} }
const MONALISAJUMLAHKALIGANGGUAN = gql`
query DaftarMonalisaJumlahKaliGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaJumlahKaliGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
regional: '',
posko: posko,
idUid: uid,
idUp3: up3,
bulan: 10,
tahun: 2023,
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.monalisaJumlahKaliGangguan
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
@ -82,7 +172,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
filters.setConfig({ filters.setConfig({
type: 'type-2', type: 'type-2',
reportButton: true reportButton: true

138
src/components/Pages/Monalisa/Table_37.vue
View File

@ -1,33 +1,37 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :enabled="true" /> <DxLoadPanel :position="position"
:show-indicator="showIndicator"
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column"> <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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,16 +40,37 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(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()
@ -53,7 +78,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +89,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -74,7 +99,74 @@ const onExporting = (e: any) => {
e.cancel = true e.cancel = true
} }
} }
const monalisaDispatchingTimeGangguan = gql`
query DaftarmonalisaDispatchingTimeGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaDispatchingTimeGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeGangguan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
regional: '',
posko: posko,
idUid: uid,
idUp3: up3,
bulan: 10,
tahun: 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaDispatchingTimeGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)

113
src/components/Pages/Monalisa/Table_38.vue
View File

@ -1,33 +1,37 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :enabled="true" /> <DxLoadPanel :position="position"
:show-indicator="showIndicator"
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column"> <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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,7 +40,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -45,6 +49,79 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaRecoveryTimeKeluhan = gql`
query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
monalisaRecoveryTimeKeluhan(
regional:$regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`;
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
regional: "",
posko: "",
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: "",
posko: posko,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
data.value = [...data.value, {
...item,
}];
});
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {

136
src/components/Pages/Monalisa/Table_39.vue
View File

@ -1,33 +1,37 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :enabled="true" /> <DxLoadPanel :position="position"
:show-indicator="showIndicator"
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column"> <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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,15 +40,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import gql from 'graphql-tag'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaResponseTimeKeluhan = gql`
query DaftarmonalisaResponseTimeKeluhan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaResponseTimeKeluhan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKeluhan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaResponseTimeKeluhan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -53,7 +147,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +158,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

410
src/components/Pages/Monalisa/Table_40.vue
View File

@ -1,127 +1,327 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" class="max-h-[calc(100vh-140px)]"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :data-source="data"
:word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :enabled="true" /> :hover-state-enabled="true"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @selection-changed="onSelectionChanged"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :column-width="100"
<DxColumnFixing :enabled="true" /> @exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column"> :width="200"
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="" caption="Nama Unit"
css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> />
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field="" alignment="center"
css-class="custom-table-column" /> caption="Jumlah dan Durasi RPT & RCT Gangguan"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> >
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="" <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> :width="150"
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="" alignment="center"
css-class="custom-table-column" /> caption="a"
</DxColumn> data-type="number"
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> data-field="total_rpt_bulan"
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field="" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
</DxColumn> caption="b"
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column"> data-type="number"
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> data-field="jumlah_gangguan_rpt_bulan"
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> caption="c=a/b"
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="" data-type="number"
css-class="custom-table-column" /> data-field="rpt_gangguan_bulan"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="" </DxColumn>
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> :width="150"
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field="" alignment="center"
css-class="custom-table-column" /> caption="d"
</DxColumn> data-type="number"
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> data-field="total_rct_bulan"
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> </DxColumn>
</DxColumn> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
</DxColumn> <DxColumn
</DxDataGrid> :width="150"
</div> alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_bulan"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rct_gangguan_bulan"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="a"
data-type="number"
data-field="total_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rch_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { useSearchStore } from '@/stores/filtersAction'
const onExporting = (e: any) => { import { usePostsStore } from '@/stores/posts'
if (e.format === 'pdf') { import { useRegionStore } from '@/stores/region'
const doc = new jsPDF() import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
exportToPdf({ import gql from 'graphql-tag'
jsPDFDocument: doc, const position = { of: '#data' }
component: e.component, const showIndicator = ref(true)
indent: 5, const shading = ref(true)
}).then(() => { const showPane = ref(true)
doc.save(`.pdf`) const data = ref<any[]>([])
}) const dataDetail = ref<any>()
} else { const showDetail = ref(false)
const workbook = new Workbook() const monalisaJumlahDurasiRptRctGangguan = gql`
const worksheet = workbook.addWorksheet('Employees') query DaftarmonalisaJumlahDurasiRptRctGangguan(
$regional: String
exportToExcel({ $posko: String
component: e.component, $idUid: Int
worksheet, $idUp3: Int
autoFilterEnabled: true, $bulan: Int
}).then(() => { $tahun: Int
workbook.xlsx.writeBuffer().then((buffer: any) => { ) {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') monalisaJumlahDurasiRptRctGangguan(
}) regional: $regional
}) posko: $posko
idUid: $idUid
e.cancel = true idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_gangguan_rct_bulan
jumlah_gangguan_rct_sampai_bulan
jumlah_gangguan_rpt_bulan
jumlah_gangguan_rpt_sampai_bulan
nama_posko
rct_gangguan_bulan
rct_gangguan_sampai_bulan
rpt_gangguan_bulan
rpt_gangguan_sampai_bulan
total_rct_bulan
total_rct_sampai_bulan
total_rpt_bulan
total_rpt_sampai_bulan
} }
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
filters.setConfig({ filters.setConfig({
type: 'type-2', type: 'type-2',
reportButton: true reportButton: true
}) })
}) })
</script> </script>

120
src/components/Pages/Monalisa/Table_41.vue
View File

@ -1,37 +1,125 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-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 :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" /> <DxColumn :width="50" alignment="center"
<DxColumn alignment="center" data-field="" caption="ID Gangguan" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="" caption="Jenis Gangguan" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaGangguanPerJenisGangguan = gql`
query DaftarmonalisaGangguanPerJenisGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaGangguanPerJenisGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
id_gangguan
jumlah
persen_gangguan
tipe_permasalahan
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -39,7 +127,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -50,7 +138,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

132
src/components/Pages/Monalisa/Table_42.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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" />
@ -12,22 +12,23 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,16 +37,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaRekapitulasiLaporUlangGangguan = gql`
query DaftarmonalisaRekapitulasiLaporUlangGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaRekapitulasiLaporUlangGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -53,7 +143,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +154,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

132
src/components/Pages/Monalisa/Table_43.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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" />
@ -12,22 +12,23 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,16 +37,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaRekapitulasiEnsGangguan = gql`
query DaftarmonalisaRekapitulasiEnsGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaRekapitulasiEnsGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -53,7 +143,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +154,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

101
src/components/Pages/Monalisa/Table_44.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :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"> @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@ -25,16 +25,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
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'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaGangguanBelumSelesai = gql`
query DaftarmonalisaGangguanBelumSelesai(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaGangguanBelumSelesai(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -42,7 +131,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -53,7 +142,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

16
src/components/Pages/Monalisa/Table_45.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

16
src/components/Pages/Monalisa/Table_46.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column"> <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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

16
src/components/Pages/Monalisa/Table_47.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column"> <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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

4
src/components/Pages/Monalisa/Table_48.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,7 +12,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column"> <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">

2
src/components/Pages/Monalisa/Table_49.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :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"> @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">

16
src/components/Pages/Monalisa/Table_50.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<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 :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

2
src/components/Pages/Monalisa/Table_51.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :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"> @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">

2
src/components/Pages/Monalisa/Table_52.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_53.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_54.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_55.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_56.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_57.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_58.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_59.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"