Update dependencies and fix code issues

This commit is contained in:
Eko Haryadi
2024-02-20 18:44:11 +07:00
parent 2758481259
commit a0ccf13466
65 changed files with 3454 additions and 2271 deletions

View File

@ -1,18 +1,24 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
Laporan Pengaduan Total
</h1>
</div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="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" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
@ -111,11 +117,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { AnomaliTable2 } from '.'
import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(false)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -150,11 +161,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanAnomaliPenangananPengaduanGangguanPetugas(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
nama_posko
persen_penyelesaian_petugas_anomali_cc_123_marking
persen_penyelesaian_petugas_anomali_cc_123_non_marking
persen_penyelesaian_petugas_anomali_marking
persen_penyelesaian_petugas_anomali_non_marking
persen_penyelesaian_petugas_anomali_pln_mobile_marking
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_penyelesaian_petugas_anomali_cc_123_marking
total_penyelesaian_petugas_anomali_cc_123_non_marking
total_penyelesaian_petugas_anomali_marking
total_penyelesaian_petugas_anomali_non_marking
total_penyelesaian_petugas_anomali_pln_mobile_marking
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_petugas
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

View File

@ -4,7 +4,7 @@
Laporan Pengaduan PLN Mobile
</h1>
</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"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
@ -48,6 +48,7 @@ const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {

View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
Laporan Pengaduan Total
@ -11,66 +17,70 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<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="Total Petugas" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
data-type="number" caption="b" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
data-type="number" caption="c" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
caption="d=b+c" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
data-type="number" caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
data-type="number" caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
data-type="number" caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid>
<AnomaliTable4 />
<AnomaliTable4 :filters-detail="filters" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -79,11 +89,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { AnomaliTable4 } from '.'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -118,12 +133,76 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!,
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
laporanAnomaliPenangananPengaduanGangguanPetugas(
dateFrom: $dateFrom
dateTo: $dateTo
jenisLaporan :$jenisLaporan
idUid: $idUid
idUp3: $idUp3
posko: $posko
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
) {
nama_posko
persen_penyelesaian_petugas_anomali_cc_123_marking
persen_penyelesaian_petugas_anomali_cc_123_non_marking
persen_penyelesaian_petugas_anomali_marking
persen_penyelesaian_petugas_anomali_non_marking
persen_penyelesaian_petugas_anomali_pln_mobile_marking
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_penyelesaian_petugas_anomali_cc_123_marking
total_penyelesaian_petugas_anomali_cc_123_non_marking
total_penyelesaian_petugas_anomali_marking
total_penyelesaian_petugas_anomali_non_marking
total_penyelesaian_petugas_anomali_pln_mobile_marking
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_petugas
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [
...data.value,
{
...item,
total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

View File

@ -4,54 +4,56 @@
Laporan Pengaduan PLN Mobile
</h1>
</div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="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" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<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="" caption="Nama Petugas" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
data-type="number" caption="b" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
data-type="number" caption="c" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
caption="d=b+c" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
data-type="number" caption="e=b/a" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
data-type="number" caption="f=c/a" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
data-type="number" caption="g=e+f" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -59,6 +61,12 @@
</template>
<script setup lang="ts">
defineProps({
filtersDetail: {
type: Object as PropType<any>,
required: true
}
})
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -66,12 +74,18 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { ref } from 'vue'
import { ref, watch, type PropType } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const filtersDetail = ref({}); // Declare the 'filters' variable
watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
filterData(newValue)
}, { immediate: true })
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -105,5 +119,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!,
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
dateFrom: $dateFrom
dateTo: $dateTo
jenisLaporan :$jenisLaporan
idUid: $idUid
idUp3: $idUp3
posko: $posko
) {
nama_petugas
nama_posko
persen_penyelesaian_petugas_anomali
persen_penyelesaian_petugas_anomali_cc_123
persen_penyelesaian_petugas_anomali_pln_mobile
total_penyelesaian_petugas_anomali
total_penyelesaian_petugas_anomali_cc_123
total_penyelesaian_petugas_anomali_pln_mobile
total_wo
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
</script>

View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
Laporan Pengaduan Total
@ -77,6 +83,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
@ -87,11 +95,14 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { AnomaliTable6 } from '.'
import { Type4 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const loading = ref(true)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -127,11 +138,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
const GET_laporanCheckInCheckOut = gql`
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanCheckInCheckOut(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_wo_gangguan_individual
avg_durasi_wo_penugasan_khusus
avg_rct_wo_gangguan_individual
avg_rpt_wo_gangguan_individual
jumlah_wo_gangguan_individual
jumlah_wo_penugasan_khusus
personil_yantek
user_regu
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
GET_laporanCheckInCheckOut,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

View File

@ -35,6 +35,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -47,6 +49,7 @@ const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const loading = ref(false)
const onExporting = (e: any) => {

View File

@ -1,45 +1,47 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
caption="Rata-rata RPT WO Gangguan"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
@ -51,13 +53,18 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { Type1 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const data = ref<any[]>([])
const showDetail = ref(false)
const loading = ref(false)
const showData = () => {
showDetail.value = true
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -86,14 +93,72 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
console.log(data)
}
const filters = ref();
const filterData = (filters: any) => {
console.log(filters)
const GET_laporanCheckInCheckOut = gql`
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanCheckInCheckOut(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_wo_gangguan_individual
avg_durasi_wo_penugasan_khusus
avg_rct_wo_gangguan_individual
avg_rpt_wo_gangguan_individual
jumlah_wo_gangguan_individual
jumlah_wo_penugasan_khusus
personil_yantek
user_regu
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
GET_laporanCheckInCheckOut,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const filters = ref()
</script>

View File

@ -1,5 +1,5 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
@ -13,47 +13,47 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<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="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
css-class="custom-table-column" />
</DxColumn>
@ -73,13 +73,14 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import Filters from '@/components/Form/Filters.vue'
import { Type3 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -109,13 +110,74 @@ const onExporting = (e: any) => {
}
}
const GET_laporanCttKwhPeriksa = gql`
query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
laporanCttKwhPeriksa(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
dlpd
history_p2ti
nama_posko
rekomendasi_sistem_mendatangkan_petugas
total_wo
total_wo_cc123
total_wo_comcen
total_wo_loket
total_wo_pln_mobile
}
}
`
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.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 { onResult, onError, loading, refetch } = useQuery(
GET_laporanCttKwhPeriksa,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
console.log(data)
}
const filters = ref()
const filterData = (filters: any) => {
console.log(filters)
const showData = () => {
showDetail.value = true
}
const filters = ref()
</script>

View File

@ -1,6 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
<Filters @reset-form="runReset = !runReset" @run-search="() => filterData(filters)" class="mb-4">
<Type1 :run-reset="runReset" @update:filters="(value) => {
filters = value
}
" />
@ -12,15 +12,18 @@
:hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxPaging :page-size="5" :enabled="true" />
<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" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxSelection mode="single" />
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
caption="Pembuat Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
@ -31,13 +34,13 @@
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
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="nama_posko_baru"
caption="Posko Tujuan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
cell-template="data" />
@ -125,14 +128,14 @@
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko Awal:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko Tujuan:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -188,7 +191,7 @@
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
</div>
</div>
@ -215,7 +218,6 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useDialogStore } from '@/stores/dialog'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
@ -230,24 +232,23 @@ const dialog = useDialogStore()
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const runReset = ref(false)
const closeDetail = () => {
showDetail.value = false
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
indent: 100
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
exportToExcel({
component: e.component,
@ -255,7 +256,7 @@ const onExporting = (e: any) => {
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
})
})
@ -264,7 +265,7 @@ const onExporting = (e: any) => {
}
const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
daftarGangguanDialihkanKePoskoLain(
dateFrom: $dateFrom
dateTo: $dateTo
@ -275,18 +276,18 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
alamat_pelapor
durasi_recovery_time
durasi_response_time
waktu_lapor
waktu_dialihkan
waktu_recovery
waktu_response
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko_asal
posko_tujuan
nama_posko_lama
nama_posko_baru
status_akhir
waktu_recovery
waktu_response
@ -299,7 +300,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
@ -311,9 +312,7 @@ const filterData = (params: any) => {
{
...item,
pembuat_laporan: '-',
waktu_lapor: '-',
status_akhir: fetchStatus(item.status_akhir),
posko: item.posko_asal
posko: item.nama_posko_baru
}
]
})

View File

@ -6,7 +6,7 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"

View File

@ -19,7 +19,8 @@
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<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="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
css-class="custom-table-column" :group-index="0" />
@ -260,7 +261,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})

View File

@ -188,7 +188,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})

View File

@ -191,7 +191,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

View File

@ -158,7 +158,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})

View File

@ -124,7 +124,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

View File

@ -275,7 +275,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

View File

@ -205,7 +205,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

View File

@ -181,7 +181,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

View File

@ -154,7 +154,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

View File

@ -12,10 +12,10 @@
column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
@ -240,7 +240,7 @@ const filterData = (params: any) => {
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

View File

@ -159,7 +159,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})

View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -75,7 +75,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiResponseTime : minTime ? minTime : 0,
maxDurasiResponseTime : maxTime ? maxTime : 1,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

View File

@ -11,7 +11,7 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -75,7 +75,7 @@ const filterData = (params: any) => {
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -108,7 +108,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true"/>
@ -103,7 +103,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media : media ? media.id : "Twitter"

View File

@ -11,7 +11,7 @@
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
@ -110,7 +110,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3?.id ? up3.id : 0,
})

View File

@ -12,7 +12,7 @@
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -245,7 +245,7 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})

View File

@ -5,15 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -5,14 +5,14 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />

View File

@ -5,7 +5,7 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"

View File

@ -5,7 +5,7 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"

View File

@ -5,7 +5,7 @@
}
" />
</Filters>
<div>
<div id="data">
<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" :column-width="100" @exporting="onExporting"

View File

@ -11,30 +11,35 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<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 css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
caption="Nomor Gangguan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
caption="Nama Pelanggan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
caption="Isi Laporan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
caption="Penyebab Gangguan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Padam" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
caption="Tgl Padam" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Regu" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Sumber" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
caption="Sumber" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
caption="Vol" />
</DxColumn>
</DxDataGrid>
@ -42,19 +47,81 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import Filters from '@/components/Form/Filters.vue';
import { Type14 } from '@/components/Form/FiltersType';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const loading = ref(false)
const filters = ref()
const filterData = (filters: any) => {
console.log(filters)
const data = ref<any[]>([])
const daftarGangguanDanMaterialDipakai = gql`
query DaftardaftarGangguanDanMaterialDipakai(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
) {
daftarGangguanDanMaterialDipakai(
dateFrom: $dateFrom
dateTo: $dateTo
distribusi: $idUid
area: $idUp3
posko: $posko
) {
isi_laporan
nama_material
nama_pelanggan
nomor_gangguan
penyebab_gangguan
regu
satuan
sumber
volume
waktu_padam
}
}
`
const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
idUid: 0,
idUp3: 0,
posko: ''
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params
refetch({
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),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : "",
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDanMaterialDipakai.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()
</script>

View File

@ -1,29 +1,35 @@
<template>
<div>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<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 css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
caption="Kode Material" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
caption="Nama Material" />
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
caption="Sumber Material" />
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
<DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
:caption="i" />
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
:caption="i" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -31,21 +37,106 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType';
import Filters from '@/components/Form/Filters.vue';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const loading = ref(false)
const data = ref<any[]>([])
onMounted(() => {
const filters = useFiltersStore()
const rekapitulasiPemakaianMaterial = gql`
query DaftarrekapitulasiPemakaianMaterial(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
) {
rekapitulasiPemakaianMaterial(
dateFrom: $dateFrom
dateTo: $dateTo
distribusi: $idUid
area: $idUp3
posko: $posko
) {
kode_material
nama_material
satuan
sumber_material
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
filters.setConfig({
type: 'type-14'
})
}
}
`
const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
idUid: 0,
idUp3: 0,
posko: ''
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params
refetch({
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),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : "",
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiPemakaianMaterial.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()
</script>

View File

@ -6,32 +6,34 @@
" />
</Filters>
<div id="data">
<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"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="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" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<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 :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
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="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
caption="Total" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
@ -39,22 +41,22 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_lalu"
data-type="number" />
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
data-field="total_komplain_bulan_lalu" data-type="number" />
</DxColumn>
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
caption="Total" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
@ -62,26 +64,26 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_ini"
data-type="number" />
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
data-field="total_komplain_bulan_ini" data-type="number" />
</DxColumn>
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" 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="persen_penurunan_keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" caption="Gangguan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
caption="Informasi" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
caption="% Total" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -101,6 +103,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { getMonthName } from '@/utils/texts'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -108,6 +111,15 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
if (bulanSekarang.value - 1 == 0) {
let bulanLalu = 12
let tahunLalu = tahunSekarang.value - 1
} else {
let bulanLalu = bulanSekarang.value - 1
let tahunLalu = tahunSekarang.value
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -137,8 +149,8 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const penurunanJumlahKomplainBulanan = gql`
query DaftarpenurunanJumlahKomplainBulanan(
@ -181,42 +193,42 @@ const penurunanJumlahKomplainBulanan = gql`
}
`
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
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)
})
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()
</script>

View File

@ -71,6 +71,9 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()

View File

@ -11,7 +11,7 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />