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

Merge branch 'dev-bagus' of https://github.com/defuj/eis into dev-defuj

Browse Source
This commit is contained in:
Dede Fuji Abdul
2024-02-29 11:24:34 +07:00
parent 1f71d22f28 cd1ca307d0
commit d50a436d65
72 changed files with 8998 additions and 4505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/css/style.css
View File

@ -1373,6 +1373,14 @@ body {
margin-top: 1.5rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.box-border {
box-sizing: border-box;
}

4
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
View File

@ -52,8 +52,8 @@
data-type="number" caption="f=c/a" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
data-type="number" caption="g=e+f" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali" data-type="number"
caption="g=e+f" css-class="custom-table-column" />
</DxColumn>
</DxColumn>

18
src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
View File

@ -20,8 +20,7 @@
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
css-class="custom-table-column">
@ -42,21 +41,18 @@
css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
caption="Non Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
data-type="number" caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
data-type="number" caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
data-type="number" caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center"
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
caption="Non Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
data-type="number" caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">

161
src/components/Pages/Cico/LaporanCICO.vue
View File

@ -1,47 +1,122 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => filters = value" />
<Type1 @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 :width="200" alignment="center" data-field="user_regu" caption="User Regu"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
<DxColumn
:width="200"
alignment="center"
data-field="user_regu"
caption="User Regu"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="personil_yantek"
caption="Personil Yantek"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="jumlah_wo_gangguan_individual"
data-type="number"
caption="Jumlah WO Gangguan Individual"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_durasi_wo_gangguan_individual"
data-type="number"
caption="Rata-rata Durasi WO Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_rpt_wo_gangguan_individual"
data-type="number"
caption="Rata-rata RPT WO Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_rct_wo_gangguan_individual"
data-type="number"
caption="Rata-rata RCT WO Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="jumlah_wo_penugasan_khusus"
data-type="number"
caption="Jumlah Wo Penugasan Khusus"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_durasi_wo_penugasan_khusus"
data-type="number"
caption="Rata-rata Durasi WO Penugasan"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { 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'
@ -68,7 +143,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -79,7 +154,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')
@ -96,7 +171,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
const GET_laporanCheckInCheckOut = gql`
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
query laporanCheckInCheckOut(
$dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) {
laporanCheckInCheckOut(
dateFrom: $dateFrom
dateTo: $dateTo
@ -119,9 +200,13 @@ const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : "",
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : '',
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
@ -131,7 +216,7 @@ const filterData = (params: any) => {
data.value = [
...data.value,
{
...item,
...item
}
]
})
@ -144,17 +229,13 @@ const filterData = (params: any) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanCheckInCheckOut,
{
const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
}
)
})
const filters = ref()
</script>

132
src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
View File

@ -1,58 +1,136 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @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 :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 alignment="center" caption="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_cc123"
data-type="number"
caption="a"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_pln_mobile"
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_comcen"
data-type="number"
caption="c"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_wo"
data-type="number"
caption="d=b+c"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas"
data-type="number" caption="e" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="rekomendasi_sistem_mendatangkan_petugas"
data-type="number"
caption="e"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
css-class="custom-table-column" />
<DxColumn
alignment="center"
caption="Diberikan ke Pelanggan"
css-class="custom-table-column"
>
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_loket"
data-type="number"
caption="f"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="dlpd"
data-type="number"
caption="g"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="history_p2ti"
data-type="number"
caption="h"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>

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

@ -5,7 +5,7 @@
<div id="dataTable">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
class="max-h-[calc(100vh-140px)] mb-10"
:remote-operations="true"
:data-source="data"
key-expr="no_laporan"

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

@ -11,7 +11,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"

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

@ -11,7 +11,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
src/components/Pages/Gangguan/Table_12.vue
View File

@ -351,7 +351,6 @@ import {
DxColumn,
DxColumnFixing,
DxExport,
DxGroupItem,
DxLoadPanel,
DxPaging,
DxScrolling,

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

@ -5,7 +5,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"

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

@ -9,7 +9,7 @@
</Filters>
<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"
@ -46,11 +46,12 @@
<DxColumn
css-class="custom-table-column"
:width="50"
:width="100"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
data-field="no"
/>
<DxColumn
:width="170"
@ -90,6 +91,28 @@
{{ data.column.caption }}
</p>
</template>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Call PLN 123"
show-in-column="no"
css-class="text-white"
/>
<DxTotalItem
v-for="i in 31"
summary-type="sum"
display-format="{0}"
:column="`tgl${i}`"
css-class="text-white"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
@ -107,7 +130,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

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

@ -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"
@ -54,30 +54,56 @@
/>
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_posko"
caption="Nama Posko"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
:width="180"
alignment="center"
data-field="posko_in"
caption="Posko IN"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
:width="180"
alignment="center"
data-field="posko_out"
caption="Posko OUT"
css-class="custom-table-column"
/>
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="nama_up3" display-format="Total" />
<DxGroupItem
:show-in-group-footer="true"
column="posko_in"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="posko_out"
summary-type="sum"
display-format="{0}"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
@ -85,7 +111,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -95,7 +121,9 @@ import {
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxSelection,
DxSummary,
DxGroupItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

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

@ -1,61 +1,132 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
<Type1
@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 :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
caption="NO"
css-class="custom-table-column"
rowspan="4"
colspan="2"
>
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="a"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="regu"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="kode_regu"
caption="c"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan"
caption="d=(e+g)"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
caption="e"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
caption="f=(e/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_belum_selesai"
caption="g"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_belum_selesai"
caption="h=(g/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
@ -65,23 +136,43 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking"
caption="i" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_mobile_nonmarking"
caption="i"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
caption="j=(i/d)*100" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_nonmarking"
caption="j=(i/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking"
caption="k" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_mobile_nonmarking"
caption="k"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking"
caption="l" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_mobile_nonmarking"
caption="l"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
@ -89,23 +180,43 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"
caption="m" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_mobile_marking"
caption="m"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
caption="n=(m/d)*100" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_marking"
caption="n=(m/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking"
caption="o" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_mobile_marking"
caption="o"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking"
caption="p" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_mobile_marking"
caption="p"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
@ -115,25 +226,43 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking"
caption="q" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_nonmobile_nonmarking"
caption="q"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
caption="r=(q/d)*100" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_nonmobile_nonmarking"
caption="r=(q/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center"
data-field="avg_waktu_response_nonmobile_nonmarking" caption="s"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_nonmarking"
caption="s"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center"
data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_nonmarking"
caption="t"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
@ -141,29 +270,48 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking"
caption="u" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_nonmobile_marking"
caption="u"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
caption="v=(u/d)*100" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_nonmobile_marking"
caption="v=(u/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking"
caption="w" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_marking"
caption="w"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking"
caption="x" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_marking"
caption="x"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
@ -174,7 +322,16 @@ import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
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'
@ -182,10 +339,10 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -193,7 +350,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -204,7 +361,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')
@ -221,16 +378,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
query rekapitulasiGangguanDiselesaikanMobileAPKT
(
query rekapitulasiGangguanDiselesaikanMobileAPKT(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanDiselesaikanMobileAPKT
(
) {
rekapitulasiGangguanDiselesaikanMobileAPKT(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
@ -261,31 +416,37 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
total_laporan_nonmobile_nonmarking
total_selesai
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
}
`
const { onResult, onError, loading, refetch } = useQuery(
GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
})
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const filters = useFiltersStore()
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -294,8 +455,6 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,71 +1,196 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
<Type1
@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">
<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"
>
<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 :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" data-type="number" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
data-type="number"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Kode Unit"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="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
: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="Sudah 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
: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>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="Index"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" 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
: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>
</DxDataGrid>
</div>
</template>
@ -75,7 +200,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { onMounted, ref } from 'vue'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -85,10 +219,10 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -96,7 +230,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -107,7 +241,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')
@ -143,8 +277,8 @@ const createDummy = () => {
ret_max: 0,
ret_min: 0,
ret_more_sla: 0,
ret_less_sla: 0,
});
ret_less_sla: 0
})
}
}
@ -155,16 +289,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
query rekapitulasiGangguanRatingPerPosko
(
query rekapitulasiGangguanRatingPerPosko(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanRatingPerPosko
(
) {
rekapitulasiGangguanRatingPerPosko(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
@ -189,30 +321,36 @@ query rekapitulasiGangguanRatingPerPosko
selesai
total
}
}`;
}
`
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
const { onResult, onError, loading, refetch } = useQuery(
GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
})
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -221,8 +359,6 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,70 +1,195 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
<Type1
@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">
<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"
>
<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 :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
data-type="number"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Kode"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Regu"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="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
: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="Sudah 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
: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>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="Index"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" 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
: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>
</DxDataGrid>
</div>
@ -93,10 +218,10 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -167,23 +292,26 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
}
}
`
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
@ -196,7 +324,6 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
const filters = ref()
</script>

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

@ -1,52 +1,153 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type18 @update:filters="(value) => {
<Type18
@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">
<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"
>
<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 :width="170" alignment="center" data-field="uid" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn
:width="170"
alignment="center"
data-field="uid"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" />
<DxColumn
:width="100"
alignment="center"
data-field="januari"
data-type="number"
caption="Januari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="februari"
data-type="number"
caption="Februari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="maret"
data-type="number"
caption="Maret"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="april"
data-type="number"
caption="April"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="mei"
data-type="number"
caption="Mei"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juni"
data-type="number"
caption="Juni"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juli"
data-type="number"
caption="Juli"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="agustus"
data-type="number"
caption="Agustus"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="september"
data-type="number"
caption="September"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="oktober"
data-type="number"
caption="Oktober"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="november"
data-type="number"
caption="November"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="desember"
data-type="number"
caption="Desember"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
@ -58,7 +159,16 @@ import Type18 from '@/components/Form/FiltersType/Type18.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
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,10 +176,10 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -77,7 +187,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -88,7 +198,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')
@ -99,7 +209,6 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
@ -107,16 +216,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
query rekapitulasiGangguanKoreksiTransaksiIndividual
(
query rekapitulasiGangguanKoreksiTransaksiIndividual(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanKoreksiTransaksiIndividual
(
) {
rekapitulasiGangguanKoreksiTransaksiIndividual(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
@ -139,30 +246,36 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
ulp
up3
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
}
`
const { onResult, onError, loading, refetch } = useQuery(
GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
})
idUp3: 0
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -171,7 +284,6 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
const filters = ref()
</script>

217
src/components/Pages/Gangguan/Table_2.vue
View File

@ -4,50 +4,172 @@
</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="" :allow-column-resizing="true"
column-resizing-mode="widget">
<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=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible.sync="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="data" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
alignment="center"
data-field="jumlah_lapor"
caption="Jml Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -57,7 +179,11 @@
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
<DetailDialog
:open="showDetail"
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
@on-close="closeDetail"
>
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -131,7 +257,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1 h-[56px]"
/>
</div>
</div>
</DetailDialog>

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

@ -1,52 +1,153 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
<Type1
@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">
<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"
>
<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 :width="170" alignment="center" data-field="uid" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn
:width="170"
alignment="center"
data-field="uid"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" />
<DxColumn
:width="100"
alignment="center"
data-field="januari"
data-type="number"
caption="Januari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="februari"
data-type="number"
caption="Februari"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="maret"
data-type="number"
caption="Maret"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="april"
data-type="number"
caption="April"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="mei"
data-type="number"
caption="Mei"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juni"
data-type="number"
caption="Juni"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juli"
data-type="number"
caption="Juli"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="agustus"
data-type="number"
caption="Agustus"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="september"
data-type="number"
caption="September"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="oktober"
data-type="number"
caption="Oktober"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="november"
data-type="number"
caption="November"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="desember"
data-type="number"
caption="Desember"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
@ -74,10 +175,10 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -157,11 +258,15 @@ const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
@ -174,7 +279,6 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -4,50 +4,167 @@
</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="" :allow-column-resizing="true"
column-resizing-mode="widget">
<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=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
cell-template="data" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="data"
/>
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
caption="Referensi Marking" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="data" />
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -126,17 +243,32 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
class-name="flex-1 h-[56px]"
/>
</div>
</div>
</DetailDialog>

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

@ -5,7 +5,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"

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

@ -5,7 +5,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"

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

@ -5,7 +5,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"

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

@ -5,7 +5,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"

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

@ -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"

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

@ -11,7 +11,7 @@
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="dataReal"
:show-column-lines="true"
:show-row-lines="false"
@ -61,13 +61,12 @@
css-class="custom-table-column"
/>
<DxColumn
:width="150"
:width="120"
alignment="center"
name="jenisGangguanGroup"
data-field="jenisGangguan"
caption="Jenis Gangguan"
data-field="kode"
caption="Kode"
css-class="custom-table-column"
:group-index="0"
group-index="0"
/>
<DxColumn
:width="150"
@ -398,6 +397,7 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
persen_selesai
tipe_permasalahan
total
kode
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
@ -473,7 +473,7 @@ const filterData = (params: any) => {
...dataReal.value,
{
no: ++no,
kode: item.tipe_permasalahan,
kode: item.kode,
jenisGangguan: item.tipe_permasalahan,
laporan: {
total: item.total,

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

@ -5,7 +5,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"

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

@ -4,52 +4,176 @@
</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 :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="jumlah_lapor"
caption="Jml Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
@ -113,7 +237,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -123,8 +252,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

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

@ -4,49 +4,161 @@
</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 :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="data" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -103,7 +215,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -113,8 +230,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

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

@ -4,49 +4,161 @@
</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 :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="data" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -104,7 +216,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -114,8 +231,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

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

@ -4,50 +4,168 @@
</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 :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
cell-template="data" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -105,7 +223,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -115,8 +238,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

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

@ -4,52 +4,170 @@
</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 :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
cell-template="data" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
css-class="custom-table-column" cell-template="data" />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_media"
caption="Tgl Media"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_media"
caption="Keterangan Media"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
@ -77,13 +195,22 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -128,7 +255,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
class-name="flex-1 h-[56px]"
/>
</div>
</div>
</DetailDialog>

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

@ -5,7 +5,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"

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

@ -1,10 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @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"
<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="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
@ -111,107 +111,77 @@
css-class="custom-table-column" />
</DxDataGrid> -->
</div>
</div>
<div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Laporan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tgl Lapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Dalam Proses Bidang:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Dalam Proses Bidang:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Selesai Bidang Unit:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Selesai Bidang Unit:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Response Time:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Status:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
IDPEL/NO METER::
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER::</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Nama Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Alamat Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Telp Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Keterangan Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Rayon:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Rayon:</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Uraian:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Uraian:</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Response Pelanggan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Pelanggan:</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div>
</div>
</div>
</DetailDialog>
@ -300,16 +270,14 @@ const onExporting = (e: any) => {
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanAll
(
query rekapitulasiKeluhanAll(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanAll
(
) {
rekapitulasiKeluhanAll(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
@ -334,7 +302,8 @@ query rekapitulasiKeluhanAll
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
@ -343,14 +312,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0

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

@ -1,75 +1,210 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
<Type13 @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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
css-class="custom-table-column" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="fungsi_bidang"
caption="Fungsi Bidang"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" 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="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Min" 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="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" 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="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
@ -181,24 +316,26 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -207,6 +344,5 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
</script>

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

@ -1,75 +1,210 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="tipe_keluhan" caption="Jenis Keluhan"
css-class="custom-table-column" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tipe_keluhan"
caption="Jenis Keluhan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" 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="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" 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="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" 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="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
@ -82,7 +217,16 @@ import Type3 from '@/components/Form/FiltersType/Type3.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'
@ -101,7 +245,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -112,7 +256,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')
@ -128,19 +272,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerJenisKeluhan
(
query rekapitulasiKeluhanPerJenisKeluhan(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerJenisKeluhan
(
) {
rekapitulasiKeluhanPerJenisKeluhan(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
@ -164,33 +305,35 @@ query rekapitulasiKeluhanPerJenisKeluhan
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`;
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -199,6 +342,5 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
</script>

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

@ -1,78 +1,212 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
<Type13 @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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok Keluhan"
css-class="custom-table-column" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="kelompok"
caption="Kelompok Keluhan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" 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="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
@ -82,7 +216,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type13 from '@/components/Form/FiltersType/Type13.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'
@ -101,7 +244,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -112,7 +255,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')
@ -128,19 +271,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerKelompokKeluhan
(
query rekapitulasiKeluhanPerKelompokKeluhan(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerKelompokKeluhan
(
) {
rekapitulasiKeluhanPerKelompokKeluhan(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
@ -164,33 +304,35 @@ query rekapitulasiKeluhanPerKelompokKeluhan
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`;
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
;
}
console.log(queryResult.data)
console.log(queryResult.loading)

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

@ -1,75 +1,209 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
<Type13 @update:filters="(value) => (filters = value)" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:data-source="data" :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"
:data-source="data"
: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 :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tanggal_lapor"
caption="Tanggal Lapor"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" 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="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
@ -179,24 +313,26 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
}
console.log(queryResult.data)
console.log(queryResult.loading)

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

@ -1,74 +1,209 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" />
<Type8 @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 :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" 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="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
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="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
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="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
@ -179,14 +314,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
@ -195,7 +334,6 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -204,6 +342,5 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
</script>

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

@ -1,27 +1,67 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
<Type3 @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 :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Nama Media"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
css-class="custom-table-column" />
<DxColumn
v-for="i in 31"
:width="150"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
@ -146,14 +186,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
@ -162,7 +206,6 @@ const filterData = (params: any) => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
}
console.log(queryResult.data)
console.log(queryResult.loading)

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

@ -1,70 +1,197 @@
<template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" />
<Type8 @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 css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="150"
alignment="center"
data-field="regu"
caption="Kode Unit"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_idUlp"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" 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="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="in_process"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_in_process"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_rating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_rating"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_1"
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_2"
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_3"
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_4"
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_5"
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="indeks_rating"
data-type="number"
caption="Indeks"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_non_rating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_non_rating"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template>
@ -75,7 +202,16 @@ import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
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'
@ -94,7 +230,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -105,7 +241,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,19 +257,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanRatingPerUnit
(
query rekapitulasiKeluhanRatingPerUnit(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanRatingPerUnit
(
) {
rekapitulasiKeluhanRatingPerUnit(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
@ -158,33 +291,35 @@ query rekapitulasiKeluhanRatingPerUnit
selesai
total
}
}`;
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0,
idUp3: 0
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -193,6 +328,5 @@ const filterData = (params: any) => {
onError((error) => {
console.log(error)
})
}
</script>

193
src/components/Pages/Material/Daftar/Material_DGMYG.vue
View File

@ -1,57 +1,154 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => filters = value" />
<Type14 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<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=""
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
caption="Nomor Gangguan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
caption="Nama Pelanggan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
caption="Isi Laporan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
caption="Penyebab Gangguan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
caption="Tgl Padam" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nomo_gangguan"
caption="Nomor Gangguan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_pelanggan"
caption="Nama Pelanggan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="isi_laporan"
caption="Isi Laporan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="penyebab_gangguan"
caption="Penyebab Gangguan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="waktu_padam"
caption="Tgl Padam"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Tgl Nyala"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="regu"
caption="Regu"
/>
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
caption="Sumber" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
caption="Vol" />
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="sumber"
caption="Sumber"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Nama"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="satuan"
caption="Satuan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="volume"
caption="Vol"
/>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import Filters from '@/components/Form/Filters.vue';
import { Type14 } from '@/components/Form/FiltersType';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import Filters from '@/components/Form/Filters.vue'
import { Type14 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -60,7 +157,11 @@ const data = ref<any[]>([])
const daftarGangguanDanMaterialDipakai = gql`
query DaftardaftarGangguanDanMaterialDipakai(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
$dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) {
daftarGangguanDanMaterialDipakai(
dateFrom: $dateFrom
@ -79,13 +180,12 @@ const daftarGangguanDanMaterialDipakai = gql`
sumber
volume
waktu_padam
}
}
`
const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUid: 0,
idUp3: 0,
posko: ''
@ -94,12 +194,15 @@ const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : 0,
posko: posko ? posko.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {

202
src/components/Pages/Material/Rekap/Material_RPM.vue
View File

@ -1,35 +1,94 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => filters = value" />
<Type14 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<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=""
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
caption="Kode Material" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
caption="Nama Material" />
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan"
caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
caption="Sumber Material" />
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="kode_material"
caption="Kode Material"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_material"
caption="Nama Material"
/>
<DxColumn
css-class="custom-table-column"
:width="120"
alignment="center"
data-field="satuan"
caption="Satuan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="sumber_material"
caption="Sumber Material"
/>
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
:caption="i" css-class="custom-table-column" />
<DxColumn
v-for="i in 31"
:width="150"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template>
@ -37,7 +96,15 @@
<script setup lang="ts">
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable'
@ -50,7 +117,11 @@ const data = ref<any[]>([])
const rekapitulasiPemakaianMaterial = gql`
query DaftarrekapitulasiPemakaianMaterial(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
$dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) {
rekapitulasiPemakaianMaterial(
dateFrom: $dateFrom
@ -60,47 +131,46 @@ const rekapitulasiPemakaianMaterial = gql`
posko: $posko
) {
kode_material
nama_material
satuan
sumber_material
tgl1
tgl10
tgl11
tgl12
tgl13
tgl14
tgl15
tgl16
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
tgl23
tgl24
tgl25
tgl26
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
nama_material
satuan
sumber_material
tgl1
tgl10
tgl11
tgl12
tgl13
tgl14
tgl15
tgl16
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
tgl23
tgl24
tgl25
tgl26
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
}
}
`
const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUid: 0,
idUp3: 0,
posko: 0
@ -111,11 +181,15 @@ const filterData = (params: any) => {
const { posko, idUid, idUp3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : 0,
posko: posko ? posko.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {

4
src/components/Pages/Monalisa/Table_36.vue
View File

@ -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

2
src/components/Pages/Monalisa/Table_37.vue
View File

@ -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"

2
src/components/Pages/Monalisa/Table_38.vue
View File

@ -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"

2
src/components/Pages/Monalisa/Table_39.vue
View File

@ -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"

178
src/components/Pages/Monalisa/Table_40.vue
View File

@ -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>

82
src/components/Pages/Monalisa/Table_41.vue
View File

@ -1,31 +1,75 @@
<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 :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" />
<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>
@ -95,7 +139,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJeni
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,

112
src/components/Pages/Monalisa/Table_42.vue
View File

@ -1,38 +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" @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="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
: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
: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>
@ -109,10 +171,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
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;
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,

112
src/components/Pages/Monalisa/Table_43.vue
View File

@ -1,38 +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" @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="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
: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
: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>
@ -109,10 +171,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
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;
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,

85
src/components/Pages/Monalisa/Table_44.vue
View File

@ -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="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
: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>
@ -87,19 +131,18 @@ const monalisaGangguanBelumSelesai = gql`
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023,
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;
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,

134
src/components/Pages/Monalisa/Table_45.vue
View File

@ -1,38 +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" @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="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
: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
: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>
@ -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'
@ -65,7 +136,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -76,7 +147,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')
@ -87,7 +158,6 @@ const onExporting = (e: any) => {
}
}
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
@ -128,10 +198,10 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUH
})
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;
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,
@ -142,7 +212,7 @@ const filterData = (params: any) => {
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.monalisaJumlahKaliKeluhan;
data.value = queryResult.data.monalisaJumlahKaliKeluhan
}
console.log(queryResult.data)
console.log(queryResult.loading)
@ -158,6 +228,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
onMounted(() => {
console.log(bulanSekarang.value)
});
const filters = ref();
})
const filters = ref()
</script>

133
src/components/Pages/Monalisa/Table_46.vue
View File

@ -1,38 +1,104 @@
<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" caption="Jumlah RCT Kali Keluhan" 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 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
: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
: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>
@ -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'
@ -70,7 +145,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -81,7 +156,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')
@ -127,10 +202,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
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;
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,

162
src/components/Pages/Monalisa/Table_47.vue
View File

@ -1,38 +1,104 @@
<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" caption="Jumlah RPT Kali Keluhan" 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 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
: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
: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>
@ -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'
@ -70,7 +145,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -81,7 +156,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')
@ -92,9 +167,16 @@ const onExporting = (e: any) => {
}
}
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
@ -110,21 +192,20 @@ const monalisaRecoveryTimeKeluhan = gql`
persen_tahun
}
}
`;
`
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
regional: 0,
posko: 0,
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023,
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;
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,
@ -133,13 +214,16 @@ const filterData = (params: any) => {
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult(queryResult => {
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
data.value = [...data.value, {
...item,
}];
});
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)

190
src/components/Pages/Monalisa/Table_48.vue
View File

@ -1,74 +1,177 @@
<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 :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
: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
: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
: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
: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
: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
: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
: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
: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
: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
: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
: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
: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
:width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
@ -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'
@ -104,7 +216,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -115,7 +227,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')
@ -172,7 +284,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,

98
src/components/Pages/Monalisa/Table_49.vue
View File

@ -1,32 +1,75 @@
<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 :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" />
<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>
@ -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'
@ -59,7 +111,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -70,7 +122,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')
@ -118,7 +170,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenis
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,

127
src/components/Pages/Monalisa/Table_50.vue
View File

@ -1,38 +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" @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="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
: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
: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>
@ -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'
@ -70,7 +141,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -81,7 +152,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')
@ -132,10 +203,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
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;
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,

74
src/components/Pages/Monalisa/Table_51.vue
View File

@ -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>

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

@ -1,88 +1,253 @@
<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 :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
:width="170"
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
:caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
css-class="custom-table-column"
>
<DxColumn
:width="120"
alignment="center"
data-field="keluhan_bulan_lalu"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="gangguan_bulan_lalu"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn
:width="120"
alignment="center"
data-field="informasi_keluhan_bulan_lalu"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="informasi_gangguan_bulan_lalu"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_bulan_lalu"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
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
alignment="center"
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_komplain_bulan_lalu"
data-type="number"
/>
</DxColumn>
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn
:width="120"
alignment="center"
data-field="keluhan_bulan_ini"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="keluhan_bulan_lalu"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn
:width="120"
alignment="center"
data-field="informasi_keluhan_bulan_ini"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="informasi_gangguan_bulan_ini"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_bulan_ini"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
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
alignment="center"
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_komplain_bulan_ini"
data-type="number"
/>
</DxColumn>
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
caption="Informasi" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="delta_penurunan_keluhan"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_penurunan_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_penurunan_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
caption="Keluhan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
caption="Gangguan" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
caption="Informasi" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
caption="% Total" css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_keluhan"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_total"
data-type="number"
caption="% Total"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template>
@ -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'
@ -124,7 +298,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -135,7 +309,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')

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

@ -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')

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

@ -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')
@ -108,11 +173,11 @@ const agingComplaintBulanan = gql`
tahun: $tahun
) {
ens_bencana_alam
ens_terencana
ens_tidak_terencana
kpi_ens
nama_posko
total
ens_terencana
ens_tidak_terencana
kpi_ens
nama_posko
total
}
}
`

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

@ -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')

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

@ -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')

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

@ -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')

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

@ -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')
@ -117,14 +181,17 @@ const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
}
}
`
const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
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

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

@ -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')

173
src/components/Pages/PencarianData/PencarianData.vue
View File

@ -1,40 +1,139 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type15 @update:filters="(value) => filters = value" />
<Type15 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<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=""
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="No. Laporan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
caption="No Tlp Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Status" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UI Dist." />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UP 3" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko/ULP" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Petugas" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
caption="Keterangan DLPD" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
data-field=""
data-type="number"
caption="No"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="No. Laporan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Tgl Lapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="IDPEL/NO METER"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Nama Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Alamat Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="No Tlp Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Status"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="UI Dist."
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="UP 3"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Posko/ULP"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Petugas"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Keterangan DLPD"
/>
</DxDataGrid>
</div>
</template>
@ -42,9 +141,17 @@
<script setup lang="ts">
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { Type15 } from '@/components/Form/FiltersType';
import Filters from '@/components/Form/Filters.vue';
import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { Type15 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -53,7 +160,7 @@ const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const loading = ref(false)
const filters = ref();
const filters = ref()
const filterData = async (filters: any) => {
loading.value = true
await new Promise((resolve) => setTimeout(resolve, 1000))

157
src/components/Pages/Transaksi/Transaksi.vue
View File

@ -1,35 +1,127 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type17 @update:filters="(value) => filters = value" />
<Type17 @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" @row-prepared="onRowPrepared">
<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"
@row-prepared="onRowPrepared"
>
<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 :width="170" alignment="center" data-field="" caption="No.Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tipe Isu" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No.Telp" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Permasalahan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Deskripsi" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Buat" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Lap.Ulang" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Ket.Lap.Ulang"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi" css-class="custom-table-column" />
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="No.Lapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Tipe Isu"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Nama"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Unit"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="No.Telp"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Permasalahan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Deskripsi"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Tgl Buat"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Lap.Ulang"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Ket.Lap.Ulang"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Status"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Durasi"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template>
@ -37,7 +129,16 @@
<script setup lang="ts">
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'
@ -59,7 +160,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -70,7 +171,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')
@ -87,11 +188,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
const onRowPrepared = (e: any) => {
if (e.rowType === "data") {
if (e.rowType === 'data') {
if (e.data.Speed > e.data.SpeedLimit) {
// e.cellElement.style.cssText = "color: white; background-color: red";
// or
e.rowElement.classList.add("my-class");
e.rowElement.classList.add('my-class')
// To override alternation color
// e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
}
@ -143,7 +244,7 @@ const data = [
}
]
const filters = ref();
const filters = ref()
const filterData = (filters: any) => {
console.log(filters)
}