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

Update loading visibility in Table components

Browse Source
This commit is contained in:
Eko Haryadi 2024-02-19 13:49:49 +07:00
parent 2d877d997a
commit 2758481259
26 changed files with 747 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 --> <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => { <Type1 @update:filters="(value) => {
filters = value filters = value
} }
" /> " />
</Filters> </Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <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" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -15,8 +15,7 @@
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
@ -188,13 +187,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko, posko,
idUid: uid ? uid.id :0, idUid: uid ? uid.id : 0,
idUp3: up3? up3.id:0}) idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
@ -213,6 +213,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
const filters= ref(); const filters = ref();
</script> </script>

13
src/components/Pages/Gangguan/Table_11.vue
View File

@ -15,8 +15,7 @@
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
@ -248,7 +247,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, { const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_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: "",
@ -257,13 +256,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "", posko: posko ? posko.id : "",
idUid: uid ? uid.id :0, idUid: uid ? uid.id : 0,
idUp3: up3? up3.id:0, idUp3: up3 ? up3.id : 0,
}) })
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {

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

@ -1,31 +1,31 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type9 @update:filters="(value) => { <Type9 @update:filters="(value) => {
filters = value filters = value
} }
" /> " />
</Filters> </Filters>
<div id="data"> <div id="data">
<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"
: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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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 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="120" alignment="center" data-field="kode_regu" caption="Kode"
caption="No" /> 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"
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" 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="120" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
@ -46,36 +46,36 @@
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column"> <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total" <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata" <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max" <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min" <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
css-class="custom-table-column" /> 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="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA" <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA" <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column"> <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total" <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata" <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max" <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min" <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
css-class="custom-table-column" /> 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="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA" <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA" <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -85,7 +85,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue' import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { 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'
@ -175,22 +175,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, { const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
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,
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "", posko: posko ? posko.id : "",
idUid: uid ? uid.id :0, idUid: uid ? uid.id : 0,
idUp3: up3? up3.id:0, idUp3: up3 ? up3.id : 0,
}) })
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {

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

@ -13,8 +13,9 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator"
v-model:visible.sync="loading" :enabled="true" /> :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" />

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

@ -13,8 +13,8 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible.sync="loading" :enabled="true" /> 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" />

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

@ -13,8 +13,8 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible.sync="loading" :enabled="true" /> 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" />

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

@ -13,8 +13,8 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible.sync="loading" :enabled="true" /> 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" />

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

@ -13,8 +13,8 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible.sync="loading" :enabled="true" /> 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" />

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

@ -13,8 +13,8 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible.sync="loading" :enabled="true" /> 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" />

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

@ -13,8 +13,8 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible.sync="loading" :enabled="true" /> 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" />

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

@ -13,8 +13,8 @@
<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 :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible.sync="loading" :enabled="true" /> 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" />

2
src/components/Pages/Gangguan/Table_3.vue
View File

@ -14,7 +14,7 @@
<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"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"

2
src/components/Pages/Gangguan/Table_4.vue
View File

@ -14,7 +14,7 @@
<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"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"

2
src/components/Pages/Gangguan/Table_5.vue
View File

@ -14,7 +14,7 @@
<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"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"

2
src/components/Pages/Gangguan/Table_6.vue
View File

@ -14,7 +14,7 @@
<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"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true"/> 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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"

2
src/components/Pages/Gangguan/Table_7.vue
View File

@ -14,7 +14,7 @@
<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"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"

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

@ -15,7 +15,7 @@
<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"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" /> :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@ -155,8 +155,8 @@ const filterData = (param: any) => {
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko, posko,
idUid: uid ? uid.id :0, idUid: uid ? uid.id : 0,
idUp3: up3? up3.id:0, idUp3: up3 ? up3.id : 0,
}) })
onResult(queryResult => { onResult(queryResult => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {

16
src/components/Pages/Gangguan/Table_9.vue
View File

@ -1,11 +1,11 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan --> <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => { <Type1 @update:filters="(value) => {
filters = value filters = value
} }
" /> " />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@ -15,7 +15,7 @@
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" /> 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" />
@ -306,5 +306,5 @@ const filterData = (params: any) => {
}) })
} }
const filters= ref(); const filters = ref();
</script> </script>

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

@ -6,7 +6,7 @@
" /> " />
</Filters> </Filters>
<div id="data"> <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" :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">
@ -19,18 +19,18 @@
<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="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column"> <DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
css-class="custom-table-column" /> 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">
@ -39,21 +39,21 @@
<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>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="" <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_lalu"
data-type="number" /> data-type="number" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" caption="Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
css-class="custom-table-column" /> 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">
@ -62,25 +62,25 @@
<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>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="" <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_ini"
data-type="number" /> data-type="number" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi" <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi" <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total" <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
@ -99,6 +99,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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -106,7 +108,6 @@ const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = 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()
@ -135,14 +136,87 @@ const onExporting = (e: any) => {
e.cancel = true 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)
} }
const filterData = (params:any) => const penurunanJumlahKomplainBulanan = gql`
{ query DaftarpenurunanJumlahKomplainBulanan(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
penurunanJumlahKomplainBulanan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
delta_penurunan_gangguan
delta_penurunan_informasi
delta_penurunan_keluhan
gangguan_bulan_ini
gangguan_bulan_lalu
informasi_gangguan_bulan_ini
informasi_gangguan_bulan_lalu
informasi_keluhan_bulan_ini
informasi_keluhan_bulan_lalu
keluhan_bulan_ini
keluhan_bulan_lalu
nama_posko
persen_penurunan_gangguan
persen_penurunan_informasi
persen_penurunan_keluhan
persen_penurunan_total
total_bulan_ini
total_bulan_lalu
total_komplain_bulan_ini
total_komplain_bulan_lalu
}
}
`
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.penurunanJumlahKomplainBulanan.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 filters = ref() const filters = ref()
</script> </script>

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

@ -6,7 +6,7 @@
" /> " />
</Filters> </Filters>
<div id="data"> <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" :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">
@ -20,30 +20,30 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020" <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)" <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020" <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)" <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G" <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K" <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains" <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
@ -62,6 +62,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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -69,7 +71,6 @@ const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = 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()
@ -100,12 +101,74 @@ 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)
} }
const filterData = (params:any) => const agingComplaintBulanan = gql`
{ query DaftaragingComplaintBulanan(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
agingComplaintBulanan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
aging_komplain_gangguan
aging_komplain_keluhan
nama_posko
persen_rata_aging_komplain
rata_rct_gangguan_bulan
rata_rct_gangguan_sla
rata_rct_keluhan_bulan
rata_rct_keluhan_sla
}
}
`
const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.agingComplaintBulanan.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 filters = ref() const filters = ref()
</script> </script>

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

@ -6,7 +6,7 @@
" /> " />
</Filters> </Filters>
<div id="data"> <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" :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">
@ -20,20 +20,20 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column"> <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana" <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana" <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam" <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS" <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
@ -51,6 +51,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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -58,7 +60,6 @@ const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = 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()
@ -92,9 +93,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) => const agingComplaintBulanan = gql`
{ query DaftaragingComplaintBulanan(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
agingComplaintBulanan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
ens_bencana_alam
ens_terencana
ens_tidak_terencana
kpi_ens
nama_posko
total
}
}
`
const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.agingComplaintBulanan.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 filters = ref() const filters = ref()
</script> </script>

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

@ -6,7 +6,7 @@
" /> " />
</Filters> </Filters>
<div id="data"> <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" :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">
@ -19,23 +19,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 :min-width="250" alignment="center" data-field="" caption="Nama Unit" <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %" <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
@ -53,6 +53,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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -60,7 +62,6 @@ const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = 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()
@ -94,9 +95,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) => const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
{ query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
kepatuhandanAkurasiDalamPelaporanBulanan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
kepatuhan_akurasi_gangguan_berulang_bulan
kepatuhan_akurasi_gangguan_berulang_total
kepatuhan_akurasi_keluhan_berulang_bulan
kepatuhan_akurasi_keluhan_berulang_total
nama_posko
persen_komplain_pelanggan
}
}
`
const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.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 filters = ref() const filters = ref()
</script> </script>

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

@ -18,58 +18,32 @@
<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 alignment="center" caption="Periode: Februari,2020" 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="nama_posko" caption="Nama Unit"
<DxColumn alignment="center" caption="s.d Januari 2019" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan" </DxColumn>
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain" <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
</DxColumn>
<DxColumn alignment="center" caption="s.d Januari 2020" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan" <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain" </DxColumn>
css-class="custom-table-column" /> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
</DxColumn> <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column"> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan" <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -86,6 +60,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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -93,7 +69,6 @@ const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = 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()
@ -124,12 +99,86 @@ 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)
} }
const filterData = (params:any) => const penurunanJumlahKomplainKumulatif = gql`
{ query DaftarpenurunanJumlahKomplainKumulatif(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
penurunanJumlahKomplainKumulatif(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
delta_penurunan_gangguan
delta_penurunan_informasi
delta_penurunan_keluhan
gangguan_bulan_ini
gangguan_bulan_lalu
informasi_gangguan_bulan_ini
informasi_gangguan_bulan_lalu
informasi_keluhan_bulan_ini
informasi_keluhan_bulan_lalu
keluhan_bulan_ini
keluhan_bulan_lalu
nama_posko
persen_penurunan_gangguan
persen_penurunan_informasi
persen_penurunan_keluhan
persen_penurunan_total
total_bulan_ini
total_bulan_lalu
total_komplain_bulan_ini
total_komplain_bulan_lalu
}
}
`
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainKumulatif, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.penurunanJumlahKomplainKumulatif.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 filters = ref() const filters = ref()
</script> </script>

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

@ -19,31 +19,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 alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Aging Complains(Kum)" css-class="custom-table-column"> <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020" <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)" <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020" <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)" <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G" <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K" <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains" <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
@ -61,6 +61,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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -68,7 +70,6 @@ const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = 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()
@ -102,9 +103,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) => const agingComplaintKumulatif = gql`
{ query DaftaragingComplaintKumulatif(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
agingComplaintKumulatif(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
aging_komplain_gangguan
aging_komplain_keluhan
nama_posko
persen_rata_aging_komplain
rata_rct_gangguan_bulan
rata_rct_gangguan_sla
rata_rct_keluhan_bulan
rata_rct_keluhan_sla
}
}
`
const { onResult, onError, loading, refetch } = useQuery(agingComplaintKumulatif, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.agingComplaintKumulatif.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 filters = ref() const filters = ref()
</script> </script>

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

@ -19,21 +19,21 @@
<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 alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column"> <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana" <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana" <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam" <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS" <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
@ -51,6 +51,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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -58,7 +60,7 @@ const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = 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()
@ -92,9 +94,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) => const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
{ query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
kepatuhandanAkurasiDalamPelaporanKumulatif(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
kepatuhan_akurasi_gangguan_berulang_bulan
kepatuhan_akurasi_gangguan_berulang_total
kepatuhan_akurasi_keluhan_berulang_bulan
kepatuhan_akurasi_keluhan_berulang_total
nama_posko
persen_komplain_pelanggan
}
}
`
const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.kepatuhandanAkurasiDalamPelaporanKumulatif.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 filters = ref() const filters = ref()
</script> </script>

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

@ -19,24 +19,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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan" <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %" <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
@ -54,13 +53,16 @@ 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 position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = ref(false) const data = ref<any[]>([])
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -94,9 +96,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filterData = (params:any) => const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
{ query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
console.log(params) $regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
kepatuhandanAkurasiDalamPelaporanBulanan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
kepatuhan_akurasi_gangguan_berulang_bulan
kepatuhan_akurasi_gangguan_berulang_total
kepatuhan_akurasi_keluhan_berulang_bulan
kepatuhan_akurasi_keluhan_berulang_total
nama_posko
persen_komplain_pelanggan
}
}
`
const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.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 filters = ref() const filters = ref()
</script> </script>