add table template for each page GangguanPage
This commit is contained in:
Dede Fuji Abdul
parent
ea04146a37
commit
b42f2c003a
@ -1,12 +1,14 @@
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: 6px;
|
||||
scrollbar-color: var(--secondary) var(--primary);
|
||||
scrollbar-height: 6px;
|
||||
scrollbar-color: #9ca3af #cddee3;
|
||||
}
|
||||
|
||||
/* Chrome, Edge, and Safari */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
||||
@ -870,6 +870,15 @@ select {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.custom-table-column {
|
||||
vertical-align: middle !important;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(1 36 45 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
@ -995,12 +1004,8 @@ select {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.-m-1 {
|
||||
margin: -0.25rem;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.25rem;
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
@ -1028,10 +1033,6 @@ select {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.\!mt-0 {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.-mr-1 {
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
@ -1068,10 +1069,6 @@ select {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-1\.5 {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@ -1092,10 +1089,6 @@ select {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
@ -1163,6 +1156,10 @@ select {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.table-column {
|
||||
display: table-column;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
@ -1191,14 +1188,6 @@ select {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
@ -1296,22 +1285,10 @@ select {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.w-2 {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
@ -1352,10 +1329,6 @@ select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-px {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
@ -1400,10 +1373,6 @@ select {
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.origin-top-right {
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.-translate-x-full {
|
||||
--tw-translate-x: -100%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@ -1545,10 +1514,6 @@ select {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-x-6 {
|
||||
-moz-column-gap: 1.5rem;
|
||||
column-gap: 1.5rem;
|
||||
@ -1586,12 +1551,6 @@ select {
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||
@ -1685,16 +1644,6 @@ select {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.border-x {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.border-y {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
@ -1707,10 +1656,6 @@ select {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.border-r-2 {
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
@ -1727,11 +1672,6 @@ select {
|
||||
border-color: rgb(0 0 0 / .1);
|
||||
}
|
||||
|
||||
.border-gray-100 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-300 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
||||
@ -1761,11 +1701,6 @@ select {
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||
@ -1836,10 +1771,6 @@ select {
|
||||
background-color: rgb(13 148 136 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-vtd-primary-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(205 222 227 / var(--tw-bg-opacity));
|
||||
@ -1955,21 +1886,6 @@ select {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.\!px-2 {
|
||||
padding-left: 0.5rem !important;
|
||||
padding-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.\!py-0 {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.\!py-1 {
|
||||
padding-top: 0.25rem !important;
|
||||
padding-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.px-0 {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
@ -2015,11 +1931,6 @@ select {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.py-0 {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
@ -2105,10 +2016,6 @@ select {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.pr-6 {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0px;
|
||||
}
|
||||
@ -2147,10 +2054,6 @@ select {
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-\[10px\] {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.text-\[8px\] {
|
||||
font-size: 8px;
|
||||
}
|
||||
@ -2213,11 +2116,6 @@ select {
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
|
||||
.tabular-nums {
|
||||
--tw-numeric-spacing: tabular-nums;
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
|
||||
.leading-5 {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
@ -2246,16 +2144,6 @@ select {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.\!text-dark {
|
||||
--tw-text-opacity: 1 !important;
|
||||
color: rgb(21 22 23 / var(--tw-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.\!text-white {
|
||||
--tw-text-opacity: 1 !important;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.text-aside {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(46 53 54 / var(--tw-text-opacity));
|
||||
@ -2351,11 +2239,6 @@ select {
|
||||
color: rgb(1 36 45 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-primary-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(1 18 23 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-red-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 51 51 / var(--tw-text-opacity));
|
||||
@ -2527,11 +2410,6 @@ select {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.drop-shadow-sm {
|
||||
--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
@ -2638,26 +2516,11 @@ select {
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.placeholder\:text-gray-600::-moz-placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.placeholder\:text-gray-600::placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:border-primary-500:hover {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-gray-50:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||
@ -2703,21 +2566,6 @@ select {
|
||||
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-gray-900:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-primary-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||
@ -2732,11 +2580,6 @@ select {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.focus\:border-gray-100:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(243 244 246 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.focus\:border-vtd-primary-300:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(104 157 170 / var(--tw-border-opacity));
|
||||
@ -3063,10 +2906,6 @@ select {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -3331,18 +3170,6 @@ select {
|
||||
width: 440px;
|
||||
}
|
||||
|
||||
.md\:max-w-\[220px\] {
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.md\:flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.md\:flex-none {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.md\:flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -3399,14 +3226,6 @@ select {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.lg\:mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.lg\:mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.lg\:mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@ -3431,11 +3250,6 @@ select {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.lg\:w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
@ -3444,10 +3258,6 @@ select {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.lg\:justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lg\:border-b-0 {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
@ -3456,11 +3266,6 @@ select {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.lg\:px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.lg\:px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
|
||||
@ -35,4 +35,7 @@
|
||||
.aside-single-item-icon-inactive{
|
||||
@apply aside-single-item-icon text-aside group-hover:stroke-white;
|
||||
}
|
||||
.custom-table-column {
|
||||
@apply !align-middle text-sm font-medium text-primary-800;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
@ -16,10 +16,20 @@ import {
|
||||
GangguanTable5,
|
||||
GangguanTable6,
|
||||
GangguanTable7,
|
||||
GangguanTable8,
|
||||
GangguanTable9,
|
||||
GangguanTable10,
|
||||
GangguanTable11,
|
||||
GangguanTable12,
|
||||
GangguanTable13,
|
||||
GangguanTable14,
|
||||
GangguanTable15,
|
||||
GangguanTable16,
|
||||
GangguanTable17,
|
||||
GangguanTable18,
|
||||
GangguanTable19,
|
||||
GangguanTable20,
|
||||
} from '@/components/Pages/Gangguan'
|
||||
import {
|
||||
GangguanRekap1,
|
||||
} from '@/components/Pages/Gangguan/Rekapitulasi'
|
||||
|
||||
export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
@ -85,67 +95,67 @@ export const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '1',
|
||||
name: 'Rekapitulasi Gangguan All',
|
||||
component: GangguanRekap1,
|
||||
component: GangguanTable8,
|
||||
},
|
||||
{
|
||||
path: '2',
|
||||
name: 'Rekapitulasi Gangguan/Jenis Gangguan',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable9,
|
||||
},
|
||||
{
|
||||
path: '3',
|
||||
name: 'Rekapitulasi Gangguan/Jenis Gangguan SE 004',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable10,
|
||||
},
|
||||
{
|
||||
path: '4',
|
||||
name: 'Rekapitulasi Gangguan Per Posko',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable11,
|
||||
},
|
||||
{
|
||||
path: '5',
|
||||
name: 'Rekapitulasi Gangguan Per Regu',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable12,
|
||||
},
|
||||
{
|
||||
path: '6',
|
||||
name: 'Rekapitulasi Gangguan Per Tanggal',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable13,
|
||||
},
|
||||
{
|
||||
path: '7',
|
||||
name: 'Rekapitulasi Gangguan Berdasarkan Media',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable14,
|
||||
},
|
||||
{
|
||||
path: '8',
|
||||
name: 'Rekapitulasi Gangguan Alih Posko',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable15,
|
||||
},
|
||||
{
|
||||
path: '9',
|
||||
name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable16,
|
||||
},
|
||||
{
|
||||
path: '10',
|
||||
name: 'Rekapitulasi Rating Per Posko',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable17,
|
||||
},
|
||||
{
|
||||
path: '11',
|
||||
name: 'Rekapitulasi Rating Per Regu',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable18,
|
||||
},
|
||||
{
|
||||
path: '12',
|
||||
name: 'Rekapitulasi Koreksi Transaksi Individual',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable19,
|
||||
},
|
||||
{
|
||||
path: '13',
|
||||
name: 'Rekapitulasi Cleansing Transaksi TM',
|
||||
component: EmptyPage,
|
||||
component: GangguanTable20,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user