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

Merge branch 'development' of https://github.com/defuj/eis

Browse Source
This commit is contained in:
Dede Fuji Abdul 2023-11-08 14:37:56 +07:00
commit 51c471011d
55 changed files with 898 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/css/main.css
View File

@ -1,7 +1,26 @@
@import './base.css';
/* @import 'devextreme/dist/css/dx.material.blue.light.css'; */
@import 'devextreme/dist/css/dx.material.blue.light.compact.css';
/* @import 'devextreme/dist/css/dx.light.css'; */
/* @import 'devextreme/dist/css/dx.light.compact.css'; */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap');
@import './style.css';
@import './style.css';
.dx-datagrid-total-footer{
background-color: #035b71 !important;
}
.dx-datagrid-total-footer .dx-row.dx-footer-row{
background-color: #035b71 !important;
}
.dx-datagrid-total-footer > td{
background-color: #035b71 !important;
}
.dx-row.dx-datagrid-group-footer > td{
background-color: #e6eff1 !important;
}
.dx-datagrid-rowsview .dx-row.dx-group-row {
background-color: #F7F7F7 !important;
}
.dx-datagrid-group-footer{
background-color: #e6eff1 !important;
}
.dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection{
background-color: #035b71 !important;
}

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

@ -705,8 +705,6 @@ select {
--tw-backdrop-sepia: ;
}
/* DevExpress */
/* NavBar */
.menu-item {

7
src/assets/css/tailwind.css
View File

@ -3,13 +3,6 @@
@tailwind utilities;
@layer components {
/* DevExpress */
.dx-datagrid-rowsview .dx-row.dx-group-row {
@apply !bg-['#F7F7F7'];
}
.dx-datagrid-group-footer{
@apply !bg-primary-500;
}
/* NavBar */
.menu-item {
@apply w-full text-left block px-4 py-3 text-base text-gray-800;

2
src/components/Form/FiltersType/Type17.vue
View File

@ -39,7 +39,7 @@
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Cari Report Number:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Pencarian:</label>
<InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
</div>

9
src/components/Pages/Anomali/Table_61.vue
View File

@ -100,6 +100,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -143,4 +145,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
})
})
</script>

9
src/components/Pages/Anomali/Table_63.vue
View File

@ -68,6 +68,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -111,4 +113,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
})
})
</script>

9
src/components/Pages/Anomali/Table_65.vue
View File

@ -76,6 +76,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -119,4 +121,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-4'
})
})
</script>

10
src/components/Pages/Cico/Table_60.vue
View File

@ -33,6 +33,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -75,4 +77,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
reportButton: true
})
})
</script>

10
src/components/Pages/Ctt/Table_67.vue
View File

@ -55,6 +55,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -97,4 +99,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3',
reportButton: true
})
})
</script>

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

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -12,60 +12,136 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column" />
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="posko" caption="Posko" css-class="custom-table-column"
:group-index="0" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" 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="%"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
caption="%" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" 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="%"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" 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="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxTotalItem name="total" summary-type="sum" display-format="Total" show-in-column="no"
css-class="text-white" />
<DxTotalItem name="total" summary-type="sum" display-format="{0}" show-in-column="laporan.total"
column="laporan.total" css-class="text-white" />
<DxTotalItem name="total" column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.max" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem name="total" column="responseTime.menit.min" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
</DxSummary>
</DxDataGrid>
</div>
</template>
@ -74,7 +150,7 @@
import { onMounted } 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, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } 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'
@ -115,6 +191,126 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = [
{
no: 1,
posko: 'POSKO CONDET',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
{
no: 2,
posko: 'POSKO CONDET',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
{
no: 3,
posko: 'POSKO ANGKREK',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
]
onMounted(() => {
const filters = useFiltersStore()

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

@ -14,7 +14,7 @@
<DxGroupPanel :visible="true" />
<DxGrouping :auto-expand-all="true" />
<DxColumn :width="50" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
css-class="custom-table-column" :group-index="0" />
@ -71,13 +71,41 @@
</DxColumn>
</DxColumn>
<DxSummary css-class="!bg-primary-500">
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
display-format="{0}" css-class="text-white" />
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
display-format="{0}" css-class="text-white" />
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
</DxSummary>
</DxDataGrid>
</div>
@ -169,6 +197,86 @@ const data = [
},
}
},
{
no: 2,
kode: 'A',
jenisGangguan: 'Gangguan A',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
{
no: 3,
kode: 'B',
jenisGangguan: 'Gangguan B',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
]
onMounted(() => {

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

@ -47,6 +47,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -89,4 +91,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3'
})
})
</script>

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

@ -50,6 +50,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -92,4 +94,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-10'
})
})
</script>

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

@ -47,6 +47,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -89,4 +91,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-11'
})
})
</script>

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

@ -48,6 +48,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -90,4 +92,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-11'
})
})
</script>

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

@ -50,6 +50,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -92,4 +94,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3'
})
})
</script>

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

@ -45,6 +45,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -87,4 +89,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3'
})
})
</script>

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

@ -46,6 +46,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -88,4 +90,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3'
})
})
</script>

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

@ -53,6 +53,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -95,4 +97,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3',
reportButton: true
})
})
</script>

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

@ -73,6 +73,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -115,4 +117,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-13',
reportButton: true
})
})
</script>

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

@ -73,6 +73,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -115,4 +117,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3'
})
})
</script>

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

@ -73,6 +73,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -115,4 +117,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-13',
reportButton: true
})
})
</script>

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

@ -73,6 +73,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -115,4 +117,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-13',
reportButton: true
})
})
</script>

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

@ -72,6 +72,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -114,4 +116,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-8',
reportButton: true
})
})
</script>

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

@ -32,6 +32,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -74,4 +76,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-3'
})
})
</script>

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

@ -63,6 +63,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -105,4 +107,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-8',
reportButton: true
})
})
</script>

9
src/components/Pages/Material/Table_68.vue
View File

@ -35,7 +35,16 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-14'
})
})
</script>

9
src/components/Pages/Material/Table_69.vue
View File

@ -30,7 +30,16 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-14'
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -72,6 +72,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -114,4 +116,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -22,6 +22,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -64,4 +66,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -25,6 +25,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -67,4 +69,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -72,6 +72,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -114,4 +116,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -22,6 +22,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -64,4 +66,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -25,6 +25,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -67,4 +69,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -82,6 +82,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -124,4 +126,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -44,6 +44,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -86,4 +88,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -34,6 +34,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -76,4 +78,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -78,4 +80,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -69,6 +69,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -111,4 +113,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -44,6 +44,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -86,4 +88,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -34,6 +34,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -76,4 +78,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

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

@ -37,6 +37,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -79,4 +81,12 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-2',
reportButton: true
})
})
</script>

9
src/components/Pages/PencarianData/Table_71.vue
View File

@ -36,7 +36,16 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-15'
})
})
</script>

68
src/components/Pages/Transaksi/Table_70.vue
View File

@ -3,7 +3,7 @@
<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">
:word-wrap-enabled="true" @row-prepared="onRowPrepared">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -31,6 +31,8 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -73,4 +75,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const onRowPrepared = (e: any) => {
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");
// To override alternation color
// e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
}
}
}
const data = [
{
noLapor: 'K2316081000039',
tipeIsu: 'PDPB',
nama: 'BAPAK HAIRUL',
unit: 'ULP BARABAI',
noTelp: '081350000000',
permasalahan: 'MCB KWH SERING TURUN',
deskripsi: '-',
tglBuat: '10/08/2016 07:18:17',
lapUlang: 0,
ketLapUlang: '-',
status: 'Dalam Proses Manager Unit',
durasi: '2638 01:59:17'
},
{
noLapor: 'K2316081000039',
tipeIsu: 'PDPB',
nama: 'BAPAK HAIRUL',
unit: 'ULP BARABAI',
noTelp: '081350000000',
permasalahan: 'MCB KWH SERING TURUN',
deskripsi: '-',
tglBuat: '10/08/2016 07:18:17',
lapUlang: 0,
ketLapUlang: '-',
status: 'Dalam Proses Manager Unit',
durasi: '2638 01:59:17'
},
{
noLapor: 'K2316081000039',
tipeIsu: 'PDPB',
nama: 'BAPAK HAIRUL',
unit: 'ULP BARABAI',
noTelp: '081350000000',
permasalahan: 'MCB KWH SERING TURUN',
deskripsi: '-',
tglBuat: '10/08/2016 07:18:17',
lapUlang: 0,
ketLapUlang: '-',
status: 'Dalam Proses Manager Unit',
durasi: '2638 01:59:17'
}
]
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-17'
})
})
</script>

4
src/stores/filters.ts
View File

@ -49,10 +49,10 @@ export const useFiltersStore = defineStore('filters', () => {
const config = ref({
reportButton: false,
type: '',
component: getFilters('')
component: getFilters('')
})
const setConfig = ({reportButton = false, type}: {reportButton?: boolean, type: string}) => {
const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
config.value = {
reportButton,
type,