Merge branch 'development' of https://github.com/defuj/eis
This commit is contained in:
Dede Fuji Abdul
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "eis",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "eis",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@headlessui/vue": "^1.7.16",
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
@import './base.css';
|
||||
/* @import 'devextreme/dist/css/dx.material.blue.light.css'; */
|
||||
@import 'devextreme/dist/css/dx.material.blue.light.compact.css';
|
||||
/* @import 'devextreme/dist/css/dx.light.css'; */
|
||||
/* @import 'devextreme/dist/css/dx.light.compact.css'; */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700&display=swap');
|
||||
@import './style.css';
|
||||
@ -705,40 +705,6 @@ select {
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
/* NavBar */
|
||||
|
||||
.menu-item {
|
||||
@ -870,6 +836,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,14 +970,6 @@ select {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
|
||||
.-m-1 {
|
||||
margin: -0.25rem;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
@ -1028,10 +995,6 @@ select {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.\!mt-0 {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.-mr-1 {
|
||||
margin-right: -0.25rem;
|
||||
}
|
||||
@ -1068,10 +1031,6 @@ select {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-1\.5 {
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@ -1092,10 +1051,6 @@ select {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
@ -1191,14 +1146,6 @@ select {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
@ -1296,22 +1243,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 +1287,6 @@ select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-px {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
@ -1400,10 +1331,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));
|
||||
@ -1489,6 +1416,14 @@ select {
|
||||
scroll-padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.auto-cols-auto {
|
||||
grid-auto-columns: auto;
|
||||
}
|
||||
|
||||
.grid-flow-col {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@ -1545,8 +1480,19 @@ select {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
.gap-x-1 {
|
||||
-moz-column-gap: 0.25rem;
|
||||
column-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-x-1\.5 {
|
||||
-moz-column-gap: 0.375rem;
|
||||
column-gap: 0.375rem;
|
||||
}
|
||||
|
||||
.gap-x-2 {
|
||||
-moz-column-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-6 {
|
||||
@ -1562,6 +1508,10 @@ select {
|
||||
row-gap: 0.125rem;
|
||||
}
|
||||
|
||||
.gap-y-1 {
|
||||
row-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
|
||||
@ -1685,16 +1635,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 +1647,6 @@ select {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.border-r-2 {
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
@ -1727,16 +1663,16 @@ 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));
|
||||
}
|
||||
|
||||
.border-gray-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(75 85 99 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-primary-500 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||
@ -1761,11 +1697,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 +1767,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));
|
||||
@ -1951,25 +1878,6 @@ select {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
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;
|
||||
@ -2081,6 +1989,10 @@ select {
|
||||
padding-left: 2.75rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
@ -2105,8 +2017,8 @@ select {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.pr-6 {
|
||||
padding-right: 1.5rem;
|
||||
.pr-7 {
|
||||
padding-right: 1.75rem;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
@ -2147,10 +2059,6 @@ select {
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-\[10px\] {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.text-\[8px\] {
|
||||
font-size: 8px;
|
||||
}
|
||||
@ -2213,11 +2121,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 +2149,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 +2244,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 +2415,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 +2521,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 +2571,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 +2585,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));
|
||||
@ -2925,6 +2773,11 @@ select {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.peer:checked ~ .peer-checked\:text-primary-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
@ -3063,10 +2916,6 @@ select {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -3164,12 +3013,30 @@ select {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0px * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 1;
|
||||
}
|
||||
@ -3331,18 +3198,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;
|
||||
}
|
||||
@ -3379,6 +3234,11 @@ select {
|
||||
padding-left: 20rem;
|
||||
}
|
||||
|
||||
.md\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.md\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
@ -3399,14 +3259,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 +3283,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 +3291,6 @@ select {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.lg\:justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lg\:border-b-0 {
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
@ -3456,11 +3299,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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -146,7 +146,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
|
||||
import {
|
||||
Combobox,
|
||||
@ -163,7 +163,7 @@ import { useCommandPalattesStore } from '@/stores/command'
|
||||
import { navigationIcon } from '@/utils/route'
|
||||
|
||||
const command = useCommandPalattesStore()
|
||||
const recent = computed(() => query.value === '' ? command.readRecent() : [])
|
||||
const recent = computed(() => command.open ? command.readRecent() : [])
|
||||
const query = ref('')
|
||||
const filteredMenus = computed(() =>
|
||||
query.value === ''
|
||||
|
||||
@ -10,12 +10,27 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vue-tailwind-datepicker
|
||||
input-classes="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
v-model="dateValue"
|
||||
:formatter="formatter"
|
||||
separator=" s/d "
|
||||
:shortcuts="false"
|
||||
:auto-apply="false"
|
||||
/>
|
||||
<div class="flex">
|
||||
<vue-tailwind-datepicker
|
||||
v-model="dateValue"
|
||||
:formatter="formatter"
|
||||
separator=" s/d "
|
||||
:shortcuts="false"
|
||||
:auto-apply="false"
|
||||
v-slot="{ value, placeholder }"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
>
|
||||
<span class="text-gray-900">
|
||||
{{ value || placeholder }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</vue-tailwind-datepicker>
|
||||
</div>
|
||||
</template>
|
||||
@ -5,13 +5,13 @@
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
44
src/components/Form/FiltersType/Type10.vue
Normal file
44
src/components/Form/FiltersType/Type10.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="1" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
48
src/components/Form/FiltersType/Type11.vue
Normal file
48
src/components/Form/FiltersType/Type11.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="1" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
49
src/components/Form/FiltersType/Type12.vue
Normal file
49
src/components/Form/FiltersType/Type12.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<InputWithSuffix />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
41
src/components/Form/FiltersType/Type13.vue
Normal file
41
src/components/Form/FiltersType/Type13.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
|
||||
|
||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
|
||||
</div>
|
||||
</template>
|
||||
34
src/components/Form/FiltersType/Type14.vue
Normal file
34
src/components/Form/FiltersType/Type14.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Area:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Area" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Posko:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
25
src/components/Form/FiltersType/Type15.vue
Normal file
25
src/components/Form/FiltersType/Type15.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import InputWithFilter from '../InputWithFilter.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Pengaduan:</label>
|
||||
|
||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Gangguan', checked: true}, {id: 2, title: 'Keluhan'}]" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Cari Report Number:</label>
|
||||
|
||||
<InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Nama Pelapor'}]" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
38
src/components/Form/FiltersType/Type16.vue
Normal file
38
src/components/Form/FiltersType/Type16.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
|
||||
|
||||
<Select placeholder="Semua Media" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
46
src/components/Form/FiltersType/Type17.vue
Normal file
46
src/components/Form/FiltersType/Type17.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithFilter from '../InputWithFilter.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit PLN:</label>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Pilih Unit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="Pilih Area" />
|
||||
<Select placeholder="Pilih Rayon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Status:</label>
|
||||
|
||||
<Select placeholder="Pilih Status"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>SLA:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Pilih Durasi SLA" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Cari Report Number:</label>
|
||||
|
||||
<InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,38 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
|
||||
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<select
|
||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
||||
<option value="">Semua Unit Induk Distribusi/Wilayah</option>
|
||||
</select>
|
||||
</div>
|
||||
<Select placeholder="Semua Regional"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<select
|
||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
||||
<option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
|
||||
</select>
|
||||
</div>
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<select
|
||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
|
||||
<option value="">Semua Unit Layanan Pelanggan</option>
|
||||
</select>
|
||||
</div>
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-2">
|
||||
<Select placeholder="Juli" />
|
||||
<Select placeholder="2023" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
34
src/components/Form/FiltersType/Type3.vue
Normal file
34
src/components/Form/FiltersType/Type3.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
42
src/components/Form/FiltersType/Type4.vue
Normal file
42
src/components/Form/FiltersType/Type4.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Jenis Laporan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Laporan Berulang Unit" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
32
src/components/Form/FiltersType/Type5.vue
Normal file
32
src/components/Form/FiltersType/Type5.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
42
src/components/Form/FiltersType/Type6.vue
Normal file
42
src/components/Form/FiltersType/Type6.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="1" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
47
src/components/Form/FiltersType/Type7.vue
Normal file
47
src/components/Form/FiltersType/Type7.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<InputWithSuffix />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
26
src/components/Form/FiltersType/Type8.vue
Normal file
26
src/components/Form/FiltersType/Type8.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template>
|
||||
39
src/components/Form/FiltersType/Type9.vue
Normal file
39
src/components/Form/FiltersType/Type9.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
|
||||
|
||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
|
||||
</div>
|
||||
</template>
|
||||
32
src/components/Form/InlineRadioGroup.vue
Normal file
32
src/components/Form/InlineRadioGroup.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<fieldset>
|
||||
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
|
||||
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
|
||||
<input :id="`${item.id}`" type="radio" name="radio"
|
||||
:checked="item.hasOwnProperty('checked') && item.checked === true"
|
||||
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
|
||||
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
|
||||
item.title }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type PropType } from 'vue'
|
||||
|
||||
interface Item {
|
||||
id: number;
|
||||
title: string;
|
||||
checked?: boolean;
|
||||
}
|
||||
|
||||
defineProps({
|
||||
radioItems: {
|
||||
type: Array as PropType<Item[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
54
src/components/Form/InputWithFilter.vue
Normal file
54
src/components/Form/InputWithFilter.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { PhMagnifyingGlass } from '@phosphor-icons/vue';
|
||||
import { type PropType } from 'vue'
|
||||
|
||||
interface FilterItems {
|
||||
id: number;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filters: {
|
||||
type: Array as PropType<FilterItems[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-hidden rounded-lg">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
|
||||
</div>
|
||||
<input
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
type="text"
|
||||
class="w-full px-4 py-2 pl-10 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
/>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center">
|
||||
<label for="filters" class="sr-only">filters</label>
|
||||
<span class="block border border-gray-600 h-5"></span>
|
||||
<select
|
||||
id="filters"
|
||||
name="filters"
|
||||
class="h-full bg-gray-200 text-sm rounded-lg border-transparent py-0 pl-2 pr-7 text-gray-900 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
>
|
||||
<option :key="filter.id" :value="filter.id" v-for="filter in filters">{{ filter.title }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
34
src/components/Form/InputWithSuffix.vue
Normal file
34
src/components/Form/InputWithSuffix.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9.]*"
|
||||
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
onblur="this.value = this.value ? this.value + ' Menit' : ''"
|
||||
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch } from 'vue'
|
||||
import { useRoute, RouterLink, useRouter } from 'vue-router'
|
||||
import { useRoute, RouterLink } from 'vue-router'
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
@ -12,12 +12,9 @@ import { useMenuStore } from '@/stores/menu'
|
||||
import { IconApp, IconBars3 } from '@/utils/icons'
|
||||
import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
|
||||
import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
|
||||
import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
|
||||
import { splitRoutePath } from '@/utils/texts'
|
||||
|
||||
const menu = useMenuStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
watch(route, (to, _) => {
|
||||
menu.menuSelected = to.fullPath
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import type { MenuItemModel } from '@/types/menu'
|
||||
import { IconDotOutline } from '@/utils/icons';
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
item: {
|
||||
type: Object as () => MenuItemModel,
|
||||
required: true
|
||||
@ -29,7 +29,7 @@ const props = defineProps({
|
||||
<component :is="item.icon"
|
||||
:class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']"
|
||||
aria-hidden="true" />
|
||||
{{ item.name.split(' | ')[0] }}
|
||||
{{ item.name }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
@ -10,9 +10,6 @@ import {
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
} from '@headlessui/vue'
|
||||
import {
|
||||
Bars3BottomLeftIcon
|
||||
} from '@heroicons/vue/24/outline'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
|
||||
import PictureInitial from '@/components/PictureInitial.vue'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
|
||||
146
src/components/Pages/Anomali/Table_61.vue
Normal file
146
src/components/Pages/Anomali/Table_61.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan Total
|
||||
</h1>
|
||||
</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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="f" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="g" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
|
||||
<AnomaliTable2 />
|
||||
</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'
|
||||
import { AnomaliTable2 } from '.'
|
||||
|
||||
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>
|
||||
79
src/components/Pages/Anomali/Table_62.vue
Normal file
79
src/components/Pages/Anomali/Table_62.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan PLN Mobile
|
||||
</h1>
|
||||
</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 alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { 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>
|
||||
114
src/components/Pages/Anomali/Table_63.vue
Normal file
114
src/components/Pages/Anomali/Table_63.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan Total
|
||||
</h1>
|
||||
</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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
|
||||
<AnomaliTable4 />
|
||||
</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'
|
||||
import { AnomaliTable4 } from '.'
|
||||
|
||||
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>
|
||||
103
src/components/Pages/Anomali/Table_64.vue
Normal file
103
src/components/Pages/Anomali/Table_64.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan PLN Mobile
|
||||
</h1>
|
||||
</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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { 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>
|
||||
122
src/components/Pages/Anomali/Table_65.vue
Normal file
122
src/components/Pages/Anomali/Table_65.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan Total
|
||||
</h1>
|
||||
</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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h=f+g"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="i=f/e"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="j=g/e"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="k=i+j"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
|
||||
<AnomaliTable6 />
|
||||
</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'
|
||||
import { AnomaliTable6 } from '.'
|
||||
|
||||
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>
|
||||
79
src/components/Pages/Anomali/Table_66.vue
Normal file
79
src/components/Pages/Anomali/Table_66.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan PLN Mobile
|
||||
</h1>
|
||||
</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 alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { 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>
|
||||
6
src/components/Pages/Anomali/index.ts
Normal file
6
src/components/Pages/Anomali/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export { default as AnomaliTable1 } from '@/components/Pages/Anomali/Table_61.vue'
|
||||
export { default as AnomaliTable2 } from '@/components/Pages/Anomali/Table_62.vue'
|
||||
export { default as AnomaliTable3 } from '@/components/Pages/Anomali/Table_63.vue'
|
||||
export { default as AnomaliTable4 } from '@/components/Pages/Anomali/Table_64.vue'
|
||||
export { default as AnomaliTable5 } from '@/components/Pages/Anomali/Table_65.vue'
|
||||
export { default as AnomaliTable6 } from '@/components/Pages/Anomali/Table_66.vue'
|
||||
78
src/components/Pages/Cico/Table_60.vue
Normal file
78
src/components/Pages/Cico/Table_60.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<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="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
||||
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
||||
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
||||
caption="Rata-rata Duarasi WO Penugasan" 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>
|
||||
1
src/components/Pages/Cico/index.ts
Normal file
1
src/components/Pages/Cico/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as CicoTable1 } from '@/components/Pages/Cico/Table_60.vue'
|
||||
100
src/components/Pages/Ctt/Table_67.vue
Normal file
100
src/components/Pages/Ctt/Table_67.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
|
||||
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>
|
||||
1
src/components/Pages/Ctt/index.ts
Normal file
1
src/components/Pages/Ctt/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as CttTable1 } from '@/components/Pages/Ctt/Table_67.vue'
|
||||
@ -1,299 +0,0 @@
|
||||
<template>
|
||||
<div class="mx-auto max-w-7xl dx-viewport">
|
||||
<div class="flex flex-col p-4 bg-white rounded-lg drop-shadow-sm min-h-96">
|
||||
<nav class="flex flex-wrap gap-4 mb-4" aria-label="Tabs">
|
||||
<a v-for="(tab, index) in tabs" :key="tab.name" @click="changeTab(index)"
|
||||
:class="[tabChecked === index ? 'bg-primary-100 text-primary-900' : 'text-gray-500 hover:text-gray-700', 'cursor-pointer px-3 py-2 font-medium text-sm rounded-md']"
|
||||
:aria-current="tabChecked === index ? 'page' : undefined">{{ tab.name }}</a>
|
||||
</nav>
|
||||
|
||||
<!-- Filters -->
|
||||
<section aria-labelledby="filter-heading">
|
||||
<h2 id="filter-heading" class="sr-only">Filters</h2>
|
||||
|
||||
<div class="pb-4 bg-white">
|
||||
<div class="flex flex-wrap items-center px-0 mx-auto lg:justify-between max-w-7xl">
|
||||
<Menu as="div"
|
||||
class="relative flex-1 inline-block w-full mb-2 mr-2 text-left lg-2 lg:mb-0 md:flex-none lg:w-fit">
|
||||
<MenuButton
|
||||
class="flex inline-flex items-center justify-between w-full px-2 py-2 text-xs font-medium text-gray-700 border border-gray-100 rounded-md whitespace-nowrap group hover:text-gray-900">
|
||||
Cari dengan : <b>{{ searchOptions.find(option => option.current === true)?.name }}</b>
|
||||
<ChevronDownIcon
|
||||
class="flex-shrink-0 w-3 h-3 ml-1 -mr-1 text-gray-400 group-hover:text-gray-500"
|
||||
aria-hidden="true" />
|
||||
</MenuButton>
|
||||
|
||||
<transition enter-active-class="transition duration-100 ease-out"
|
||||
enter-from-class="transform scale-95 opacity-0"
|
||||
enter-to-class="transform scale-100 opacity-100"
|
||||
leave-active-class="transition duration-75 ease-in"
|
||||
leave-from-class="transform scale-100 opacity-100"
|
||||
leave-to-class="transform scale-95 opacity-0">
|
||||
<MenuItems
|
||||
class="absolute left-0 z-10 w-40 mt-2 origin-top-left bg-white rounded-md shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div class="py-1">
|
||||
<MenuItem v-for="(option, index) in searchOptions" :key="option.name"
|
||||
v-slot="{ active }">
|
||||
<a @click="handleChangeSearchOption(index)"
|
||||
:class="[option.current ? 'font-medium text-gray-900' : 'text-gray-500', active ? 'bg-gray-100' : '', 'block px-4 py-2 text-xs']">{{
|
||||
option.name }}</a>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</transition>
|
||||
</Menu>
|
||||
|
||||
<PopoverGroup class="items-center flex-1 mb-2 sm:mr-2 lg:mb-0 md:flex-none lg:w-fit">
|
||||
<Popover class="relative inline-block w-full px-2 text-left">
|
||||
<PopoverButton
|
||||
class="flex inline-flex items-center justify-between w-full px-2 py-2 text-xs text-gray-700 border border-gray-100 rounded-md whitespace-nowrap group">
|
||||
<span class="flex-1 text-left">Order by</span>
|
||||
<span v-if="orderByOptions.filter(option => option.checked).length > 0"
|
||||
class="ml-1.5 rounded bg-gray-100 py-0.2 px-1.5 text-[10px] flex-none font-bold tabular-nums text-gray-500">
|
||||
{{ orderByOptions.filter(option => option.checked).length }}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
class="flex-none flex-shrink-0 w-3 h-3 ml-1 -mr-1 text-gray-400 group-hover:text-gray-500"
|
||||
aria-hidden="true" />
|
||||
</PopoverButton>
|
||||
|
||||
<transition enter-active-class="transition duration-100 ease-out"
|
||||
enter-from-class="transform scale-95 opacity-0"
|
||||
enter-to-class="transform scale-100 opacity-100"
|
||||
leave-active-class="transition duration-75 ease-in"
|
||||
leave-from-class="transform scale-100 opacity-100"
|
||||
leave-to-class="transform scale-95 opacity-0">
|
||||
<PopoverPanel
|
||||
class="absolute right-0 z-10 p-4 mt-2 origin-top-right bg-white rounded-md shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<form class="space-y-4">
|
||||
<div v-for="(option, optionIdx) in orderByOptions" :key="option.value"
|
||||
class="flex items-center">
|
||||
<input :value="option.value" type="checkbox" :checked="option.checked"
|
||||
@change="handleChangeOrderBy(optionIdx, !option.checked)"
|
||||
class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500" />
|
||||
<label
|
||||
class="pr-6 ml-3 text-sm font-medium text-gray-900 whitespace-nowrap">
|
||||
{{ option.label }}
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</PopoverPanel>
|
||||
</transition>
|
||||
</Popover>
|
||||
</PopoverGroup>
|
||||
|
||||
<div class="relative inline-block mb-2 mr-2 text-left lg:mb-0 grow xs:mt-0 md:flex-1">
|
||||
<div class="w-full md:max-w-[220px]">
|
||||
<vue-tailwind-datepicker v-model="dateValue" i18n="id" :options="datePickerOptions"
|
||||
:formatter="formatter" placeholder="Filter Tanggal" :auto-apply="false"
|
||||
input-classes="bg-white text-gray-900 border rounded-md border-gray-100 text-xs px-2 py-2 focus:ring-0 focus:border-gray-100"
|
||||
:disabled="false" as-single use-range separator=" s/d " />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmitSearch"
|
||||
class="flex lg:mt-0 items-center w-full !py-1 border-0 border-gray-100 rounded-lg bg-gray-50 flex-between lg:w-fit">
|
||||
<!-- <ButtonDropdown button-style="bg-primary-50" text-style="text-xs" :data="searchBy"
|
||||
:checked="searchByChecked" @update:checked="handleSearchByChange" />
|
||||
|
||||
<div class="h-5 mx-2 border-r-2 border-gray-100"></div>
|
||||
|
||||
<ButtonPrimary label="Order By"
|
||||
class-name="bg-primary-50 mt-0 py-2 text-xs !px-2 !text-dark font-normal rounded-md mr-4" /> -->
|
||||
|
||||
<InputText class-name="flex-1 bg-transparent text-xs !py-0 px-2 placeholder:text-gray-600"
|
||||
placeholder="Masukan Pencarian" />
|
||||
|
||||
<ButtonPrimary type="submit"
|
||||
class-name="mr-1 flex flex-row bg-primary-500 !mt-0 text-xs !px-2 !text-white font-normal rounded-md">
|
||||
<MagnifyingGlassIcon class="w-4 h-4 lg:mr-2" aria-hidden="true" />
|
||||
<span class="hidden lg:block">Cari</span>
|
||||
</ButtonPrimary>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active filters -->
|
||||
<div class="border-gray-100 bg-gray-50 border-x border-y"
|
||||
v-if="orderByOptions.filter((e) => e.checked).length > 0">
|
||||
<div class="px-2 py-3 mx-auto max-w-7xl sm:flex sm:items-center sm:px-2 lg:px-4">
|
||||
<h3 class="text-xs font-medium text-gray-700">
|
||||
Order by
|
||||
<span class="sr-only">, active</span>
|
||||
</h3>
|
||||
|
||||
<div aria-hidden="true" class="hidden w-px h-5 bg-gray-300 sm:ml-4 sm:block" />
|
||||
|
||||
<div class="mt-2 sm:mt-0 sm:ml-4">
|
||||
<div class="flex flex-wrap items-center -m-1">
|
||||
<span v-for="(order, index) in orderByOptions.filter((e) => e.checked)" :key="order.value"
|
||||
class="m-1 inline-flex items-center rounded-full border border-gray-100 bg-white py-1.5 pl-3 pr-2 text-xs font-medium text-gray-900">
|
||||
<span>{{ order.label }}</span>
|
||||
<button @click="handleChangeOrderBy(index, !order.checked)" type="button"
|
||||
class="inline-flex flex-shrink-0 w-4 h-4 p-1 ml-1 text-gray-400 rounded-full hover:bg-gray-200 hover:text-gray-500">
|
||||
<span class="sr-only">Remove filter for {{ order.label }}</span>
|
||||
<svg class="w-2 h-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
|
||||
<path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<DxDataGrid :data-source="dataSource" :remote-operations="false" :allow-column-reordering="true"
|
||||
:row-alternation-enabled="true" :show-borders="true" @content-ready="onContentReady">
|
||||
<!-- <DxColumn :group-index="0" data-field="Product" /> -->
|
||||
<DxColumn data-field="Amount" caption="Sale Amount" data-type="number" format="currency"
|
||||
alignment="right" />
|
||||
<DxColumn :allow-grouping="false" data-field="Discount" caption="Discount %" data-type="number"
|
||||
format="percent" alignment="right" cell-template="discountCellTemplate" css-class="bullet" />
|
||||
<DxColumn data-field="SaleDate" data-type="date" />
|
||||
<DxColumn data-field="Region" data-type="string" />
|
||||
<DxColumn data-field="Sector" data-type="string" />
|
||||
<DxColumn data-field="Channel" data-type="string" />
|
||||
<DxColumn :width="150" data-field="Customer" data-type="string" />
|
||||
|
||||
<!-- <DxGroupPanel :visible="true" /> -->
|
||||
<!-- <DxFilterRow :visible="true" /> -->
|
||||
<!-- <DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> -->
|
||||
<DxGrouping :auto-expand-all="false" />
|
||||
<DxPager :allowed-page-sizes="pageSizes" :show-page-size-selector="true" />
|
||||
<DxPaging :page-size="10" />
|
||||
<DxSelection mode="single" />
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, type PropType } from 'vue';
|
||||
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
Disclosure,
|
||||
DisclosureButton,
|
||||
DisclosurePanel,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuItems,
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverGroup,
|
||||
PopoverPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue'
|
||||
|
||||
import {
|
||||
DxDataGrid,
|
||||
DxColumn,
|
||||
DxGrouping,
|
||||
DxGroupPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxFilterRow,
|
||||
DxSelection,
|
||||
} from 'devextreme-vue/data-grid';
|
||||
import DataSource from 'devextreme/data/data_source';
|
||||
import 'devextreme/data/odata/store';
|
||||
import ButtonDropdown from '@/components/Buttons/ButtonDropdown.vue';
|
||||
import ButtonPrimary from '@/components/Buttons/ButtonPrimary.vue';
|
||||
import InputText from '@/components/InputText.vue';
|
||||
import { MagnifyingGlassIcon, ChevronDownIcon } from '@heroicons/vue/24/solid';
|
||||
import { XMarkIcon } from '@heroicons/vue/24/outline'
|
||||
|
||||
const tabs = [
|
||||
{ name: 'Gangguan' },
|
||||
{ name: 'Keluhan' },
|
||||
{ name: 'Gangguan Diperhatikan' },
|
||||
]
|
||||
const tabChecked = ref(0)
|
||||
|
||||
function changeTab(index: number) {
|
||||
tabChecked.value = index
|
||||
}
|
||||
|
||||
const handleSubmitSearch = (e: any) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
let collapsed = false;
|
||||
const dataSource = new DataSource({
|
||||
store: {
|
||||
type: 'odata',
|
||||
url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
|
||||
key: 'Id',
|
||||
beforeSend(request) {
|
||||
const year = new Date().getFullYear() - 1;
|
||||
request.params.startDate = `${year}-05-10`;
|
||||
request.params.endDate = `${year}-5-15`;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const pageSizes = [10, 25, 50, 100];
|
||||
const onContentReady = (e: any) => {
|
||||
if (!collapsed) {
|
||||
e.component.expandRow(['EnviroCare']);
|
||||
collapsed = true;
|
||||
}
|
||||
};
|
||||
|
||||
const searchOptions = ref([
|
||||
{ name: 'Nama Lapor', current: true },
|
||||
{ name: 'Nama', current: false },
|
||||
{ name: 'Alamat', current: false },
|
||||
])
|
||||
function handleChangeSearchOption(index: number) {
|
||||
searchOptions.value.forEach((option, i) => {
|
||||
if (i === index) {
|
||||
option.current = true
|
||||
} else {
|
||||
option.current = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const orderByOptions = ref([
|
||||
{ value: 'status', label: 'Status', checked: false },
|
||||
{ value: 'tanggal', label: 'Tanggal Lapor', checked: false },
|
||||
])
|
||||
function handleChangeOrderBy(index: number, data: boolean) {
|
||||
orderByOptions.value.forEach((option, i) => {
|
||||
if (i === index) {
|
||||
option.checked = data
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
type ModelType = string | [Date, Date] | { start: string | Date; end: string | Date; } | { startDate: string | Date; endDate: string | Date; };
|
||||
const emptyDate: ModelType = '';
|
||||
const dateValue = ref(emptyDate)
|
||||
|
||||
const formatter = ref({
|
||||
date: 'DD MMMM YYYY',
|
||||
month: 'MMMM'
|
||||
})
|
||||
|
||||
const datePickerOptions = ref({
|
||||
shortcuts: {
|
||||
today: 'Hari ini',
|
||||
yesterday: 'Kemarin',
|
||||
past: (period: any) => period + ' hari terakhir',
|
||||
currentMonth: 'Bulan ini',
|
||||
pastMonth: 'Bulan lalu'
|
||||
},
|
||||
footer: {
|
||||
apply: 'Terapkan',
|
||||
cancel: 'Batal'
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :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" />
|
||||
|
||||
<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 :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" />
|
||||
<template #no-laporan="{ data }">
|
||||
<span class="cursor-pointer" @click="showData(data.text)">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, 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 { Data1 } from '@/types/gangguan'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { writeDataJson } from '@/utils/storage'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
|
||||
const dialog = useDialogStore()
|
||||
const data = ref<Data1[]>([])
|
||||
|
||||
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({
|
||||
number: i + 1,
|
||||
no_laporan: 'G5223091' + (900002 + i),
|
||||
pembuat_laporan: 'agentjateng',
|
||||
tanggal_laporan: '19/09/2023 12:26:42',
|
||||
tanggal_dialihkan: '19/09/2023 12:33:46',
|
||||
tanggal_respon: '19/09/2023 13:14:15',
|
||||
tanggal_recovery: '19/09/2023 13:14:15',
|
||||
durasi_respon: '0-0:47:32',
|
||||
durasi_recovery: '0-0:49:35',
|
||||
posko_awal: 'POSKO ULP UNGARAN.',
|
||||
posko_tujuan: 'POSKO ULP UNGARAN.',
|
||||
status: 'Selesai',
|
||||
id_pelanggan: '-',
|
||||
nama_pelapor: 'Moegy',
|
||||
alamat_pelapor: '-',
|
||||
no_telp_pelapor: '085136661313',
|
||||
keterangan_pelapor: '-',
|
||||
sumber_laporan: 'Contact Center',
|
||||
posko: 'POSKO ULP UNGGARAN'
|
||||
});
|
||||
}
|
||||
writeDataJson('data-daftar-1', data.value)
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const showData = (data: string) => {
|
||||
dialog.type = 'success'
|
||||
dialog.title = 'Detail Data'
|
||||
dialog.content = data
|
||||
dialog.confirmText = 'Tutup'
|
||||
dialog.open = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createDummy()
|
||||
// console.log(readDataJson('data-daftar-1'));
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -1,111 +0,0 @@
|
||||
<template>
|
||||
<EmptyPage />
|
||||
<!-- <div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :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" />
|
||||
|
||||
<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" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
|
||||
<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 alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" />
|
||||
<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="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" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, 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 { Data2 } from '@/types/gangguan'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import EmptyPage from '@/components/Pages/EmptyPage.vue'
|
||||
|
||||
const data = ref<Data2[]>([])
|
||||
|
||||
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 < 10; i++) {
|
||||
data.value.push({
|
||||
number: i + 1,
|
||||
no_laporan: 'G5223091' + (900002 + i),
|
||||
tanggal_laporan: '19/09/2023 12:26:42',
|
||||
tanggal_respon: '19/09/2023 13:14:15',
|
||||
tanggal_recovery: '19/09/2023 13:14:15',
|
||||
durasi_respon: '0-0:47:32',
|
||||
durasi_recovery: '0-0:49:35',
|
||||
jumlah_lapor: 1,
|
||||
status: 'Selesai',
|
||||
id_pelanggan: '523013252126 / 1731807',
|
||||
nama_pelapor: 'IBU FELISIA',
|
||||
alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
|
||||
no_telp_pelapor: '082229870235',
|
||||
keterangan_pelapor: '-',
|
||||
sumber_laporan: 'Contact Center',
|
||||
posko: 'POSKO ULP SEMARANG'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
createDummy()
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<!-- <div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :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" />
|
||||
|
||||
<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" />
|
||||
<DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
|
||||
<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="150" alignment="center" data-field="status" caption="Status" />
|
||||
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking" />
|
||||
<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="170" alignment="center" data-field="posko" caption="Posko" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div> -->
|
||||
<EmptyPage />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, 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 { Data3 } from '@/types/gangguan'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import EmptyPage from '@/components/Pages/EmptyPage.vue'
|
||||
|
||||
const data = ref<Data3[]>([])
|
||||
|
||||
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 < 10; i++) {
|
||||
data.value.push({
|
||||
number: i + 1,
|
||||
no_laporan: 'G5223091' + (900002 + i),
|
||||
tanggal_laporan: '19/09/2023 12:26:42',
|
||||
tanggal_respon: '19/09/2023 13:14:15',
|
||||
tanggal_recovery: '19/09/2023 13:14:15',
|
||||
durasi_respon: '0-0:47:32',
|
||||
durasi_recovery: '0-0:49:35',
|
||||
referensi_marking: '-',
|
||||
status: 'Selesai',
|
||||
id_pelanggan: '-',
|
||||
nama_pelapor: 'Moegy',
|
||||
alamat_pelapor: '-',
|
||||
no_telp_pelapor: '085136661313',
|
||||
keterangan_pelapor: '-',
|
||||
posko: 'POSKO ULP UNGGARAN'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
createDummy()
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -1,3 +0,0 @@
|
||||
export { default as GangguanDaftar1 } from './Daftar_1.vue'
|
||||
export { default as GangguanDaftar2 } from './Daftar_2.vue'
|
||||
export { default as GangguanDaftar3 } from './Daftar_3.vue'
|
||||
@ -1 +0,0 @@
|
||||
export { default as GangguanRekap1 } from './Rekap_1.vue'
|
||||
159
src/components/Pages/Gangguan/Table_1.vue
Normal file
159
src/components/Pages/Gangguan/Table_1.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :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">
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxSelection mode="single" />
|
||||
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" 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 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 }}
|
||||
</span>
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, 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 { Data1 } from '@/types/gangguan'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { writeDataJson } from '@/utils/storage'
|
||||
import { useDialogStore } from '@/stores/dialog'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
|
||||
const dialog = useDialogStore()
|
||||
const data = ref<Data1[]>([])
|
||||
|
||||
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({
|
||||
number: i + 1,
|
||||
no_laporan: 'G5223091' + (900002 + i),
|
||||
pembuat_laporan: 'agentjateng',
|
||||
tanggal_laporan: '19/09/2023 12:26:42',
|
||||
tanggal_dialihkan: '19/09/2023 12:33:46',
|
||||
tanggal_respon: '19/09/2023 13:14:15',
|
||||
tanggal_recovery: '19/09/2023 13:14:15',
|
||||
durasi_respon: '0-0:47:32',
|
||||
durasi_recovery: '0-0:49:35',
|
||||
posko_awal: 'POSKO ULP UNGARAN.',
|
||||
posko_tujuan: 'POSKO ULP UNGARAN.',
|
||||
status: 'Selesai',
|
||||
id_pelanggan: '-',
|
||||
nama_pelapor: 'Moegy',
|
||||
alamat_pelapor: '-',
|
||||
no_telp_pelapor: '085136661313',
|
||||
keterangan_pelapor: '-',
|
||||
sumber_laporan: 'Contact Center',
|
||||
posko: 'POSKO ULP UNGGARAN'
|
||||
});
|
||||
}
|
||||
writeDataJson('data-daftar-1', data.value)
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const showData = (data: string) => {
|
||||
dialog.type = 'success'
|
||||
dialog.title = 'Detail Data'
|
||||
dialog.content = data
|
||||
dialog.confirmText = 'Tutup'
|
||||
dialog.open = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
|
||||
createDummy()
|
||||
filters.setConfig({
|
||||
type: 'type-15',
|
||||
reportButton: false
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
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="50" 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="50" 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="50" 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="50" 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="50" 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="50" 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="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
|
||||
<DxColumn :width="50" 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="50" 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="50" 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>
|
||||
50
src/components/Pages/Gangguan/Table_2.vue
Normal file
50
src/components/Pages/Gangguan/Table_2.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
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>
|
||||
49
src/components/Pages/Gangguan/Table_3.vue
Normal file
49
src/components/Pages/Gangguan/Table_3.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
51
src/components/Pages/Gangguan/Table_4.vue
Normal file
51
src/components/Pages/Gangguan/Table_4.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
49
src/components/Pages/Gangguan/Table_5.vue
Normal file
49
src/components/Pages/Gangguan/Table_5.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
47
src/components/Pages/Gangguan/Table_6.vue
Normal file
47
src/components/Pages/Gangguan/Table_6.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
49
src/components/Pages/Gangguan/Table_7.vue
Normal file
49
src/components/Pages/Gangguan/Table_7.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
@ -1,62 +1,63 @@
|
||||
<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" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="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>
|
||||
@ -64,7 +65,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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'
|
||||
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="50" 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>
|
||||
20
src/components/Pages/Gangguan/index.ts
Normal file
20
src/components/Pages/Gangguan/index.ts
Normal file
@ -0,0 +1,20 @@
|
||||
export { default as GangguanTable1 } from '@/components/Pages/Gangguan/Table_1.vue'
|
||||
export { default as GangguanTable2 } from '@/components/Pages/Gangguan/Table_2.vue'
|
||||
export { default as GangguanTable3 } from '@/components/Pages/Gangguan/Table_3.vue'
|
||||
export { default as GangguanTable4 } from '@/components/Pages/Gangguan/Table_4.vue'
|
||||
export { default as GangguanTable5 } from '@/components/Pages/Gangguan/Table_5.vue'
|
||||
export { default as GangguanTable6 } from '@/components/Pages/Gangguan/Table_6.vue'
|
||||
export { default as GangguanTable7 } from '@/components/Pages/Gangguan/Table_7.vue'
|
||||
export { default as GangguanTable8 } from '@/components/Pages/Gangguan/Table_8.vue'
|
||||
export { default as GangguanTable9 } from '@/components/Pages/Gangguan/Table_9.vue'
|
||||
export { default as GangguanTable10 } from '@/components/Pages/Gangguan/Table_10.vue'
|
||||
export { default as GangguanTable11 } from '@/components/Pages/Gangguan/Table_11.vue'
|
||||
export { default as GangguanTable12 } from '@/components/Pages/Gangguan/Table_12.vue'
|
||||
export { default as GangguanTable13 } from '@/components/Pages/Gangguan/Table_13.vue'
|
||||
export { default as GangguanTable14 } from '@/components/Pages/Gangguan/Table_14.vue'
|
||||
export { default as GangguanTable15 } from '@/components/Pages/Gangguan/Table_15.vue'
|
||||
export { default as GangguanTable16 } from '@/components/Pages/Gangguan/Table_16.vue'
|
||||
export { default as GangguanTable17 } from '@/components/Pages/Gangguan/Table_17.vue'
|
||||
export { default as GangguanTable18 } from '@/components/Pages/Gangguan/Table_18.vue'
|
||||
export { default as GangguanTable19 } from '@/components/Pages/Gangguan/Table_19.vue'
|
||||
export { default as GangguanTable20 } from '@/components/Pages/Gangguan/Table_20.vue'
|
||||
92
src/components/Pages/Keluhan/Table_21.vue
Normal file
92
src/components/Pages/Keluhan/Table_21.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<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 :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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>
|
||||
95
src/components/Pages/Keluhan/Table_22.vue
Normal file
95
src/components/Pages/Keluhan/Table_22.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<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 :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
|
||||
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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>
|
||||
92
src/components/Pages/Keluhan/Table_23.vue
Normal file
92
src/components/Pages/Keluhan/Table_23.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<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 :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
|
||||
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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>
|
||||
93
src/components/Pages/Keluhan/Table_24.vue
Normal file
93
src/components/Pages/Keluhan/Table_24.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<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 :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
|
||||
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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>
|
||||
95
src/components/Pages/Keluhan/Table_25.vue
Normal file
95
src/components/Pages/Keluhan/Table_25.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<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 :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
|
||||
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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/Keluhan/Table_26.vue
Normal file
90
src/components/Pages/Keluhan/Table_26.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"
|
||||
:word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Response Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Recovery Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media"
|
||||
css-class="custom-table-column" />
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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>
|
||||
91
src/components/Pages/Keluhan/Table_27.vue
Normal file
91
src/components/Pages/Keluhan/Table_27.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<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 :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="No Tlp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
|
||||
css-class="custom-table-column" />
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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>
|
||||
98
src/components/Pages/Keluhan/Table_28.vue
Normal file
98
src/components/Pages/Keluhan/Table_28.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
|
||||
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>
|
||||
118
src/components/Pages/Keluhan/Table_29.vue
Normal file
118
src/components/Pages/Keluhan/Table_29.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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
|
||||
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="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 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>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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>
|
||||
118
src/components/Pages/Keluhan/Table_30.vue
Normal file
118
src/components/Pages/Keluhan/Table_30.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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
|
||||
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="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 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>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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>
|
||||
118
src/components/Pages/Keluhan/Table_31.vue
Normal file
118
src/components/Pages/Keluhan/Table_31.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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
|
||||
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="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 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>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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>
|
||||
118
src/components/Pages/Keluhan/Table_32.vue
Normal file
118
src/components/Pages/Keluhan/Table_32.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="50" 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="150" 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="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="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>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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/Keluhan/Table_33.vue
Normal file
117
src/components/Pages/Keluhan/Table_33.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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="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="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 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>
|
||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" 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/Keluhan/Table_34.vue
Normal file
77
src/components/Pages/Keluhan/Table_34.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="50" 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>
|
||||
108
src/components/Pages/Keluhan/Table_35.vue
Normal file
108
src/components/Pages/Keluhan/Table_35.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="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="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks"
|
||||
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>
|
||||
15
src/components/Pages/Keluhan/index.ts
Normal file
15
src/components/Pages/Keluhan/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
export { default as KeluhanTable1 } from '@/components/Pages/Keluhan/Table_21.vue'
|
||||
export { default as KeluhanTable2 } from '@/components/Pages/Keluhan/Table_22.vue'
|
||||
export { default as KeluhanTable3 } from '@/components/Pages/Keluhan/Table_23.vue'
|
||||
export { default as KeluhanTable4 } from '@/components/Pages/Keluhan/Table_24.vue'
|
||||
export { default as KeluhanTable5 } from '@/components/Pages/Keluhan/Table_25.vue'
|
||||
export { default as KeluhanTable6 } from '@/components/Pages/Keluhan/Table_26.vue'
|
||||
export { default as KeluhanTable7 } from '@/components/Pages/Keluhan/Table_27.vue'
|
||||
export { default as KeluhanTable8 } from '@/components/Pages/Keluhan/Table_28.vue'
|
||||
export { default as KeluhanTable9 } from '@/components/Pages/Keluhan/Table_29.vue'
|
||||
export { default as KeluhanTable10 } from '@/components/Pages/Keluhan/Table_30.vue'
|
||||
export { default as KeluhanTable11 } from '@/components/Pages/Keluhan/Table_31.vue'
|
||||
export { default as KeluhanTable12 } from '@/components/Pages/Keluhan/Table_32.vue'
|
||||
export { default as KeluhanTable13 } from '@/components/Pages/Keluhan/Table_33.vue'
|
||||
export { default as KeluhanTable14 } from '@/components/Pages/Keluhan/Table_34.vue'
|
||||
export { default as KeluhanTable15 } from '@/components/Pages/Keluhan/Table_35.vue'
|
||||
41
src/components/Pages/Material/Table_68.vue
Normal file
41
src/components/Pages/Material/Table_68.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Nomor Gangguan" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Nama Pelanggan" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Penyebab Gangguan" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Padam" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Regu" />
|
||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Sumber" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Satuan" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
36
src/components/Pages/Material/Table_69.vue
Normal file
36
src/components/Pages/Material/Table_69.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<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="" :column-width="100"
|
||||
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
|
||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
|
||||
caption="No" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Kode Material" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Nama Material" />
|
||||
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
|
||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
|
||||
caption="Sumber Material" />
|
||||
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
|
||||
<DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
|
||||
:caption="i" />
|
||||
</DxColumn>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
|
||||
</script>
|
||||
2
src/components/Pages/Material/index.ts
Normal file
2
src/components/Pages/Material/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export { default as MaterialTable1 } from '@/components/Pages/Material/Table_68.vue'
|
||||
export { default as MaterialTable2 } from '@/components/Pages/Material/Table_69.vue'
|
||||
@ -2,11 +2,26 @@
|
||||
<main
|
||||
class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
|
||||
<div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageMetaData[0] }}</h1>
|
||||
<h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
<div class="flex-1 mt-2 sm:mt-4 dx-viewport">
|
||||
<Filters :report-button="typeof pageMetaData[2] !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
|
||||
<Type1 v-if="pageMetaData[1] == 'type-1'" />
|
||||
<Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.type">
|
||||
<Type1 v-if="filters.config.type == 'type-1'" />
|
||||
<Type2 v-else-if="filters.config.type == 'type-2'" />
|
||||
<Type3 v-else-if="filters.config.type == 'type-3'" />
|
||||
<Type4 v-else-if="filters.config.type == 'type-4'" />
|
||||
<Type5 v-else-if="filters.config.type == 'type-5'" />
|
||||
<Type6 v-else-if="filters.config.type == 'type-6'" />
|
||||
<Type7 v-else-if="filters.config.type == 'type-7'" />
|
||||
<Type8 v-else-if="filters.config.type == 'type-8'" />
|
||||
<Type9 v-else-if="filters.config.type == 'type-9'" />
|
||||
<Type10 v-else-if="filters.config.type == 'type-10'" />
|
||||
<Type11 v-else-if="filters.config.type == 'type-11'" />
|
||||
<Type12 v-else-if="filters.config.type == 'type-12'" />
|
||||
<Type13 v-else-if="filters.config.type == 'type-13'" />
|
||||
<Type14 v-else-if="filters.config.type == 'type-14'" />
|
||||
<Type15 v-else-if="filters.config.type == 'type-15'" />
|
||||
<Type17 v-else-if="filters.config.type == 'type-17'" />
|
||||
</Filters>
|
||||
|
||||
<slot></slot>
|
||||
@ -19,21 +34,27 @@ import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Filters from '../Form/Filters.vue'
|
||||
import Type1 from '../Form/FiltersType/Type1.vue';
|
||||
|
||||
import Type2 from '../Form/FiltersType/Type2.vue';
|
||||
import Type3 from '../Form/FiltersType/Type3.vue';
|
||||
import Type4 from '../Form/FiltersType/Type4.vue';
|
||||
import Type5 from '../Form/FiltersType/Type5.vue';
|
||||
import Type6 from '../Form/FiltersType/Type6.vue';
|
||||
import Type7 from '../Form/FiltersType/Type7.vue';
|
||||
import Type8 from '../Form/FiltersType/Type8.vue';
|
||||
import Type9 from '../Form/FiltersType/Type9.vue';
|
||||
import Type10 from '../Form/FiltersType/Type10.vue';
|
||||
import Type11 from '../Form/FiltersType/Type11.vue';
|
||||
import Type12 from '../Form/FiltersType/Type12.vue';
|
||||
import Type13 from '../Form/FiltersType/Type13.vue';
|
||||
import Type14 from '../Form/FiltersType/Type14.vue';
|
||||
import Type15 from '../Form/FiltersType/Type15.vue';
|
||||
import Type17 from '../Form/FiltersType/Type17.vue';
|
||||
import { useFiltersStore } from '@/stores/filters';
|
||||
|
||||
// Dapatkan objek route dari vue-router
|
||||
const route = useRoute()
|
||||
|
||||
// Dapatkan nama rute menggunakan computed property
|
||||
const pageMetaData = computed(() => {
|
||||
let result: string[] = [];
|
||||
|
||||
if (typeof route.name === 'string' && route.name.includes(' | ')) {
|
||||
result = route.name.split(' | ');
|
||||
} else if (typeof route.name === 'string') {
|
||||
result = [route.name]
|
||||
}
|
||||
|
||||
return result
|
||||
});
|
||||
const pageTitle = computed(() => route.name)
|
||||
const filters = useFiltersStore()
|
||||
</script>
|
||||
81
src/components/Pages/Monalisa/Table_36.vue
Normal file
81
src/components/Pages/Monalisa/Table_36.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
81
src/components/Pages/Monalisa/Table_37.vue
Normal file
81
src/components/Pages/Monalisa/Table_37.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
81
src/components/Pages/Monalisa/Table_38.vue
Normal file
81
src/components/Pages/Monalisa/Table_38.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
81
src/components/Pages/Monalisa/Table_39.vue
Normal file
81
src/components/Pages/Monalisa/Table_39.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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/Monalisa/Table_40.vue
Normal file
117
src/components/Pages/Monalisa/Table_40.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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
|
||||
css-class="custom-table-column" />
|
||||
</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>
|
||||
67
src/components/Pages/Monalisa/Table_41.vue
Normal file
67
src/components/Pages/Monalisa/Table_41.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="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="" caption="ID Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" data-field="" caption="Jenis Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="" caption="%" 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>
|
||||
81
src/components/Pages/Monalisa/Table_42.vue
Normal file
81
src/components/Pages/Monalisa/Table_42.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
81
src/components/Pages/Monalisa/Table_43.vue
Normal file
81
src/components/Pages/Monalisa/Table_43.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
70
src/components/Pages/Monalisa/Table_44.vue
Normal file
70
src/components/Pages/Monalisa/Table_44.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<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 alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||
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>
|
||||
81
src/components/Pages/Monalisa/Table_45.vue
Normal file
81
src/components/Pages/Monalisa/Table_45.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
81
src/components/Pages/Monalisa/Table_46.vue
Normal file
81
src/components/Pages/Monalisa/Table_46.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
81
src/components/Pages/Monalisa/Table_47.vue
Normal file
81
src/components/Pages/Monalisa/Table_47.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<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="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019"
|
||||
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="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2018"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||
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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user