Update Type7.vue and DetailDialog.vue components, and style.css
This commit is contained in:
Dede Fuji Abdul
parent
c6bb405b57
commit
7bad39e629
@ -1679,6 +1679,10 @@ body {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.min-h-\[40px\] {
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
.w-0 {
|
.w-0 {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
@ -2212,6 +2216,18 @@ body {
|
|||||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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)));
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
--tw-space-y-reverse: 0;
|
||||||
|
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||||
|
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||||
|
}
|
||||||
|
|
||||||
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
||||||
--tw-divide-y-reverse: 0;
|
--tw-divide-y-reverse: 0;
|
||||||
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
|
||||||
@ -3273,6 +3289,10 @@ body {
|
|||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.\!align-top {
|
||||||
|
vertical-align: top !important;
|
||||||
|
}
|
||||||
|
|
||||||
.align-middle {
|
.align-middle {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
@ -6064,6 +6084,12 @@ body {
|
|||||||
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\: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));
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:rounded-t-3xl {
|
.lg\:rounded-t-3xl {
|
||||||
border-top-left-radius: 1.5rem;
|
border-top-left-radius: 1.5rem;
|
||||||
border-top-right-radius: 1.5rem;
|
border-top-right-radius: 1.5rem;
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
TransitionChild,
|
TransitionChild,
|
||||||
TransitionRoot
|
TransitionRoot
|
||||||
} from '@headlessui/vue'
|
} from '@headlessui/vue';
|
||||||
defineProps({
|
defineProps({
|
||||||
open: {
|
open: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@ -45,9 +45,10 @@ const handleOnClose = () => {
|
|||||||
:class="[fullWidth ? 'sm:max-w-[90%]' : 'sm:max-w-lg', 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
|
:class="[fullWidth ? 'sm:max-w-[90%]' : 'sm:max-w-lg', 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
|
||||||
<!-- Body Section -->
|
<!-- Body Section -->
|
||||||
<div class="px-4 py-4 bg-gray-50">
|
<div class="px-4 py-4 bg-gray-50">
|
||||||
<div class="flex flex-col items-start">
|
<div class="items-start">
|
||||||
<div class="flex items-start justify-between w-full">
|
<div class="flex items-start justify-between w-full">
|
||||||
<DialogTitle as="h3" class="flex-1 text-2xl font-semibold leading-6 text-gray-900">
|
<DialogTitle as="h3"
|
||||||
|
class="flex-1 text-2xl font-semibold leading-6 text-gray-900">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<div class="flex items-center ml-3 h-7">
|
<div class="flex items-center ml-3 h-7">
|
||||||
|
|||||||
@ -33,7 +33,7 @@ const props = defineProps({
|
|||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: 'Melebihi SLA (> 45 menit)',
|
name: 'Melebihi SLA (> 45 menit)',
|
||||||
min: '1',
|
min: '46',
|
||||||
max: `${99999 * 60 * 24}`
|
max: `${99999 * 60 * 24}`
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
type: {
|
type: {
|
||||||
@ -43,32 +43,19 @@ const switchInputType = () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-200 ', className]">
|
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-200 ', className]">
|
||||||
<input
|
<input v-if="!readonly" autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value"
|
||||||
autocomplete="off"
|
@input="updateValue($event)" :disabled="disabled" :readonly="readonly" :class="[
|
||||||
:type="inputType"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
:value="value"
|
|
||||||
@input="updateValue($event)"
|
|
||||||
:disabled="disabled"
|
|
||||||
:readonly="readonly"
|
|
||||||
: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'
|
'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'
|
||||||
]"
|
]" />
|
||||||
/>
|
<p v-else
|
||||||
<span
|
class="px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg outline-0 min-h-[40px]">
|
||||||
@click="switchInputType"
|
{{ value && value.length < 1 && value.trim() === '' ? '-' : value }} </p>
|
||||||
v-if="type == 'password'"
|
<span @click="switchInputType" v-if="type == 'password'"
|
||||||
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit"
|
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
|
||||||
>
|
<svg width="20" height="20" viewBox="0 0 20 20"
|
||||||
<svg
|
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z"
|
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,8 +6,8 @@
|
|||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
@selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
column-resizing-mode="widget">
|
:allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
@ -68,6 +68,105 @@
|
|||||||
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
|
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
|
<template #cellCenter="{ data }">
|
||||||
|
<p class="cursor-pointer" @click="showDialogDataSelected()">
|
||||||
|
{{ data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #cellLeft="{ data }">
|
||||||
|
<p class="text-left cursor-pointer" @click="showDialogDataSelected()">
|
||||||
|
{{ data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #cellRight="{ data }">
|
||||||
|
<p class="text-right cursor-pointer" @click="showDialogDataSelected()">
|
||||||
|
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||||
|
formatNumber(data.text) :
|
||||||
|
data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #data-waktu="{ data }">
|
||||||
|
<p @click="showDialogDataSelected()">
|
||||||
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DetailDialog :open="dialogDataSelected" title="Detail Gangguan All" @on-close="closeDialogDataSelected"
|
||||||
|
:full-width="true">
|
||||||
|
<div class="flex flex-col w-full space-x-4 space-y-4 lg:flex-row lg:justify-between lg:space-x-4 lg:space-y-0 ">
|
||||||
|
<div class="flex flex-1 p-4 bg-white rounded-xl">
|
||||||
|
<div class="w-full">
|
||||||
|
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="dataSub" :show-column-lines="true"
|
||||||
|
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
|
@selection-changed="onDataSubSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
|
: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]" display-mode="full"
|
||||||
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
||||||
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
|
|
||||||
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||||
|
cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column"
|
||||||
|
cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="No Lapor" css-class="custom-table-column"
|
||||||
|
cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl/Jam Lapor"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl/Jam Datang" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl/Jam Nyala" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Response Time"
|
||||||
|
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Recovery Time"
|
||||||
|
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu"
|
||||||
|
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Duras Perjalanan Regu"
|
||||||
|
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Jarak Closing (m)" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Dispatch Oleh" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Alamat Pelapor" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Diselesaikan Oleh" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Status" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Gangguan" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Jenis Gangguan" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Penyebab" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" caption="Tindakan" :allow-resizing="false"
|
||||||
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
|
|
||||||
|
|
||||||
<template #cellCenter="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
<p class="cursor-pointer">
|
<p class="cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
@ -95,6 +194,9 @@
|
|||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DetailDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -121,12 +223,19 @@ import { useQuery } from '@vue/apollo-composable'
|
|||||||
import { queries } from '@/utils/graphql'
|
import { queries } from '@/utils/graphql'
|
||||||
import { dummyData } from '@/utils/dummy'
|
import { dummyData } from '@/utils/dummy'
|
||||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||||
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
|
const dataSub = ref<any[]>([])
|
||||||
|
const dataSelected = ref<any>()
|
||||||
|
const dataSubSelected = ref<any>()
|
||||||
|
const dialogDataSelected = ref(false)
|
||||||
|
const closeDialogDataSelected = () => dialogDataSelected.value = false
|
||||||
|
const showDialogDataSelected = () => dialogDataSelected.value = true
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
|
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
@ -191,8 +300,15 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
|
dataSelected.value = data
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
const data = selectedRowsData[0]
|
||||||
|
dataSubSelected.value = data
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,109 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
@reset-form="data = []"
|
|
||||||
:report-button="true"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
<Type1 @update:filters="(value) => filters = value" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
:show-row-lines="false"
|
|
||||||
:show-borders="true"
|
|
||||||
:row-alternation-enabled="true"
|
|
||||||
:hover-state-enabled="true"
|
|
||||||
@selection-changed="onSelectionChanged"
|
|
||||||
@exporting="onExporting"
|
|
||||||
:allow-column-resizing="true"
|
|
||||||
column-resizing-mode="widget"
|
|
||||||
:word-wrap-enabled="true"
|
|
||||||
>
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
:position="position"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-indicator="showIndicator"
|
|
||||||
:show-pane="showPane"
|
|
||||||
:shading="shading"
|
|
||||||
v-if="loading"
|
|
||||||
v-model:visible="loading"
|
|
||||||
:enabled="true"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||||
:width="50"
|
name="number" cell-template="cellRight" />
|
||||||
alignment="center"
|
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
data-type="number"
|
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
|
||||||
caption="No"
|
css-class="custom-table-column" :group-index="0" />
|
||||||
/>
|
<DxColumn alignment="center" :min-width="180" data-field="nama_posko" caption="Nama Posko"
|
||||||
<DxColumn
|
css-class="custom-table-column" cell-template="cellLeft" />
|
||||||
alignment="center"
|
<DxColumn :width="180" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column"
|
||||||
:min-width="180"
|
cell-template="cellRight" />
|
||||||
data-field="nama_up3"
|
<DxColumn :width="180" alignment="center" data-field="posko_out" caption="Posko OUT"
|
||||||
caption="Nama UP3"
|
css-class="custom-table-column" cell-template="cellRight" />
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
alignment="center"
|
|
||||||
:min-width="180"
|
|
||||||
data-field="nama_up3"
|
|
||||||
caption="Nama UP3"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:group-index="0"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
alignment="center"
|
|
||||||
:min-width="180"
|
|
||||||
data-field="nama_posko"
|
|
||||||
caption="Nama Posko"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="180"
|
|
||||||
alignment="center"
|
|
||||||
data-field="posko_in"
|
|
||||||
caption="Posko IN"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="180"
|
|
||||||
alignment="center"
|
|
||||||
data-field="posko_out"
|
|
||||||
caption="Posko OUT"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="nama_up3" display-format="Total" />
|
<DxGroupItem :show-in-group-footer="true" column="number" display-format="Total" css-class="!text-left" />
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="true" column="posko_in" summary-type="sum" display-format="{0}"
|
||||||
:show-in-group-footer="true"
|
css-class="!text-right" />
|
||||||
column="posko_in"
|
<DxGroupItem :show-in-group-footer="true" column="posko_out" summary-type="sum" display-format="{0}"
|
||||||
summary-type="sum"
|
css-class="!text-right" />
|
||||||
display-format="{0}"
|
|
||||||
/>
|
|
||||||
<DxGroupItem
|
|
||||||
:show-in-group-footer="true"
|
|
||||||
column="posko_out"
|
|
||||||
summary-type="sum"
|
|
||||||
display-format="{0}"
|
|
||||||
/>
|
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
|
<template #cellCenter="{ data }">
|
||||||
|
<p class="cursor-pointer">
|
||||||
|
{{ data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #cellLeft="{ data }">
|
||||||
|
<p class="text-left cursor-pointer">
|
||||||
|
{{ data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #cellRight="{ data }">
|
||||||
|
<p class="text-right cursor-pointer">
|
||||||
|
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||||
|
formatNumber(data.text) :
|
||||||
|
data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -111,7 +66,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -132,6 +87,8 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries } from '@/utils/graphql'
|
import { queries } from '@/utils/graphql'
|
||||||
|
import { dummyData } from '@/utils/dummy'
|
||||||
|
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
@ -209,4 +166,7 @@ const filterData = (params: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
|
onMounted(() => {
|
||||||
|
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,91 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
@reset-form="data = []"
|
|
||||||
:report-button="true"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => filters = value" />
|
<Type1 @update:filters="(value) => filters = value" />
|
||||||
</Filters>
|
</Filters>
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
:show-row-lines="false"
|
|
||||||
:show-borders="true"
|
|
||||||
:row-alternation-enabled="true"
|
|
||||||
:hover-state-enabled="true"
|
|
||||||
@selection-changed="onSelectionChanged"
|
|
||||||
:column-width="100"
|
|
||||||
@exporting="onExporting"
|
|
||||||
:allow-column-resizing="true"
|
|
||||||
column-resizing-mode="widget"
|
|
||||||
:word-wrap-enabled="true"
|
|
||||||
>
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxLoadPanel
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
:position="position"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-indicator="showIndicator"
|
|
||||||
:show-pane="showPane"
|
|
||||||
:shading="shading"
|
|
||||||
v-if="loading"
|
|
||||||
v-model:visible="loading"
|
|
||||||
:enabled="true"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||||
:width="100"
|
data-field="no" cell-template="cellRight" />
|
||||||
alignment="center"
|
<DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="cellLeft"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" header-cell-template="title-header" />
|
||||||
data-type="number"
|
|
||||||
caption="No"
|
|
||||||
data-field="no"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
data-field="media"
|
|
||||||
caption="Nama Media"
|
|
||||||
alignment="center"
|
|
||||||
cell-template="data"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
header-cell-template="title-header"
|
|
||||||
/>
|
|
||||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number"
|
||||||
v-for="i in 31"
|
:caption="i" css-class="custom-table-column" cell-template="cellRight" />
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
:data-field="`tgl${i}`"
|
|
||||||
data-type="number"
|
|
||||||
:caption="i"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
|
||||||
:width="170"
|
cell-template="cellRight" />
|
||||||
alignment="center"
|
|
||||||
data-field="total"
|
|
||||||
caption="Total"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template #data="{ data }">
|
<template #cellCenter="{ data }">
|
||||||
|
<p class="cursor-pointer">
|
||||||
|
{{ data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #cellLeft="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template #cellRight="{ data }">
|
||||||
|
<p class="text-right cursor-pointer">
|
||||||
|
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||||
|
formatNumber(data.text) :
|
||||||
|
data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template #title-header="{ data }">
|
<template #title-header="{ data }">
|
||||||
<p class="w-full text-center">
|
<p class="w-full text-center">
|
||||||
{{ data.column.caption }}
|
{{ data.column.caption }}
|
||||||
@ -93,25 +56,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxTotalItem
|
<DxTotalItem display-format="Call PLN 123" show-in-column="media" css-class="text-white !text-left" />
|
||||||
summary-type="sum"
|
<DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
|
||||||
display-format="Call PLN 123"
|
css-class="text-white !text-right"
|
||||||
show-in-column="no"
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||||
css-class="text-white"
|
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
|
||||||
/>
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
|
||||||
<DxTotalItem
|
|
||||||
v-for="i in 31"
|
|
||||||
summary-type="sum"
|
|
||||||
display-format="{0}"
|
|
||||||
:column="`tgl${i}`"
|
|
||||||
css-class="text-white"
|
|
||||||
/>
|
|
||||||
<DxTotalItem
|
|
||||||
column="total"
|
|
||||||
summary-type="sum"
|
|
||||||
display-format="{0}"
|
|
||||||
css-class="text-white"
|
|
||||||
/>
|
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -120,7 +70,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -141,6 +91,8 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries } from '@/utils/graphql'
|
import { queries } from '@/utils/graphql'
|
||||||
|
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||||
|
import { dummyData } from '@/utils/dummy'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
@ -219,4 +171,7 @@ const filterData = (params: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
|
onMounted(() => {
|
||||||
|
data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -4,163 +4,73 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
:show-row-lines="false"
|
|
||||||
:show-borders="true"
|
|
||||||
:row-alternation-enabled="true"
|
|
||||||
:hover-state-enabled="true"
|
|
||||||
@selection-changed="onSelectionChanged"
|
|
||||||
:column-width="100"
|
|
||||||
@exporting="onExporting"
|
|
||||||
:allow-column-resizing="true"
|
|
||||||
column-resizing-mode="widget"
|
|
||||||
:word-wrap-enabled="true"
|
|
||||||
>
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="true"
|
|
||||||
/>
|
|
||||||
<DxLoadPanel
|
|
||||||
:position="position"
|
|
||||||
:show-indicator="showIndicator"
|
|
||||||
:show-pane="showPane"
|
|
||||||
:shading="shading"
|
|
||||||
v-if="loading"
|
|
||||||
v-model:visible="loading"
|
|
||||||
:enabled="true"
|
|
||||||
/>
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column !align-top" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||||
:width="50"
|
cell-template="cellRight" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
data-type="number"
|
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
|
||||||
caption="No"
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
/>
|
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
<DxColumn
|
css-class="custom-table-column !align-top" />
|
||||||
:width="170"
|
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
|
||||||
alignment="center"
|
css-class="custom-table-column !align-top" />
|
||||||
data-field="no_laporan"
|
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||||
caption="No Laporan"
|
css-class="custom-table-column !align-top" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||||
/>
|
css-class="custom-table-column !align-top" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
:width="170"
|
css-class="custom-table-column !align-top" cell-template="data-waktu" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
data-field="pembuat_laporan"
|
css-class="custom-table-column !align-top" cell-template="data-waktu" />
|
||||||
caption="Pembuat Laporan"
|
<DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
/>
|
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
<DxColumn
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
:width="170"
|
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
alignment="center"
|
css-class="custom-table-column !align-top" />
|
||||||
data-field="waktu_lapor"
|
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
caption="Tgl Lapor"
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
/>
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
:width="170"
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
data-field="waktu_dialihkan"
|
css-class="custom-table-column !align-top" cell-template="cellLeft" />
|
||||||
caption="Tgl Dialihkan"
|
|
||||||
css-class="custom-table-column"
|
<template #cellCenter="{ data }">
|
||||||
/>
|
<p class="cursor-pointer">
|
||||||
<DxColumn
|
{{ data.text }}
|
||||||
:width="170"
|
</p>
|
||||||
alignment="center"
|
</template>
|
||||||
data-field="waktu_response"
|
|
||||||
caption="Tgl Response"
|
<template #cellLeft="{ data }">
|
||||||
css-class="custom-table-column"
|
<p class="text-left cursor-pointer">
|
||||||
/>
|
{{ data.text }}
|
||||||
<DxColumn
|
</p>
|
||||||
:width="170"
|
</template>
|
||||||
alignment="center"
|
|
||||||
data-field="waktu_recovery"
|
<template #cellRight="{ data }">
|
||||||
caption="Tgl Recovery"
|
<p class="text-right cursor-pointer">
|
||||||
css-class="custom-table-column"
|
{{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
|
||||||
/>
|
formatNumber(data.text) :
|
||||||
<DxColumn
|
data.text }}
|
||||||
:width="170"
|
</p>
|
||||||
alignment="center"
|
</template>
|
||||||
data-field="durasi_response_time"
|
|
||||||
caption="Durasi Response Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data-waktu"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Durasi Recovery Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data-waktu"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_unit_lama"
|
|
||||||
caption="Unit Asal"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="120"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="idpel_nometer"
|
|
||||||
caption="IDPEL/NO METER"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template #data-waktu="{ data }">
|
<template #data-waktu="{ data }">
|
||||||
<p>
|
<p>
|
||||||
@ -175,7 +85,7 @@
|
|||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -194,6 +104,8 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries } from '@/utils/graphql'
|
import { queries } from '@/utils/graphql'
|
||||||
|
import { dummyData } from '@/utils/dummy'
|
||||||
|
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
@ -277,4 +189,7 @@ const filterData = (params: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
|
onMounted(() => {
|
||||||
|
data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
3652
src/utils/dummy.ts
3652
src/utils/dummy.ts
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user