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

Update table components to include a "No" column

Browse Source
This commit is contained in:
probdg
2024-01-31 15:40:36 +07:00
parent 146af29812
commit f5fe6ae0e6
27 changed files with 857 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Pages/Gangguan/Table_1.vue
View File

@ -9,16 +9,12 @@
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> --> <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
<DxLoadPanel <DxLoadPanel v-model:visible="loadingVisible" :enabled="true" />
v-model:visible="loadingVisible"
: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" />
<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"
caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" /> caption="No Laporan" cell-template="data" />
@ -40,8 +36,8 @@
caption="Posko Awal" cell-template="data" /> caption="Posko Awal" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
caption="Posko Tujuan" cell-template="data" /> caption="Posko Tujuan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
cell-template="data" /> caption="Status" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" /> caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
@ -304,8 +300,13 @@ onMounted(() => {
idUp3: 0, idUp3: 0,
}) })
onResult(queryResult => { onResult(queryResult => {
if(queryResult.data != undefined){ if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain; queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [...data.value,{
...item,
pembuat_laporan: 'BELUM ADA'
}];
});
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

5
src/components/Pages/Gangguan/Table_10.vue
View File

@ -14,7 +14,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)" <DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
css-class="custom-table-column" /> css-class="custom-table-column" />

5
src/components/Pages/Gangguan/Table_12.vue
View File

@ -12,7 +12,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" 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">

5
src/components/Pages/Gangguan/Table_13.vue
View File

@ -12,7 +12,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor" <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
css-class="custom-table-column" /> 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">

5
src/components/Pages/Gangguan/Table_14.vue
View File

@ -12,7 +12,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">

5
src/components/Pages/Gangguan/Table_15.vue
View File

@ -11,7 +11,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" /> <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />

8
src/components/Pages/Gangguan/Table_16.vue
View File

@ -12,7 +12,9 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2"> <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
<DxColumn :width="50" alignment="center" data-field="" caption="a" css-class="custom-table-column" /> <DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="a" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column"> <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
@ -123,10 +125,10 @@
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column"> <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="w" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column"> <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="x" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

4
src/components/Pages/Gangguan/Table_17.vue
View File

@ -12,7 +12,9 @@
<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" data-type="number" <DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="NO" data-type="number"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />

81
src/components/Pages/Gangguan/Table_18.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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"
:allow-column-resizing="true" column-resizing-mode="widget">
<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" />
@ -11,7 +12,8 @@
<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" data-type="number" <DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
@ -56,7 +58,6 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -65,7 +66,16 @@
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, 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'
@ -81,7 +91,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`)
}) })
@ -92,7 +102,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')
@ -103,7 +113,6 @@ const onExporting = (e: any) => {
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
@ -111,16 +120,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql` const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanRatingPerRegu query rekapitulasiGangguanRatingPerRegu(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanRatingPerRegu rekapitulasiGangguanRatingPerRegu(
(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
@ -128,39 +135,39 @@ query rekapitulasiGangguanRatingPerRegu
idUp3: $idUp3 idUp3: $idUp3
) { ) {
in_process in_process
indeks_rating indeks_rating
jumlah_non_rating jumlah_non_rating
jumlah_rating jumlah_rating
nama_posko nama_posko
persen_in_process persen_in_process
persen_non_rating persen_non_rating
persen_rating persen_rating
persen_selesai persen_selesai
rating_1 rating_1
rating_2 rating_2
rating_3 rating_3
rating_4 rating_4
rating_5 rating_5
regu regu
selesai selesai
total total
} }
}`; }
`
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, { const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
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.rekapitulasiGangguanRatingPerRegu data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
;
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

26
src/components/Pages/Gangguan/Table_19.vue
View File

@ -11,31 +11,31 @@
<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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari" <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari" <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret" <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April" <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei" <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni" <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli" <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus" <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September" <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober" <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November" <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember" <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>

71
src/components/Pages/Gangguan/Table_20.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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"
:allow-column-resizing="true" column-resizing-mode="widget">
<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" />
@ -11,31 +12,31 @@
<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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari" <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari" <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret" <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April" <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei" <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni" <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli" <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus" <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September" <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober" <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November" <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember" <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -46,7 +47,16 @@
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, 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'
@ -62,7 +72,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`)
}) })
@ -73,7 +83,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')
@ -84,7 +94,6 @@ const onExporting = (e: any) => {
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
@ -92,16 +101,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql` const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanCleansingTransaksiTM query rekapitulasiGangguanCleansingTransaksiTM(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanCleansingTransaksiTM rekapitulasiGangguanCleansingTransaksiTM(
(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
@ -124,22 +131,22 @@ query rekapitulasiGangguanCleansingTransaksiTM
ulp ulp
up3 up3
} }
}`; }
`
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, { const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
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.rekapitulasiGangguanCleansingTransaksiTM data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
;
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

1
src/components/Pages/Gangguan/Table_8.vue
View File

@ -13,7 +13,6 @@
<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" data-type="number" caption="No" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:allow-resizing="false" css-class="custom-table-column" /> :allow-resizing="false" css-class="custom-table-column" />

35
src/components/Pages/Keluhan/Table_21.vue
View File

@ -13,32 +13,35 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<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="tgl_laporan" 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="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal" 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" />
</DxDataGrid> </DxDataGrid>
</div> </div>

39
src/components/Pages/Keluhan/Table_22.vue
View File

@ -13,36 +13,37 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<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="tgl_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="jml_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="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="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>
@ -118,6 +119,8 @@ const GET_DATA = gql`
daftarKeluhanMelaporLebihDariSatuKali( daftarKeluhanMelaporLebihDariSatuKali(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
minJmlLapor: $minJmlLapor
maxJmlLapor: $maxJmlLapor
posko: $posko posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3

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

@ -13,7 +13,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />

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

@ -13,7 +13,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
@ -104,7 +107,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query rekapitulasiGangguanRatingPerPosko( query daftarKeluhanRecoveryTime(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$minDurasiRecoveryTime: Int! $minDurasiRecoveryTime: Int!
@ -113,7 +116,7 @@ const GET_DATA = gql`
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanRatingPerPosko( daftarKeluhanRecoveryTime(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
@ -154,7 +157,7 @@ onMounted(() => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko data.value = queryResult.data.daftarKeluhanRecoveryTime
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

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

@ -13,7 +13,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />

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

@ -13,7 +13,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
@ -103,19 +106,21 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query daftarKeluhanSelesaiTanpaIdPelanggan( query daftarKeluhanBerdasarkanMedia(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
$media: String!
) { ) {
daftarKeluhanSelesaiTanpaIdPelanggan( daftarKeluhanBerdasarkanMedia(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
media: $media
) { ) {
alamat_pelapor alamat_pelapor
durasi_recovery_time durasi_recovery_time
@ -147,7 +152,7 @@ onMounted(() => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

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

@ -13,7 +13,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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="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" />
@ -104,26 +107,26 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query daftarKeluhanBerdasarkanMedia( query daftarKeluhanDiselesaikanCC123
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
$media: String! ) {
) { daftarKeluhanDiselesaikanCC123
daftarKeluhanBerdasarkanMedia( (
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
media: $media
) { ) {
alamat_pelapor alamat_pelapor
durasi_recovery_time durasi_recovery_time
durasi_response_time durasi_response_time
id_keluhan id_keluhan!
idpel_nometer idpel_nometer
keterangan_pelapor keterangan_pelapor
media media
@ -131,7 +134,7 @@ const GET_DATA = gql`
no_laporan no_laporan
no_telp_pelapor no_telp_pelapor
posko posko
status_akhir status_akhir!
waktu_recovery waktu_recovery
waktu_response waktu_response
} }
@ -151,7 +154,7 @@ onMounted(() => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanBerdasarkanMedia data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

61
src/components/Pages/Keluhan/Table_28.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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" :allow-column-resizing="true"
:word-wrap-enabled="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,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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
@ -24,15 +24,15 @@
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="" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA" <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption="> SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤ SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
@ -109,7 +109,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query daftarKeluhanDiselesaikanCC123 query rekapitulasiKeluhanAll
( (
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
@ -117,7 +117,7 @@ query daftarKeluhanDiselesaikanCC123
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
daftarKeluhanDiselesaikanCC123 rekapitulasiKeluhanAll
( (
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -125,20 +125,29 @@ query daftarKeluhanDiselesaikanCC123
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
alamat_pelapor avg_durasi_dispatch
durasi_recovery_time avg_durasi_recovery
durasi_response_time avg_durasi_response
id_keluhan! id_uid
idpel_nometer id_up3
keterangan_pelapor max_durasi_dispatch
media max_durasi_recovery
nama_pelapor max_durasi_response
no_laporan min_durasi_dispatch
no_telp_pelapor min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko posko
status_akhir! total
waktu_recovery total_diatas_sla_dispatch
waktu_response total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
} }
}` }`
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
@ -154,7 +163,7 @@ onMounted(() => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDiselesaikanCC123 data.value = queryResult.data.rekapitulasiKeluhanAll
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

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

@ -1,4 +1,3 @@
<!-- Rekapitulasi Keluhan All -->
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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"
@ -13,7 +12,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang" <DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
css-class="custom-table-column" /> 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">
@ -130,7 +132,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query rekapitulasiKeluhanAll query rekapitulasiKeluhanPerFungsiBidang
( (
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
@ -138,7 +140,7 @@ query rekapitulasiKeluhanAll
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiKeluhanAll rekapitulasiKeluhanPerFungsiBidang
( (
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -150,7 +152,7 @@ query rekapitulasiKeluhanAll
avg_durasi_recovery avg_durasi_recovery
avg_durasi_response avg_durasi_response
id_uid id_uid
id_up3! id_up3
max_durasi_dispatch max_durasi_dispatch
max_durasi_recovery max_durasi_recovery
max_durasi_response max_durasi_response
@ -184,7 +186,7 @@ onMounted(() => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanAll data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

52
src/components/Pages/Keluhan/Table_30.vue
View File

@ -1,4 +1,3 @@
<!-- Rekapitulasi Keluhan Per Fungsi Bidang -->
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :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"
@ -13,8 +12,11 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
<DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
css-class="custom-table-column" /> 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 :width="150" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
@ -122,8 +124,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql` const GET_DATA = gql`
query rekapitulasiGangguanRatingPerPosko query rekapitulasiKeluhanPerJenisKeluhan
( (
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
@ -131,7 +133,7 @@ query rekapitulasiGangguanRatingPerPosko
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanRatingPerPosko rekapitulasiKeluhanPerJenisKeluhan
( (
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -139,29 +141,33 @@ query rekapitulasiGangguanRatingPerPosko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
in_process avg_durasi_dispatch
indeks_rating avg_durasi_recovery
jumlah_non_rating avg_durasi_response
jumlah_rating max_durasi_dispatch
nama_posko max_durasi_recovery
persen_in_process max_durasi_response
persen_non_rating min_durasi_dispatch
persen_rating min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai persen_selesai
rating_1 tipe_permasalahan
rating_2
rating_3
rating_4
rating_5
regu
selesai
total total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
} }
}`; }`;
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, { 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: "",
@ -171,7 +177,7 @@ onMounted(() => {
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
; ;
loadingVisible.value = false loadingVisible.value = false
} }

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

@ -1,7 +1,6 @@
<!-- Rekapitulasi Keluhan Per Jenis Keluhan -->
<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">
@ -13,7 +12,10 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan" <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
css-class="custom-table-column" /> 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">
@ -123,7 +125,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query rekapitulasiKeluhanPerJenisKeluhan query rekapitulasiKeluhanPerKelompokKeluhan
( (
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
@ -131,7 +133,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiKeluhanPerJenisKeluhan rekapitulasiKeluhanPerKelompokKeluhan
( (
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -175,7 +177,7 @@ onMounted(() => {
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
; ;
loadingVisible.value = false loadingVisible.value = false
} }

13
src/components/Pages/Keluhan/Table_32.vue
View File

@ -5,6 +5,7 @@
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
:show-borders="true" :show-borders="true"
:data-source="data"
:row-alternation-enabled="true" :row-alternation-enabled="true"
:hover-state-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @selection-changed="onSelectionChanged"
@ -29,14 +30,14 @@
<DxColumn <DxColumn
:width="50" :width="50"
alignment="center" alignment="center"
data-field="" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="NO" caption="NO"
css-class="custom-table-column" css-class="custom-table-column"
/> />
<DxColumn <DxColumn
:width="170" :width="170"
alignment="center" alignment="center"
data-field="" data-field="tanggal"
caption="Tanggal Lapor" caption="Tanggal Lapor"
css-class="custom-table-column" css-class="custom-table-column"
/> />
@ -256,14 +257,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query rekapitulasiKeluhanPerUnit( query rekapitulasiKeluhanPerTanggal(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiKeluhanPerUnit( rekapitulasiKeluhanPerTanggal(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
@ -283,7 +284,7 @@ const GET_DATA = gql`
min_durasi_response min_durasi_response
persen_inproses persen_inproses
persen_selesai persen_selesai
posko tanggal
total total
total_diatas_sla_dispatch total_diatas_sla_dispatch
total_diatas_sla_recovery total_diatas_sla_recovery
@ -309,7 +310,7 @@ onMounted(() => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

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

@ -1,86 +1,224 @@
<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" :show-column-lines="true"
:word-wrap-enabled="true"> :show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<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 :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
<DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" /> :width="50"
alignment="center"
: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 :width="150" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
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 :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field=""
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 :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field=""
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 :width="150" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" alignment="center"
css-class="custom-table-column" /> data-field=""
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" data-type="number"
css-class="custom-table-column" /> caption="Total"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" css-class="custom-table-column"
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 :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" alignment="center"
css-class="custom-table-column" /> data-field=""
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 :width="150" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" alignment="center"
css-class="custom-table-column" /> data-field=""
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" data-type="number"
css-class="custom-table-column" /> caption="Total"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" css-class="custom-table-column"
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 :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" alignment="center"
css-class="custom-table-column" /> data-field=""
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>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } 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, 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 { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -89,7 +227,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`)
}) })
@ -100,7 +238,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')
@ -116,9 +254,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerUnit(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerUnit(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({ filters.setConfig({
type: 'type-8', type: 'type-8',
reportButton: true reportButton: true

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

@ -12,7 +12,8 @@
<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" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1" <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
@ -26,21 +27,31 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5" <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } 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, 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 { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -49,7 +60,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`)
}) })
@ -60,7 +71,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')
@ -76,9 +87,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanBerdasarkanMedia(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanBerdasarkanMedia(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
media
tgl1
tgl10
tgl11
tgl12
tgl13
tgl14
tgl15
tgl16
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
tgl23
tgl24
tgl25
tgl26
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({ filters.setConfig({
type: 'type-3' type: 'type-3'
}) })

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

@ -12,7 +12,8 @@
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="" caption="Nama 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">
@ -63,7 +64,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } 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, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -72,6 +73,8 @@ 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 { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -107,9 +110,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanRatingPerUnit
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanRatingPerUnit
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({ filters.setConfig({
type: 'type-8', type: 'type-8',
reportButton: true reportButton: true