fix: add margin bottom to all table
This commit is contained in:
kur0nek-o
@ -2,5 +2,5 @@ VITE_BASE_URL=http://localhost:5173
|
|||||||
VITE_BASE_DIRECTORY=/
|
VITE_BASE_DIRECTORY=/
|
||||||
VITE_APP_VERSION=0.0.1
|
VITE_APP_VERSION=0.0.1
|
||||||
VITE_APP_NAME='Executive Information System'
|
VITE_APP_NAME='Executive Information System'
|
||||||
VITE_APP_GRAPHQL_ENDPOINT=http://192.168.5.213:32169/graphql
|
VITE_APP_GRAPHQL_ENDPOINT=http://192.168.191.163:32169/graphql
|
||||||
VITE_APP_REST_ENDPOINT=http://192.168.5.213:32180
|
VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
|
||||||
@ -1373,6 +1373,14 @@ body {
|
|||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-5 {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-10 {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.box-border {
|
.box-border {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,103 +1,237 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type4 @update:filters="(value) => filters = value" />
|
<Type4 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<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)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 alignment="center" caption="f" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="f" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</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 alignment="center" caption="g" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="g" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</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 alignment="center" caption="i=f/e" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</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 alignment="center" caption="j=g/e" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
|
|
||||||
<AnomaliTable2 />
|
<AnomaliTable2 />
|
||||||
@ -106,7 +240,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -117,10 +260,10 @@ import { Type4 } from '@/components/Form/FiltersType'
|
|||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
@ -130,7 +273,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`)
|
||||||
})
|
})
|
||||||
@ -141,7 +284,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')
|
||||||
@ -158,7 +301,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
||||||
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
query laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||||
|
$dateFrom: Date!
|
||||||
|
$dateTo: Date!
|
||||||
|
$posko: String
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
|
) {
|
||||||
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
@ -187,9 +336,13 @@ const filterData = (params: any) => {
|
|||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : "",
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : '',
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
@ -199,7 +352,7 @@ const filterData = (params: any) => {
|
|||||||
data.value = [
|
data.value = [
|
||||||
...data.value,
|
...data.value,
|
||||||
{
|
{
|
||||||
...item,
|
...item
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,52 +1,110 @@
|
|||||||
<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)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
:data-source="data"
|
||||||
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
:word-wrap-enabled="true"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<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 { ref } from 'vue'
|
import { 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 loading = ref(true)
|
const loading = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
@ -57,7 +115,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`)
|
||||||
})
|
})
|
||||||
@ -68,7 +126,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')
|
||||||
@ -83,5 +141,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,73 +1,159 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type4 @update:filters="(value) => filters = value" />
|
<Type4 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<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)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
:show-column-lines="true"
|
||||||
:word-wrap-enabled="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="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
|
||||||
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_petugas"
|
||||||
|
caption="a"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
<DxColumn
|
||||||
css-class="custom-table-column">
|
alignment="center"
|
||||||
|
caption="Total Petugas Yang Pengaduan 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="total_penyelesaian_petugas_anomali_pln_mobile"
|
<DxColumn
|
||||||
data-type="number" caption="b" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_pln_mobile"
|
||||||
|
data-type="number"
|
||||||
|
caption="b"
|
||||||
|
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="total_penyelesaian_petugas_anomali_cc_123"
|
<DxColumn
|
||||||
data-type="number" caption="c" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_cc_123"
|
||||||
|
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_penyelesaian_petugas_anomali" data-type="number"
|
<DxColumn
|
||||||
caption="d=b+c" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali"
|
||||||
|
data-type="number"
|
||||||
|
caption="d=b+c"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
<DxColumn
|
||||||
css-class="custom-table-column">
|
alignment="center"
|
||||||
|
caption="% Petugas Yang Pengaduan 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 alignment="center" caption="e=b/a" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center"
|
<DxColumn
|
||||||
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
|
:width="150"
|
||||||
caption="Marking" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="150" alignment="center"
|
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
|
||||||
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
|
data-type="number"
|
||||||
caption="Non Marking" css-class="custom-table-column" />
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
|
<DxColumn
|
||||||
data-type="number" caption="Marking" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center"
|
alignment="center"
|
||||||
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
|
data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
|
||||||
caption="Non Marking" css-class="custom-table-column" />
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
|
<DxColumn
|
||||||
data-type="number" caption="Marking" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
|
alignment="center"
|
||||||
data-type="number" caption="Non Marking" css-class="custom-table-column" />
|
data-field="total_penyelesaian_petugas_anomali_marking"
|
||||||
|
data-type="number"
|
||||||
|
caption="Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_non_marking"
|
||||||
|
data-type="number"
|
||||||
|
caption="Non Marking"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -79,7 +165,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -91,10 +186,10 @@ import gql from 'graphql-tag'
|
|||||||
import { Type4 } from '@/components/Form/FiltersType'
|
import { Type4 } from '@/components/Form/FiltersType'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.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 data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
@ -104,7 +199,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`)
|
||||||
})
|
})
|
||||||
@ -115,7 +210,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')
|
||||||
@ -131,8 +226,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
||||||
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!,
|
query laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||||
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
|
$dateFrom: Date!
|
||||||
|
$dateTo: Date!
|
||||||
|
$jenisLaporan: Int
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
|
$posko: String
|
||||||
|
) {
|
||||||
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
@ -140,7 +241,6 @@ const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
posko: $posko
|
posko: $posko
|
||||||
|
|
||||||
) {
|
) {
|
||||||
nama_posko
|
nama_posko
|
||||||
persen_penyelesaian_petugas_anomali_cc_123_marking
|
persen_penyelesaian_petugas_anomali_cc_123_marking
|
||||||
@ -163,9 +263,13 @@ const filterData = (params: any) => {
|
|||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : "",
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : '',
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
@ -176,9 +280,15 @@ const filterData = (params: any) => {
|
|||||||
...data.value,
|
...data.value,
|
||||||
{
|
{
|
||||||
...item,
|
...item,
|
||||||
total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
|
total_penyelesaian_petugas_anomali_cc_123:
|
||||||
total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
|
item.total_penyelesaian_petugas_anomali_cc_123_marking +
|
||||||
total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
|
item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
|
||||||
|
total_penyelesaian_petugas_anomali_pln_mobile:
|
||||||
|
item.total_penyelesaian_petugas_anomali_pln_mobile_marking +
|
||||||
|
item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
|
||||||
|
total_penyelesaian_petugas_anomali:
|
||||||
|
item.total_penyelesaian_petugas_anomali_marking +
|
||||||
|
item.total_penyelesaian_petugas_anomali_non_marking
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,62 +1,144 @@
|
|||||||
<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)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_petugas"
|
||||||
|
caption="Nama Petugas"
|
||||||
|
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="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
caption="(PLN Mobile, CC123, DLL)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_wo"
|
||||||
|
data-type="number"
|
||||||
|
caption="a"
|
||||||
|
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="total_penyelesaian_petugas_anomali_pln_mobile"
|
<DxColumn
|
||||||
data-type="number" caption="b" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_pln_mobile"
|
||||||
|
data-type="number"
|
||||||
|
caption="b"
|
||||||
|
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="total_penyelesaian_petugas_anomali_cc_123"
|
<DxColumn
|
||||||
data-type="number" caption="c" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali_cc_123"
|
||||||
|
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_penyelesaian_petugas_anomali" data-type="number"
|
<DxColumn
|
||||||
caption="d=b+c" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_penyelesaian_petugas_anomali"
|
||||||
|
data-type="number"
|
||||||
|
caption="d=b+c"
|
||||||
|
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="persen_penyelesaian_petugas_anomali_pln_mobile"
|
<DxColumn
|
||||||
data-type="number" caption="e=b/a" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
|
||||||
|
data-type="number"
|
||||||
|
caption="e=b/a"
|
||||||
|
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="persen_penyelesaian_petugas_anomali_cc_123"
|
<DxColumn
|
||||||
data-type="number" caption="f=c/a" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_penyelesaian_petugas_anomali_cc_123"
|
||||||
|
data-type="number"
|
||||||
|
caption="f=c/a"
|
||||||
|
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="persen_penyelesaian_petugas_anomali"
|
<DxColumn
|
||||||
data-type="number" caption="g=e+f" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_penyelesaian_petugas_anomali"
|
||||||
|
data-type="number"
|
||||||
|
caption="g=e+f"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -68,7 +150,16 @@ defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
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'
|
||||||
@ -77,15 +168,20 @@ import { Workbook } from 'exceljs'
|
|||||||
import { ref, watch, type PropType } from 'vue'
|
import { ref, watch, type PropType } from 'vue'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const filtersDetail = ref({}); // Declare the 'filters' variable
|
const filtersDetail = ref({}) // Declare the 'filters' variable
|
||||||
watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
|
watch(
|
||||||
|
() => filtersDetail.value,
|
||||||
|
(newValue) => {
|
||||||
|
// Access the 'value' property of the 'filters' ref
|
||||||
filterData(newValue)
|
filterData(newValue)
|
||||||
}, { immediate: true })
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -93,7 +189,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`)
|
||||||
})
|
})
|
||||||
@ -104,7 +200,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')
|
||||||
@ -120,8 +216,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
|
const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
|
||||||
query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!,
|
query laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
|
||||||
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
|
$dateFrom: Date!
|
||||||
|
$dateTo: Date!
|
||||||
|
$jenisLaporan: Int
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
|
$posko: String
|
||||||
|
) {
|
||||||
laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
|
laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
@ -129,7 +231,6 @@ const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
posko: $posko
|
posko: $posko
|
||||||
|
|
||||||
) {
|
) {
|
||||||
nama_petugas
|
nama_petugas
|
||||||
nama_posko
|
nama_posko
|
||||||
@ -147,9 +248,13 @@ const filterData = (params: any) => {
|
|||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : "",
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : '',
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
@ -159,7 +264,7 @@ const filterData = (params: any) => {
|
|||||||
data.value = [
|
data.value = [
|
||||||
...data.value,
|
...data.value,
|
||||||
{
|
{
|
||||||
...item,
|
...item
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
@ -182,5 +287,4 @@ const { onResult, onError, loading, refetch } = useQuery(
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,79 +1,176 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type4 @update:filters="(value) => filters = value" />
|
<Type4 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<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)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
:show-column-lines="true"
|
||||||
:word-wrap-enabled="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>
|
||||||
|
|
||||||
<AnomaliTable6 />
|
<AnomaliTable6 />
|
||||||
@ -84,7 +181,16 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
|
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -94,10 +200,10 @@ import { AnomaliTable6 } from '.'
|
|||||||
import { Type4 } from '@/components/Form/FiltersType'
|
import { Type4 } from '@/components/Form/FiltersType'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
@ -107,7 +213,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`)
|
||||||
})
|
})
|
||||||
@ -118,7 +224,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')
|
||||||
@ -135,7 +241,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const GET_laporanCheckInCheckOut = gql`
|
const GET_laporanCheckInCheckOut = gql`
|
||||||
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
query laporanCheckInCheckOut(
|
||||||
|
$dateFrom: Date!
|
||||||
|
$dateTo: Date!
|
||||||
|
$posko: String
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
|
) {
|
||||||
laporanCheckInCheckOut(
|
laporanCheckInCheckOut(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
@ -158,9 +270,13 @@ const filterData = (params: any) => {
|
|||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : "",
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : '',
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
@ -170,7 +286,7 @@ const filterData = (params: any) => {
|
|||||||
data.value = [
|
data.value = [
|
||||||
...data.value,
|
...data.value,
|
||||||
{
|
{
|
||||||
...item,
|
...item
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
@ -183,15 +299,12 @@ const filterData = (params: any) => {
|
|||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
|
||||||
GET_laporanCheckInCheckOut,
|
|
||||||
{
|
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
posko: '',
|
posko: '',
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
}
|
})
|
||||||
)
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -1,52 +1,109 @@
|
|||||||
<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)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="onExporting" :allow-column-resizing="true" 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 { ref } from 'vue'
|
import { 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 data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
@ -57,7 +114,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`)
|
||||||
})
|
})
|
||||||
@ -68,7 +125,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')
|
||||||
@ -83,5 +140,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,47 +1,122 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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="200" alignment="center" data-field="user_regu" caption="User Regu"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="200"
|
||||||
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="user_regu"
|
||||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
|
caption="User Regu"
|
||||||
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
|
/>
|
||||||
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
|
:width="200"
|
||||||
caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
|
data-field="personil_yantek"
|
||||||
caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" />
|
caption="Personil Yantek"
|
||||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
|
<DxColumn
|
||||||
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
|
:width="200"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_wo_gangguan_individual"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jumlah WO Gangguan Individual"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="200"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_wo_gangguan_individual"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-rata Durasi WO Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="200"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_rpt_wo_gangguan_individual"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-rata RPT WO Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="200"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_rct_wo_gangguan_individual"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-rata RCT WO Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="200"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_wo_penugasan_khusus"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jumlah Wo Penugasan Khusus"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="200"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_wo_penugasan_khusus"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-rata Durasi WO Penugasan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -68,7 +143,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`)
|
||||||
})
|
})
|
||||||
@ -79,7 +154,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')
|
||||||
@ -96,7 +171,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const GET_laporanCheckInCheckOut = gql`
|
const GET_laporanCheckInCheckOut = gql`
|
||||||
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
query laporanCheckInCheckOut(
|
||||||
|
$dateFrom: Date!
|
||||||
|
$dateTo: Date!
|
||||||
|
$posko: String
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
|
) {
|
||||||
laporanCheckInCheckOut(
|
laporanCheckInCheckOut(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
@ -119,9 +200,13 @@ const filterData = (params: any) => {
|
|||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : "",
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : '',
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
@ -131,7 +216,7 @@ const filterData = (params: any) => {
|
|||||||
data.value = [
|
data.value = [
|
||||||
...data.value,
|
...data.value,
|
||||||
{
|
{
|
||||||
...item,
|
...item
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
@ -144,17 +229,13 @@ const filterData = (params: any) => {
|
|||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const { onResult, onError, loading, refetch } = useQuery(
|
const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
|
||||||
GET_laporanCheckInCheckOut,
|
|
||||||
{
|
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
posko: '',
|
posko: '',
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
}
|
})
|
||||||
)
|
|
||||||
|
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -1,58 +1,136 @@
|
|||||||
<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)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
:show-column-lines="true"
|
||||||
:word-wrap-enabled="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="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="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>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="dataTable">
|
<div id="dataTable">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:remote-operations="true"
|
:remote-operations="true"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
key-expr="no_laporan"
|
key-expr="no_laporan"
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -351,7 +351,6 @@ import {
|
|||||||
DxColumn,
|
DxColumn,
|
||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxGroupItem,
|
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
@ -46,11 +46,12 @@
|
|||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
:width="50"
|
:width="100"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
|
data-field="no"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="170"
|
:width="170"
|
||||||
@ -90,6 +91,28 @@
|
|||||||
{{ data.column.caption }}
|
{{ data.column.caption }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<DxSummary>
|
||||||
|
<DxTotalItem
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="Call PLN 123"
|
||||||
|
show-in-column="no"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
v-for="i in 31"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
:column="`tgl${i}`"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -107,7 +130,9 @@ import {
|
|||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection,
|
||||||
|
DxSummary,
|
||||||
|
DxTotalItem
|
||||||
} 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'
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
@ -54,30 +54,56 @@
|
|||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:min-width="180"
|
||||||
data-field="nama_up3"
|
data-field="nama_up3"
|
||||||
caption="Nama UP3"
|
caption="Nama UP3"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:min-width="180"
|
||||||
|
data-field="nama_up3"
|
||||||
|
caption="Nama UP3"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:group-index="0"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
:min-width="180"
|
||||||
data-field="nama_posko"
|
data-field="nama_posko"
|
||||||
caption="Nama Posko"
|
caption="Nama Posko"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="100"
|
:width="180"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="posko_in"
|
data-field="posko_in"
|
||||||
caption="Posko IN"
|
caption="Posko IN"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="100"
|
:width="180"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="posko_out"
|
data-field="posko_out"
|
||||||
caption="Posko OUT"
|
caption="Posko OUT"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<DxSummary>
|
||||||
|
<DxGroupItem :show-in-group-footer="true" column="nama_up3" display-format="Total" />
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="posko_in"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="posko_out"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -85,7 +111,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -95,7 +121,9 @@ import {
|
|||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection,
|
||||||
|
DxSummary,
|
||||||
|
DxGroupItem
|
||||||
} 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'
|
||||||
|
|||||||
@ -1,61 +1,132 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1
|
||||||
|
@update:filters="
|
||||||
|
(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
" />
|
"
|
||||||
|
/>
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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" v-if="loading"
|
<DxLoadPanel
|
||||||
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="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
|
<DxColumn
|
||||||
<DxColumn :width="50" alignment="center"
|
:width="50"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
caption="NO"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
rowspan="4"
|
||||||
|
colspan="2"
|
||||||
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
caption="a"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
|
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="regu"
|
||||||
|
caption="b"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
|
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kode_regu"
|
||||||
|
caption="c"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<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_laporan" caption="d=(e+g)"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_laporan"
|
||||||
|
caption="d=(e+g)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_selesai"
|
||||||
|
caption="e"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
caption="f=(e/d)*100"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_belum_selesai"
|
||||||
|
caption="g"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_belum_selesai"
|
||||||
|
caption="h=(g/d)*100"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -65,23 +136,43 @@
|
|||||||
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking"
|
<DxColumn
|
||||||
caption="i" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_laporan_mobile_nonmarking"
|
||||||
|
caption="i"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
|
<DxColumn
|
||||||
caption="j=(i/d)*100" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_laporan_mobile_nonmarking"
|
||||||
|
caption="j=(i/d)*100"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking"
|
<DxColumn
|
||||||
caption="k" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_response_mobile_nonmarking"
|
||||||
|
caption="k"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking"
|
<DxColumn
|
||||||
caption="l" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_recovery_mobile_nonmarking"
|
||||||
|
caption="l"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -89,23 +180,43 @@
|
|||||||
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"
|
<DxColumn
|
||||||
caption="m" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_laporan_mobile_marking"
|
||||||
|
caption="m"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
|
<DxColumn
|
||||||
caption="n=(m/d)*100" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_laporan_mobile_marking"
|
||||||
|
caption="n=(m/d)*100"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking"
|
<DxColumn
|
||||||
caption="o" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_response_mobile_marking"
|
||||||
|
caption="o"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking"
|
<DxColumn
|
||||||
caption="p" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_recovery_mobile_marking"
|
||||||
|
caption="p"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -115,25 +226,43 @@
|
|||||||
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking"
|
<DxColumn
|
||||||
caption="q" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_laporan_nonmobile_nonmarking"
|
||||||
|
caption="q"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
|
<DxColumn
|
||||||
caption="r=(q/d)*100" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_laporan_nonmobile_nonmarking"
|
||||||
|
caption="r=(q/d)*100"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center"
|
<DxColumn
|
||||||
data-field="avg_waktu_response_nonmobile_nonmarking" caption="s"
|
:width="150"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
|
data-field="avg_waktu_response_nonmobile_nonmarking"
|
||||||
|
caption="s"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center"
|
<DxColumn
|
||||||
data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t"
|
:width="150"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
|
data-field="avg_waktu_recovery_nonmobile_nonmarking"
|
||||||
|
caption="t"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -141,29 +270,48 @@
|
|||||||
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking"
|
<DxColumn
|
||||||
caption="u" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_laporan_nonmobile_marking"
|
||||||
|
caption="u"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
|
<DxColumn
|
||||||
caption="v=(u/d)*100" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_laporan_nonmobile_marking"
|
||||||
|
caption="v=(u/d)*100"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking"
|
<DxColumn
|
||||||
caption="w" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_response_nonmobile_marking"
|
||||||
|
caption="w"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking"
|
<DxColumn
|
||||||
caption="x" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_recovery_nonmobile_marking"
|
||||||
|
caption="x"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -174,7 +322,16 @@ import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
|||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
import { useFiltersStore } from '@/stores/filters'
|
||||||
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'
|
||||||
@ -182,10 +339,10 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -193,7 +350,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`)
|
||||||
})
|
})
|
||||||
@ -204,7 +361,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')
|
||||||
@ -221,16 +378,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
|
const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
|
||||||
query rekapitulasiGangguanDiselesaikanMobileAPKT
|
query rekapitulasiGangguanDiselesaikanMobileAPKT(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiGangguanDiselesaikanMobileAPKT
|
rekapitulasiGangguanDiselesaikanMobileAPKT(
|
||||||
(
|
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
@ -261,31 +416,37 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
|
|||||||
total_laporan_nonmobile_nonmarking
|
total_laporan_nonmobile_nonmarking
|
||||||
total_selesai
|
total_selesai
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
|
`
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT,
|
||||||
|
{
|
||||||
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
const filters = useFiltersStore()
|
const filters = useFiltersStore()
|
||||||
|
|
||||||
|
onResult((queryResult) => {
|
||||||
onResult(queryResult => {
|
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
|
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
|
||||||
;
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -294,8 +455,6 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,71 +1,196 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1
|
||||||
|
@update:filters="
|
||||||
|
(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
" />
|
"
|
||||||
|
/>
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<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" v-if="loading"
|
<DxLoadPanel
|
||||||
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="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn
|
||||||
caption="NO" data-type="number" css-class="custom-table-column" />
|
:width="50"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
caption="NO"
|
||||||
|
data-type="number"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Kode Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Jml"
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="1"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="2"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="3"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="4"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="5"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Index"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -75,7 +200,16 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
import { useFiltersStore } from '@/stores/filters'
|
||||||
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 { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
@ -85,10 +219,10 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -96,7 +230,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`)
|
||||||
})
|
})
|
||||||
@ -107,7 +241,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')
|
||||||
@ -143,8 +277,8 @@ const createDummy = () => {
|
|||||||
ret_max: 0,
|
ret_max: 0,
|
||||||
ret_min: 0,
|
ret_min: 0,
|
||||||
ret_more_sla: 0,
|
ret_more_sla: 0,
|
||||||
ret_less_sla: 0,
|
ret_less_sla: 0
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -155,16 +289,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
|
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
|
||||||
query rekapitulasiGangguanRatingPerPosko
|
query rekapitulasiGangguanRatingPerPosko(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiGangguanRatingPerPosko
|
rekapitulasiGangguanRatingPerPosko(
|
||||||
(
|
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
@ -189,30 +321,36 @@ query rekapitulasiGangguanRatingPerPosko
|
|||||||
selesai
|
selesai
|
||||||
total
|
total
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
|
GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO,
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
{
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
onResult(queryResult => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
|
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
|
||||||
;
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -221,8 +359,6 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -1,70 +1,195 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1
|
||||||
|
@update:filters="
|
||||||
|
(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
" />
|
"
|
||||||
|
/>
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<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" v-if="loading"
|
<DxLoadPanel
|
||||||
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="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
|
caption="NO"
|
||||||
|
data-type="number"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Kode"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Nama Regu"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Jml"
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="1"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="2"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="3"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="4"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="5"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Index"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -93,10 +218,10 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -175,15 +300,18 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
@ -196,7 +324,6 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,52 +1,153 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type18 @update:filters="(value) => {
|
<Type18
|
||||||
|
@update:filters="
|
||||||
|
(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
" />
|
"
|
||||||
|
/>
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<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" v-if="loading"
|
<DxLoadPanel
|
||||||
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="uid" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="uid"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
|
||||||
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="100"
|
||||||
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="januari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Januari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="100"
|
||||||
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="februari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Februari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="100"
|
||||||
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="maret"
|
||||||
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Maret"
|
||||||
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="april"
|
||||||
|
data-type="number"
|
||||||
|
caption="April"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="mei"
|
||||||
|
data-type="number"
|
||||||
|
caption="Mei"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="juni"
|
||||||
|
data-type="number"
|
||||||
|
caption="Juni"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="juli"
|
||||||
|
data-type="number"
|
||||||
|
caption="Juli"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="agustus"
|
||||||
|
data-type="number"
|
||||||
|
caption="Agustus"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="september"
|
||||||
|
data-type="number"
|
||||||
|
caption="September"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="oktober"
|
||||||
|
data-type="number"
|
||||||
|
caption="Oktober"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="november"
|
||||||
|
data-type="number"
|
||||||
|
caption="November"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="desember"
|
||||||
|
data-type="number"
|
||||||
|
caption="Desember"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -58,7 +159,16 @@ import Type18 from '@/components/Form/FiltersType/Type18.vue'
|
|||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
import { useFiltersStore } from '@/stores/filters'
|
||||||
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'
|
||||||
@ -66,10 +176,10 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -77,7 +187,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`)
|
||||||
})
|
})
|
||||||
@ -88,7 +198,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')
|
||||||
@ -99,7 +209,6 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
@ -107,16 +216,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
|
const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
|
||||||
query rekapitulasiGangguanKoreksiTransaksiIndividual
|
query rekapitulasiGangguanKoreksiTransaksiIndividual(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiGangguanKoreksiTransaksiIndividual
|
rekapitulasiGangguanKoreksiTransaksiIndividual(
|
||||||
(
|
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
@ -139,30 +246,36 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
|
|||||||
ulp
|
ulp
|
||||||
up3
|
up3
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
|
`
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL,
|
||||||
|
{
|
||||||
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|
||||||
onResult(queryResult => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
|
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
|
||||||
;
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -171,7 +284,6 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -4,50 +4,172 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting=""
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible.sync="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
:allow-export-selected-data="false"
|
||||||
caption="No Laporan" cell-template="data" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
<DxColumn
|
||||||
caption="Tgl Lapor" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
:width="50"
|
||||||
caption="Tgl Response" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
caption="Tgl Recovery" cell-template="data" />
|
data-type="number"
|
||||||
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
caption="No"
|
||||||
cell-template="data" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
data-field="no_laporan"
|
||||||
cell-template="data" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
cell-template="data"
|
||||||
caption="IDPEL/NO METER" cell-template="data" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
<DxColumn
|
||||||
caption="Nama Pelapor" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
:width="150"
|
||||||
caption="Alamat Pelapor" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
data-field="waktu_lapor"
|
||||||
caption="No Telp Pelapor" cell-template="data" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
cell-template="data"
|
||||||
caption="Keterangan Pelapor" cell-template="data" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
<DxColumn
|
||||||
cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
:width="150"
|
||||||
cell-template="data" />
|
alignment="center"
|
||||||
|
data-field="waktu_response"
|
||||||
|
caption="Tgl Response"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_recovery"
|
||||||
|
caption="Tgl Recovery"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_lapor"
|
||||||
|
caption="Jml Lapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_response_time"
|
||||||
|
caption="Durasi Response Time"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="idpel_nometer"
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="media"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Posko"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@ -57,7 +179,11 @@
|
|||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
|
<DetailDialog
|
||||||
|
:open="showDetail"
|
||||||
|
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
|
||||||
|
@on-close="closeDetail"
|
||||||
|
>
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -131,7 +257,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.nama_posko"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|||||||
@ -1,52 +1,153 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1
|
||||||
|
@update:filters="
|
||||||
|
(value) => {
|
||||||
filters = value
|
filters = value
|
||||||
}
|
}
|
||||||
" />
|
"
|
||||||
|
/>
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<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" v-if="loading"
|
<DxLoadPanel
|
||||||
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="uid" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="uid"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
|
||||||
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="100"
|
||||||
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="januari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Januari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="100"
|
||||||
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="februari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Februari"
|
||||||
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="100"
|
||||||
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="maret"
|
||||||
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Maret"
|
||||||
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="april"
|
||||||
|
data-type="number"
|
||||||
|
caption="April"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="mei"
|
||||||
|
data-type="number"
|
||||||
|
caption="Mei"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="juni"
|
||||||
|
data-type="number"
|
||||||
|
caption="Juni"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="juli"
|
||||||
|
data-type="number"
|
||||||
|
caption="Juli"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="agustus"
|
||||||
|
data-type="number"
|
||||||
|
caption="Agustus"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="september"
|
||||||
|
data-type="number"
|
||||||
|
caption="September"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="oktober"
|
||||||
|
data-type="number"
|
||||||
|
caption="Oktober"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="november"
|
||||||
|
data-type="number"
|
||||||
|
caption="November"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="100"
|
||||||
|
alignment="center"
|
||||||
|
data-field="desember"
|
||||||
|
data-type="number"
|
||||||
|
caption="Desember"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -74,10 +175,10 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
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 onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -157,11 +258,15 @@ const filterData = (params: any) => {
|
|||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3? up3.id:0,
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
@ -174,7 +279,6 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -4,50 +4,167 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting=""
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
cell-template="data" />
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
<DxColumn
|
||||||
caption="No Laporan" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
:width="150"
|
||||||
caption="Tgl Lapor" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
data-field="no_laporan"
|
||||||
caption="Tgl Response" cell-template="data" />
|
caption="No Laporan"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
cell-template="data"
|
||||||
caption="Tgl Recovery" cell-template="data" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
<DxColumn
|
||||||
caption="Durasi Response Time" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:width="150"
|
||||||
caption="Durasi Recovery Time" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
data-field="waktu_lapor"
|
||||||
cell-template="data" />
|
caption="Tgl Lapor"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
|
cell-template="data"
|
||||||
caption="Referensi Marking" cell-template="data" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
<DxColumn
|
||||||
caption="IDPEL/NO METER" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
:width="150"
|
||||||
caption="Nama Pelapor" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
data-field="waktu_response"
|
||||||
caption="Alamat Pelapor" cell-template="data" />
|
caption="Tgl Response"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
cell-template="data"
|
||||||
caption="No Telp Pelapor" cell-template="data" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
<DxColumn
|
||||||
caption="Keterangan Pelapor" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
:width="150"
|
||||||
cell-template="data" />
|
alignment="center"
|
||||||
|
data-field="waktu_recovery"
|
||||||
|
caption="Tgl Recovery"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_response_time"
|
||||||
|
caption="Durasi Response Time"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="referensi_marking"
|
||||||
|
caption="Referensi Marking"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="idpel_nometer"
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Posko"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@ -126,17 +243,32 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.nama_posko"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.penyebab"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.tindakan"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="dataReal"
|
:data-source="dataReal"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
@ -61,13 +61,12 @@
|
|||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="120"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
name="jenisGangguanGroup"
|
data-field="kode"
|
||||||
data-field="jenisGangguan"
|
caption="Kode"
|
||||||
caption="Jenis Gangguan"
|
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
:group-index="0"
|
group-index="0"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@ -398,6 +397,7 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
|
|||||||
persen_selesai
|
persen_selesai
|
||||||
tipe_permasalahan
|
tipe_permasalahan
|
||||||
total
|
total
|
||||||
|
kode
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
total_diatas_sla_response
|
total_diatas_sla_response
|
||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
@ -473,7 +473,7 @@ const filterData = (params: any) => {
|
|||||||
...dataReal.value,
|
...dataReal.value,
|
||||||
{
|
{
|
||||||
no: ++no,
|
no: ++no,
|
||||||
kode: item.tipe_permasalahan,
|
kode: item.kode,
|
||||||
jenisGangguan: item.tipe_permasalahan,
|
jenisGangguan: item.tipe_permasalahan,
|
||||||
laporan: {
|
laporan: {
|
||||||
total: item.total,
|
total: item.total,
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -4,52 +4,176 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-type="number"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
caption="No"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
|
caption="Tgl Response"
|
||||||
cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
cell-template="data"
|
||||||
cell-template="data" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_recovery"
|
||||||
|
caption="Tgl Recovery"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_lapor"
|
||||||
|
caption="Jml Lapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_response_time"
|
||||||
|
caption="Durasi Response Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="idpel_nometer"
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="media"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama ULP"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
@ -113,7 +237,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.alamat_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -123,8 +252,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
<InputText
|
||||||
class-name="flex-1 h-[56px]" />
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.keterangan_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,49 +4,161 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_laporan"
|
||||||
|
caption="No Laporan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="data" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
caption="Tgl Response"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_recovery"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
caption="Tgl Recovery"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
cell-template="data"
|
||||||
cell-template="data" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_response_time"
|
||||||
|
caption="Durasi Response Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="idpel_nometer"
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama ULP"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
@ -103,7 +215,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.alamat_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -113,8 +230,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
<InputText
|
||||||
class-name="flex-1 h-[56px]" />
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.keterangan_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,49 +4,161 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_laporan"
|
||||||
|
caption="No Laporan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="data" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
caption="Tgl Response"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_recovery"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
caption="Tgl Recovery"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
cell-template="data"
|
||||||
cell-template="data" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_response_time"
|
||||||
|
caption="Durasi Response Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="idpel_nometer"
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama ULP"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
@ -104,7 +216,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.alamat_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -114,8 +231,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
<InputText
|
||||||
class-name="flex-1 h-[56px]" />
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.keterangan_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,50 +4,168 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-type="number"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
caption="No"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
caption="No Laporan"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
cell-template="data"
|
||||||
cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
caption="Tgl Lapor"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
|
alignment="center"
|
||||||
cell-template="data" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
caption="Tgl Response"
|
||||||
cell-template="data" />
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_recovery"
|
||||||
|
caption="Tgl Recovery"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_response_time"
|
||||||
|
caption="Durasi Response Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="idpel_nometer"
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="media"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama ULP"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
@ -105,7 +223,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.alamat_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -115,8 +238,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
<InputText
|
||||||
class-name="flex-1 h-[56px]" />
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.keterangan_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,52 +4,170 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
:width="50"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-type="number"
|
||||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
caption="No"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="no_laporan"
|
||||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
caption="No Laporan"
|
||||||
cell-template="data" />
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_pelapor"
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="alamat_pelapor"
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="no_telp_pelapor"
|
||||||
|
caption="No Telp Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_pelapor"
|
||||||
|
caption="Keterangan Pelapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="status_akhir"
|
||||||
|
caption="Status"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_lapor"
|
||||||
|
caption="Tgl Lapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_response"
|
||||||
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
|
caption="Tgl Response"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
|
cell-template="data"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="data" />
|
:width="170"
|
||||||
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="waktu_recovery"
|
||||||
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
|
caption="Tgl Recovery"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_response"
|
||||||
|
caption="Response Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="durasi_recovery_time"
|
||||||
|
caption="Recovery Time"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="media"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_media"
|
||||||
|
caption="Tgl Media"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keterangan_media"
|
||||||
|
caption="Keterangan Media"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
@ -77,13 +195,22 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.alamat_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
<InputText
|
||||||
class-name="flex-1 h-[56px]" />
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.keterangan_pelapor"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -128,7 +255,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
|
||||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1 h-[56px]" />
|
<InputText
|
||||||
|
:readonly="true"
|
||||||
|
type="textarea"
|
||||||
|
:value="dataDetail?.keterangan_media"
|
||||||
|
class-name="flex-1 h-[56px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -1,56 +1,189 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => filters = value" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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="onDataSelectionChanged"
|
||||||
|
: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" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
|
<DxColumn
|
||||||
cell-template="data" header-cell-template="title-header" />
|
:width="170"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
header-cell-template="title-header"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
cell-template="data"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
/>
|
||||||
css-class="custom-table-column" cell-template="data" />
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
|
:width="150"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
alignment="center"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
data-field="total_selesai"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-type="number"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
caption="Selesai"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
cell-template="data"
|
||||||
caption="> SLA" css-class="custom-table-column" cell-template="data" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="InProgress"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_diatas_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="> SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤ SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
|
<DxColumn
|
||||||
css-class="custom-table-column" cell-template="data" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
alignment="center"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
data-field="avg_durasi_recovery"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
data-type="number"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
caption="Rata-Rata"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" cell-template="data" />
|
cell-template="data"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
|
/>
|
||||||
css-class="custom-table-column" cell-template="data" />
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_diatas_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="> SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤ SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="data"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<p class="cursor-pointer" @click="showDialog()">
|
<p class="cursor-pointer" @click="showDialog()">
|
||||||
@ -66,8 +199,12 @@
|
|||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
|
<DetailDialog
|
||||||
@on-close="closeDetailDialog">
|
:open="showDialogDetail"
|
||||||
|
:full-width="true"
|
||||||
|
title="Detail Rekapitulasi Keluhan All"
|
||||||
|
@on-close="closeDetailDialog"
|
||||||
|
>
|
||||||
<div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
|
<div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
|
||||||
<div class="flex flex-1 p-4 bg-white rounded-xl">
|
<div class="flex flex-1 p-4 bg-white rounded-xl">
|
||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
@ -111,107 +248,77 @@
|
|||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxDataGrid> -->
|
</DxDataGrid> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
|
<div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
No Laporan:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||||
Tgl Lapor:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Dalam Proses Bidang:</h3>
|
||||||
Dalam Proses Bidang:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Selesai Bidang Unit:</h3>
|
||||||
Selesai Bidang Unit:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
|
||||||
Durasi Response Time:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||||
Status:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER::</h3>
|
||||||
IDPEL/NO METER::
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||||
Nama Pelapor:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
Alamat Pelapor:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
|
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
No Telp Pelapor:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
Keterangan Pelapor:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
|
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Rayon:</h3>
|
||||||
Rayon:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1" />
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Uraian:</h3>
|
||||||
Uraian:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
|
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between w-full">
|
<div class="flex flex-row justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Pelanggan:</h3>
|
||||||
Response Pelanggan:
|
|
||||||
</h3>
|
|
||||||
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
|
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
@ -300,16 +407,14 @@ const onExporting = (e: any) => {
|
|||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_DATA = gql`
|
const GET_DATA = gql`
|
||||||
query rekapitulasiKeluhanAll
|
query rekapitulasiKeluhanAll(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$idUlp: Int!
|
$idUlp: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiKeluhanAll
|
rekapitulasiKeluhanAll(
|
||||||
(
|
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
idUlp: $idUlp
|
idUlp: $idUlp
|
||||||
@ -334,7 +439,8 @@ query rekapitulasiKeluhanAll
|
|||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}`
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
@ -343,14 +449,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
|||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
|
|||||||
@ -1,75 +1,210 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type13 @update:filters="(value) => filters = value" />
|
<Type13 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="fungsi_bidang"
|
||||||
|
caption="Fungsi Bidang"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
|
data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="Min" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
|
data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="Min" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -181,24 +316,26 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
|||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
|
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -207,6 +344,5 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,75 +1,210 @@
|
|||||||
<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)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="tipe_keluhan" caption="Jenis Keluhan"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="tipe_keluhan"
|
||||||
|
caption="Jenis Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
|
data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="Min" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
|
data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="Min" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -82,7 +217,16 @@ import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
|||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -101,7 +245,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`)
|
||||||
})
|
})
|
||||||
@ -112,7 +256,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')
|
||||||
@ -128,19 +272,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_DATA = gql`
|
const GET_DATA = gql`
|
||||||
query rekapitulasiKeluhanPerJenisKeluhan
|
query rekapitulasiKeluhanPerJenisKeluhan(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$idUlp: Int!
|
$idUlp: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiKeluhanPerJenisKeluhan
|
rekapitulasiKeluhanPerJenisKeluhan(
|
||||||
(
|
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
idUlp: $idUlp
|
idUlp: $idUlp
|
||||||
@ -164,33 +305,35 @@ query rekapitulasiKeluhanPerJenisKeluhan
|
|||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUlp: 0,
|
idUlp: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onResult((queryResult) => {
|
||||||
onResult(queryResult => {
|
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
|
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
|
||||||
;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -199,6 +342,5 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,78 +1,212 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type13 @update:filters="(value) => filters = value" />
|
<Type13 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok Keluhan"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kelompok"
|
||||||
|
caption="Kelompok Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
|
data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="Min" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field=""
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
|
data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="Min" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -82,7 +216,16 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
import Type13 from '@/components/Form/FiltersType/Type13.vue'
|
import Type13 from '@/components/Form/FiltersType/Type13.vue'
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -101,7 +244,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`)
|
||||||
})
|
})
|
||||||
@ -112,7 +255,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')
|
||||||
@ -128,19 +271,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_DATA = gql`
|
const GET_DATA = gql`
|
||||||
query rekapitulasiKeluhanPerKelompokKeluhan
|
query rekapitulasiKeluhanPerKelompokKeluhan(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$idUlp: Int!
|
$idUlp: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiKeluhanPerKelompokKeluhan
|
rekapitulasiKeluhanPerKelompokKeluhan(
|
||||||
(
|
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
idUlp: $idUlp
|
idUlp: $idUlp
|
||||||
@ -164,33 +304,35 @@ query rekapitulasiKeluhanPerKelompokKeluhan
|
|||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUlp: 0,
|
idUlp: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onResult((queryResult) => {
|
||||||
onResult(queryResult => {
|
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
|
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
|
||||||
;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
|
|||||||
@ -1,75 +1,209 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type13 @update:filters="(value) => filters = value" />
|
<Type13 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:data-source="data" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:show-column-lines="true"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:data-source="data"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
:word-wrap-enabled="true"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<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="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn
|
||||||
caption="NO" css-class="custom-table-column" />
|
:width="50"
|
||||||
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
caption="NO"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="tanggal_lapor"
|
||||||
|
caption="Tanggal Lapor"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total_inproses"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total_selesai"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -179,24 +313,26 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
|||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
|
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
|
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
|
|||||||
@ -1,74 +1,209 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type8 @update:filters="(value) => filters = value" />
|
<Type8 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn
|
||||||
caption="NO" css-class="custom-table-column" />
|
:width="50"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
caption="NO"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_ulp"
|
||||||
|
caption="Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_inproses"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Total"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="max_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="min_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Min"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="total_diatas_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -179,14 +314,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
|||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
@ -195,7 +334,6 @@ const filterData = (params: any) => {
|
|||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanPerUnit
|
data.value = queryResult.data.rekapitulasiKeluhanPerUnit
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -204,6 +342,5 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,27 +1,67 @@
|
|||||||
<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>
|
<div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn
|
||||||
caption="NO" css-class="custom-table-column" />
|
:width="50"
|
||||||
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
caption="NO"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="media"
|
||||||
|
caption="Nama Media"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||||
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
v-for="i in 31"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
:data-field="`tgl${i}`"
|
||||||
|
data-type="number"
|
||||||
|
:caption="i"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -146,14 +186,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
|||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
@ -162,7 +206,6 @@ const filterData = (params: any) => {
|
|||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
|
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
|
|||||||
@ -1,70 +1,197 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
<Type8 @update:filters="(value) => filters = value" />
|
<Type8 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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 css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" />
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="regu"
|
||||||
|
caption="Kode Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_idUlp"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="in_process"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_in_process"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="jumlah_rating"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Jml"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="persen_rating"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="%"
|
||||||
<DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rating_1"
|
||||||
|
data-type="number"
|
||||||
|
caption="1"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rating_2"
|
||||||
|
data-type="number"
|
||||||
|
caption="2"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rating_3"
|
||||||
|
data-type="number"
|
||||||
|
caption="3"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rating_4"
|
||||||
|
data-type="number"
|
||||||
|
caption="4"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rating_5"
|
||||||
|
data-type="number"
|
||||||
|
caption="5"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="indeks_rating"
|
||||||
|
data-type="number"
|
||||||
|
caption="Indeks"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="jumlah_non_rating"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_non_rating"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -75,7 +202,16 @@ import Type8 from '@/components/Form/FiltersType/Type8.vue'
|
|||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
import { useFiltersStore } from '@/stores/filters'
|
||||||
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'
|
||||||
@ -94,7 +230,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`)
|
||||||
})
|
})
|
||||||
@ -105,7 +241,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')
|
||||||
@ -121,19 +257,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_DATA = gql`
|
const GET_DATA = gql`
|
||||||
query rekapitulasiKeluhanRatingPerUnit
|
query rekapitulasiKeluhanRatingPerUnit(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$idUlp: Int!
|
$idUlp: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiKeluhanRatingPerUnit
|
rekapitulasiKeluhanRatingPerUnit(
|
||||||
(
|
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
idUlp: $idUlp
|
idUlp: $idUlp
|
||||||
@ -158,33 +291,35 @@ query rekapitulasiKeluhanRatingPerUnit
|
|||||||
selesai
|
selesai
|
||||||
total
|
total
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUlp: 0,
|
idUlp: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { idUlp, uid, up3 } = params
|
const { idUlp, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUlp: idUlp ? idUlp.id : 0,
|
idUlp: idUlp ? idUlp.id : 0,
|
||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onResult((queryResult) => {
|
||||||
|
|
||||||
onResult(queryResult => {
|
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
|
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -193,6 +328,5 @@ const filterData = (params: any) => {
|
|||||||
onError((error) => {
|
onError((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -1,57 +1,154 @@
|
|||||||
<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 class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed=""
|
||||||
|
:column-width="100"
|
||||||
|
@exporting=""
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
|
<DxColumn
|
||||||
caption="Nomor Gangguan" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
|
:width="170"
|
||||||
caption="Nama Pelanggan" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
|
data-field="nomo_gangguan"
|
||||||
caption="Isi Laporan" />
|
caption="Nomor Gangguan"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
|
/>
|
||||||
caption="Penyebab Gangguan" />
|
<DxColumn
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
|
css-class="custom-table-column"
|
||||||
caption="Tgl Padam" />
|
:width="170"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
|
data-field="nama_pelanggan"
|
||||||
|
caption="Nama Pelanggan"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="isi_laporan"
|
||||||
|
caption="Isi Laporan"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="penyebab_gangguan"
|
||||||
|
caption="Penyebab Gangguan"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_padam"
|
||||||
|
caption="Tgl Padam"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Tgl Nyala"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="regu"
|
||||||
|
caption="Regu"
|
||||||
|
/>
|
||||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
|
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
|
<DxColumn
|
||||||
caption="Sumber" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
|
:width="170"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
|
alignment="center"
|
||||||
caption="Satuan" />
|
data-field="sumber"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
|
caption="Sumber"
|
||||||
caption="Vol" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Nama"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="satuan"
|
||||||
|
caption="Satuan"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="volume"
|
||||||
|
caption="Vol"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
import Filters from '@/components/Form/Filters.vue';
|
DxColumn,
|
||||||
import { Type14 } from '@/components/Form/FiltersType';
|
DxExport,
|
||||||
import { useQuery } from '@vue/apollo-composable';
|
DxLoadPanel,
|
||||||
import gql from 'graphql-tag';
|
DxPager,
|
||||||
|
DxPaging,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
|
import { Type14 } from '@/components/Form/FiltersType'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
@ -60,7 +157,11 @@ const data = ref<any[]>([])
|
|||||||
|
|
||||||
const daftarGangguanDanMaterialDipakai = gql`
|
const daftarGangguanDanMaterialDipakai = gql`
|
||||||
query DaftardaftarGangguanDanMaterialDipakai(
|
query DaftardaftarGangguanDanMaterialDipakai(
|
||||||
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
|
$dateFrom: Date!
|
||||||
|
$dateTo: Date!
|
||||||
|
$posko: String
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
) {
|
) {
|
||||||
daftarGangguanDanMaterialDipakai(
|
daftarGangguanDanMaterialDipakai(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
@ -79,13 +180,12 @@ const daftarGangguanDanMaterialDipakai = gql`
|
|||||||
sumber
|
sumber
|
||||||
volume
|
volume
|
||||||
waktu_padam
|
waktu_padam
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
|
const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0,
|
||||||
posko: ''
|
posko: ''
|
||||||
@ -94,12 +194,15 @@ const filterData = (params: any) => {
|
|||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, idUid, idUp3 } = params
|
const { posko, idUid, idUp3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: idUid ? idUid.id : 0,
|
idUid: idUid ? idUid.id : 0,
|
||||||
idUp3: idUp3 ? idUp3.id : 0,
|
idUp3: idUp3 ? idUp3.id : 0,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0
|
||||||
|
|
||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
|
|||||||
@ -1,35 +1,94 @@
|
|||||||
<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 class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed=""
|
||||||
|
:column-width="100"
|
||||||
|
@exporting=""
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
:enabled="true"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
|
<DxColumn
|
||||||
caption="Kode Material" />
|
css-class="custom-table-column"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
|
:width="170"
|
||||||
caption="Nama Material" />
|
alignment="center"
|
||||||
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan"
|
data-field="kode_material"
|
||||||
caption="Satuan" />
|
caption="Kode Material"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
|
/>
|
||||||
caption="Sumber Material" />
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_material"
|
||||||
|
caption="Nama Material"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="satuan"
|
||||||
|
caption="Satuan"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="sumber_material"
|
||||||
|
caption="Sumber Material"
|
||||||
|
/>
|
||||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
|
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
|
||||||
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
|
<DxColumn
|
||||||
:caption="i" css-class="custom-table-column" />
|
v-for="i in 31"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
:data-field="`tgl${i}`"
|
||||||
|
data-type="number"
|
||||||
|
:caption="i"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -37,7 +96,15 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
|
DxColumn,
|
||||||
|
DxExport,
|
||||||
|
DxLoadPanel,
|
||||||
|
DxPager,
|
||||||
|
DxPaging,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
import { Type14 } from '@/components/Form/FiltersType'
|
import { Type14 } from '@/components/Form/FiltersType'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
@ -50,7 +117,11 @@ const data = ref<any[]>([])
|
|||||||
|
|
||||||
const rekapitulasiPemakaianMaterial = gql`
|
const rekapitulasiPemakaianMaterial = gql`
|
||||||
query DaftarrekapitulasiPemakaianMaterial(
|
query DaftarrekapitulasiPemakaianMaterial(
|
||||||
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
|
$dateFrom: Date!
|
||||||
|
$dateTo: Date!
|
||||||
|
$posko: String
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
) {
|
) {
|
||||||
rekapitulasiPemakaianMaterial(
|
rekapitulasiPemakaianMaterial(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
@ -94,13 +165,12 @@ tgl6
|
|||||||
tgl7
|
tgl7
|
||||||
tgl8
|
tgl8
|
||||||
tgl9
|
tgl9
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
|
const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0,
|
||||||
posko: 0
|
posko: 0
|
||||||
@ -111,11 +181,15 @@ const filterData = (params: any) => {
|
|||||||
const { posko, idUid, idUp3 } = params
|
const { posko, idUid, idUp3 } = params
|
||||||
|
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: idUid ? idUid.id : 0,
|
idUid: idUid ? idUid.id : 0,
|
||||||
idUp3: idUp3 ? idUp3.id : 0,
|
idUp3: idUp3 ? idUp3.id : 0,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0
|
||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:remote-operations="true"
|
:remote-operations="true"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
@ -226,7 +226,7 @@ const tahunLalu = ref(tahunSekarang.value - 1)
|
|||||||
|
|
||||||
// const MONALISAJUMLAHKALIGANGGUAN = gql`
|
// const MONALISAJUMLAHKALIGANGGUAN = gql`
|
||||||
// query DaftarMonalisaJumlahKaliGangguan(
|
// query DaftarMonalisaJumlahKaliGangguan(
|
||||||
// $regional: Int
|
// $regional: String
|
||||||
// $idUid: Int
|
// $idUid: Int
|
||||||
// $idUp3: Int
|
// $idUp3: Int
|
||||||
// $idUlp: Int
|
// $idUlp: Int
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
|
|||||||
@ -1,73 +1,176 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div>
|
<div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
caption="Jumlah dan Durasi RPT & RCT Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_bulan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="a"
|
||||||
|
data-type="number"
|
||||||
|
data-field="total_rpt_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number"
|
<DxColumn
|
||||||
data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="b"
|
||||||
|
data-type="number"
|
||||||
|
data-field="jumlah_gangguan_rpt_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="c=a/b"
|
||||||
|
data-type="number"
|
||||||
|
data-field="rpt_gangguan_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="d"
|
||||||
|
data-type="number"
|
||||||
|
data-field="total_rct_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number"
|
<DxColumn
|
||||||
data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="e"
|
||||||
|
data-type="number"
|
||||||
|
data-field="jumlah_gangguan_rct_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="f=d/e"
|
||||||
|
data-type="number"
|
||||||
|
data-field="rct_gangguan_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="a"
|
||||||
|
data-type="number"
|
||||||
|
data-field="total_rpt_sampai_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number"
|
<DxColumn
|
||||||
data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="b"
|
||||||
|
data-type="number"
|
||||||
|
data-field="jumlah_gangguan_rpt_sampai_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
|
<DxColumn
|
||||||
data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="c=a/b"
|
||||||
|
data-type="number"
|
||||||
|
data-field="rpt_gangguan_sampai_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="d"
|
||||||
|
data-type="number"
|
||||||
|
data-field="total_rct_sampai_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number"
|
<DxColumn
|
||||||
data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="e"
|
||||||
|
data-type="number"
|
||||||
|
data-field="jumlah_gangguan_rct_sampai_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
|
<DxColumn
|
||||||
data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="f=d/e"
|
||||||
|
data-type="number"
|
||||||
|
data-field="rch_gangguan_sampai_bulan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -150,7 +253,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
|
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
@ -163,9 +266,7 @@ const filterData = (params: any) => {
|
|||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
|
queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
|
||||||
data.value = [
|
data.value = [...data.value, { ...item }]
|
||||||
...data.value, { ...item }
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
@ -211,5 +312,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,31 +1,75 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
|
caption="NO"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
|
/>
|
||||||
css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="id_gangguan"
|
||||||
|
caption="ID Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
data-field="tipe_permasalahan"
|
||||||
|
caption="Jenis Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah"
|
||||||
|
caption="Jumlah"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_gangguan"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -95,7 +139,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJeni
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
|
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
|
|||||||
@ -1,38 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="Lapor Ulang Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
<DxColumn
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_bulan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_bulan_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
<DxColumn
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_tahun"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_tahun_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_tahun"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -109,10 +171,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
bulanSekarang.value = bulan.id;
|
bulanSekarang.value = bulan.id
|
||||||
tahunSekarang.value = tahun.id;
|
tahunSekarang.value = tahun.id
|
||||||
tahunLalu.value = tahun.id - 1;
|
tahunLalu.value = tahun.id - 1
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
|
|||||||
@ -1,38 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="ENS Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
<DxColumn
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_bulan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_bulan_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
<DxColumn
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_tahun"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_tahun_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_tahun"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -109,10 +171,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
bulanSekarang.value = bulan.id;
|
bulanSekarang.value = bulan.id
|
||||||
tahunSekarang.value = tahun.id;
|
tahunSekarang.value = tahun.id
|
||||||
tahunLalu.value = tahun.id - 1;
|
tahunLalu.value = tahun.id - 1
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
|
|||||||
@ -1,29 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="Tahun" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="gangguan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="informasi"
|
||||||
|
data-type="number"
|
||||||
|
caption="Informasi"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -87,19 +131,18 @@ const monalisaGangguanBelumSelesai = gql`
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
|
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
|
||||||
|
|
||||||
regional: '',
|
regional: '',
|
||||||
posko: '',
|
posko: '',
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0,
|
||||||
bulan: 10,
|
bulan: 10,
|
||||||
tahun: 2023,
|
tahun: 2023
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
bulanSekarang.value = bulan.id;
|
bulanSekarang.value = bulan.id
|
||||||
tahunSekarang.value = tahun.id;
|
tahunSekarang.value = tahun.id
|
||||||
tahunLalu.value = tahun.id - 1;
|
tahunLalu.value = tahun.id - 1
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
|
|||||||
@ -1,38 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="Jumlah Kali Gangguan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
<DxColumn
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_bulan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_bulan_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
<DxColumn
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_tahun"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_tahun_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_tahun"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -44,7 +106,16 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, 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'
|
||||||
@ -65,7 +136,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`)
|
||||||
})
|
})
|
||||||
@ -76,7 +147,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,7 +158,6 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const tahunSekarang = ref(new Date().getFullYear())
|
const tahunSekarang = ref(new Date().getFullYear())
|
||||||
const bulanSekarang = ref(new Date().getMonth())
|
const bulanSekarang = ref(new Date().getMonth())
|
||||||
const tahunLalu = ref(tahunSekarang.value - 1)
|
const tahunLalu = ref(tahunSekarang.value - 1)
|
||||||
@ -128,10 +198,10 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUH
|
|||||||
})
|
})
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
bulanSekarang.value = bulan.id;
|
bulanSekarang.value = bulan.id
|
||||||
tahunSekarang.value = tahun.id;
|
tahunSekarang.value = tahun.id
|
||||||
tahunLalu.value = tahun.id - 1;
|
tahunLalu.value = tahun.id - 1
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
@ -142,7 +212,7 @@ const filterData = (params: any) => {
|
|||||||
})
|
})
|
||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.monalisaJumlahKaliKeluhan;
|
data.value = queryResult.data.monalisaJumlahKaliKeluhan
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
@ -158,6 +228,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log(bulanSekarang.value)
|
console.log(bulanSekarang.value)
|
||||||
});
|
})
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
@ -1,38 +1,104 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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
|
||||||
<DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
caption="Jumlah RCT Kali Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
<DxColumn
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_bulan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_bulan_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
<DxColumn
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_tahun"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_tahun_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_tahun"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -44,7 +110,16 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -70,7 +145,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`)
|
||||||
})
|
})
|
||||||
@ -81,7 +156,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')
|
||||||
@ -127,10 +202,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
|
|||||||
tahun: 2023
|
tahun: 2023
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
bulanSekarang.value = bulan.id;
|
bulanSekarang.value = bulan.id
|
||||||
tahunSekarang.value = tahun.id;
|
tahunSekarang.value = tahun.id
|
||||||
tahunLalu.value = tahun.id - 1;
|
tahunLalu.value = tahun.id - 1
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
|
|||||||
@ -1,38 +1,104 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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
|
||||||
<DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
caption="Jumlah RPT Kali Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
<DxColumn
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_bulan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_bulan_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
<DxColumn
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_tahun"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_tahun_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_tahun"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -44,7 +110,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -70,7 +145,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`)
|
||||||
})
|
})
|
||||||
@ -81,7 +156,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')
|
||||||
@ -92,7 +167,14 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const monalisaRecoveryTimeKeluhan = gql`
|
const monalisaRecoveryTimeKeluhan = gql`
|
||||||
query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
|
query DaftarmonalisaRecoveryTimeKeluhan(
|
||||||
|
$regional: regional
|
||||||
|
$posko: Int
|
||||||
|
$idUid: Int
|
||||||
|
$idUp3: Int
|
||||||
|
$bulan: Int
|
||||||
|
$tahun: Int
|
||||||
|
) {
|
||||||
monalisaRecoveryTimeKeluhan(
|
monalisaRecoveryTimeKeluhan(
|
||||||
regional: $regional
|
regional: $regional
|
||||||
posko: $posko
|
posko: $posko
|
||||||
@ -110,21 +192,20 @@ const monalisaRecoveryTimeKeluhan = gql`
|
|||||||
persen_tahun
|
persen_tahun
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
|
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
|
||||||
regional: 0,
|
regional: 0,
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0,
|
||||||
bulan: 10,
|
bulan: 10,
|
||||||
tahun: 2023,
|
tahun: 2023
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
bulanSekarang.value = bulan.id
|
||||||
bulanSekarang.value = bulan.id;
|
tahunSekarang.value = tahun.id
|
||||||
tahunSekarang.value = tahun.id;
|
tahunLalu.value = tahun.id - 1
|
||||||
tahunLalu.value = tahun.id - 1;
|
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
@ -133,13 +214,16 @@ const filterData = (params: any) => {
|
|||||||
bulan: bulan ? bulan.id : 10,
|
bulan: bulan ? bulan.id : 10,
|
||||||
tahun: bulan ? tahun.id : 2023
|
tahun: bulan ? tahun.id : 2023
|
||||||
})
|
})
|
||||||
onResult(queryResult => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
|
queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
|
||||||
data.value = [...data.value, {
|
data.value = [
|
||||||
...item,
|
...data.value,
|
||||||
}];
|
{
|
||||||
});
|
...item
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
|
|||||||
@ -1,74 +1,177 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="200"
|
||||||
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
caption="Jumlah dan Durasi RPT & RCT Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="a"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="b"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="c=a/b"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="d"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="e"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="f=d/e"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="a"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="b"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="c=a/b"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="d"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="e"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
caption="f=d/e"
|
||||||
|
data-type="number"
|
||||||
|
data-field=""
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -81,7 +184,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -104,7 +216,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`)
|
||||||
})
|
})
|
||||||
@ -115,7 +227,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')
|
||||||
@ -172,7 +284,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
|
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
|
|||||||
@ -1,32 +1,75 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan"
|
caption="NO"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
|
/>
|
||||||
css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="id_keluhan"
|
||||||
|
caption="ID Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
data-field="jenis_keluhan"
|
||||||
|
caption="Jenis Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah"
|
||||||
|
caption="Jumlah"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_keluhan"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -36,7 +79,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -59,7 +111,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`)
|
||||||
})
|
})
|
||||||
@ -70,7 +122,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')
|
||||||
@ -118,7 +170,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenis
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
|
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
|
|||||||
@ -1,38 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="Lapor Ulang Keluhan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
|
<DxColumn
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_bulan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_bulan_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
|
<DxColumn
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
|
alignment="center"
|
||||||
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
|
data-field="jumlah_tahun"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="jumlah_tahun_n_1"
|
||||||
|
data-type="number"
|
||||||
|
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_tahun"
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -44,7 +106,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -70,7 +141,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`)
|
||||||
})
|
})
|
||||||
@ -81,7 +152,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')
|
||||||
@ -132,10 +203,10 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
|
|||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
bulanSekarang.value = bulan.id;
|
bulanSekarang.value = bulan.id
|
||||||
tahunSekarang.value = tahun.id;
|
tahunSekarang.value = tahun.id
|
||||||
tahunLalu.value = tahun.id - 1;
|
tahunLalu.value = tahun.id - 1
|
||||||
refetch({
|
refetch({
|
||||||
regional: regional,
|
regional: regional,
|
||||||
posko: posko ? posko.id : 0,
|
posko: posko ? posko.id : 0,
|
||||||
|
|||||||
@ -1,29 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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="Tahun" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="keluhan" data-type="number" caption="Keluhan"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="informasi"
|
||||||
|
data-type="number"
|
||||||
|
caption="Informasi"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,88 +1,253 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
:data-source="data"
|
||||||
:allow-column-resizing="true" 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="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn alignment="center" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
|
alignment="center"
|
||||||
css-class="custom-table-column">
|
data-field="nama_posko"
|
||||||
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
|
caption="Nama Unit"
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number"
|
/>
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
:caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keluhan_bulan_lalu"
|
||||||
|
data-type="number"
|
||||||
|
caption="Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="gangguan_bulan_lalu"
|
||||||
|
data-type="number"
|
||||||
|
caption="Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
|
<DxColumn
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
data-field="informasi_keluhan_bulan_lalu"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
|
data-type="number"
|
||||||
caption="Total" css-class="custom-table-column" />
|
caption="Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="informasi_gangguan_bulan_lalu"
|
||||||
|
data-type="number"
|
||||||
|
caption="Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_bulan_lalu"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
<DxColumn
|
||||||
data-field="total_komplain_bulan_lalu" data-type="number" />
|
alignment="center"
|
||||||
|
caption="Total Komplain"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
data-field="total_komplain_bulan_lalu"
|
||||||
|
data-type="number"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
|
<DxColumn
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
data-field="keluhan_bulan_ini"
|
||||||
|
data-type="number"
|
||||||
|
caption="Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="keluhan_bulan_lalu"
|
||||||
|
data-type="number"
|
||||||
|
caption="Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
|
<DxColumn
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
data-field="informasi_keluhan_bulan_ini"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
|
data-type="number"
|
||||||
caption="Total" css-class="custom-table-column" />
|
caption="Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="informasi_gangguan_bulan_ini"
|
||||||
|
data-type="number"
|
||||||
|
caption="Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_bulan_ini"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="%"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
|
<DxColumn
|
||||||
data-field="total_komplain_bulan_ini" data-type="number" />
|
alignment="center"
|
||||||
|
caption="Total Komplain"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
data-field="total_komplain_bulan_ini"
|
||||||
|
data-type="number"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
|
<DxColumn
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
data-field="delta_penurunan_keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
|
data-type="number"
|
||||||
caption="Informasi" css-class="custom-table-column" />
|
caption="Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="delta_penurunan_gangguan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="delta_penurunan_informasi"
|
||||||
|
data-type="number"
|
||||||
|
caption="Informasi"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
|
<DxColumn
|
||||||
caption="Keluhan" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
|
alignment="center"
|
||||||
caption="Gangguan" css-class="custom-table-column" />
|
data-field="persen_penurunan_keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
|
data-type="number"
|
||||||
caption="Informasi" css-class="custom-table-column" />
|
caption="Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="% Total" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_penurunan_gangguan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_penurunan_informasi"
|
||||||
|
data-type="number"
|
||||||
|
caption="Informasi"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_penurunan_total"
|
||||||
|
data-type="number"
|
||||||
|
caption="% Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -92,7 +257,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -124,7 +298,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`)
|
||||||
})
|
})
|
||||||
@ -135,7 +309,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')
|
||||||
|
|||||||
@ -1,48 +1,124 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Gangguan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="SLA (Menit)" css-class="custom-table-column" />
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_gangguan_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Feb 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_gangguan_sla"
|
||||||
|
data-type="number"
|
||||||
|
caption="SLA (Menit)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="SLA (Jam)" css-class="custom-table-column" />
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_keluhan_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Feb 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_keluhan_sla"
|
||||||
|
data-type="number"
|
||||||
|
caption="SLA (Jam)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="aging_komplain_gangguan"
|
||||||
|
data-type="number"
|
||||||
|
caption="G"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="aging_komplain_keluhan"
|
||||||
|
data-type="number"
|
||||||
|
caption="K"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
|
<DxColumn
|
||||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_rata_aging_komplain"
|
||||||
|
data-type="number"
|
||||||
|
caption="% Rata-Rata Aging Complains"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -53,7 +129,16 @@ 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'
|
||||||
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'
|
||||||
@ -78,7 +163,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`)
|
||||||
})
|
})
|
||||||
@ -89,7 +174,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')
|
||||||
|
|||||||
@ -1,38 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
|
alignment="center"
|
||||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
data-field="ens_terencana"
|
||||||
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Terencana"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="ens_tidak_terencana"
|
||||||
|
data-type="number"
|
||||||
|
caption="Tidak Terencana"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="ens_bencana_alam"
|
||||||
|
data-type="number"
|
||||||
|
caption="Bencana Alam"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kpi_ens"
|
||||||
|
data-type="number"
|
||||||
|
caption="KPI ENS"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -42,7 +98,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -64,7 +129,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`)
|
||||||
})
|
})
|
||||||
@ -75,7 +140,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')
|
||||||
|
|||||||
@ -1,40 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<DxDataGrid
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
:data-source="data"
|
||||||
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 :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:min-width="250"
|
||||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
caption="Kepatuhan dan Akurasi APKT"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
<DxColumn
|
||||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
alignment="center"
|
||||||
data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
|
data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jan 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
<DxColumn
|
||||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
alignment="center"
|
||||||
data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
|
data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jan 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
|
<DxColumn
|
||||||
caption="Komplain Pelanggan %" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_komplain_pelanggan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Komplain Pelanggan %"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -44,7 +104,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -66,7 +135,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`)
|
||||||
})
|
})
|
||||||
@ -77,7 +146,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')
|
||||||
|
|||||||
@ -1,45 +1,120 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="onExporting" :allow-column-resizing="true" 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" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Gangguan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="SLA (Menit)" css-class="custom-table-column" />
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_gangguan_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Feb 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_gangguan_sla"
|
||||||
|
data-type="number"
|
||||||
|
caption="SLA (Menit)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="SLA (Jam)" css-class="custom-table-column" />
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_keluhan_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Feb 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_keluhan_sla"
|
||||||
|
data-type="number"
|
||||||
|
caption="SLA (Jam)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="aging_komplain_gangguan"
|
||||||
|
data-type="number"
|
||||||
|
caption="G"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="aging_komplain_keluhan"
|
||||||
|
data-type="number"
|
||||||
|
caption="K"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
|
<DxColumn
|
||||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_rata_aging_komplain"
|
||||||
|
data-type="number"
|
||||||
|
caption="% Rata-Rata Aging Complains"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -49,7 +124,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -71,7 +155,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`)
|
||||||
})
|
})
|
||||||
@ -82,7 +166,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')
|
||||||
|
|||||||
@ -1,46 +1,121 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="onExporting" :allow-column-resizing="true" 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" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Gangguan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="SLA (Menit)" css-class="custom-table-column" />
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_gangguan_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Feb 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_gangguan_sla"
|
||||||
|
data-type="number"
|
||||||
|
caption="SLA (Menit)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
|
alignment="center"
|
||||||
caption="Feb 2020" css-class="custom-table-column" />
|
caption="Rata-Rata RCT Keluhan"
|
||||||
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
|
css-class="custom-table-column"
|
||||||
caption="SLA (Jam)" css-class="custom-table-column" />
|
>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_keluhan_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Feb 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="rata_rct_keluhan_sla"
|
||||||
|
data-type="number"
|
||||||
|
caption="SLA (Jam)"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="aging_komplain_gangguan"
|
||||||
|
data-type="number"
|
||||||
|
caption="G"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="aging_komplain_keluhan"
|
||||||
|
data-type="number"
|
||||||
|
caption="K"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
|
<DxColumn
|
||||||
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_rata_aging_komplain"
|
||||||
|
data-type="number"
|
||||||
|
caption="% Rata-Rata Aging Complains"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -50,7 +125,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -72,7 +156,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`)
|
||||||
})
|
})
|
||||||
@ -83,7 +167,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')
|
||||||
|
|||||||
@ -1,38 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
:show-column-lines="true"
|
||||||
:word-wrap-enabled="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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
|
||||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
|
alignment="center"
|
||||||
caption="Tidak Terencana" css-class="custom-table-column" />
|
data-field="ens_terencana"
|
||||||
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
|
data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Terencana"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="ens_tidak_terencana"
|
||||||
|
data-type="number"
|
||||||
|
caption="Tidak Terencana"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="ens_bencana_alam"
|
||||||
|
data-type="number"
|
||||||
|
caption="Bencana Alam"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
|
alignment="center"
|
||||||
css-class="custom-table-column" />
|
data-field="total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kpi_ens"
|
||||||
|
data-type="number"
|
||||||
|
caption="KPI ENS"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -42,7 +97,16 @@ import { 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'
|
||||||
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'
|
||||||
@ -65,7 +129,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`)
|
||||||
})
|
})
|
||||||
@ -76,7 +140,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')
|
||||||
@ -117,14 +181,17 @@ const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
|
const { onResult, onError, loading, refetch } = useQuery(
|
||||||
|
kepatuhandanAkurasiDalamPelaporanKumulatif,
|
||||||
|
{
|
||||||
regional: '',
|
regional: '',
|
||||||
posko: '',
|
posko: '',
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0,
|
||||||
bulan: 10,
|
bulan: 10,
|
||||||
tahun: 2023
|
tahun: 2023
|
||||||
})
|
}
|
||||||
|
)
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
const { regional, posko, idUid, idUp3, bulan, tahun } = params
|
||||||
|
|
||||||
|
|||||||
@ -1,38 +1,97 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type2 @update:filters="(value) => filters = value" />
|
<Type2 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="onExporting" :allow-column-resizing="true" 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
|
||||||
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Nama Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
caption="Kepatuhan dan Akurasi APKT"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
>
|
||||||
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
<DxColumn
|
||||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
alignment="center"
|
||||||
data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
|
data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jan 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kepatuhan_akurasi_gangguan_berulang_total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total Gangguan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
<DxColumn
|
||||||
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
alignment="center"
|
||||||
data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
|
data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jan 2020"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="kepatuhan_akurasi_keluhan_berulang_total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total Keluhan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
|
<DxColumn
|
||||||
caption="Komplain Pelanggan %" css-class="custom-table-column" />
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_komplain_pelanggan"
|
||||||
|
data-type="number"
|
||||||
|
caption="Komplain Pelanggan %"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -42,7 +101,16 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -65,7 +133,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`)
|
||||||
})
|
})
|
||||||
@ -76,7 +144,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')
|
||||||
|
|||||||
@ -1,40 +1,139 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type15 @update:filters="(value) => filters = value" />
|
<Type15 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
:show-column-lines="true"
|
||||||
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed=""
|
||||||
|
:column-width="100"
|
||||||
|
@exporting=""
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
:visible="true"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
display-mode="full"
|
||||||
|
:show-page-size-selector="true"
|
||||||
|
:show-info="true"
|
||||||
|
:show-navigation-buttons="true"
|
||||||
|
/>
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
|
:enabled="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
caption="No" />
|
:allow-export-selected-data="false"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="No. Laporan" />
|
/>
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Lapor" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
|
||||||
caption="IDPEL/NO METER" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
|
||||||
caption="Nama Pelapor" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
|
||||||
caption="Alamat Pelapor" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
|
||||||
caption="No Tlp Pelapor" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Status" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UI Dist." />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UP 3" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko/ULP" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Petugas" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
|
||||||
caption="Keterangan DLPD" />
|
|
||||||
|
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="No. Laporan"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Tgl Lapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="IDPEL/NO METER"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Nama Pelapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Alamat Pelapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="No Tlp Pelapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Status"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="UI Dist."
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="UP 3"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Posko/ULP"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Petugas"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Keterangan DLPD"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -42,9 +141,17 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
import { Type15 } from '@/components/Form/FiltersType';
|
DxColumn,
|
||||||
import Filters from '@/components/Form/Filters.vue';
|
DxExport,
|
||||||
|
DxLoadPanel,
|
||||||
|
DxPager,
|
||||||
|
DxPaging,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
|
import { Type15 } from '@/components/Form/FiltersType'
|
||||||
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
@ -53,7 +160,7 @@ const data = ref<any[]>([])
|
|||||||
const dataDetail = ref<any>()
|
const dataDetail = ref<any>()
|
||||||
const showDetail = ref(false)
|
const showDetail = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
const filterData = async (filters: any) => {
|
const filterData = async (filters: any) => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||||||
|
|||||||
@ -1,35 +1,127 @@
|
|||||||
<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 class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
<DxDataGrid
|
||||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
:show-column-lines="true"
|
||||||
:word-wrap-enabled="true" @row-prepared="onRowPrepared">
|
:show-row-lines="false"
|
||||||
|
:show-borders="true"
|
||||||
|
:row-alternation-enabled="true"
|
||||||
|
:hover-state-enabled="true"
|
||||||
|
@selection-changed="onSelectionChanged"
|
||||||
|
:column-width="100"
|
||||||
|
@exporting="onExporting"
|
||||||
|
:allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget"
|
||||||
|
:word-wrap-enabled="true"
|
||||||
|
@row-prepared="onRowPrepared"
|
||||||
|
>
|
||||||
<DxSelection mode="single" />
|
<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="No.Lapor" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tipe Isu" css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
|
data-field=""
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="No.Telp" css-class="custom-table-column" />
|
caption="No.Lapor"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Permasalahan"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Deskripsi" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Buat" css-class="custom-table-column" />
|
:width="170"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Lap.Ulang" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Ket.Lap.Ulang"
|
data-field=""
|
||||||
css-class="custom-table-column" />
|
caption="Tipe Isu"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi" css-class="custom-table-column" />
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Nama"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="No.Telp"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Permasalahan"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Deskripsi"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Tgl Buat"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Lap.Ulang"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Ket.Lap.Ulang"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Status"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Durasi"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -37,7 +129,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { 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'
|
||||||
@ -59,7 +160,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`)
|
||||||
})
|
})
|
||||||
@ -70,7 +171,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,11 +188,11 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onRowPrepared = (e: any) => {
|
const onRowPrepared = (e: any) => {
|
||||||
if (e.rowType === "data") {
|
if (e.rowType === 'data') {
|
||||||
if (e.data.Speed > e.data.SpeedLimit) {
|
if (e.data.Speed > e.data.SpeedLimit) {
|
||||||
// e.cellElement.style.cssText = "color: white; background-color: red";
|
// e.cellElement.style.cssText = "color: white; background-color: red";
|
||||||
// or
|
// or
|
||||||
e.rowElement.classList.add("my-class");
|
e.rowElement.classList.add('my-class')
|
||||||
// To override alternation color
|
// To override alternation color
|
||||||
// e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
|
// e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
|
||||||
}
|
}
|
||||||
@ -143,7 +244,7 @@ const data = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
const filterData = (filters: any) => {
|
const filterData = (filters: any) => {
|
||||||
console.log(filters)
|
console.log(filters)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user