Refactor code for improved performance and readability

This commit is contained in:
Dede Fuji Abdul 2024-03-19 14:18:17 +07:00
parent 0593841b3d
commit 071ec7510d
71 changed files with 730 additions and 400 deletions

View File

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
</div> </div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
</div> </div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

View File

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
</div> </div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -3,6 +3,7 @@
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
</div> </div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -1,55 +1,112 @@
<template> <template>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
Laporan Pengaduan PLN Mobile
</h1>
</div> </div>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :allow-column-reordering="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" class="max-h-[calc(100vh-140px)] mb-10"
column-resizing-mode="widget" :word-wrap-enabled="true"> :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" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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" /> <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" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
alignment="center"
data-field=""
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a" <DxColumn
css-class="custom-table-column" /> :width="170"
alignment="center"
data-field=""
data-type="number"
caption="a"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali" <DxColumn
css-class="custom-table-column"> alignment="center"
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column" /> css-class="custom-table-column"
>
<DxColumn
:width="170"
alignment="center"
data-field=""
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column"> <DxColumn
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a" alignment="center"
css-class="custom-table-column" /> caption="% Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn
:width="170"
alignment="center"
data-field=""
data-type="number"
caption="c=b/a"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { DxDataGrid } from 'devextreme-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 { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const props = defineProps({ const props = defineProps({
data: Array as () => any[], data: Array as () => any[]
}) })
const data = computed(() => props.data) const data = computed(() => props.data)
const loading = ref(false) const loading = ref(false)
@ -61,7 +118,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -72,7 +129,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -87,5 +144,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
</script> </script>

View File

@ -1,83 +1,190 @@
<template> <template>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
Laporan Pengaduan Total
</h1>
</div> </div>
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :allow-column-reordering="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" class="max-h-[calc(100vh-140px)] mb-10"
column-resizing-mode="widget" :word-wrap-enabled="true"> :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" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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" /> <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" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
:width="170"
alignment="center"
data-field=""
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Total WO" 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 alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="a"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column"> <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="c"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column"> <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="d"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="e=a+b+c+d"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali" <DxColumn
css-class="custom-table-column"> alignment="center"
caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="f"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="g"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h=f+g" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="h=f+g"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column"> <DxColumn
alignment="center"
caption="% Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="i=f/e" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="i=f/e"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="j=g/e" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="j=g/e"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="k=i+j" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field=""
data-type="number"
caption="k=i+j"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { DxDataGrid } from 'devextreme-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 { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -89,7 +196,7 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const loading = ref(false) const loading = ref(false)
const props = defineProps({ const props = defineProps({
data: Array as () => any[], data: Array as () => any[]
}) })
const data = computed(() => props.data) const data = computed(() => props.data)
@ -100,7 +207,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -111,7 +218,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -188,6 +189,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -1,57 +1,135 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" /> <Type3 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :allow-column-reordering="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" class="max-h-[calc(100vh-140px)] mb-10"
column-resizing-mode="widget" :word-wrap-enabled="true"> :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" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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" /> <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" /> <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="Total WO" 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 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" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="total_wo_cc123"
data-type="number"
caption="a"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <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" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="total_wo_pln_mobile"
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column"> <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" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="total_wo_comcen"
data-type="number"
caption="c"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <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" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="total_wo"
data-type="number"
caption="d=b+c"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
<DxColumn alignment="center" caption="Mendatangkan Petugas" 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" <DxColumn
data-type="number" caption="e" css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="rekomendasi_sistem_mendatangkan_petugas"
data-type="number"
caption="e"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f" alignment="center"
css-class="custom-table-column" /> 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> </DxColumn>
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column"> <DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="dlpd"
data-type="number"
caption="g"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column"> <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" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="history_p2ti"
data-type="number"
caption="h"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -58,7 +59,7 @@
alignment="center" alignment="center"
data-field="no_laporan" data-field="no_laporan"
caption="No Laporan" caption="No Laporan"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -68,6 +69,14 @@
caption="Nama Pelapor" caption="Nama Pelapor"
cell-template="formatText" cell-template="formatText"
/> />
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="formatText"
/>
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
:width="170" :width="170"
@ -76,14 +85,6 @@
caption="Alamat Pelapor" caption="Alamat Pelapor"
cell-template="formatText" cell-template="formatText"
/> />
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="cellCenter"
/>
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
:width="150" :width="150"
@ -98,7 +99,7 @@
alignment="center" alignment="center"
data-field="status_akhir" data-field="status_akhir"
caption="Status" caption="Status"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -106,7 +107,7 @@
alignment="center" alignment="center"
data-field="waktu_lapor" data-field="waktu_lapor"
caption="Tgl Lapor" caption="Tgl Lapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -114,7 +115,7 @@
alignment="center" alignment="center"
data-field="waktu_response" data-field="waktu_response"
caption="Tgl Response" caption="Tgl Response"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -122,7 +123,7 @@
alignment="center" alignment="center"
data-field="waktu_recovery" data-field="waktu_recovery"
caption="Tgl Recovery" caption="Tgl Recovery"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -146,7 +147,7 @@
alignment="center" alignment="center"
data-field="nama_posko" data-field="nama_posko"
caption="Sumber Lapor" caption="Sumber Lapor"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -154,7 +155,7 @@
alignment="center" alignment="center"
data-field="waktu_media" data-field="waktu_media"
caption="Tgl Media" caption="Tgl Media"
cell-template="cellCenter" cell-template="formatText"
/> />
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"

View File

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

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -21,6 +21,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -517,6 +518,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -147,6 +148,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -9,6 +9,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -141,6 +142,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -4,6 +4,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -4,6 +4,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -421,6 +422,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -12,6 +12,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -12,6 +12,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -432,6 +433,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -4,6 +4,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -311,6 +312,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -12,6 +12,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -517,6 +518,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -276,6 +277,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -4,6 +4,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -238,6 +239,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -4,6 +4,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -230,6 +231,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -21,6 +21,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -21,6 +21,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -5,6 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -9,6 +9,7 @@
</Filters> </Filters>
<div> <div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -428,6 +429,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div> <div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -127,6 +128,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -394,6 +395,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -876,265 +878,265 @@ onMounted(() => {
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
data.value = [ data.value = [
{ {
"id": 0, id: 0,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13105, id_ulp: 13105,
"nama_ulp": "ULP LUBUK ALUNG", nama_ulp: 'ULP LUBUK ALUNG',
"fungsi_bidang": "Proses PD/TD, belum ada realisasinya ", fungsi_bidang: 'Proses PD/TD, belum ada realisasinya ',
"total": 1, total: 1,
"total_selesai": 1, total_selesai: 1,
"persen_selesai": 100, persen_selesai: 100,
"total_inproses": 0, total_inproses: 0,
"persen_inproses": 0, persen_inproses: 0,
"avg_durasi_response": 983, avg_durasi_response: 983,
"min_durasi_response": 983, min_durasi_response: 983,
"max_durasi_response": 983, max_durasi_response: 983,
"total_dibawah_sla_response": 1, total_dibawah_sla_response: 1,
"total_diatas_sla_response": 0, total_diatas_sla_response: 0,
"avg_durasi_recovery": 1373, avg_durasi_recovery: 1373,
"min_durasi_recovery": 1373, min_durasi_recovery: 1373,
"max_durasi_recovery": 1373, max_durasi_recovery: 1373,
"total_dibawah_sla_recovery": 1, total_dibawah_sla_recovery: 1,
"total_diatas_sla_recovery": 0 total_diatas_sla_recovery: 0
}, },
{ {
"id": 1, id: 1,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13107, id_ulp: 13107,
"nama_ulp": "ULP PAINAN", nama_ulp: 'ULP PAINAN',
"fungsi_bidang": "Drop Tegangan ", fungsi_bidang: 'Drop Tegangan ',
"total": 1, total: 1,
"total_selesai": 1, total_selesai: 1,
"persen_selesai": 100, persen_selesai: 100,
"total_inproses": 0, total_inproses: 0,
"persen_inproses": 0, persen_inproses: 0,
"avg_durasi_response": 2228, avg_durasi_response: 2228,
"min_durasi_response": 2228, min_durasi_response: 2228,
"max_durasi_response": 2228, max_durasi_response: 2228,
"total_dibawah_sla_response": 0, total_dibawah_sla_response: 0,
"total_diatas_sla_response": 1, total_diatas_sla_response: 1,
"avg_durasi_recovery": 2347, avg_durasi_recovery: 2347,
"min_durasi_recovery": 2347, min_durasi_recovery: 2347,
"max_durasi_recovery": 2347, max_durasi_recovery: 2347,
"total_dibawah_sla_recovery": 1, total_dibawah_sla_recovery: 1,
"total_diatas_sla_recovery": 0 total_diatas_sla_recovery: 0
}, },
{ {
"id": 2, id: 2,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13104, id_ulp: 13104,
"nama_ulp": "ULP PARIAMAN", nama_ulp: 'ULP PARIAMAN',
"fungsi_bidang": "Kondisi Jaringan Listrik ", fungsi_bidang: 'Kondisi Jaringan Listrik ',
"total": 4, total: 4,
"total_selesai": 3, total_selesai: 3,
"persen_selesai": 75, persen_selesai: 75,
"total_inproses": 1, total_inproses: 1,
"persen_inproses": 25, persen_inproses: 25,
"avg_durasi_response": 772.6666666666666, avg_durasi_response: 772.6666666666666,
"min_durasi_response": 171, min_durasi_response: 171,
"max_durasi_response": 1701, max_durasi_response: 1701,
"total_dibawah_sla_response": 2, total_dibawah_sla_response: 2,
"total_diatas_sla_response": 1, total_diatas_sla_response: 1,
"avg_durasi_recovery": 3476, avg_durasi_recovery: 3476,
"min_durasi_recovery": 2824, min_durasi_recovery: 2824,
"max_durasi_recovery": 3968, max_durasi_recovery: 3968,
"total_dibawah_sla_recovery": 4, total_dibawah_sla_recovery: 4,
"total_diatas_sla_recovery": 0 total_diatas_sla_recovery: 0
}, },
{ {
"id": 3, id: 3,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13103, id_ulp: 13103,
"nama_ulp": "ULP INDARUNG", nama_ulp: 'ULP INDARUNG',
"fungsi_bidang": "Alat Pembatas tidak berfungsi ", fungsi_bidang: 'Alat Pembatas tidak berfungsi ',
"total": 25, total: 25,
"total_selesai": 15, total_selesai: 15,
"persen_selesai": 60, persen_selesai: 60,
"total_inproses": 10, total_inproses: 10,
"persen_inproses": 40, persen_inproses: 40,
"avg_durasi_response": 1419, avg_durasi_response: 1419,
"min_durasi_response": 109, min_durasi_response: 109,
"max_durasi_response": 4384, max_durasi_response: 4384,
"total_dibawah_sla_response": 10, total_dibawah_sla_response: 10,
"total_diatas_sla_response": 5, total_diatas_sla_response: 5,
"avg_durasi_recovery": 4791.6, avg_durasi_recovery: 4791.6,
"min_durasi_recovery": 10, min_durasi_recovery: 10,
"max_durasi_recovery": 21118, max_durasi_recovery: 21118,
"total_dibawah_sla_recovery": 17, total_dibawah_sla_recovery: 17,
"total_diatas_sla_recovery": 8 total_diatas_sla_recovery: 8
}, },
{ {
"id": 4, id: 4,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13105, id_ulp: 13105,
"nama_ulp": "ULP LUBUK ALUNG", nama_ulp: 'ULP LUBUK ALUNG',
"fungsi_bidang": "PD", fungsi_bidang: 'PD',
"total": 2, total: 2,
"total_selesai": 2, total_selesai: 2,
"persen_selesai": 100, persen_selesai: 100,
"total_inproses": 0, total_inproses: 0,
"persen_inproses": 0, persen_inproses: 0,
"avg_durasi_response": 8920.5, avg_durasi_response: 8920.5,
"min_durasi_response": 790, min_durasi_response: 790,
"max_durasi_response": 17051, max_durasi_response: 17051,
"total_dibawah_sla_response": 1, total_dibawah_sla_response: 1,
"total_diatas_sla_response": 1, total_diatas_sla_response: 1,
"avg_durasi_recovery": 13781.5, avg_durasi_recovery: 13781.5,
"min_durasi_recovery": 6068, min_durasi_recovery: 6068,
"max_durasi_recovery": 21495, max_durasi_recovery: 21495,
"total_dibawah_sla_recovery": 0, total_dibawah_sla_recovery: 0,
"total_diatas_sla_recovery": 2 total_diatas_sla_recovery: 2
}, },
{ {
"id": 5, id: 5,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13106, id_ulp: 13106,
"nama_ulp": "ULP SICINCIN", nama_ulp: 'ULP SICINCIN',
"fungsi_bidang": "Alat Pembatas tidak berfungsi ", fungsi_bidang: 'Alat Pembatas tidak berfungsi ',
"total": 11, total: 11,
"total_selesai": 0, total_selesai: 0,
"persen_selesai": 0, persen_selesai: 0,
"total_inproses": 11, total_inproses: 11,
"persen_inproses": 100, persen_inproses: 100,
"avg_durasi_response": 828.25, avg_durasi_response: 828.25,
"min_durasi_response": 387, min_durasi_response: 387,
"max_durasi_response": 1237, max_durasi_response: 1237,
"total_dibawah_sla_response": 4, total_dibawah_sla_response: 4,
"total_diatas_sla_response": 0, total_diatas_sla_response: 0,
"avg_durasi_recovery": 2622.181818181818, avg_durasi_recovery: 2622.181818181818,
"min_durasi_recovery": 480, min_durasi_recovery: 480,
"max_durasi_recovery": 15205, max_durasi_recovery: 15205,
"total_dibawah_sla_recovery": 10, total_dibawah_sla_recovery: 10,
"total_diatas_sla_recovery": 1 total_diatas_sla_recovery: 1
}, },
{ {
"id": 6, id: 6,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13103, id_ulp: 13103,
"nama_ulp": "ULP INDARUNG", nama_ulp: 'ULP INDARUNG',
"fungsi_bidang": "Tidak bisa beli Token ", fungsi_bidang: 'Tidak bisa beli Token ',
"total": 1, total: 1,
"total_selesai": 1, total_selesai: 1,
"persen_selesai": 100, persen_selesai: 100,
"total_inproses": 0, total_inproses: 0,
"persen_inproses": 0, persen_inproses: 0,
"avg_durasi_response": 5442, avg_durasi_response: 5442,
"min_durasi_response": 5442, min_durasi_response: 5442,
"max_durasi_response": 5442, max_durasi_response: 5442,
"total_dibawah_sla_response": 0, total_dibawah_sla_response: 0,
"total_diatas_sla_response": 1, total_diatas_sla_response: 1,
"avg_durasi_recovery": 9759, avg_durasi_recovery: 9759,
"min_durasi_recovery": 9759, min_durasi_recovery: 9759,
"max_durasi_recovery": 9759, max_durasi_recovery: 9759,
"total_dibawah_sla_recovery": 0, total_dibawah_sla_recovery: 0,
"total_diatas_sla_recovery": 1 total_diatas_sla_recovery: 1
}, },
{ {
"id": 7, id: 7,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13102, id_ulp: 13102,
"nama_ulp": "ULP TABING", nama_ulp: 'ULP TABING',
"fungsi_bidang": "Kondisi Jaringan Listrik ", fungsi_bidang: 'Kondisi Jaringan Listrik ',
"total": 13, total: 13,
"total_selesai": 4, total_selesai: 4,
"persen_selesai": 30.76923076923077, persen_selesai: 30.76923076923077,
"total_inproses": 9, total_inproses: 9,
"persen_inproses": 69.23076923076923, persen_inproses: 69.23076923076923,
"avg_durasi_response": 5249.461538461538, avg_durasi_response: 5249.461538461538,
"min_durasi_response": 300, min_durasi_response: 300,
"max_durasi_response": 22739, max_durasi_response: 22739,
"total_dibawah_sla_response": 5, total_dibawah_sla_response: 5,
"total_diatas_sla_response": 8, total_diatas_sla_response: 8,
"avg_durasi_recovery": 7872.384615384615, avg_durasi_recovery: 7872.384615384615,
"min_durasi_recovery": 594, min_durasi_recovery: 594,
"max_durasi_recovery": 32933, max_durasi_recovery: 32933,
"total_dibawah_sla_recovery": 7, total_dibawah_sla_recovery: 7,
"total_diatas_sla_recovery": 6 total_diatas_sla_recovery: 6
}, },
{ {
"id": 8, id: 8,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13102, id_ulp: 13102,
"nama_ulp": "ULP TABING", nama_ulp: 'ULP TABING',
"fungsi_bidang": "PTL Sering Padam ", fungsi_bidang: 'PTL Sering Padam ',
"total": 1, total: 1,
"total_selesai": 0, total_selesai: 0,
"persen_selesai": 0, persen_selesai: 0,
"total_inproses": 1, total_inproses: 1,
"persen_inproses": 100, persen_inproses: 100,
"avg_durasi_response": 28613, avg_durasi_response: 28613,
"min_durasi_response": 28613, min_durasi_response: 28613,
"max_durasi_response": 28613, max_durasi_response: 28613,
"total_dibawah_sla_response": 0, total_dibawah_sla_response: 0,
"total_diatas_sla_response": 1, total_diatas_sla_response: 1,
"avg_durasi_recovery": 37937, avg_durasi_recovery: 37937,
"min_durasi_recovery": 37937, min_durasi_recovery: 37937,
"max_durasi_recovery": 37937, max_durasi_recovery: 37937,
"total_dibawah_sla_recovery": 0, total_dibawah_sla_recovery: 0,
"total_diatas_sla_recovery": 1 total_diatas_sla_recovery: 1
}, },
{ {
"id": 9, id: 9,
"nama_regional": "REGIONAL SUMKAL", nama_regional: 'REGIONAL SUMKAL',
"id_uid": 131, id_uid: 131,
"nama_uid": "WILAYAH SUMATERA BARAT", nama_uid: 'WILAYAH SUMATERA BARAT',
"id_up3": 13100, id_up3: 13100,
"nama_up3": "UP3 PADANG", nama_up3: 'UP3 PADANG',
"id_ulp": 13112, id_ulp: 13112,
"nama_ulp": "ULP KURANJI", nama_ulp: 'ULP KURANJI',
"fungsi_bidang": "Alat Ukur Paskabayar tidak berfungsi ", fungsi_bidang: 'Alat Ukur Paskabayar tidak berfungsi ',
"total": 1, total: 1,
"total_selesai": 1, total_selesai: 1,
"persen_selesai": 100, persen_selesai: 100,
"total_inproses": 0, total_inproses: 0,
"persen_inproses": 0, persen_inproses: 0,
"avg_durasi_response": 2264, avg_durasi_response: 2264,
"min_durasi_response": 2264, min_durasi_response: 2264,
"max_durasi_response": 2264, max_durasi_response: 2264,
"total_dibawah_sla_response": 0, total_dibawah_sla_response: 0,
"total_diatas_sla_response": 1, total_diatas_sla_response: 1,
"avg_durasi_recovery": 3300, avg_durasi_recovery: 3300,
"min_durasi_recovery": 3300, min_durasi_recovery: 3300,
"max_durasi_recovery": 3300, max_durasi_recovery: 3300,
"total_dibawah_sla_recovery": 1, total_dibawah_sla_recovery: 1,
"total_diatas_sla_recovery": 0 total_diatas_sla_recovery: 0
}, }
] ]
} }
}) })

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -549,6 +550,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -406,6 +407,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div> <div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
@ -409,6 +410,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div> <div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -548,6 +549,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -4,6 +4,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -1,9 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => filters = value" /> <Type14 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
@ -137,13 +138,13 @@
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPager, DxPager,
DxPaging, DxPaging,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import { Type14 } from '@/components/Form/FiltersType' import { Type14 } from '@/components/Form/FiltersType'

View File

@ -1,9 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => filters = value" /> <Type14 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
@ -97,13 +98,13 @@
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPager, DxPager,
DxPaging, DxPaging,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType' import { Type14 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -9,6 +9,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -137,6 +138,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -9,6 +9,7 @@
</Filters> </Filters>
<div> <div>
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -355,6 +356,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -683,6 +684,7 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <div class="p-4 bg-white rounded-xl lg:mr-4">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)]"
:data-source="dataSub" :data-source="dataSub"
:show-column-lines="true" :show-column-lines="true"
@ -982,7 +984,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from 'vue' import { onMounted, ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -10,6 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"

View File

@ -4,6 +4,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

View File

@ -1,9 +1,10 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type17 @update:filters="(value) => filters = value" /> <Type17 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
@ -130,14 +131,14 @@
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'