Update dependencies and fix code issues
This commit is contained in:
@ -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>
|
@ -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') {
|
||||
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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) => {
|
||||
|
@ -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>
|
@ -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>
|
@ -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
|
||||
}
|
||||
]
|
||||
})
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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
|
||||
})
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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
|
||||
})
|
||||
|
@ -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
|
||||
})
|
||||
|
@ -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
|
||||
})
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
})
|
||||
|
@ -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" />
|
||||
|
@ -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
|
||||
})
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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" />
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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>
|
@ -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>
|
@ -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>
|
@ -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()
|
||||
|
@ -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" />
|
||||
|
Reference in New Issue
Block a user