This commit is contained in:
Dede Fuji Abdul 2023-10-26 09:47:23 +07:00
parent fcd3d2f91a
commit be26419c29
3 changed files with 72 additions and 48 deletions

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import type { MenuItemModel } from '@/utils/interfaces' import type { MenuItemModel } from '@/types/menu'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue' import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
import { useMenuStore } from '@/stores/menu' import { useMenuStore } from '@/stores/menu'
import { DotOutline } from '@/utils/icons' import { DotOutline } from '@/utils/icons'

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"> @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
@ -10,26 +10,33 @@
<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" />
<DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" /> <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" />
<DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" /> <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" />
<DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
<DxColumn :width="150" alignment="center" data-field="tanggal_dialihkan" caption="Tgl Dialihkan" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress" />
<DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
<DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" /> <DxColumn alignment="center" caption="Dispatching Time">
<DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
<DxColumn :width="170" alignment="center" data-field="posko_awal" caption="Posko Awal" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
<DxColumn :width="170" alignment="center" data-field="posko_tujuan" caption="Posko Tujuan" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
<DxColumn :width="150" alignment="center" data-field="status" caption="Status" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
<DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" /> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" /> <DxColumn alignment="center" caption="Response Time">
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
<DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
<DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
<DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" /> <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
</DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -41,11 +48,11 @@ 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'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import type { Data1 } from '@/types/gangguan' import type { Rekap1 } from '@/types/gangguan'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
const data = ref<Data1[]>([]) const data = ref<Rekap1[]>([])
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -79,25 +86,29 @@ const onExporting = (e: any) => {
const createDummy = () => { const createDummy = () => {
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
data.value.push({ data.value.push({
number: i + 1, id: i,
no_laporan: 'G5223091' + (900002 + i), nama_unit: '-',
pembuat_laporan: 'agentjateng', total: 0,
tanggal_laporan: '19/09/2023 12:26:42', selesai: '-',
tanggal_dialihkan: '19/09/2023 12:33:46', in_progress: 0,
tanggal_respon: '19/09/2023 13:14:15', avg: 0,
tanggal_recovery: '19/09/2023 13:14:15', max: 0,
durasi_respon: '0-0:47:32', min: 0,
durasi_recovery: '0-0:49:35', dt_avg: 0,
posko_awal: 'POSKO ULP UNGARAN.', dt_max: 0,
posko_tujuan: 'POSKO ULP UNGARAN.', dt_min: 0,
status: 'Selesai', dt_more_sla: 0,
id_pelanggan: '-', dt_less_sla: 0,
nama_pelapor: 'Moegy', rt_avg: 0,
alamat_pelapor: '-', rt_max: 0,
no_telp_pelapor: '085136661313', rt_min: 0,
keterangan_pelapor: '-', rt_more_sla: 0,
sumber_laporan: 'Contact Center', rt_less_sla: 0,
posko: 'POSKO ULP UNGGARAN' ret_avg: 0,
ret_max: 0,
ret_min: 0,
ret_more_sla: 0,
ret_less_sla: 0,
}); });
} }
} }

View File

@ -62,17 +62,30 @@ interface Rekap1 {
nama_unit: string; nama_unit: string;
total: number; total: number;
selesai: string; selesai: string;
progress_1: number;
in_progress: number; in_progress: number;
progress_2: number;
avg: number; avg: number;
max: number; max: number;
min: number; min: number;
dt_avg: number;
dt_max: number;
dt_min: number;
dt_more_sla: number;
dt_less_sla: number;
rt_avg: number;
rt_max: number;
rt_min: number;
rt_more_sla: number;
rt_less_sla: number;
ret_avg: number;
ret_max: number;
ret_min: number;
ret_more_sla: number;
ret_less_sla: number;
} }
export type { export type {
Data1, Data1,
Data2, Data2,
Data3 Data3,
Rekap1
} }