add table template for each page GangguanPage
This commit is contained in:
Dede Fuji Abdul
@ -1 +0,0 @@
|
||||
export { default as GangguanRekap1 } from './Rekap_1.vue'
|
||||
@ -11,27 +11,44 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<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="no_laporan" caption="No Laporan"
|
||||
cell-template="no-laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="40" alignment="center" data-field="number" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||
caption="No Laporan" cell-template="no-laporan" />
|
||||
|
||||
<DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tanggal_dialihkan" caption="Tgl Dialihkan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="posko_awal" caption="Posko Awal" />
|
||||
<DxColumn :width="170" alignment="center" data-field="posko_tujuan" caption="Posko Tujuan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
|
||||
caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
|
||||
caption="Tgl Dialihkan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon"
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal"
|
||||
caption="Posko Awal" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
|
||||
caption="Posko Tujuan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status"
|
||||
caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan"
|
||||
caption="IDPEL/NO METER" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||
caption="Nama Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_laporan"
|
||||
caption="Sumber Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
|
||||
<template #no-laporan="{ data }">
|
||||
<span class="cursor-pointer" @click="showData(data.text)">
|
||||
{{ data.text }}
|
||||
|
||||
118
src/components/Pages/Gangguan/Table_10.vue
Normal file
118
src/components/Pages/Gangguan/Table_10.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
116
src/components/Pages/Gangguan/Table_11.vue
Normal file
116
src/components/Pages/Gangguan/Table_11.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
117
src/components/Pages/Gangguan/Table_12.vue
Normal file
117
src/components/Pages/Gangguan/Table_12.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" 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 :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
117
src/components/Pages/Gangguan/Table_13.vue
Normal file
117
src/components/Pages/Gangguan/Table_13.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
77
src/components/Pages/Gangguan/Table_14.vue
Normal file
77
src/components/Pages/Gangguan/Table_14.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
67
src/components/Pages/Gangguan/Table_15.vue
Normal file
67
src/components/Pages/Gangguan/Table_15.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" caption="Posko OUT" css-class="custom-table-column" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
183
src/components/Pages/Gangguan/Table_16.vue
Normal file
183
src/components/Pages/Gangguan/Table_16.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="b" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="c" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="d=(e+g)" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="e" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="f=(e/d)*100" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="g" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="h=(g/d)*100" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Mobile" 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="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="i" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="j=(i/d)*100"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="k" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="l" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Marking" 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 :width="150" alignment="center" caption="m" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="n=(m/d)*100"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="o" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="p" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Non Mobile" 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="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="q" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="r=(q/d)*100"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="s" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="t" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Marking" 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 :width="150" alignment="center" caption="u" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="v=(u/d)*100"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="w" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="x" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
145
src/components/Pages/Gangguan/Table_17.vue
Normal file
145
src/components/Pages/Gangguan/Table_17.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" 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 :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 :width="150" alignment="center" 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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" 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="Rating" 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"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" 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 alignment="center" caption="Non Rating" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" 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>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import type { Rekap1 } from '@/types/gangguan'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const data = ref<Rekap1[]>([])
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const createDummy = () => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.value.push({
|
||||
id: i,
|
||||
nama_unit: '-',
|
||||
total: 0,
|
||||
selesai: '-',
|
||||
in_progress: 0,
|
||||
avg: 0,
|
||||
max: 0,
|
||||
min: 0,
|
||||
dt_avg: 0,
|
||||
dt_max: 0,
|
||||
dt_min: 0,
|
||||
dt_more_sla: 0,
|
||||
dt_less_sla: 0,
|
||||
rt_avg: 0,
|
||||
rt_max: 0,
|
||||
rt_min: 0,
|
||||
rt_more_sla: 0,
|
||||
rt_less_sla: 0,
|
||||
ret_avg: 0,
|
||||
ret_max: 0,
|
||||
ret_min: 0,
|
||||
ret_more_sla: 0,
|
||||
ret_less_sla: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createDummy()
|
||||
})
|
||||
|
||||
</script>
|
||||
109
src/components/Pages/Gangguan/Table_18.vue
Normal file
109
src/components/Pages/Gangguan/Table_18.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" 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 :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 :width="150" alignment="center" 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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" 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="Rating" 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"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" 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 alignment="center" caption="Non Rating" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" 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>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
90
src/components/Pages/Gangguan/Table_19.vue
Normal file
90
src/components/Pages/Gangguan/Table_19.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -10,26 +10,36 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
|
||||
<DxColumn alignment="center" data-field="" caption="Jml Lapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
<DxColumn css-class="custom-table-column" :width="40" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" alignment="center" data-field="" caption="Jml Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="IDPEL/NO METER" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" 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="150" alignment="center" data-field=""
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Sumber Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
|
||||
90
src/components/Pages/Gangguan/Table_20.vue
Normal file
90
src/components/Pages/Gangguan/Table_20.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
@ -10,25 +10,35 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
<DxColumn css-class="custom-table-column" :width="40" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Referensi Marking" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="IDPEL/NO METER" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" 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="150" alignment="center" data-field=""
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
|
||||
@ -10,26 +10,37 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
<DxColumn css-class="custom-table-column" :width="40" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Referensi Marking" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="IDPEL/NO METER" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" 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="150" alignment="center" data-field=""
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Sumber Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
|
||||
@ -10,25 +10,35 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
<DxColumn css-class="custom-table-column" :width="40" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="IDPEL/NO METER" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" 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="150" alignment="center" data-field=""
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Sumber Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
|
||||
@ -10,24 +10,33 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media" />
|
||||
<DxColumn css-class="custom-table-column" :width="40" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" 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="150" alignment="center" data-field=""
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Media" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Keterangan Media" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
|
||||
@ -10,25 +10,35 @@
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" data-type="number" caption="No" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Response" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Recovery" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
<DxColumn css-class="custom-table-column" :width="40" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Response" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Tgl Recovery" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Response Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Durasi Recovery Time" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="IDPEL/NO METER" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" 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="150" alignment="center" data-field=""
|
||||
caption="No Telp Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Keterangan Pelapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
caption="Sumber Lapor" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
@ -12,51 +11,52 @@
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
:allow-resizing="false" />
|
||||
<DxColumn alignment="center" caption="Dispatching Time">
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time">
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time">
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
:allow-resizing="false" />
|
||||
:allow-resizing="false" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
117
src/components/Pages/Gangguan/Table_9.vue
Normal file
117
src/components/Pages/Gangguan/Table_9.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="40" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Jenis Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
|
||||
exportToPdf({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save(`.pdf`)
|
||||
})
|
||||
} else {
|
||||
const workbook = new Workbook()
|
||||
const worksheet = workbook.addWorksheet('Employees')
|
||||
|
||||
exportToExcel({
|
||||
component: e.component,
|
||||
worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||
})
|
||||
})
|
||||
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -4,4 +4,17 @@ export { default as GangguanTable3 } from './Table_3.vue'
|
||||
export { default as GangguanTable4 } from './Table_4.vue'
|
||||
export { default as GangguanTable5 } from './Table_5.vue'
|
||||
export { default as GangguanTable6 } from './Table_6.vue'
|
||||
export { default as GangguanTable7 } from './Table_7.vue'
|
||||
export { default as GangguanTable7 } from './Table_7.vue'
|
||||
export { default as GangguanTable8 } from './Table_8.vue'
|
||||
export { default as GangguanTable9 } from './Table_9.vue'
|
||||
export { default as GangguanTable10 } from './Table_10.vue'
|
||||
export { default as GangguanTable11 } from './Table_11.vue'
|
||||
export { default as GangguanTable12 } from './Table_12.vue'
|
||||
export { default as GangguanTable13 } from './Table_13.vue'
|
||||
export { default as GangguanTable14 } from './Table_14.vue'
|
||||
export { default as GangguanTable15 } from './Table_15.vue'
|
||||
export { default as GangguanTable16 } from './Table_16.vue'
|
||||
export { default as GangguanTable17 } from './Table_17.vue'
|
||||
export { default as GangguanTable18 } from './Table_18.vue'
|
||||
export { default as GangguanTable19 } from './Table_19.vue'
|
||||
export { default as GangguanTable20 } from './Table_20.vue'
|
||||
Reference in New Issue
Block a user