fix: add margin bottom to all table
This commit is contained in:
kur0nek-o
@ -10,7 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:remote-operations="true"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -226,7 +226,7 @@ const tahunLalu = ref(tahunSekarang.value - 1)
|
||||
|
||||
// const MONALISAJUMLAHKALIGANGGUAN = gql`
|
||||
// query DaftarMonalisaJumlahKaliGangguan(
|
||||
// $regional: Int
|
||||
// $regional: String
|
||||
// $idUid: Int
|
||||
// $idUp3: Int
|
||||
// $idUlp: Int
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
|
||||
@ -1,73 +1,176 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div>
|
||||
<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)] mb-10"
|
||||
: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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Jumlah dan Durasi RPT & RCT Gangguan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_bulan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="a"
|
||||
data-type="number"
|
||||
data-field="total_rpt_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number"
|
||||
data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="b"
|
||||
data-type="number"
|
||||
data-field="jumlah_gangguan_rpt_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="c=a/b"
|
||||
data-type="number"
|
||||
data-field="rpt_gangguan_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="d"
|
||||
data-type="number"
|
||||
data-field="total_rct_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number"
|
||||
data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="e"
|
||||
data-type="number"
|
||||
data-field="jumlah_gangguan_rct_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="f=d/e"
|
||||
data-type="number"
|
||||
data-field="rct_gangguan_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="a"
|
||||
data-type="number"
|
||||
data-field="total_rpt_sampai_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number"
|
||||
data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="b"
|
||||
data-type="number"
|
||||
data-field="jumlah_gangguan_rpt_sampai_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
|
||||
data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="c=a/b"
|
||||
data-type="number"
|
||||
data-field="rpt_gangguan_sampai_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="d"
|
||||
data-type="number"
|
||||
data-field="total_rct_sampai_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number"
|
||||
data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="e"
|
||||
data-type="number"
|
||||
data-field="jumlah_gangguan_rct_sampai_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
|
||||
data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="f=d/e"
|
||||
data-type="number"
|
||||
data-field="rch_gangguan_sampai_bulan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
@ -150,7 +253,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
|
||||
idUp3: 0
|
||||
})
|
||||
const filterData = (params: any) => {
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
|
||||
refetch({
|
||||
regional: regional,
|
||||
@ -163,9 +266,7 @@ const filterData = (params: any) => {
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value, { ...item }
|
||||
]
|
||||
data.value = [...data.value, { ...item }]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
@ -211,5 +312,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,33 +1,77 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="id_gangguan"
|
||||
caption="ID Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="tipe_permasalahan"
|
||||
caption="Jenis Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="jumlah"
|
||||
caption="Jumlah"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="persen_gangguan"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -36,14 +80,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -87,75 +131,75 @@ const monalisaGangguanPerJenisGangguan = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
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 : 0,
|
||||
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.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
|
||||
@ -1,42 +1,104 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan_n_1"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_bulan"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun_n_1"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_tahun"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -45,14 +107,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -101,77 +163,77 @@ const monalisaRekapitulasiLaporUlangGangguan = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const filterData = (params: any) => {
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
||||
bulanSekarang.value = bulan.id;
|
||||
tahunSekarang.value = tahun.id;
|
||||
tahunLalu.value = tahun.id - 1;
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
bulanSekarang.value = bulan.id
|
||||
tahunSekarang.value = tahun.id
|
||||
tahunLalu.value = tahun.id - 1
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
|
||||
@ -1,42 +1,104 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan_n_1"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_bulan"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun_n_1"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_tahun"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -45,14 +107,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -101,77 +163,77 @@ const monalisaRekapitulasiEnsGangguan = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const filterData = (params: any) => {
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
||||
bulanSekarang.value = bulan.id;
|
||||
tahunSekarang.value = tahun.id;
|
||||
tahunLalu.value = tahun.id - 1;
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
bulanSekarang.value = bulan.id
|
||||
tahunSekarang.value = tahun.id
|
||||
tahunLalu.value = tahun.id - 1
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
|
||||
@ -1,32 +1,76 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="gangguan"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="informasi"
|
||||
data-type="number"
|
||||
caption="Informasi"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -35,14 +79,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -79,86 +123,85 @@ const monalisaGangguanBelumSelesai = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
gangguan
|
||||
informasi
|
||||
nama_posko
|
||||
total
|
||||
gangguan
|
||||
informasi
|
||||
nama_posko
|
||||
total
|
||||
}
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
|
||||
|
||||
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;
|
||||
bulanSekarang.value = bulan.id;
|
||||
tahunSekarang.value = tahun.id;
|
||||
tahunLalu.value = tahun.id - 1;
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaGangguanBelumSelesai.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
bulanSekarang.value = bulan.id
|
||||
tahunSekarang.value = tahun.id
|
||||
tahunLalu.value = tahun.id - 1
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaGangguanBelumSelesai.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
|
||||
@ -1,42 +1,104 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan_n_1"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_bulan"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun_n_1"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_tahun"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -44,7 +106,16 @@ import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -59,35 +130,34 @@ const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const tahunSekarang = ref(new Date().getFullYear())
|
||||
const bulanSekarang = ref(new Date().getMonth())
|
||||
const tahunLalu = ref(tahunSekarang.value - 1)
|
||||
@ -119,45 +189,45 @@ const MONALISAJUMLAHKALIKELUHAN = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, {
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: bulanSekarang.value,
|
||||
tahun: tahunSekarang.value
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: bulanSekarang.value,
|
||||
tahun: tahunSekarang.value
|
||||
})
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
||||
bulanSekarang.value = bulan.id;
|
||||
tahunSekarang.value = tahun.id;
|
||||
tahunLalu.value = tahun.id - 1;
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
idUid: idUid ? idUid.id : 0,
|
||||
idUp3: idUp3 ? idUp3.id : 0,
|
||||
bulan: bulan ? bulan.id : bulanSekarang.value,
|
||||
tahun: bulan ? tahun.id : tahunSekarang.value
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.monalisaJumlahKaliKeluhan;
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
bulanSekarang.value = bulan.id
|
||||
tahunSekarang.value = tahun.id
|
||||
tahunLalu.value = tahun.id - 1
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
idUid: idUid ? idUid.id : 0,
|
||||
idUp3: idUp3 ? idUp3.id : 0,
|
||||
bulan: bulan ? bulan.id : bulanSekarang.value,
|
||||
tahun: bulan ? tahun.id : tahunSekarang.value
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.monalisaJumlahKaliKeluhan
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
onMounted(() => {
|
||||
console.log(bulanSekarang.value)
|
||||
});
|
||||
const filters = ref();
|
||||
</script>
|
||||
console.log(bulanSekarang.value)
|
||||
})
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,42 +1,108 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Jumlah RCT Kali Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan_n_1"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_bulan"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun_n_1"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_tahun"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -44,7 +110,16 @@ import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -64,32 +139,32 @@ const tahunLalu = ref(tahunSekarang.value - 1)
|
||||
const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const monalisaDispatchingTimeKeluhan = gql`
|
||||
query DaftarmonalisaDispatchingTimeKeluhan(
|
||||
@ -119,49 +194,49 @@ const monalisaDispatchingTimeKeluhan = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, {
|
||||
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;
|
||||
bulanSekarang.value = bulan.id;
|
||||
tahunSekarang.value = tahun.id;
|
||||
tahunLalu.value = tahun.id - 1;
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaDispatchingTimeKeluhan.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 { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
bulanSekarang.value = bulan.id
|
||||
tahunSekarang.value = tahun.id
|
||||
tahunLalu.value = tahun.id - 1
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaDispatchingTimeKeluhan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,42 +1,108 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Jumlah RPT Kali Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan_n_1"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_bulan"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun_n_1"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_tahun"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -44,7 +110,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -64,96 +139,105 @@ 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()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const monalisaRecoveryTimeKeluhan = gql`
|
||||
query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
|
||||
query DaftarmonalisaRecoveryTimeKeluhan(
|
||||
$regional: regional
|
||||
$posko: Int
|
||||
$idUid: Int
|
||||
$idUp3: Int
|
||||
$bulan: Int
|
||||
$tahun: Int
|
||||
) {
|
||||
monalisaRecoveryTimeKeluhan(
|
||||
regional:$regional
|
||||
regional: $regional
|
||||
posko: $posko
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
jumlah_bulan
|
||||
jumlah_bulan_n_1
|
||||
jumlah_tahun
|
||||
jumlah_tahun_n_1
|
||||
nama_posko
|
||||
persen_bulan
|
||||
persen_tahun
|
||||
jumlah_bulan
|
||||
jumlah_bulan_n_1
|
||||
jumlah_tahun
|
||||
jumlah_tahun_n_1
|
||||
nama_posko
|
||||
persen_bulan
|
||||
persen_tahun
|
||||
}
|
||||
}
|
||||
`;
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
|
||||
regional: 0,
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: 0,
|
||||
posko: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
})
|
||||
const filterData = (params: any) => {
|
||||
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
||||
bulanSekarang.value = bulan.id;
|
||||
tahunSekarang.value = tahun.id;
|
||||
tahunLalu.value = tahun.id - 1;
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
|
||||
data.value = [...data.value, {
|
||||
...item,
|
||||
}];
|
||||
});
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
bulanSekarang.value = bulan.id
|
||||
tahunSekarang.value = tahun.id
|
||||
tahunLalu.value = tahun.id - 1
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,79 +1,182 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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"
|
||||
/>
|
||||
<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="nama_posko" caption="Nama Unit"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Jumlah dan Durasi RPT & RCT Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="a"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="b"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="c=a/b"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="d"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="e"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="f=d/e"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="a"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="b"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="c=a/b"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="d"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="e"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
caption="f=d/e"
|
||||
data-type="number"
|
||||
data-field=""
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -81,7 +184,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -98,37 +210,37 @@ const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
const monalisaJumlahDurasiRptRctKeluhan = gql`
|
||||
query DaftarmonalisaJumlahDurasiRptRctKeluhan(
|
||||
@ -164,43 +276,43 @@ const monalisaJumlahDurasiRptRctKeluhan = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
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 : 0,
|
||||
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.monalisaJumlahDurasiRptRctKeluhan.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 : 0,
|
||||
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.monalisaJumlahDurasiRptRctKeluhan.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>
|
||||
</script>
|
||||
|
||||
@ -1,34 +1,77 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
caption="NO"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="id_keluhan"
|
||||
caption="ID Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="jenis_keluhan"
|
||||
caption="Jenis Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="jumlah"
|
||||
caption="Jumlah"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="persen_keluhan"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -36,7 +79,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -53,37 +105,37 @@ const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
const monalisaKeluhanPerJenisKeluhan = gql`
|
||||
query DaftarmonalisaKeluhanPerJenisKeluhan(
|
||||
@ -110,42 +162,42 @@ const monalisaKeluhanPerJenisKeluhan = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenisKeluhan, {
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
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 : 0,
|
||||
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.monalisaKeluhanPerJenisKeluhan.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 : 0,
|
||||
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.monalisaKeluhanPerJenisKeluhan.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>
|
||||
</script>
|
||||
|
||||
@ -1,42 +1,104 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_bulan_n_1"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_bulan"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_tahun_n_1"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_tahun"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -44,7 +106,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -64,37 +135,37 @@ 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()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
const monalisaRekapitulasiLaporUlangKeluhan = gql`
|
||||
query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
|
||||
@ -124,44 +195,44 @@ const monalisaRekapitulasiLaporUlangKeluhan = gql`
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangKeluhan, {
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const filterData = (params: any) => {
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
||||
bulanSekarang.value = bulan.id;
|
||||
tahunSekarang.value = tahun.id;
|
||||
tahunLalu.value = tahun.id - 1;
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRekapitulasiLaporUlangKeluhan.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 { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
bulanSekarang.value = bulan.id
|
||||
tahunSekarang.value = tahun.id
|
||||
tahunLalu.value = tahun.id - 1
|
||||
refetch({
|
||||
regional: regional,
|
||||
posko: posko ? posko.id : 0,
|
||||
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.monalisaRekapitulasiLaporUlangKeluhan.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>
|
||||
</script>
|
||||
|
||||
@ -1,29 +1,73 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</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" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="keluhan" data-type="number" caption="Keluhan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="keluhan"
|
||||
data-type="number"
|
||||
caption="Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="informasi"
|
||||
data-type="number"
|
||||
caption="Informasi"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
@ -1,90 +1,255 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
</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">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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"
|
||||
/>
|
||||
<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="`${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>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
||||
data-field="total_komplain_bulan_lalu" data-type="number" />
|
||||
</DxColumn>
|
||||
<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>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn
|
||||
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 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>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn 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>
|
||||
<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>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
<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 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>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="Jml"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn
|
||||
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>
|
||||
<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>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -92,7 +257,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -111,43 +285,43 @@ 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
|
||||
let bulanLalu = 12
|
||||
let tahunLalu = tahunSekarang.value - 1
|
||||
} else {
|
||||
let bulanLalu = bulanSekarang.value - 1
|
||||
let tahunLalu = tahunSekarang.value
|
||||
let bulanLalu = bulanSekarang.value - 1
|
||||
let tahunLalu = tahunSekarang.value
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
const penurunanJumlahKomplainBulanan = gql`
|
||||
query DaftarpenurunanJumlahKomplainBulanan(
|
||||
@ -166,66 +340,66 @@ const penurunanJumlahKomplainBulanan = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
delta_penurunan_gangguan
|
||||
delta_penurunan_informasi
|
||||
delta_penurunan_keluhan
|
||||
gangguan_bulan_ini
|
||||
gangguan_bulan_lalu
|
||||
informasi_gangguan_bulan_ini
|
||||
informasi_gangguan_bulan_lalu
|
||||
informasi_keluhan_bulan_ini
|
||||
informasi_keluhan_bulan_lalu
|
||||
keluhan_bulan_ini
|
||||
keluhan_bulan_lalu
|
||||
nama_posko
|
||||
persen_penurunan_gangguan
|
||||
persen_penurunan_informasi
|
||||
persen_penurunan_keluhan
|
||||
persen_penurunan_total
|
||||
total_bulan_ini
|
||||
total_bulan_lalu
|
||||
total_komplain_bulan_ini
|
||||
total_komplain_bulan_lalu
|
||||
delta_penurunan_gangguan
|
||||
delta_penurunan_informasi
|
||||
delta_penurunan_keluhan
|
||||
gangguan_bulan_ini
|
||||
gangguan_bulan_lalu
|
||||
informasi_gangguan_bulan_ini
|
||||
informasi_gangguan_bulan_lalu
|
||||
informasi_keluhan_bulan_ini
|
||||
informasi_keluhan_bulan_lalu
|
||||
keluhan_bulan_ini
|
||||
keluhan_bulan_lalu
|
||||
nama_posko
|
||||
persen_penurunan_gangguan
|
||||
persen_penurunan_informasi
|
||||
persen_penurunan_keluhan
|
||||
persen_penurunan_total
|
||||
total_bulan_ini
|
||||
total_bulan_lalu
|
||||
total_komplain_bulan_ini
|
||||
total_komplain_bulan_lalu
|
||||
}
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
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 : 0,
|
||||
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 : 0,
|
||||
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>
|
||||
</script>
|
||||
|
||||
@ -1,48 +1,124 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</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)] mb-10"
|
||||
: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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" caption="Periode: Februari,2020" 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_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
|
||||
caption="SLA (Menit)" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Gangguan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_gangguan_bulan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_gangguan_sla"
|
||||
data-type="number"
|
||||
caption="SLA (Menit)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
|
||||
caption="SLA (Jam)" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_keluhan_bulan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_keluhan_sla"
|
||||
data-type="number"
|
||||
caption="SLA (Jam)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_komplain_gangguan"
|
||||
data-type="number"
|
||||
caption="G"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_komplain_keluhan"
|
||||
data-type="number"
|
||||
caption="K"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
|
||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
|
||||
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="persen_rata_aging_komplain"
|
||||
data-type="number"
|
||||
caption="% Rata-Rata Aging Complains"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -53,7 +129,16 @@ import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -78,7 +163,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -89,7 +174,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -121,14 +206,14 @@ const agingComplaintBulanan = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
aging_komplain_gangguan
|
||||
aging_komplain_keluhan
|
||||
nama_posko
|
||||
persen_rata_aging_komplain
|
||||
rata_rct_gangguan_bulan
|
||||
rata_rct_gangguan_sla
|
||||
rata_rct_keluhan_bulan
|
||||
rata_rct_keluhan_sla
|
||||
aging_komplain_gangguan
|
||||
aging_komplain_keluhan
|
||||
nama_posko
|
||||
persen_rata_aging_komplain
|
||||
rata_rct_gangguan_bulan
|
||||
rata_rct_gangguan_sla
|
||||
rata_rct_keluhan_bulan
|
||||
rata_rct_keluhan_sla
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -171,4 +256,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,38 +1,94 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</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)] mb-10"
|
||||
: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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" caption="Periode: Februari,2020" 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_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
|
||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="ens_terencana"
|
||||
data-type="number"
|
||||
caption="Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="ens_tidak_terencana"
|
||||
data-type="number"
|
||||
caption="Tidak Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="ens_bencana_alam"
|
||||
data-type="number"
|
||||
caption="Bencana Alam"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
||||
css-class="custom-table-column" />
|
||||
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="kpi_ens"
|
||||
data-type="number"
|
||||
caption="KPI ENS"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -42,7 +98,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -64,7 +129,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -75,7 +140,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -107,12 +172,12 @@ const agingComplaintBulanan = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
ens_bencana_alam
|
||||
ens_terencana
|
||||
ens_tidak_terencana
|
||||
kpi_ens
|
||||
nama_posko
|
||||
total
|
||||
ens_bencana_alam
|
||||
ens_terencana
|
||||
ens_tidak_terencana
|
||||
kpi_ens
|
||||
nama_posko
|
||||
total
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -155,4 +220,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,40 +1,100 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</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)] mb-10"
|
||||
: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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
:min-width="250"
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Kepatuhan dan Akurasi APKT"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
||||
data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
||||
data-type="number"
|
||||
caption="Total Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
||||
data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
||||
data-type="number"
|
||||
caption="Total Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
|
||||
caption="Komplain Pelanggan %" css-class="custom-table-column" />
|
||||
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_komplain_pelanggan"
|
||||
data-type="number"
|
||||
caption="Komplain Pelanggan %"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -44,7 +104,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -66,7 +135,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -77,7 +146,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -109,12 +178,12 @@ const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
kepatuhan_akurasi_gangguan_berulang_bulan
|
||||
kepatuhan_akurasi_gangguan_berulang_total
|
||||
kepatuhan_akurasi_keluhan_berulang_bulan
|
||||
kepatuhan_akurasi_keluhan_berulang_total
|
||||
nama_posko
|
||||
persen_komplain_pelanggan
|
||||
kepatuhan_akurasi_gangguan_berulang_bulan
|
||||
kepatuhan_akurasi_gangguan_berulang_total
|
||||
kepatuhan_akurasi_keluhan_berulang_bulan
|
||||
kepatuhan_akurasi_keluhan_berulang_total
|
||||
nama_posko
|
||||
persen_komplain_pelanggan
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -157,4 +226,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,45 +1,120 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @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"
|
||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
|
||||
caption="SLA (Menit)" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Gangguan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_gangguan_bulan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_gangguan_sla"
|
||||
data-type="number"
|
||||
caption="SLA (Menit)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
|
||||
caption="SLA (Jam)" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_keluhan_bulan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_keluhan_sla"
|
||||
data-type="number"
|
||||
caption="SLA (Jam)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_komplain_gangguan"
|
||||
data-type="number"
|
||||
caption="G"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_komplain_keluhan"
|
||||
data-type="number"
|
||||
caption="K"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
|
||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
|
||||
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="persen_rata_aging_komplain"
|
||||
data-type="number"
|
||||
caption="% Rata-Rata Aging Complains"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -49,7 +124,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -71,7 +155,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -82,7 +166,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -114,26 +198,26 @@ const penurunanJumlahKomplainKumulatif = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
delta_penurunan_gangguan
|
||||
delta_penurunan_informasi
|
||||
delta_penurunan_keluhan
|
||||
gangguan_bulan_ini
|
||||
gangguan_bulan_lalu
|
||||
informasi_gangguan_bulan_ini
|
||||
informasi_gangguan_bulan_lalu
|
||||
informasi_keluhan_bulan_ini
|
||||
informasi_keluhan_bulan_lalu
|
||||
keluhan_bulan_ini
|
||||
keluhan_bulan_lalu
|
||||
nama_posko
|
||||
persen_penurunan_gangguan
|
||||
persen_penurunan_informasi
|
||||
persen_penurunan_keluhan
|
||||
persen_penurunan_total
|
||||
total_bulan_ini
|
||||
total_bulan_lalu
|
||||
total_komplain_bulan_ini
|
||||
total_komplain_bulan_lalu
|
||||
delta_penurunan_gangguan
|
||||
delta_penurunan_informasi
|
||||
delta_penurunan_keluhan
|
||||
gangguan_bulan_ini
|
||||
gangguan_bulan_lalu
|
||||
informasi_gangguan_bulan_ini
|
||||
informasi_gangguan_bulan_lalu
|
||||
informasi_keluhan_bulan_ini
|
||||
informasi_keluhan_bulan_lalu
|
||||
keluhan_bulan_ini
|
||||
keluhan_bulan_lalu
|
||||
nama_posko
|
||||
persen_penurunan_gangguan
|
||||
persen_penurunan_informasi
|
||||
persen_penurunan_keluhan
|
||||
persen_penurunan_total
|
||||
total_bulan_ini
|
||||
total_bulan_lalu
|
||||
total_komplain_bulan_ini
|
||||
total_komplain_bulan_lalu
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -176,4 +260,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,46 +1,121 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @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"
|
||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
|
||||
caption="SLA (Menit)" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Gangguan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_gangguan_bulan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_gangguan_sla"
|
||||
data-type="number"
|
||||
caption="SLA (Menit)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
|
||||
caption="Feb 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
|
||||
caption="SLA (Jam)" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Rata-Rata RCT Keluhan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_keluhan_bulan"
|
||||
data-type="number"
|
||||
caption="Feb 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rata_rct_keluhan_sla"
|
||||
data-type="number"
|
||||
caption="SLA (Jam)"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_komplain_gangguan"
|
||||
data-type="number"
|
||||
caption="G"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="aging_komplain_keluhan"
|
||||
data-type="number"
|
||||
caption="K"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
|
||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
|
||||
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="persen_rata_aging_komplain"
|
||||
data-type="number"
|
||||
caption="% Rata-Rata Aging Complains"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -50,7 +125,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -72,7 +156,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -83,7 +167,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -115,14 +199,14 @@ const agingComplaintKumulatif = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
aging_komplain_gangguan
|
||||
aging_komplain_keluhan
|
||||
nama_posko
|
||||
persen_rata_aging_komplain
|
||||
rata_rct_gangguan_bulan
|
||||
rata_rct_gangguan_sla
|
||||
rata_rct_keluhan_bulan
|
||||
rata_rct_keluhan_sla
|
||||
aging_komplain_gangguan
|
||||
aging_komplain_keluhan
|
||||
nama_posko
|
||||
persen_rata_aging_komplain
|
||||
rata_rct_gangguan_bulan
|
||||
rata_rct_gangguan_sla
|
||||
rata_rct_keluhan_bulan
|
||||
rata_rct_keluhan_sla
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -165,4 +249,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,38 +1,93 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @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)] mb-10"
|
||||
: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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" caption="Periode: Februari,2020" 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_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
|
||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="ens_terencana"
|
||||
data-type="number"
|
||||
caption="Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="ens_tidak_terencana"
|
||||
data-type="number"
|
||||
caption="Tidak Terencana"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="ens_bencana_alam"
|
||||
data-type="number"
|
||||
caption="Bencana Alam"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
||||
css-class="custom-table-column" />
|
||||
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="kpi_ens"
|
||||
data-type="number"
|
||||
caption="KPI ENS"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -42,7 +97,16 @@ import { ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -65,7 +129,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -76,7 +140,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -108,23 +172,26 @@ const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
kepatuhan_akurasi_gangguan_berulang_bulan
|
||||
kepatuhan_akurasi_gangguan_berulang_total
|
||||
kepatuhan_akurasi_keluhan_berulang_bulan
|
||||
kepatuhan_akurasi_keluhan_berulang_total
|
||||
nama_posko
|
||||
persen_komplain_pelanggan
|
||||
kepatuhan_akurasi_gangguan_berulang_bulan
|
||||
kepatuhan_akurasi_gangguan_berulang_total
|
||||
kepatuhan_akurasi_keluhan_berulang_bulan
|
||||
kepatuhan_akurasi_keluhan_berulang_total
|
||||
nama_posko
|
||||
persen_komplain_pelanggan
|
||||
}
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
kepatuhandanAkurasiDalamPelaporanKumulatif,
|
||||
{
|
||||
regional: '',
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||
|
||||
@ -156,4 +223,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,38 +1,97 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @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"
|
||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
: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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Kepatuhan dan Akurasi APKT"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
||||
data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
||||
data-type="number"
|
||||
caption="Total Gangguan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
||||
data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
||||
data-type="number"
|
||||
caption="Jan 2020"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
||||
data-type="number"
|
||||
caption="Total Keluhan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
|
||||
caption="Komplain Pelanggan %" css-class="custom-table-column" />
|
||||
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="persen_komplain_pelanggan"
|
||||
data-type="number"
|
||||
caption="Komplain Pelanggan %"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -42,7 +101,16 @@ import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -65,7 +133,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -76,7 +144,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -108,12 +176,12 @@ const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
kepatuhan_akurasi_gangguan_berulang_bulan
|
||||
kepatuhan_akurasi_gangguan_berulang_total
|
||||
kepatuhan_akurasi_keluhan_berulang_bulan
|
||||
kepatuhan_akurasi_keluhan_berulang_total
|
||||
nama_posko
|
||||
persen_komplain_pelanggan
|
||||
kepatuhan_akurasi_gangguan_berulang_bulan
|
||||
kepatuhan_akurasi_gangguan_berulang_total
|
||||
kepatuhan_akurasi_keluhan_berulang_bulan
|
||||
kepatuhan_akurasi_keluhan_berulang_total
|
||||
nama_posko
|
||||
persen_komplain_pelanggan
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -156,4 +224,4 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user