Refactor code for improved performance and readability
This commit is contained in:
parent
0593841b3d
commit
071ec7510d
@ -3,6 +3,7 @@
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
|
||||
</div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -3,6 +3,7 @@
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
|
||||
</div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
|
@ -3,6 +3,7 @@
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
|
||||
</div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -3,6 +3,7 @@
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
|
||||
</div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -1,55 +1,112 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<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>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="" 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 :width="170" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="a"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="b"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" 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
|
||||
alignment="center"
|
||||
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>
|
||||
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { computed, ref } from 'vue'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const props = defineProps({
|
||||
data: Array as () => any[],
|
||||
data: Array as () => any[]
|
||||
})
|
||||
const data = computed(() => props.data)
|
||||
const loading = ref(false)
|
||||
@ -61,7 +118,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -72,7 +129,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -87,5 +144,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
|
@ -1,83 +1,190 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan Total
|
||||
</h1>
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
|
||||
</div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" 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="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="a"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="b"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="c"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="d"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="e=a+b+c+d"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="f"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="g"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h=f+g"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="h=f+g"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="% Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="i=f/e"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="i=f/e"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="j=g/e"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="j=g/e"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="k=i+j"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
data-type="number"
|
||||
caption="k=i+j"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
@ -89,7 +196,7 @@ const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const loading = ref(false)
|
||||
const props = defineProps({
|
||||
data: Array as () => any[],
|
||||
data: Array as () => any[]
|
||||
})
|
||||
const data = computed(() => props.data)
|
||||
|
||||
@ -100,7 +207,7 @@ const onExporting = (e: any) => {
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
indent: 5
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
@ -111,7 +218,7 @@ const onExporting = (e: any) => {
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
autoFilterEnabled: true
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
@ -126,4 +233,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -188,6 +189,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -1,57 +1,135 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_cc123"
|
||||
data-type="number"
|
||||
caption="a"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_pln_mobile"
|
||||
data-type="number"
|
||||
caption="b"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_comcen"
|
||||
data-type="number"
|
||||
caption="c"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo"
|
||||
data-type="number"
|
||||
caption="d=b+c"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas"
|
||||
data-type="number" caption="e" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="rekomendasi_sistem_mendatangkan_petugas"
|
||||
data-type="number"
|
||||
caption="e"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
caption="Diberikan ke Pelanggan"
|
||||
css-class="custom-table-column"
|
||||
>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total_wo_loket"
|
||||
data-type="number"
|
||||
caption="f"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="dlpd"
|
||||
data-type="number"
|
||||
caption="g"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="history_p2ti"
|
||||
data-type="number"
|
||||
caption="h"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -58,7 +59,7 @@
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -68,6 +69,14 @@
|
||||
caption="Nama Pelapor"
|
||||
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
|
||||
css-class="custom-table-column"
|
||||
:width="170"
|
||||
@ -76,14 +85,6 @@
|
||||
caption="Alamat Pelapor"
|
||||
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
|
||||
css-class="custom-table-column"
|
||||
:width="150"
|
||||
@ -98,7 +99,7 @@
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -106,7 +107,7 @@
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -114,7 +115,7 @@
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -122,7 +123,7 @@
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -146,7 +147,7 @@
|
||||
alignment="center"
|
||||
data-field="nama_posko"
|
||||
caption="Sumber Lapor"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
@ -154,7 +155,7 @@
|
||||
alignment="center"
|
||||
data-field="waktu_media"
|
||||
caption="Tgl Media"
|
||||
cell-template="cellCenter"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="dataTable">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:remote-operations="true"
|
||||
:data-source="data"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -21,6 +21,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -517,6 +518,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -147,6 +148,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -9,6 +9,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -141,6 +142,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -4,6 +4,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -4,6 +4,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -421,6 +422,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -12,6 +12,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -12,6 +12,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -432,6 +433,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -4,6 +4,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -311,6 +312,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -12,6 +12,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -517,6 +518,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -276,6 +277,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -4,6 +4,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -238,6 +239,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -4,6 +4,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -230,6 +231,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -21,6 +21,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -21,6 +21,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -5,6 +5,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -9,6 +9,7 @@
|
||||
</Filters>
|
||||
<div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -428,6 +429,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -127,6 +128,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -394,6 +395,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -876,265 +878,265 @@ onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = [
|
||||
{
|
||||
"id": 0,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13105,
|
||||
"nama_ulp": "ULP LUBUK ALUNG",
|
||||
"fungsi_bidang": "Proses PD/TD, belum ada realisasinya ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 983,
|
||||
"min_durasi_response": 983,
|
||||
"max_durasi_response": 983,
|
||||
"total_dibawah_sla_response": 1,
|
||||
"total_diatas_sla_response": 0,
|
||||
"avg_durasi_recovery": 1373,
|
||||
"min_durasi_recovery": 1373,
|
||||
"max_durasi_recovery": 1373,
|
||||
"total_dibawah_sla_recovery": 1,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13107,
|
||||
"nama_ulp": "ULP PAINAN",
|
||||
"fungsi_bidang": "Drop Tegangan ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 2228,
|
||||
"min_durasi_response": 2228,
|
||||
"max_durasi_response": 2228,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 2347,
|
||||
"min_durasi_recovery": 2347,
|
||||
"max_durasi_recovery": 2347,
|
||||
"total_dibawah_sla_recovery": 1,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13104,
|
||||
"nama_ulp": "ULP PARIAMAN",
|
||||
"fungsi_bidang": "Kondisi Jaringan Listrik ",
|
||||
"total": 4,
|
||||
"total_selesai": 3,
|
||||
"persen_selesai": 75,
|
||||
"total_inproses": 1,
|
||||
"persen_inproses": 25,
|
||||
"avg_durasi_response": 772.6666666666666,
|
||||
"min_durasi_response": 171,
|
||||
"max_durasi_response": 1701,
|
||||
"total_dibawah_sla_response": 2,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 3476,
|
||||
"min_durasi_recovery": 2824,
|
||||
"max_durasi_recovery": 3968,
|
||||
"total_dibawah_sla_recovery": 4,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13103,
|
||||
"nama_ulp": "ULP INDARUNG",
|
||||
"fungsi_bidang": "Alat Pembatas tidak berfungsi ",
|
||||
"total": 25,
|
||||
"total_selesai": 15,
|
||||
"persen_selesai": 60,
|
||||
"total_inproses": 10,
|
||||
"persen_inproses": 40,
|
||||
"avg_durasi_response": 1419,
|
||||
"min_durasi_response": 109,
|
||||
"max_durasi_response": 4384,
|
||||
"total_dibawah_sla_response": 10,
|
||||
"total_diatas_sla_response": 5,
|
||||
"avg_durasi_recovery": 4791.6,
|
||||
"min_durasi_recovery": 10,
|
||||
"max_durasi_recovery": 21118,
|
||||
"total_dibawah_sla_recovery": 17,
|
||||
"total_diatas_sla_recovery": 8
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13105,
|
||||
"nama_ulp": "ULP LUBUK ALUNG",
|
||||
"fungsi_bidang": "PD",
|
||||
"total": 2,
|
||||
"total_selesai": 2,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 8920.5,
|
||||
"min_durasi_response": 790,
|
||||
"max_durasi_response": 17051,
|
||||
"total_dibawah_sla_response": 1,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 13781.5,
|
||||
"min_durasi_recovery": 6068,
|
||||
"max_durasi_recovery": 21495,
|
||||
"total_dibawah_sla_recovery": 0,
|
||||
"total_diatas_sla_recovery": 2
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13106,
|
||||
"nama_ulp": "ULP SICINCIN",
|
||||
"fungsi_bidang": "Alat Pembatas tidak berfungsi ",
|
||||
"total": 11,
|
||||
"total_selesai": 0,
|
||||
"persen_selesai": 0,
|
||||
"total_inproses": 11,
|
||||
"persen_inproses": 100,
|
||||
"avg_durasi_response": 828.25,
|
||||
"min_durasi_response": 387,
|
||||
"max_durasi_response": 1237,
|
||||
"total_dibawah_sla_response": 4,
|
||||
"total_diatas_sla_response": 0,
|
||||
"avg_durasi_recovery": 2622.181818181818,
|
||||
"min_durasi_recovery": 480,
|
||||
"max_durasi_recovery": 15205,
|
||||
"total_dibawah_sla_recovery": 10,
|
||||
"total_diatas_sla_recovery": 1
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13103,
|
||||
"nama_ulp": "ULP INDARUNG",
|
||||
"fungsi_bidang": "Tidak bisa beli Token ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 5442,
|
||||
"min_durasi_response": 5442,
|
||||
"max_durasi_response": 5442,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 9759,
|
||||
"min_durasi_recovery": 9759,
|
||||
"max_durasi_recovery": 9759,
|
||||
"total_dibawah_sla_recovery": 0,
|
||||
"total_diatas_sla_recovery": 1
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13102,
|
||||
"nama_ulp": "ULP TABING",
|
||||
"fungsi_bidang": "Kondisi Jaringan Listrik ",
|
||||
"total": 13,
|
||||
"total_selesai": 4,
|
||||
"persen_selesai": 30.76923076923077,
|
||||
"total_inproses": 9,
|
||||
"persen_inproses": 69.23076923076923,
|
||||
"avg_durasi_response": 5249.461538461538,
|
||||
"min_durasi_response": 300,
|
||||
"max_durasi_response": 22739,
|
||||
"total_dibawah_sla_response": 5,
|
||||
"total_diatas_sla_response": 8,
|
||||
"avg_durasi_recovery": 7872.384615384615,
|
||||
"min_durasi_recovery": 594,
|
||||
"max_durasi_recovery": 32933,
|
||||
"total_dibawah_sla_recovery": 7,
|
||||
"total_diatas_sla_recovery": 6
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13102,
|
||||
"nama_ulp": "ULP TABING",
|
||||
"fungsi_bidang": "PTL Sering Padam ",
|
||||
"total": 1,
|
||||
"total_selesai": 0,
|
||||
"persen_selesai": 0,
|
||||
"total_inproses": 1,
|
||||
"persen_inproses": 100,
|
||||
"avg_durasi_response": 28613,
|
||||
"min_durasi_response": 28613,
|
||||
"max_durasi_response": 28613,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 37937,
|
||||
"min_durasi_recovery": 37937,
|
||||
"max_durasi_recovery": 37937,
|
||||
"total_dibawah_sla_recovery": 0,
|
||||
"total_diatas_sla_recovery": 1
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"nama_regional": "REGIONAL SUMKAL",
|
||||
"id_uid": 131,
|
||||
"nama_uid": "WILAYAH SUMATERA BARAT",
|
||||
"id_up3": 13100,
|
||||
"nama_up3": "UP3 PADANG",
|
||||
"id_ulp": 13112,
|
||||
"nama_ulp": "ULP KURANJI",
|
||||
"fungsi_bidang": "Alat Ukur Paskabayar tidak berfungsi ",
|
||||
"total": 1,
|
||||
"total_selesai": 1,
|
||||
"persen_selesai": 100,
|
||||
"total_inproses": 0,
|
||||
"persen_inproses": 0,
|
||||
"avg_durasi_response": 2264,
|
||||
"min_durasi_response": 2264,
|
||||
"max_durasi_response": 2264,
|
||||
"total_dibawah_sla_response": 0,
|
||||
"total_diatas_sla_response": 1,
|
||||
"avg_durasi_recovery": 3300,
|
||||
"min_durasi_recovery": 3300,
|
||||
"max_durasi_recovery": 3300,
|
||||
"total_dibawah_sla_recovery": 1,
|
||||
"total_diatas_sla_recovery": 0
|
||||
},
|
||||
id: 0,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13105,
|
||||
nama_ulp: 'ULP LUBUK ALUNG',
|
||||
fungsi_bidang: 'Proses PD/TD, belum ada realisasinya ',
|
||||
total: 1,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_response: 983,
|
||||
min_durasi_response: 983,
|
||||
max_durasi_response: 983,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 1373,
|
||||
min_durasi_recovery: 1373,
|
||||
max_durasi_recovery: 1373,
|
||||
total_dibawah_sla_recovery: 1,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13107,
|
||||
nama_ulp: 'ULP PAINAN',
|
||||
fungsi_bidang: 'Drop Tegangan ',
|
||||
total: 1,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_response: 2228,
|
||||
min_durasi_response: 2228,
|
||||
max_durasi_response: 2228,
|
||||
total_dibawah_sla_response: 0,
|
||||
total_diatas_sla_response: 1,
|
||||
avg_durasi_recovery: 2347,
|
||||
min_durasi_recovery: 2347,
|
||||
max_durasi_recovery: 2347,
|
||||
total_dibawah_sla_recovery: 1,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13104,
|
||||
nama_ulp: 'ULP PARIAMAN',
|
||||
fungsi_bidang: 'Kondisi Jaringan Listrik ',
|
||||
total: 4,
|
||||
total_selesai: 3,
|
||||
persen_selesai: 75,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 25,
|
||||
avg_durasi_response: 772.6666666666666,
|
||||
min_durasi_response: 171,
|
||||
max_durasi_response: 1701,
|
||||
total_dibawah_sla_response: 2,
|
||||
total_diatas_sla_response: 1,
|
||||
avg_durasi_recovery: 3476,
|
||||
min_durasi_recovery: 2824,
|
||||
max_durasi_recovery: 3968,
|
||||
total_dibawah_sla_recovery: 4,
|
||||
total_diatas_sla_recovery: 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13103,
|
||||
nama_ulp: 'ULP INDARUNG',
|
||||
fungsi_bidang: 'Alat Pembatas tidak berfungsi ',
|
||||
total: 25,
|
||||
total_selesai: 15,
|
||||
persen_selesai: 60,
|
||||
total_inproses: 10,
|
||||
persen_inproses: 40,
|
||||
avg_durasi_response: 1419,
|
||||
min_durasi_response: 109,
|
||||
max_durasi_response: 4384,
|
||||
total_dibawah_sla_response: 10,
|
||||
total_diatas_sla_response: 5,
|
||||
avg_durasi_recovery: 4791.6,
|
||||
min_durasi_recovery: 10,
|
||||
max_durasi_recovery: 21118,
|
||||
total_dibawah_sla_recovery: 17,
|
||||
total_diatas_sla_recovery: 8
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13105,
|
||||
nama_ulp: 'ULP LUBUK ALUNG',
|
||||
fungsi_bidang: 'PD',
|
||||
total: 2,
|
||||
total_selesai: 2,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_response: 8920.5,
|
||||
min_durasi_response: 790,
|
||||
max_durasi_response: 17051,
|
||||
total_dibawah_sla_response: 1,
|
||||
total_diatas_sla_response: 1,
|
||||
avg_durasi_recovery: 13781.5,
|
||||
min_durasi_recovery: 6068,
|
||||
max_durasi_recovery: 21495,
|
||||
total_dibawah_sla_recovery: 0,
|
||||
total_diatas_sla_recovery: 2
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13106,
|
||||
nama_ulp: 'ULP SICINCIN',
|
||||
fungsi_bidang: 'Alat Pembatas tidak berfungsi ',
|
||||
total: 11,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 11,
|
||||
persen_inproses: 100,
|
||||
avg_durasi_response: 828.25,
|
||||
min_durasi_response: 387,
|
||||
max_durasi_response: 1237,
|
||||
total_dibawah_sla_response: 4,
|
||||
total_diatas_sla_response: 0,
|
||||
avg_durasi_recovery: 2622.181818181818,
|
||||
min_durasi_recovery: 480,
|
||||
max_durasi_recovery: 15205,
|
||||
total_dibawah_sla_recovery: 10,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13103,
|
||||
nama_ulp: 'ULP INDARUNG',
|
||||
fungsi_bidang: 'Tidak bisa beli Token ',
|
||||
total: 1,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_response: 5442,
|
||||
min_durasi_response: 5442,
|
||||
max_durasi_response: 5442,
|
||||
total_dibawah_sla_response: 0,
|
||||
total_diatas_sla_response: 1,
|
||||
avg_durasi_recovery: 9759,
|
||||
min_durasi_recovery: 9759,
|
||||
max_durasi_recovery: 9759,
|
||||
total_dibawah_sla_recovery: 0,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13102,
|
||||
nama_ulp: 'ULP TABING',
|
||||
fungsi_bidang: 'Kondisi Jaringan Listrik ',
|
||||
total: 13,
|
||||
total_selesai: 4,
|
||||
persen_selesai: 30.76923076923077,
|
||||
total_inproses: 9,
|
||||
persen_inproses: 69.23076923076923,
|
||||
avg_durasi_response: 5249.461538461538,
|
||||
min_durasi_response: 300,
|
||||
max_durasi_response: 22739,
|
||||
total_dibawah_sla_response: 5,
|
||||
total_diatas_sla_response: 8,
|
||||
avg_durasi_recovery: 7872.384615384615,
|
||||
min_durasi_recovery: 594,
|
||||
max_durasi_recovery: 32933,
|
||||
total_dibawah_sla_recovery: 7,
|
||||
total_diatas_sla_recovery: 6
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13102,
|
||||
nama_ulp: 'ULP TABING',
|
||||
fungsi_bidang: 'PTL Sering Padam ',
|
||||
total: 1,
|
||||
total_selesai: 0,
|
||||
persen_selesai: 0,
|
||||
total_inproses: 1,
|
||||
persen_inproses: 100,
|
||||
avg_durasi_response: 28613,
|
||||
min_durasi_response: 28613,
|
||||
max_durasi_response: 28613,
|
||||
total_dibawah_sla_response: 0,
|
||||
total_diatas_sla_response: 1,
|
||||
avg_durasi_recovery: 37937,
|
||||
min_durasi_recovery: 37937,
|
||||
max_durasi_recovery: 37937,
|
||||
total_dibawah_sla_recovery: 0,
|
||||
total_diatas_sla_recovery: 1
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13112,
|
||||
nama_ulp: 'ULP KURANJI',
|
||||
fungsi_bidang: 'Alat Ukur Paskabayar tidak berfungsi ',
|
||||
total: 1,
|
||||
total_selesai: 1,
|
||||
persen_selesai: 100,
|
||||
total_inproses: 0,
|
||||
persen_inproses: 0,
|
||||
avg_durasi_response: 2264,
|
||||
min_durasi_response: 2264,
|
||||
max_durasi_response: 2264,
|
||||
total_dibawah_sla_response: 0,
|
||||
total_diatas_sla_response: 1,
|
||||
avg_durasi_recovery: 3300,
|
||||
min_durasi_recovery: 3300,
|
||||
max_durasi_recovery: 3300,
|
||||
total_dibawah_sla_recovery: 1,
|
||||
total_diatas_sla_recovery: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -549,6 +550,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
@ -1025,5 +1027,5 @@ onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -406,6 +407,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
@ -409,6 +410,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -548,6 +549,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -4,6 +4,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type14 @update:filters="(value) => filters = value" />
|
||||
<Type14 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
@ -137,13 +138,13 @@
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import { Type14 } from '@/components/Form/FiltersType'
|
||||
|
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type14 @update:filters="(value) => filters = value" />
|
||||
<Type14 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
@ -97,13 +98,13 @@
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { Type14 } from '@/components/Form/FiltersType'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -9,6 +9,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -137,6 +138,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -9,6 +9,7 @@
|
||||
</Filters>
|
||||
<div>
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -355,6 +356,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
@ -683,6 +684,7 @@
|
||||
<div class="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
@ -982,7 +984,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
|
@ -4,6 +4,7 @@
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
|
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type17 @update:filters="(value) => filters = value" />
|
||||
<Type17 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid
|
||||
:allow-column-reordering="true"
|
||||
class="max-h-[calc(100vh-140px)] mb-10"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
@ -130,14 +131,14 @@
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
|
Loading…
x
Reference in New Issue
Block a user